@machinerd/js-module 0.3.1 → 0.4.1

package/dist/ui/index.cjs

@@ -1 +1 @@
-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`),o=require(`@radix-ui/react-slot`);function s({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 c=(0,a.cva)(t.f(`komc:flex komc:justify-center komc:items-center komc:gap-x-2 komc:w-full`,`komc:transition-colors komc:duration-200 komc:relative`,`komc:[&_svg]:transition-colors komc:[&_svg]:duration-200`,`komc:cursor-pointer komc:disabled:cursor-default`),{variants:{size:{xxs:`komc:h-7.5`,xs:`komc:h-8`,sm:`komc:h-9`,md:`komc:h-10`,lg:`komc:h-11`,xl:`komc:h-12`,"2xl":`komc:h-13`,"3xl":`komc:h-14`,"4xl":`komc:h-15`},shadow:{none:``,sm:`komc:drop-shadow-sm`,md:`komc:drop-shadow-md`,lg:`komc:drop-shadow-lg`,xl:`komc:drop-shadow-xl`,"2xl":`komc:drop-shadow-2xl`,"3xl":`komc:drop-shadow-3xl`},outline:{line:`komc:border`,solid:`komc:border komc:border-transparent`,clear:`komc:border-none`},variant:{blue:``,duo:``,white:``,gray:``,neutral:``,night:``,black:``,sky:``,"sky-blue":``,indigo:``},px:{none:`komc:px-0`,xs:`komc:px-0.5`,sm:`komc:px-1`,md:`komc:px-1.5`,lg:`komc:px-2`,xl:`komc:px-3`,"2xl":`komc:px-4`,"3xl":`komc:px-5`,"4xl":`komc:px-6`},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`}},compoundVariants:[{outline:`line`,variant:`blue`,className:t.f(`komc:border-blue-500 komc:bg-white komc:text-blue-500`,`komc:hover:border-transparent komc:hover:bg-blue-500 komc:hover:text-white`,`komc:active:border-transparent komc:active:bg-blue-500 komc:active:text-white`,`komc:disabled:border-gray-500 komc:disabled:bg-white komc:disabled:text-gray-500`)},{outline:`line`,variant:`duo`,className:t.f(`komc:border-blue-500 komc:bg-white komc:text-brand-blck`,`komc:hover:border-transparent komc:hover:bg-blue-500 komc:hover:text-white`,`komc:active:border-transparent komc:active:bg-blue-500 komc:active:text-white`,`komc:disabled:border-gray-500 komc:disabled:bg-white komc:disabled:text-gray-500`)},{outline:`line`,variant:`white`,className:t.f(`komc:border-gray-600 komc:bg-white komc:text-brand-blck`,`komc:hover:bg-gray-200 komc:hover:text-brand-blck`,`komc:active:bg-gray-200 komc:active:text-brand-blck`,`komc:disabled:border-gray-500 komc:disabled:bg-white komc:disabled:text-gray-500`)},{outline:`line`,variant:`gray`,className:t.f(`komc:border-white komc:bg-transparent komc:text-white`,`komc:hover:bg-[rgb(199,199,199)] komc:hover:text-white`,`komc:active:bg-[rgb(199,199,199)] komc:active:text-white`,`komc:disabled:border-gray-500 komc:disabled:bg-white komc:disabled:text-gray-500`)},{outline:`line`,variant:`neutral`,className:t.f(`komc:border-gray-800 komc:bg-transparent komc:text-black`,`komc:hover:bg-gray-200 komc:hover:text-black`,`komc:active:bg-gray-200 komc:active:text-black`,`komc:disabled:border-gray-500 komc:disabled:bg-transparent komc:disabled:text-gray-500`)},{outline:`line`,variant:`sky`,className:t.f(`komc:border-sky-750 komc:bg-transparent komc:text-black`,`komc:hover:bg-sky-750 komc:hover:text-white`,`komc:active:bg-sky-750 komc:active:text-white`,`komc:disabled:border-gray-500 komc:disabled:bg-transparent komc:disabled:text-gray-500`)},{outline:`line`,variant:`sky-blue`,className:t.f(`komc:border-sky-450 komc:bg-transparent komc:text-black`,`komc:hover:bg-sky-450 komc:hover:text-white`,`komc:active:bg-sky-450 komc:active:text-white`,`komc:disabled:border-gray-500 komc:disabled:bg-transparent komc:disabled:text-gray-500`)},{outline:`solid`,variant:`white`,className:t.f(`komc:bg-white komc:text-brand-blck`,`komc:hover:bg-gray-200`,`komc:active:bg-gray-200`,`komc:disabled:border-white komc:disabled:bg-gray-50 komc:disabled:text-gray-800`)},{outline:`solid`,variant:`gray`,className:t.f(`komc:bg-gray-100 komc:text-blue-500`,`komc:hover:bg-blue-500 komc:hover:text-white`,`komc:active:bg-blue-500 komc:active:text-white`,`komc:disabled:border-white komc:disabled:bg-gray-50 komc:disabled:text-gray-800`)},{outline:`solid`,variant:`blue`,className:t.f(`komc:bg-blue-500 komc:text-white`,`komc:hover:bg-night-700 komc:hover:text-white`,`komc:active:bg-night-700 komc:active:text-white`,`komc:disabled:border-white komc:disabled:bg-gray-50 komc:disabled:text-gray-800`)},{outline:`solid`,variant:`night`,className:t.f(`komc:bg-night-700 komc:text-white`,`komc:hover:bg-night-800 komc:hover:text-white`,`komc:active:bg-night-800 komc:active:text-white`,`komc:disabled:border-white komc:disabled:bg-gray-50 komc:disabled:text-gray-800`)},{outline:`solid`,variant:`black`,className:t.f(`komc:bg-[rgb(95,95,96)] komc:text-white`,`komc:hover:bg-[rgb(76,76,77)] komc:hover:text-white`,`komc:active:bg-[rgb(76,76,77)] komc:active:text-white`,`komc:disabled:border-white komc:disabled:bg-gray-50 komc:disabled:text-gray-800`)},{outline:`solid`,variant:`sky`,className:t.f(`komc:bg-sky-750 komc:text-white`,`komc:hover:bg-sky-950 komc:hover:text-white`,`komc:active:bg-sky-950 komc:active:text-white`,`komc:disabled:border-white komc:disabled:bg-gray-700`)},{outline:`solid`,variant:`sky-blue`,className:t.f(`komc:bg-sky-450 komc:text-white`,`komc:hover:bg-sky-650 komc:hover:text-white`,`komc:active:bg-sky-650 komc:active:text-white`,`komc:disabled:border-white komc:disabled:bg-gray-700`)},{outline:`solid`,variant:`indigo`,className:t.f(`komc:bg-indigo-600 komc:text-white`,`komc:hover:bg-indigo-700 komc:hover:text-white`,`komc:active:bg-indigo-700 komc:active:text-white`,`komc:disabled:border-white komc:disabled:bg-gray-700`)},{outline:`clear`,variant:`sky`,className:t.f(`komc:bg-transparent komc:text-[#1890FF]`,`komc:hover:bg-transparent komc:hover:text-[#1890FF] komc:hover:underline`,`komc:active:bg-transparent komc:active:text-[#1890FF] komc:active:underline`,`komc:disabled:border-transparent komc:disabled:bg-transparent komc:disabled:text-gray-500`)},{outline:`clear`,variant:`gray`,className:t.f(`komc:bg-transparent komc:text-gray-800`,`komc:hover:bg-transparent komc:hover:text-gray-800 komc:hover:underline`,`komc:active:bg-transparent komc:active:text-gray-800 komc:active:underline`,`komc:disabled:border-transparent komc:disabled:bg-transparent komc:disabled:text-gray-500`)}],defaultVariants:{size:`md`,shadow:`none`,outline:`line`,variant:`blue`,px:`2xl`,rounded:`sm`}}),l=(0,r.forwardRef)(({type:e=`button`,className:t,id:n,size:r,shadow:a,outline:s,variant:l,px:u,rounded:d,asChild:f,...p},m)=>(0,i.jsx)(f?o.Slot:`button`,{ref:m,...p,type:e,id:n,className:c({size:r,shadow:a,outline:s,variant:l,px:u,rounded:d,className:t})}));var u=l;function d({condition:e,wrapper:t,children:n}){return e?t(n):n}const f=(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 p({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:border-t komc:border-neutral-200`,e),...a,children:(0,i.jsx)(`div`,{className:f({maxWidth:r}),children:t})})}const m=(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 h({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:transition-all komc:duration-200`,a),...o,children:(0,i.jsx)(`div`,{className:m({maxWidth:t,size:r}),children:e})})}const g=(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`}}}),_=(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:g({size:n,gap:r,outline:a,rounded:o,className:s}),children:[e,(0,i.jsx)(`input`,{ref:l,type:`text`,...c}),t]}));var v=_;const y=(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 b({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:y({size:e,rounded:t,className:a}),style:{width:s,height:c},...o})}exports.BottomAppBar=s,exports.Button=u,exports.ConditionalWrapper=d,exports.Footer=p,exports.Header=h,exports.Input=v,exports.Skeleton=b;
+const e=require(`../chunk-Bmb41Sf3.cjs`),t=require(`../util-1BLWEgZB.cjs`),n=require(`../skeleton-B1Jzl0cz.cjs`);let r=require(`clsx`);r=e.t(r);let i=require(`react`);i=e.t(i);let a=require(`react/jsx-runtime`),o=require(`class-variance-authority`),s=require(`@radix-ui/react-slot`);function c({className:e,items:t,render:n,...o}){return(0,a.jsx)(`nav`,{"data-komc":!0,"aria-label":`bottom app bar`,className:(0,r.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,a.jsx)(`div`,{className:`komc:grid komc:min-h-15`,style:{gridTemplateColumns:`repeat(${t.length}, 1fr)`},children:t.map((e,t)=>(0,a.jsx)(i.default.Fragment,{children:n(e)},t))})})}const l=(0,o.cva)(t.y(`komc:flex komc:justify-center komc:items-center komc:gap-x-2 komc:w-full`,`komc:transition-colors komc:duration-200 komc:relative`,`komc:[&_svg]:transition-colors komc:[&_svg]:duration-200`,`komc:cursor-pointer komc:disabled:cursor-default`),{variants:{size:{xxs:`komc:h-7.5`,xs:`komc:h-8`,sm:`komc:h-9`,md:`komc:h-10`,lg:`komc:h-11`,xl:`komc:h-12`,"2xl":`komc:h-13`,"3xl":`komc:h-14`,"4xl":`komc:h-15`},shadow:{none:``,sm:`komc:drop-shadow-sm`,md:`komc:drop-shadow-md`,lg:`komc:drop-shadow-lg`,xl:`komc:drop-shadow-xl`,"2xl":`komc:drop-shadow-2xl`,"3xl":`komc:drop-shadow-3xl`},outline:{line:`komc:border`,solid:`komc:border komc:border-transparent`,clear:`komc:border-none`},variant:{blue:``,duo:``,white:``,gray:``,neutral:``,night:``,black:``,sky:``,"sky-blue":``,indigo:``},px:{none:`komc:px-0`,xs:`komc:px-0.5`,sm:`komc:px-1`,md:`komc:px-1.5`,lg:`komc:px-2`,xl:`komc:px-3`,"2xl":`komc:px-4`,"3xl":`komc:px-5`,"4xl":`komc:px-6`},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`}},compoundVariants:[{outline:`line`,variant:`blue`,className:t.y(`komc:border-blue-500 komc:bg-white komc:text-blue-500`,`komc:hover:border-transparent komc:hover:bg-blue-500 komc:hover:text-white`,`komc:active:border-transparent komc:active:bg-blue-500 komc:active:text-white`,`komc:disabled:border-gray-500 komc:disabled:bg-white komc:disabled:text-gray-500`)},{outline:`line`,variant:`duo`,className:t.y(`komc:border-blue-500 komc:bg-white komc:text-brand-blck`,`komc:hover:border-transparent komc:hover:bg-blue-500 komc:hover:text-white`,`komc:active:border-transparent komc:active:bg-blue-500 komc:active:text-white`,`komc:disabled:border-gray-500 komc:disabled:bg-white komc:disabled:text-gray-500`)},{outline:`line`,variant:`white`,className:t.y(`komc:border-gray-600 komc:bg-white komc:text-brand-blck`,`komc:hover:bg-gray-200 komc:hover:text-brand-blck`,`komc:active:bg-gray-200 komc:active:text-brand-blck`,`komc:disabled:border-gray-500 komc:disabled:bg-white komc:disabled:text-gray-500`)},{outline:`line`,variant:`gray`,className:t.y(`komc:border-white komc:bg-transparent komc:text-white`,`komc:hover:bg-[rgb(199,199,199)] komc:hover:text-white`,`komc:active:bg-[rgb(199,199,199)] komc:active:text-white`,`komc:disabled:border-gray-500 komc:disabled:bg-white komc:disabled:text-gray-500`)},{outline:`line`,variant:`neutral`,className:t.y(`komc:border-gray-800 komc:bg-transparent komc:text-black`,`komc:hover:bg-gray-200 komc:hover:text-black`,`komc:active:bg-gray-200 komc:active:text-black`,`komc:disabled:border-gray-500 komc:disabled:bg-transparent komc:disabled:text-gray-500`)},{outline:`line`,variant:`sky`,className:t.y(`komc:border-sky-750 komc:bg-transparent komc:text-black`,`komc:hover:bg-sky-750 komc:hover:text-white`,`komc:active:bg-sky-750 komc:active:text-white`,`komc:disabled:border-gray-500 komc:disabled:bg-transparent komc:disabled:text-gray-500`)},{outline:`line`,variant:`sky-blue`,className:t.y(`komc:border-sky-450 komc:bg-transparent komc:text-black`,`komc:hover:bg-sky-450 komc:hover:text-white`,`komc:active:bg-sky-450 komc:active:text-white`,`komc:disabled:border-gray-500 komc:disabled:bg-transparent komc:disabled:text-gray-500`)},{outline:`solid`,variant:`white`,className:t.y(`komc:bg-white komc:text-brand-blck`,`komc:hover:bg-gray-200`,`komc:active:bg-gray-200`,`komc:disabled:border-white komc:disabled:bg-gray-50 komc:disabled:text-gray-800`)},{outline:`solid`,variant:`gray`,className:t.y(`komc:bg-gray-100 komc:text-blue-500`,`komc:hover:bg-blue-500 komc:hover:text-white`,`komc:active:bg-blue-500 komc:active:text-white`,`komc:disabled:border-white komc:disabled:bg-gray-50 komc:disabled:text-gray-800`)},{outline:`solid`,variant:`blue`,className:t.y(`komc:bg-blue-500 komc:text-white`,`komc:hover:bg-night-700 komc:hover:text-white`,`komc:active:bg-night-700 komc:active:text-white`,`komc:disabled:border-white komc:disabled:bg-gray-50 komc:disabled:text-gray-800`)},{outline:`solid`,variant:`night`,className:t.y(`komc:bg-night-700 komc:text-white`,`komc:hover:bg-night-800 komc:hover:text-white`,`komc:active:bg-night-800 komc:active:text-white`,`komc:disabled:border-white komc:disabled:bg-gray-50 komc:disabled:text-gray-800`)},{outline:`solid`,variant:`black`,className:t.y(`komc:bg-[rgb(95,95,96)] komc:text-white`,`komc:hover:bg-[rgb(76,76,77)] komc:hover:text-white`,`komc:active:bg-[rgb(76,76,77)] komc:active:text-white`,`komc:disabled:border-white komc:disabled:bg-gray-50 komc:disabled:text-gray-800`)},{outline:`solid`,variant:`sky`,className:t.y(`komc:bg-sky-750 komc:text-white`,`komc:hover:bg-sky-950 komc:hover:text-white`,`komc:active:bg-sky-950 komc:active:text-white`,`komc:disabled:border-white komc:disabled:bg-gray-700`)},{outline:`solid`,variant:`sky-blue`,className:t.y(`komc:bg-sky-450 komc:text-white`,`komc:hover:bg-sky-650 komc:hover:text-white`,`komc:active:bg-sky-650 komc:active:text-white`,`komc:disabled:border-white komc:disabled:bg-gray-700`)},{outline:`solid`,variant:`indigo`,className:t.y(`komc:bg-indigo-600 komc:text-white`,`komc:hover:bg-indigo-700 komc:hover:text-white`,`komc:active:bg-indigo-700 komc:active:text-white`,`komc:disabled:border-white komc:disabled:bg-gray-700`)},{outline:`clear`,variant:`sky`,className:t.y(`komc:bg-transparent komc:text-[#1890FF]`,`komc:hover:bg-transparent komc:hover:text-[#1890FF] komc:hover:underline`,`komc:active:bg-transparent komc:active:text-[#1890FF] komc:active:underline`,`komc:disabled:border-transparent komc:disabled:bg-transparent komc:disabled:text-gray-500`)},{outline:`clear`,variant:`gray`,className:t.y(`komc:bg-transparent komc:text-gray-800`,`komc:hover:bg-transparent komc:hover:text-gray-800 komc:hover:underline`,`komc:active:bg-transparent komc:active:text-gray-800 komc:active:underline`,`komc:disabled:border-transparent komc:disabled:bg-transparent komc:disabled:text-gray-500`)}],defaultVariants:{size:`md`,shadow:`none`,outline:`line`,variant:`blue`,px:`2xl`,rounded:`sm`}}),u=(0,i.forwardRef)(({type:e=`button`,className:t,id:n,size:r,shadow:i,outline:o,variant:c,px:u,rounded:d,asChild:f,...p},m)=>(0,a.jsx)(f?s.Slot:`button`,{ref:m,...p,type:e,id:n,className:l({size:r,shadow:i,outline:o,variant:c,px:u,rounded:d,className:t})}));var d=u;function f({condition:e,wrapper:t,children:n}){return e?t(n):n}const p=(0,o.cva)(t.y(`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`}}}),m=(0,i.forwardRef)(({prefix:e=null,surffix:t=null,size:n=`lg`,gap:r=`xl`,outline:i=`line`,rounded:o=`lg`,className:s,...c},l)=>(0,a.jsxs)(`div`,{"data-komc":!0,className:p({size:n,gap:r,outline:i,rounded:o,className:s}),children:[e,(0,a.jsx)(`input`,{ref:l,type:`text`,...c}),t]}));var h=m;function g({children:e,className:t,...n}){return(0,a.jsx)(`span`,{...n,"data-komc":!0,"data-text":`${e}`,className:(0,r.default)(`komc:inline-flex komc:flex-col komc:justify-center komc:items-center`,`komc:after:content-[attr(data-text)] komc:after:font-bold`,`komc:after:h-0 komc:after:invisible komc:after:overflow-hidden`,`komc:after:select-none komc:after:pointer-events-none`,t),children:e})}exports.BottomAppBar=c,exports.Button=d,exports.ConditionalWrapper=f,exports.Input=h,exports.Skeleton=n.t,exports.StableText=g;

