@machinerd/js-module 0.2.4 → 0.3.1

package/dist/ui/client-only/index.d.cts

@@ -1,7 +1,7 @@
 import * as react0 from "react";
 import React$1, { ComponentProps, HTMLAttributes } from "react";
 import useEmblaCarousel, { UseEmblaCarouselType } from "embla-carousel-react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime2 from "react/jsx-runtime";
 
 //#region src/ui/client-only/carousel/carousel-context.d.ts
 type CarouselApi = UseEmblaCarouselType[1];
@@ -57,33 +57,33 @@ declare function Carousel({
   className,
   children,
   ...props
-}: CarouselProps$1): react_jsx_runtime0.JSX.Element;
+}: CarouselProps$1): react_jsx_runtime2.JSX.Element;
 //#endregion
 //#region src/ui/client-only/carousel/carousel-wrapper.d.ts
 declare function CarouselWrapper({
   className,
   ...props
-}: React$1.ComponentProps<'div'>): react_jsx_runtime0.JSX.Element;
+}: React$1.ComponentProps<'div'>): react_jsx_runtime2.JSX.Element;
 //#endregion
 //#region src/ui/client-only/carousel/carousel-item.d.ts
 declare function CarouselItem({
   className,
   ...props
-}: React$1.ComponentProps<'div'>): react_jsx_runtime0.JSX.Element;
+}: React$1.ComponentProps<'div'>): react_jsx_runtime2.JSX.Element;
 //#endregion
 //#region src/ui/client-only/carousel/carousel-previous.d.ts
 declare function CarouselPrevious({
   children,
   className,
   ...props
-}: React$1.ComponentProps<'button'>): react_jsx_runtime0.JSX.Element;
+}: React$1.ComponentProps<'button'>): react_jsx_runtime2.JSX.Element;
 //#endregion
 //#region src/ui/client-only/carousel/carousel-next.d.ts
 declare function CarouselNext({
   children,
   className,
   ...props
-}: React$1.ComponentProps<'button'>): react_jsx_runtime0.JSX.Element;
+}: React$1.ComponentProps<'button'>): react_jsx_runtime2.JSX.Element;
 //#endregion
 //#region src/ui/client-only/tooltip/tooltip-container.d.ts
 type SubPlacement = 'start' | 'end';

package/dist/ui/client-only/index.d.mts

@@ -1,6 +1,6 @@
-import * as react4 from "react";
+import * as react0 from "react";
 import React$1, { ComponentProps, HTMLAttributes } from "react";
-import * as react_jsx_runtime3 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 import useEmblaCarousel, { UseEmblaCarouselType } from "embla-carousel-react";
 
 //#region src/ui/client-only/carousel/carousel-context.d.ts
@@ -57,33 +57,33 @@ declare function Carousel({
   className,
   children,
   ...props
-}: CarouselProps$1): react_jsx_runtime3.JSX.Element;
+}: CarouselProps$1): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/ui/client-only/carousel/carousel-wrapper.d.ts
 declare function CarouselWrapper({
   className,
   ...props
-}: React$1.ComponentProps<'div'>): react_jsx_runtime3.JSX.Element;
+}: React$1.ComponentProps<'div'>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/ui/client-only/carousel/carousel-item.d.ts
 declare function CarouselItem({
   className,
   ...props
-}: React$1.ComponentProps<'div'>): react_jsx_runtime3.JSX.Element;
+}: React$1.ComponentProps<'div'>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/ui/client-only/carousel/carousel-previous.d.ts
 declare function CarouselPrevious({
   children,
   className,
   ...props
-}: React$1.ComponentProps<'button'>): react_jsx_runtime3.JSX.Element;
+}: React$1.ComponentProps<'button'>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/ui/client-only/carousel/carousel-next.d.ts
 declare function CarouselNext({
   children,
   className,
   ...props
-}: React$1.ComponentProps<'button'>): react_jsx_runtime3.JSX.Element;
+}: React$1.ComponentProps<'button'>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/ui/client-only/tooltip/tooltip-container.d.ts
 type SubPlacement = 'start' | 'end';