package/dist/ui/index.d.cts

@@ -1,7 +1,7 @@
 import * as react4 from "react";
-import React$1, { HTMLAttributes } from "react";
-import * as react_jsx_runtime5 from "react/jsx-runtime";
-import * as class_variance_authority_types3 from "class-variance-authority/types";
+import React$1, { ComponentProps, 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";
 
 //#region src/ui/bottom-app-bar/bottom-app-bar.d.ts
@@ -9,10 +9,6 @@ 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,
@@ -21,91 +17,32 @@ declare function BottomAppBar<T>({
 }: BottomAppBarProps<T>): React$1.ReactNode;
 //#endregion
 //#region src/ui/button/button.d.ts
-declare const classes$4: (props?: ({
-  size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "xxs" | null | undefined;
-  shadow?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "none" | null | undefined;
+declare const classes$2: (props?: ({
+  size?: "sm" | "md" | "lg" | "xl" | "2xl" | "xxs" | "xs" | "3xl" | "4xl" | null | undefined;
+  shadow?: "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | null | undefined;
   outline?: "line" | "solid" | "clear" | null | undefined;
   variant?: "blue" | "duo" | "white" | "gray" | "neutral" | "night" | "black" | "sky" | "sky-blue" | "indigo" | null | undefined;
-  px?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "none" | "4xl" | null | undefined;
-  rounded?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full" | "none" | null | undefined;
-} & class_variance_authority_types3.ClassProp) | undefined) => string;
+  px?: "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | "3xl" | "4xl" | null | undefined;
+  rounded?: "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "full" | "3xl" | null | undefined;
+} & class_variance_authority_types1.ClassProp) | undefined) => string;
 interface VariantMap {
   line: 'blue' | 'duo' | 'white' | 'gray' | 'neutral' | 'sky' | 'sky-blue';
   solid: 'white' | 'gray' | 'blue' | 'night' | 'black' | 'sky' | 'sky-blue' | 'indigo';
   clear: 'sky' | 'gray';
 }
-type BaseProps = Omit<VariantProps<typeof classes$4>, 'outline' | 'variant'>;
-/**
- * Button component
- * @description Button component or Slot component (asChild)
- * @param outline
- * @property
- * - line
- * - solid
- * - clear
- * @param variant
- * @property line
- * - blue
- * - duo
- * - white
- * - gray
- * - neutral
- * - sky
- * - sky-blue
- * @property solid
- * - white
- * - gray
- * - blue
- * - night
- * - black
- * - sky
- * - sky-blue
- * - indigo
- * @property clear
- * - sky
- * - gray
- * @param px
- * @property
- * - none - px-0
- * - xs - px-0.5
- * - sm - px-1
- * - md - px-1.5
- * - lg - px-2
- * - xl - px-3
- * - 2xl - px-4
- * - 3xl - px-5
- * - 4xl - px-6
- * @param rounded
- * @property
- * - none - rounded-none
- * - sm - rounded-sm
- * - md - rounded-md
- * - lg - rounded-lg
- * - xl - rounded-xl
- * - 2xl - rounded-2xl
- * - 3xl - rounded-3xl
- * - full - rounded-full
- * @param size
- * @property
- * - xxs - h-7.5
- * - xs - h-8
- * - sm - h-9
- * - md - h-10
- * - lg - h-11
- * - xl - h-12
- * - 2xl - h-13
- * - 3xl - h-14
- * - 4xl - h-15
- * @param shadow
- * @property
- * - none
- * - sm
- * - md
- * - lg
- * - xl
- * - 2xl
- * - 3xl
- */
+type BaseProps = Omit<VariantProps<typeof classes$2>, 'outline' | 'variant'>;
+type ButtonProps = ComponentProps<'button'> & BaseProps & ({
+  outline?: 'line';
+  variant?: VariantMap['line'];
+} | {
+  outline: 'solid';
+  variant?: VariantMap['solid'];
+} | {
+  outline: 'clear';
+  variant?: VariantMap['clear'];
+}) & {
+  asChild?: boolean;
+};
 declare const Button: react4.ForwardRefExoticComponent<(Omit<react4.ClassAttributes<HTMLButtonElement> & react4.ButtonHTMLAttributes<HTMLButtonElement> & BaseProps & {
   outline?: "line";
   variant?: VariantMap["line"];
@@ -129,218 +66,40 @@ interface ConditionalWrapperProps {
   wrapper: (children: React.ReactNode) => React.ReactNode;
   children: React.ReactNode;
 }
-/**
- * @param condition - Condition to wrap the children
- * @param wrapper - Wrapper function
- * @param children - Children to wrap
- */
 declare function ConditionalWrapper({
   condition,
   wrapper,
   children
 }: ConditionalWrapperProps): react4.ReactNode;
 //#endregion
-//#region src/ui/footer/footer.d.ts
-declare const classes$3: (props?: ({
-  maxWidth?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full" | "none" | "4xl" | "5xl" | "6xl" | "7xl" | null | undefined;
-} & class_variance_authority_types3.ClassProp) | undefined) => string;
-interface FooterProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof classes$3> {
-  /**
-   * @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$3>['maxWidth'];
-}
-declare function Footer({
-  className,
-  children,
-  maxWidth,
-  ...props
-}: FooterProps): react_jsx_runtime5.JSX.Element;
-//#endregion
-//#region src/ui/header/header.d.ts
-declare const classes$2: (props?: ({
-  maxWidth?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full" | "none" | "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_types3.ClassProp) | undefined) => string;
-interface HeaderProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof classes$2> {
-  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$2>['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$2>['size'];
-}
-declare function Header({
-  children,
-  maxWidth,
-  size,
-  className,
-  ...props
-}: HeaderProps): react_jsx_runtime5.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;
-  gap?: "xs" | "sm" | "md" | "lg" | "xl" | "none" | null | undefined;
+  size?: "sm" | "md" | "lg" | "xl" | "2xl" | "base" | "xs" | "3xl" | null | undefined;
+  gap?: "none" | "sm" | "md" | "lg" | "xl" | "xs" | null | undefined;
   outline?: "line" | "solid" | "clear" | "dashed" | "dotted" | null | undefined;
-  rounded?: "sm" | "md" | "lg" | "xl" | "2xl" | "none" | null | undefined;
-} & class_variance_authority_types3.ClassProp) | undefined) => string;
+  rounded?: "none" | "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;
+} & class_variance_authority_types1.ClassProp) | undefined) => string;
 interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'prefix' | 'surffix' | 'size'>, VariantProps<typeof classes$1> {
-  /**
-   * @param size - Height of the input
-   * @default lg - 44px
-   * @property
-   * - xs: 30px
-   * - sm: 32px
-   * - base: 36px
-   * - md: 40px
-   * - lg: 44px
-   * - xl: 48px
-   * - 2xl: 52px
-   * - 3xl: 56px
-   */
   size?: VariantProps<typeof classes$1>['size'];
-  /**
-   * @param gap - Gap between the input and the prefix/suffix
-   * @default xl - 20px
-   * @property
-   * - none: 0
-   * - xs: 4px
-   * - sm: 8px
-   * - md: 12px
-   * - lg: 16px
-   * - xl: 20px
-   */
   gap?: VariantProps<typeof classes$1>['gap'];
   outline?: VariantProps<typeof classes$1>['outline'];
-  /**
-   * @param rounded - Border radius of the input
-   * @default lg
-   * @property
-   * - none: 0
-   * - sm: 2px
-   * - md: 6px
-   * - lg: 8px
-   * - xl: 12px
-   * - 2xl: 16px
-   */
   rounded?: VariantProps<typeof classes$1>['rounded'];
   prefix?: React.ReactNode;
   surffix?: React.ReactNode;
 }
-/**
- * @param prefix - Prefix of the input
- * @param surffix - Surffix of the input
- * @param size - Size of the input
- * @param gap - Gap between the input and the prefix/suffix
- * @param outline - Outline of the input
- * @param rounded - Border radius of the input
- */
 declare const Input: react4.ForwardRefExoticComponent<InputProps & react4.RefAttributes<HTMLInputElement>>;
 //#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;
-} & class_variance_authority_types3.ClassProp) | undefined) => string;
+  size?: "sm" | "md" | "lg" | "xl" | "2xl" | "full" | "xs" | "3xl" | "square" | null | undefined;
+  rounded?: "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "full" | "3xl" | null | undefined;
+} & class_variance_authority_types1.ClassProp) | undefined) => string;
 interface SkeletonProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof classes> {
-  /**
-   * @param width - Width of the skeleton
-   * @description string or number, number unit is px
-   * @default 100
-   */
   width?: string | number;
-  /**
-   * @param height - Height of the skeleton
-   * @description string or number, number unit is px
-   * @default 100
-   */
   height?: string | number;
-  /**
-   * @param size - Size of the skeleton (height)
-   * @default sm
-   * @property
-   * - xs: 4px
-   * - sm: 8px
-   * - md: 12px
-   * - lg: 16px
-   * - xl: 20px
-   * - 2xl: 24px
-   * - 3xl: 28px
-   * - square: 100%
-   * - full: 100%
-   */
   size?: VariantProps<typeof classes>['size'];
-  /**
-   * @param rounded - Rounded of the skeleton
-   * @default sm
-   * @property
-   * - none: 0
-   * - sm: 2px
-   * - md: 6px
-   * - lg: 8px
-   * - xl: 12px
-   * - 2xl: 16px
-   * - 3xl: 20px
-   * - full: 100%
-   */
   rounded?: VariantProps<typeof classes>['rounded'];
 }
-/**
- * @param size - Size of the skeleton (height)
- * @param rounded - Rounded of the skeleton
- * @param width - Width of the skeleton
- * @param height - Height of the skeleton
- */
 declare function Skeleton({
   size,
   rounded,
@@ -348,6 +107,15 @@ declare function Skeleton({
   height,
   className,
   ...props
-}: SkeletonProps): react_jsx_runtime5.JSX.Element;
+}: SkeletonProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/ui/stable-text/stable-text.d.ts
+declare function StableText({
+  children,
+  className,
+  ...props
+}: Omit<HTMLAttributes<HTMLSpanElement>, 'children'> & {
+  children: string | number;
+}): react_jsx_runtime0.JSX.Element;
 //#endregion
-export { BottomAppBar, type BottomAppBarProps, Button, ConditionalWrapper, type ConditionalWrapperProps, Footer, type FooterProps, Header, type HeaderProps, Input, type InputProps, Skeleton, type SkeletonProps };
+export { BottomAppBar, type BottomAppBarProps, Button, type ButtonProps, ConditionalWrapper, type ConditionalWrapperProps, Input, type InputProps, Skeleton, type SkeletonProps, StableText };