@@ -131,6 +131,6 @@ interface TooltipContainerProps extends HTMLAttributes<HTMLDivElement> {
  * @param defaultOpen - Default open state of the tooltip
  * @param placement - Placement of the tooltip
  */
-declare const TooltipContainer: react4.ForwardRefExoticComponent<TooltipContainerProps & react4.RefAttributes<HTMLDivElement>>;
+declare const TooltipContainer: react0.ForwardRefExoticComponent<TooltipContainerProps & react0.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { Carousel, type CarouselApi, type CarouselContextProps, CarouselItem, CarouselNext, type CarouselOptions, type CarouselPlugin, CarouselPrevious, type CarouselProps, CarouselWrapper, TooltipContainer as Tooltip, type TooltipContainerProps as TooltipProps };

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`);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;
+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;

package/dist/ui/index.d.cts

@@ -1,7 +1,7 @@
-import * as react1 from "react";
+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_types0 from "class-variance-authority/types";
+import * as class_variance_authority_types3 from "class-variance-authority/types";
 import { VariantProps } from "class-variance-authority";
 
 //#region src/ui/bottom-app-bar/bottom-app-bar.d.ts
@@ -21,82 +21,107 @@ declare function BottomAppBar<T>({
 }: BottomAppBarProps<T>): React$1.ReactNode;
 //#endregion
 //#region src/ui/button/button.d.ts
-declare const classes$5: (props?: ({
-  size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "base" | 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;
-  variant?: "default" | "ghost" | "white" | "blue" | "night" | "charcoal" | "slate" | "red" | "yellow" | "black" | null | undefined;
-} & class_variance_authority_types0.ClassProp) | undefined) => string;
-interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'suffix' | 'prefix'>, VariantProps<typeof classes$5> {
-  /**
-   * @param size - Height of the button
-   * @default md - 40px
-   * @property
-   * - xs: 30px
-   * - sm: 32px
-   * - base: 36px
-   * - md: 40px
-   * - lg: 44px
-   * - xl: 48px
-   * - 2xl: 52px
-   * - 3xl: 56px
-   */
-  size?: VariantProps<typeof classes$5>['size'];
-  /**
-   * @param gap - Gap between the button and the content
-   * @default sm - 8px
-   * @property
-   * - none: 0
-   * - xs: 4px
-   * - sm: 8px
-   * - md: 12px
-   * - lg: 16px
-   * - xl: 20px
-   */
-  gap?: VariantProps<typeof classes$5>['gap'];
-  /**
-   * @param rounded - Border radius of the button
-   * @default sm
-   * @property
-   * - none: 0
-   * - sm: 2px
-   * - md: 6px
-   * - lg: 8px
-   * - xl: 12px
-   * - 2xl: 16px
-   * - 2.5xl: 20px
-   * - 3xl: 24px
-   * - full: 100%
-   */
-  rounded?: VariantProps<typeof classes$5>['rounded'];
-  /**
-   * @param variant - Variant of the button
-   * @default blue
-   * @property
-   * - default
-   * - ghost
-   * - white
-   * - blue
-   * - night
-   * - charcoal
-   * - slate
-   * - red
-   * - yellow
-   * - black
-   */
-  variant?: VariantProps<typeof classes$5>['variant'];
-  disabled?: boolean;
-  children?: React.ReactNode;
+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;
+  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;
+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'>;
 /**
- * @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
+ * 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
  */
-declare const Button: react1.ForwardRefExoticComponent<ButtonProps & react1.RefAttributes<HTMLButtonElement>>;
+declare const Button: react4.ForwardRefExoticComponent<(Omit<react4.ClassAttributes<HTMLButtonElement> & react4.ButtonHTMLAttributes<HTMLButtonElement> & BaseProps & {
+  outline?: "line";
+  variant?: VariantMap["line"];
+} & {
+  asChild?: boolean;
+}, "ref"> | Omit<react4.ClassAttributes<HTMLButtonElement> & react4.ButtonHTMLAttributes<HTMLButtonElement> & BaseProps & {
+  outline: "solid";
+  variant?: VariantMap["solid"];
+} & {
+  asChild?: boolean;
+}, "ref"> | Omit<react4.ClassAttributes<HTMLButtonElement> & react4.ButtonHTMLAttributes<HTMLButtonElement> & BaseProps & {
+  outline: "clear";
+  variant?: VariantMap["clear"];
+} & {
+  asChild?: boolean;
+}, "ref">) & react4.RefAttributes<HTMLButtonElement>>;
 //#endregion
 //#region src/ui/conditional-wrapper/conditional-wrapper.d.ts
 interface ConditionalWrapperProps {
@@ -113,13 +138,13 @@ declare function ConditionalWrapper({
   condition,
   wrapper,
   children
-}: ConditionalWrapperProps): react1.ReactNode;
+}: ConditionalWrapperProps): react4.ReactNode;
 //#endregion
 //#region src/ui/footer/footer.d.ts
-declare const classes$4: (props?: ({
+declare const classes$3: (props?: ({
   maxWidth?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full" | "none" | "4xl" | "5xl" | "6xl" | "7xl" | null | undefined;
-} & class_variance_authority_types0.ClassProp) | undefined) => string;
-interface FooterProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof classes$4> {
+} & 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
@@ -138,7 +163,7 @@ interface FooterProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps
    * - 7xl: 1280px
    * - full: 100%
    */
-  maxWidth?: VariantProps<typeof classes$4>['maxWidth'];
+  maxWidth?: VariantProps<typeof classes$3>['maxWidth'];
 }
 declare function Footer({
   className,
@@ -148,11 +173,11 @@ declare function Footer({
 }: FooterProps): react_jsx_runtime5.JSX.Element;
 //#endregion
 //#region src/ui/header/header.d.ts
-declare const classes$3: (props?: ({
+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_types0.ClassProp) | undefined) => string;
-interface HeaderProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof classes$3> {
+} & 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
@@ -173,7 +198,7 @@ interface HeaderProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeo
    * - 8xl: 1320px
    * - full: 100%
    */
-  maxWidth?: VariantProps<typeof classes$3>['maxWidth'];
+  maxWidth?: VariantProps<typeof classes$2>['maxWidth'];
   /**
    * @param size - Size of the header
    * @default xl
@@ -192,7 +217,7 @@ interface HeaderProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeo
    * - 8xl: 120px
    * - full: 100%
    */
-  size?: VariantProps<typeof classes$3>['size'];
+  size?: VariantProps<typeof classes$2>['size'];
 }
 declare function Header({
   children,
@@ -203,13 +228,13 @@ declare function Header({
 }: HeaderProps): react_jsx_runtime5.JSX.Element;
 //#endregion
 //#region src/ui/input/input.d.ts
-declare const classes$2: (props?: ({
+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;
   outline?: "line" | "solid" | "clear" | "dashed" | "dotted" | null | undefined;
   rounded?: "sm" | "md" | "lg" | "xl" | "2xl" | "none" | null | undefined;
-} & class_variance_authority_types0.ClassProp) | undefined) => string;
-interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'prefix' | 'surffix' | 'size'>, VariantProps<typeof classes$2> {
+} & class_variance_authority_types3.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
@@ -223,7 +248,7 @@ interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, '
    * - 2xl: 52px
    * - 3xl: 56px
    */
-  size?: VariantProps<typeof classes$2>['size'];
+  size?: VariantProps<typeof classes$1>['size'];
   /**
    * @param gap - Gap between the input and the prefix/suffix
    * @default xl - 20px
@@ -235,8 +260,8 @@ interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, '
    * - lg: 16px
    * - xl: 20px
    */
-  gap?: VariantProps<typeof classes$2>['gap'];
-  outline?: VariantProps<typeof classes$2>['outline'];
+  gap?: VariantProps<typeof classes$1>['gap'];
+  outline?: VariantProps<typeof classes$1>['outline'];
   /**
    * @param rounded - Border radius of the input
    * @default lg
@@ -248,7 +273,7 @@ interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, '
    * - xl: 12px
    * - 2xl: 16px
    */
-  rounded?: VariantProps<typeof classes$2>['rounded'];
+  rounded?: VariantProps<typeof classes$1>['rounded'];
   prefix?: React.ReactNode;
   surffix?: React.ReactNode;
 }
@@ -260,51 +285,13 @@ interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, '
  * @param outline - Outline of the input
  * @param rounded - Border radius of the input
  */
-declare const Input: react1.ForwardRefExoticComponent<InputProps & react1.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" | "full" | "none" | null | undefined;
-} & class_variance_authority_types0.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_runtime5.JSX.Element;
+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_types0.ClassProp) | undefined) => string;
+} & class_variance_authority_types3.ClassProp) | undefined) => string;
 interface SkeletonProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof classes> {
   /**
    * @param width - Width of the skeleton
@@ -363,4 +350,4 @@ declare function Skeleton({
   ...props
 }: SkeletonProps): react_jsx_runtime5.JSX.Element;
 //#endregion
-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 };
+export { BottomAppBar, type BottomAppBarProps, Button, ConditionalWrapper, type ConditionalWrapperProps, Footer, type FooterProps, Header, type HeaderProps, Input, type InputProps, Skeleton, type SkeletonProps };