@machinerd/js-module 0.1.0 → 0.2.0

package/dist/styles/index.css

@@ -3,6 +3,7 @@
 @layer theme, base, components, utilities;
 @layer theme {
   :root, :host {
+    --komc-color-red-500: oklch(63.7% 0.237 25.331);
     --komc-color-blue-500: oklch(62.3% 0.214 259.815);
     --komc-color-blue-600: oklch(54.6% 0.245 262.881);
     --komc-color-gray-100: oklch(96.7% 0.003 264.542);
@@ -11,10 +12,22 @@
     --komc-color-neutral-100: oklch(97% 0 0);
     --komc-color-neutral-200: oklch(92.2% 0 0);
     --komc-color-neutral-300: oklch(87% 0 0);
+    --komc-color-neutral-400: oklch(70.8% 0 0);
     --komc-color-neutral-900: oklch(20.5% 0 0);
     --komc-color-black: #000;
     --komc-color-white: #fff;
     --komc-spacing: 0.25rem;
+    --komc-container-xs: 20rem;
+    --komc-container-sm: 24rem;
+    --komc-container-md: 28rem;
+    --komc-container-lg: 32rem;
+    --komc-container-xl: 36rem;
+    --komc-container-2xl: 42rem;
+    --komc-container-3xl: 48rem;
+    --komc-container-4xl: 56rem;
+    --komc-container-5xl: 64rem;
+    --komc-container-6xl: 72rem;
+    --komc-container-7xl: 80rem;
     --komc-text-xs: 0.75rem;
     --komc-text-xs--line-height: calc(1 / 0.75);
     --komc-radius-sm: 0.25rem;
@@ -44,6 +57,9 @@
   .komc\:relative {
     position: relative;
   }
+  .komc\:sticky {
+    position: sticky;
+  }
   .komc\:top-0 {
     top: calc(var(--komc-spacing) * 0);
   }
@@ -92,12 +108,24 @@
   .komc\:z-99 {
     z-index: 99;
   }
-  .komc\:m-0 {
-    margin: calc(var(--komc-spacing) * 0);
+  .komc\:z-1000 {
+    z-index: 1000;
+  }
+  .komc\:mx-auto {
+    margin-inline: auto;
+  }
+  .komc\:my-0 {
+    margin-block: calc(var(--komc-spacing) * 0);
   }
   .komc\:-mt-1 {
     margin-top: calc(var(--komc-spacing) * -1);
   }
+  .komc\:-mt-4 {
+    margin-top: calc(var(--komc-spacing) * -4);
+  }
+  .komc\:mt-1 {
+    margin-top: calc(var(--komc-spacing) * 1);
+  }
   .komc\:-mr-1 {
     margin-right: calc(var(--komc-spacing) * -1);
   }
@@ -107,8 +135,11 @@
   .komc\:-ml-1 {
     margin-left: calc(var(--komc-spacing) * -1);
   }
-  .komc\:box-border {
-    box-sizing: border-box;
+  .komc\:-ml-4 {
+    margin-left: calc(var(--komc-spacing) * -4);
+  }
+  .komc\:block {
+    display: block;
   }
   .komc\:flex {
     display: flex;
@@ -155,15 +186,33 @@
   .komc\:h-16 {
     height: calc(var(--komc-spacing) * 16);
   }
+  .komc\:h-18 {
+    height: calc(var(--komc-spacing) * 18);
+  }
   .komc\:h-20 {
     height: calc(var(--komc-spacing) * 20);
   }
+  .komc\:h-22 {
+    height: calc(var(--komc-spacing) * 22);
+  }
+  .komc\:h-22\.5 {
+    height: calc(var(--komc-spacing) * 22.5);
+  }
   .komc\:h-24 {
     height: calc(var(--komc-spacing) * 24);
   }
+  .komc\:h-26 {
+    height: calc(var(--komc-spacing) * 26);
+  }
   .komc\:h-28 {
     height: calc(var(--komc-spacing) * 28);
   }
+  .komc\:h-30 {
+    height: calc(var(--komc-spacing) * 30);
+  }
+  .komc\:h-50 {
+    height: calc(var(--komc-spacing) * 50);
+  }
   .komc\:h-400 {
     height: calc(var(--komc-spacing) * 400);
   }
@@ -176,6 +225,12 @@
   .komc\:h-full {
     height: 100%;
   }
+  .komc\:h-screen {
+    height: 100vh;
+  }
+  .komc\:min-h-10 {
+    min-height: calc(var(--komc-spacing) * 10);
+  }
   .komc\:min-h-15 {
     min-height: calc(var(--komc-spacing) * 15);
   }
@@ -191,12 +246,63 @@
   .komc\:w-max {
     width: max-content;
   }
+  .komc\:max-w-2xl {
+    max-width: var(--komc-container-2xl);
+  }
+  .komc\:max-w-3xl {
+    max-width: var(--komc-container-3xl);
+  }
+  .komc\:max-w-4xl {
+    max-width: var(--komc-container-4xl);
+  }
+  .komc\:max-w-5xl {
+    max-width: var(--komc-container-5xl);
+  }
+  .komc\:max-w-6xl {
+    max-width: var(--komc-container-6xl);
+  }
+  .komc\:max-w-7xl {
+    max-width: var(--komc-container-7xl);
+  }
   .komc\:max-w-70 {
     max-width: calc(var(--komc-spacing) * 70);
   }
+  .komc\:max-w-330 {
+    max-width: calc(var(--komc-spacing) * 330);
+  }
+  .komc\:max-w-full {
+    max-width: 100%;
+  }
+  .komc\:max-w-lg {
+    max-width: var(--komc-container-lg);
+  }
+  .komc\:max-w-md {
+    max-width: var(--komc-container-md);
+  }
+  .komc\:max-w-sm {
+    max-width: var(--komc-container-sm);
+  }
+  .komc\:max-w-xl {
+    max-width: var(--komc-container-xl);
+  }
+  .komc\:max-w-xs {
+    max-width: var(--komc-container-xs);
+  }
+  .komc\:min-w-0 {
+    min-width: calc(var(--komc-spacing) * 0);
+  }
   .komc\:shrink-0 {
     flex-shrink: 0;
   }
+  .komc\:grow {
+    flex-grow: 1;
+  }
+  .komc\:grow-0 {
+    flex-grow: 0;
+  }
+  .komc\:basis-full {
+    flex-basis: 100%;
+  }
   .komc\:-translate-x-1\/2 {
     --tw-translate-x: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -230,9 +336,15 @@
   .komc\:grid-cols-4 {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
+  .komc\:flex-col {
+    flex-direction: column;
+  }
   .komc\:items-center {
     align-items: center;
   }
+  .komc\:justify-between {
+    justify-content: space-between;
+  }
   .komc\:justify-center {
     justify-content: center;
   }
@@ -304,9 +416,15 @@
     --tw-border-style: none;
     border-style: none;
   }
+  .komc\:border-black {
+    border-color: var(--komc-color-black);
+  }
   .komc\:border-neutral-200 {
     border-color: var(--komc-color-neutral-200);
   }
+  .komc\:border-red-500 {
+    border-color: var(--komc-color-red-500);
+  }
   .komc\:border-transparent {
     border-color: transparent;
   }
@@ -328,9 +446,6 @@
   .komc\:bg-\[rgb\(95\,95\,96\)\] {
     background-color: rgb(95,95,96);
   }
-  .komc\:bg-black\! {
-    background-color: var(--komc-color-black) !important;
-  }
   .komc\:bg-blue-500 {
     background-color: var(--komc-color-blue-500);
   }
@@ -346,15 +461,21 @@
   .komc\:bg-neutral-100 {
     background-color: var(--komc-color-neutral-100);
   }
+  .komc\:bg-neutral-200 {
+    background-color: var(--komc-color-neutral-200);
+  }
+  .komc\:bg-neutral-300 {
+    background-color: var(--komc-color-neutral-300);
+  }
+  .komc\:bg-neutral-400\! {
+    background-color: var(--komc-color-neutral-400) !important;
+  }
   .komc\:bg-transparent {
     background-color: transparent;
   }
   .komc\:bg-white {
     background-color: var(--komc-color-white);
   }
-  .komc\:p-0 {
-    padding: calc(var(--komc-spacing) * 0);
-  }
   .komc\:p-1 {
     padding: calc(var(--komc-spacing) * 1);
   }
@@ -367,6 +488,12 @@
   .komc\:px-2 {
     padding-inline: calc(var(--komc-spacing) * 2);
   }
+  .komc\:pt-4 {
+    padding-top: calc(var(--komc-spacing) * 4);
+  }
+  .komc\:pl-4 {
+    padding-left: calc(var(--komc-spacing) * 4);
+  }
   .komc\:text-xs {
     font-size: var(--komc-text-xs);
     line-height: var(--tw-leading, var(--komc-text-xs--line-height));
@@ -397,6 +524,11 @@
     --tw-drop-shadow: var(--tw-drop-shadow-size);
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
+  .komc\:transition-all {
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--komc-default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--komc-default-transition-duration));
+  }
   .komc\:transition-colors {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
     transition-timing-function: var(--tw-ease, var(--komc-default-transition-timing-function));
@@ -495,6 +627,13 @@
       }
     }
   }
+  .komc\:hover\:bg-neutral-200 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--komc-color-neutral-200);
+      }
+    }
+  }
   .komc\:focus\:border-neutral-300 {
     &:focus {
       border-color: var(--komc-color-neutral-300);
@@ -520,14 +659,14 @@
       opacity: 50%;
     }
   }
-  .komc\:xl\:p-10 {
+  .komc\:xl\:max-w-full {
     @media (width >= 80rem) {
-      padding: calc(var(--komc-spacing) * 10);
+      max-width: 100%;
     }
   }
-  .komc\:\[\&\>input\]\:m-0 {
-    &>input {
-      margin: calc(var(--komc-spacing) * 0);
+  .komc\:xl\:p-10 {
+    @media (width >= 80rem) {
+      padding: calc(var(--komc-spacing) * 10);
     }
   }
   .komc\:\[\&\>input\]\:h-full {
@@ -540,17 +679,6 @@
       width: 100%;
     }
   }
-  .komc\:\[\&\>input\]\:border-none {
-    &>input {
-      --tw-border-style: none;
-      border-style: none;
-    }
-  }
-  .komc\:\[\&\>input\]\:p-0 {
-    &>input {
-      padding: calc(var(--komc-spacing) * 0);
-    }
-  }
   .komc\:\[\&\>input\]\:outline-none {
     &>input {
       --tw-outline-style: none;
@@ -574,6 +702,22 @@
     }
   }
 }
+@layer base {
+  [data-komc], [data-komc] *, [data-komc] *::before, [data-komc] *::after {
+    margin: 0;
+    padding: 0;
+    border: 0 solid;
+    background-color: transparent;
+    box-sizing: border-box;
+    line-height: 1.5;
+  }
+  button[data-komc] {
+    cursor: pointer;
+    opacity: 1;
+    color: inherit;
+    border-radius: 0;
+  }
+}
 @property --tw-translate-x {
   syntax: "*";
   inherits: false;

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`),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(`embla-carousel-react`);c=e.t(c);let l=require(`react-dom`);function u({className:e,items:t,render:n,...r}){return(0,o.jsx)(`nav`,{"data-komc":!0,className:(0,i.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),...r,children:(0,o.jsx)(`div`,{className:`komc:grid komc:min-h-15`,style:{gridTemplateColumns:`repeat(${t.length}, 1fr)`},children:t.map((e,t)=>(0,o.jsx)(a.default.Fragment,{children:n(e)},t))})})}const d=(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: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}}),f=(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},u)=>(0,o.jsx)(`button`,{ref:u,type:t,"data-komc":!0,className:d({size:n,outline:i,gap:r,rounded:a,variant:s,className:c}),...l,children:e}));var p=f;const m=a.default.createContext(null);function h(){let e=a.default.useContext(m);if(!e)throw Error(`useCarousel must be used within a <Carousel />`);return e}function g({orientation:e=`horizontal`,options:n,setApi:r,plugins:i,className:s,children:l,...u}){let[d,f]=(0,c.default)({...n,axis:e===`horizontal`?`x`:`y`},i),[p,h]=(0,a.useState)(!1),[g,_]=(0,a.useState)(!1),v=(0,a.useCallback)(e=>{e&&(h(e.canScrollPrev()),_(e.canScrollNext()))},[]),y=(0,a.useCallback)(()=>{f?.scrollPrev()},[f]),b=(0,a.useCallback)(()=>{f?.scrollNext()},[f]),x=(0,a.useCallback)(e=>{e.key===`ArrowLeft`?(e.preventDefault(),y()):e.key===`ArrowRight`&&(e.preventDefault(),b())},[y,b]);return(0,a.useEffect)(()=>{!f||!r||r(f)},[f,r]),(0,a.useEffect)(()=>{if(f)return v(f),f.on(`reInit`,v),f.on(`select`,v),()=>{f?.off(`select`,v)}},[f,v]),(0,o.jsx)(m.Provider,{value:{carouselRef:d,api:f,options:n,orientation:e||(n?.axis===`y`?`vertical`:`horizontal`),scrollPrev:y,scrollNext:b,canScrollPrev:p,canScrollNext:g},children:(0,o.jsx)(`div`,{"data-komc":!0,onKeyDownCapture:x,className:t.f(`komc:relative`,s),...u,children:l})})}function _({className:e,...n}){let{carouselRef:r,orientation:i}=h();return(0,o.jsx)(`div`,{ref:r,"data-komc":!0,className:`komc:h-full komc:overflow-hidden`,children:(0,o.jsx)(`div`,{className:t.f(`komc:flex komc:h-full`,i===`horizontal`?`komc:-ml-4`:`komc:-mt-4 komc:flex-col`,e),...n})})}function v({className:e,...n}){let{orientation:r}=h();return(0,o.jsx)(`div`,{"data-komc":!0,className:t.f(`komc:min-w-0 komc:shrink-0 komc:grow-0 komc:basis-full`,r===`horizontal`?`komc:pl-4`:`komc:pt-4`,e),...n})}function y({children:e,className:t,...n}){let{scrollPrev:r,canScrollPrev:a}=h();return(0,o.jsx)(`button`,{type:`button`,"data-komc":!0,disabled:!a,className:(0,i.default)(`komc:w-full`,t),onClick:r,...n,children:e})}function b({children:e,className:t,...n}){let{scrollNext:r,canScrollNext:a}=h();return(0,o.jsx)(`button`,{type:`button`,"data-komc":!0,disabled:!a,className:(0,i.default)(`komc:w-full`,t),onClick:r,...n,children:e})}function x({condition:e,wrapper:t,children:n}){return e?t(n):n}const S=(0,s.cva)(`komc:flex komc:flex-col komc:w-full komc:max-w-7xl 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 C({className:e,children:t,maxWidth:n,...r}){return(0,o.jsx)(`footer`,{"data-komc":!0,className:(0,i.default)(`komc:block komc:w-full komc:h-full`,`komc:bg-white komc:border-t komc:border-neutral-200`,e),...r,children:(0,o.jsx)(`div`,{className:S({maxWidth:n}),children:t})})}const w=(0,s.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 T({children:e,maxWidth:t,size:n,className:r,...a}){return(0,o.jsx)(`header`,{"data-komc":!0,className:(0,i.default)(`komc:w-full komc:sticky komc:top-0 komc:z-1000 komc:bg-white`,`komc:transition-all komc:duration-200`,r),...a,children:(0,o.jsx)(`div`,{className:w({maxWidth:t,size:n}),children:e})})}const E=(0,s.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`}}}),D=(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`,{"data-komc":!0,className:E({size:n,gap:r,outline:i,rounded:a,className:s}),children:[e,(0,o.jsx)(`input`,{ref:l,type:`text`,...c}),t]}));var O=D;const k=(0,s.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 A({children:e,className:t,type:n,maxWidth:r,...i}){return(0,o.jsx)(`div`,{"data-komc":!0,className:k({type:n,maxWidth:r,className:t}),...i,children:e})}const j=(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 M({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`,{"data-komc":!0,className:j({size:e,rounded:t,className:i}),style:{width:s,height:c},...a})}function N({children:e,setOpen:t}){return(0,o.jsx)(`div`,{"data-komc":!0,className:(0,i.default)(`komc:inline-flex komc:shrink-0 komc:justify-center`,`komc:items-center komc:outline-none`),onMouseLeave:()=>t(!1),onMouseOver:()=>t(!0),onFocus:()=>t(!0),onBlur:()=>t(!1),onClick:()=>t(!0),children:e})}const P=(0,s.cva)(t.f(`komc:absolute komc:z-99 komc:w-max komc:max-w-70 komc:p-2 komc:rounded-md`,`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)] komc:text-xs`),{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}}),F=(0,a.forwardRef)(({portal:e,children:t,className:n,placement:r,...i},a)=>(0,o.jsx)(`div`,{ref:a,"data-komc":!0,role:`tooltip`,className:P({portal:e,placement:r,className:n}),...i,children:t}));var I=F;const L=(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`}}),R=({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:L({placement:e,className:t}),style:{transform:`translate(${n?.x}px, ${n?.y}px) ${s}`},...i})};var z=R;const B=24,V=(e,t)=>{let[,n]=e.split(`-`);return n?`${t}-${n}`:t};function H({placement:e,className:t,content:n,open:s,hiddenRef:c,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=c.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(`-`),l=i+n.top,d=a+n.left+n.width/2-r.width/2;switch(o){case`top`:l-=r.height;break;case`bottom`:l+=n.height;break;case`left`:l+=n.height/2-r.height/2,d-=r.width/2+n.width/2;break;case`right`:l+=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`:l+=r.height/2+n.height/2-24;break;case`end`:l-=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:l,left:f}),y({x:d-f,y:0})},50),[m]),x=(0,a.useCallback)((0,r.debounce)(()=>{if(!c.current)return;let{top:t,height:n}=c.current.getBoundingClientRect();h(r=>{let i=e;return t+n>=window.innerHeight?i=V(r,`top`):t<0&&(i=V(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,l.createPortal)((0,o.jsxs)(I,{ref:p,portal:!0,"data-komc":!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)(z,{placement:m,offset:v})]}),document.body):null}const U=(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,"data-komc":!0,className:`komc:flex komc:shrink-0 komc:relative komc:overflow-hidden komc:w-fit komc:h-fit`,children:[(0,o.jsx)(N,{setOpen:d,children:e}),(0,o.jsx)(H,{placement:c,className:s,open:u,content:t,hiddenRef:p,containerRef:f}),(0,o.jsx)(I,{ref:p,role:`presentation`,placement:c,className:(0,i.default)(`komc:opacity-0 komc:invisible`,s),children:(0,o.jsx)(`span`,{children:t})})]})});var W=U;exports.BottomAppBar=u,exports.Button=p,exports.Carousel=g,exports.CarouselItem=v,exports.CarouselNext=b,exports.CarouselPrevious=y,exports.CarouselWrapper=_,exports.ConditionalWrapper=x,exports.Footer=C,exports.Header=T,exports.Input=O,exports.Layout=A,exports.Skeleton=M,exports.Tooltip=W;

package/dist/ui/index.d.cts

@@ -1,14 +1,19 @@
-import * as react4 from "react";
-import React$1, { HTMLAttributes } from "react";
-import * as class_variance_authority_types1 from "class-variance-authority/types";
+import * as react2 from "react";
+import React$1, { ComponentProps, HTMLAttributes } from "react";
+import * as class_variance_authority_types0 from "class-variance-authority/types";
 import { VariantProps } from "class-variance-authority";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import useEmblaCarousel, { UseEmblaCarouselType } from "embla-carousel-react";
+import * as react_jsx_runtime1 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 +22,14 @@ declare function BottomAppBar<T>({
 }: BottomAppBarProps<T>): React$1.ReactNode;
 //#endregion
 //#region src/ui/button/button.d.ts
-declare const classes$2: (props?: ({
+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;
+  gap?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
   outline?: "line" | "solid" | "clear" | "dashed" | "dotted" | null | undefined;
-  rounded?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full" | "none" | "2.5xl" | null | undefined;
+  rounded?: "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full" | "2.5xl" | 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> {
+} & 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
@@ -38,7 +43,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 +55,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 +70,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 +86,100 @@ 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: react2.ForwardRefExoticComponent<ButtonProps & react2.RefAttributes<HTMLButtonElement>>;
+//#endregion
+//#region src/ui/carousel/carousel-context.d.ts
+type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
+interface CarouselProps {
+  options?: CarouselOptions;
+  plugins?: CarouselPlugin;
+  orientation?: 'horizontal' | 'vertical';
+  setApi?: (api: CarouselApi) => void;
+}
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0];
+  api: ReturnType<typeof useEmblaCarousel>[1];
+  scrollPrev: () => void;
+  scrollNext: () => void;
+  canScrollPrev: boolean;
+  canScrollNext: boolean;
+} & CarouselProps;
+//#endregion
+//#region src/ui/carousel/carousel.d.ts
+interface CarouselProps$1 extends ComponentProps<'div'>, CarouselProps {
+  /**
+   * @param orientation - Orientation of the carousel
+   * @default horizontal
+   * @property
+   * - horizontal
+   * - vertical
+   */
+  orientation?: 'horizontal' | 'vertical';
+  /**
+   * @param options - Options of the carousel
+   * @default {}
+   */
+  options?: CarouselProps['options'];
+  /**
+   * @param setApi - Set the API of the carousel
+   * @default undefined
+   */
+  setApi?: CarouselProps['setApi'];
+  /**
+   * @param plugins - Plugins of the carousel
+   * @default []
+   */
+  plugins?: CarouselProps['plugins'];
+}
+declare function Carousel({
+  orientation,
+  options,
+  setApi,
+  plugins,
+  className,
+  children,
+  ...props
+}: CarouselProps$1): react_jsx_runtime1.JSX.Element;
+//#endregion
+//#region src/ui/carousel/carousel-wrapper.d.ts
+declare function CarouselWrapper({
+  className,
+  ...props
+}: React$1.ComponentProps<'div'>): react_jsx_runtime1.JSX.Element;
+//#endregion
+//#region src/ui/carousel/carousel-item.d.ts
+declare function CarouselItem({
+  className,
+  ...props
+}: React$1.ComponentProps<'div'>): react_jsx_runtime1.JSX.Element;
+//#endregion
+//#region src/ui/carousel/carousel-previous.d.ts
+declare function CarouselPrevious({
+  children,
+  className,
+  ...props
+}: React$1.ComponentProps<'button'>): react_jsx_runtime1.JSX.Element;
+//#endregion
+//#region src/ui/carousel/carousel-next.d.ts
+declare function CarouselNext({
+  children,
+  className,
+  ...props
+}: React$1.ComponentProps<'button'>): react_jsx_runtime1.JSX.Element;
 //#endregion
 //#region src/ui/conditional-wrapper/conditional-wrapper.d.ts
 interface ConditionalWrapperProps {
@@ -112,16 +196,103 @@ declare function ConditionalWrapper({
   condition,
   wrapper,
   children
-}: ConditionalWrapperProps): react4.ReactNode;
+}: ConditionalWrapperProps): react2.ReactNode;
+//#endregion
+//#region src/ui/footer/footer.d.ts
+declare const classes$4: (props?: ({
+  maxWidth?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "full" | null | undefined;
+} & class_variance_authority_types0.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_runtime1.JSX.Element;
+//#endregion
+//#region src/ui/header/header.d.ts
+declare const classes$3: (props?: ({
+  maxWidth?: "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "full" | "8xl" | null | undefined;
+  size?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "full" | "8xl" | "4.25xl" | null | undefined;
+} & class_variance_authority_types0.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_runtime1.JSX.Element;
 //#endregion
 //#region src/ui/input/input.d.ts
-declare const classes$1: (props?: ({
+declare const classes$2: (props?: ({
   size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "base" | null | undefined;
-  gap?: "xs" | "sm" | "md" | "lg" | "xl" | "none" | null | undefined;
+  gap?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | 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> {
+  rounded?: "none" | "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;
+} & class_variance_authority_types0.ClassProp) | undefined) => string;
+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 +306,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 +318,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 +331,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,15 +342,52 @@ 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: react2.ForwardRefExoticComponent<InputProps & react2.RefAttributes<HTMLInputElement>>;
+//#endregion
+//#region src/ui/layout/layout.d.ts
+declare const classes$1: (props?: ({
+  type?: "content" | "main" | null | undefined;
+  maxWidth?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full" | 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_runtime1.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;
-} & class_variance_authority_types1.ClassProp) | undefined) => string;
+  size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full" | "square" | null | undefined;
+  rounded?: "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
+} & class_variance_authority_types0.ClassProp) | undefined) => string;
 interface SkeletonProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof classes> {
   /**
    * @param width - Width of the skeleton
@@ -228,7 +436,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,
@@ -237,7 +444,7 @@ declare function Skeleton({
   height,
   className,
   ...props
-}: SkeletonProps): react_jsx_runtime0.JSX.Element;
+}: SkeletonProps): react_jsx_runtime1.JSX.Element;
 //#endregion
 //#region src/ui/tooltip/tooltip-container.d.ts
 type SubPlacement = 'start' | 'end';
@@ -283,9 +490,8 @@ interface TooltipContainerProps extends HTMLAttributes<HTMLDivElement> {
  * @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>>;
+declare const TooltipContainer: react2.ForwardRefExoticComponent<TooltipContainerProps & react2.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, Carousel, type CarouselApi, type CarouselContextProps, CarouselItem, CarouselNext, type CarouselOptions, type CarouselPlugin, CarouselPrevious, type CarouselProps, CarouselWrapper, ConditionalWrapper, type ConditionalWrapperProps, Footer, type FooterProps, Header, type HeaderProps, Input, type InputProps, Layout, type LayoutProps, Skeleton, type SkeletonProps, TooltipContainer as Tooltip, type TooltipContainerProps as TooltipProps };

package/dist/ui/index.d.mts

@@ -1,14 +1,19 @@
-import * as react2 from "react";
-import React$1, { HTMLAttributes } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react3 from "react";
+import React$1, { ComponentProps, HTMLAttributes } from "react";
+import * as react_jsx_runtime6 from "react/jsx-runtime";
 import { VariantProps } from "class-variance-authority";
-import * as class_variance_authority_types0 from "class-variance-authority/types";
+import useEmblaCarousel, { UseEmblaCarouselType } from "embla-carousel-react";
+import * as class_variance_authority_types3 from "class-variance-authority/types";
 
 //#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 +22,14 @@ declare function BottomAppBar<T>({
 }: BottomAppBarProps<T>): React$1.ReactNode;
 //#endregion
 //#region src/ui/button/button.d.ts
-declare const classes$2: (props?: ({
+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;
+  gap?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
   outline?: "line" | "solid" | "clear" | "dashed" | "dotted" | null | undefined;
-  rounded?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full" | "none" | "2.5xl" | null | undefined;
+  rounded?: "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full" | "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$2> {
+} & class_variance_authority_types3.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
@@ -38,7 +43,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 +55,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 +70,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 +86,100 @@ 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: react2.ForwardRefExoticComponent<ButtonProps & react2.RefAttributes<HTMLButtonElement>>;
+declare const Button: react3.ForwardRefExoticComponent<ButtonProps & react3.RefAttributes<HTMLButtonElement>>;
+//#endregion
+//#region src/ui/carousel/carousel-context.d.ts
+type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
+interface CarouselProps {
+  options?: CarouselOptions;
+  plugins?: CarouselPlugin;
+  orientation?: 'horizontal' | 'vertical';
+  setApi?: (api: CarouselApi) => void;
+}
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0];
+  api: ReturnType<typeof useEmblaCarousel>[1];
+  scrollPrev: () => void;
+  scrollNext: () => void;
+  canScrollPrev: boolean;
+  canScrollNext: boolean;
+} & CarouselProps;
+//#endregion
+//#region src/ui/carousel/carousel.d.ts
+interface CarouselProps$1 extends ComponentProps<'div'>, CarouselProps {
+  /**
+   * @param orientation - Orientation of the carousel
+   * @default horizontal
+   * @property
+   * - horizontal
+   * - vertical
+   */
+  orientation?: 'horizontal' | 'vertical';
+  /**
+   * @param options - Options of the carousel
+   * @default {}
+   */
+  options?: CarouselProps['options'];
+  /**
+   * @param setApi - Set the API of the carousel
+   * @default undefined
+   */
+  setApi?: CarouselProps['setApi'];
+  /**
+   * @param plugins - Plugins of the carousel
+   * @default []
+   */
+  plugins?: CarouselProps['plugins'];
+}
+declare function Carousel({
+  orientation,
+  options,
+  setApi,
+  plugins,
+  className,
+  children,
+  ...props
+}: CarouselProps$1): react_jsx_runtime6.JSX.Element;
+//#endregion
+//#region src/ui/carousel/carousel-wrapper.d.ts
+declare function CarouselWrapper({
+  className,
+  ...props
+}: React$1.ComponentProps<'div'>): react_jsx_runtime6.JSX.Element;
+//#endregion
+//#region src/ui/carousel/carousel-item.d.ts
+declare function CarouselItem({
+  className,
+  ...props
+}: React$1.ComponentProps<'div'>): react_jsx_runtime6.JSX.Element;
+//#endregion
+//#region src/ui/carousel/carousel-previous.d.ts
+declare function CarouselPrevious({
+  children,
+  className,
+  ...props
+}: React$1.ComponentProps<'button'>): react_jsx_runtime6.JSX.Element;
+//#endregion
+//#region src/ui/carousel/carousel-next.d.ts
+declare function CarouselNext({
+  children,
+  className,
+  ...props
+}: React$1.ComponentProps<'button'>): react_jsx_runtime6.JSX.Element;
 //#endregion
 //#region src/ui/conditional-wrapper/conditional-wrapper.d.ts
 interface ConditionalWrapperProps {
@@ -112,16 +196,103 @@ declare function ConditionalWrapper({
   condition,
   wrapper,
   children
-}: ConditionalWrapperProps): react2.ReactNode;
+}: ConditionalWrapperProps): react3.ReactNode;
+//#endregion
+//#region src/ui/footer/footer.d.ts
+declare const classes$4: (props?: ({
+  maxWidth?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "full" | null | undefined;
+} & class_variance_authority_types3.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_runtime6.JSX.Element;
+//#endregion
+//#region src/ui/header/header.d.ts
+declare const classes$3: (props?: ({
+  maxWidth?: "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "full" | "8xl" | null | undefined;
+  size?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "full" | "8xl" | "4.25xl" | null | undefined;
+} & class_variance_authority_types3.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_runtime6.JSX.Element;
 //#endregion
 //#region src/ui/input/input.d.ts
-declare const classes$1: (props?: ({
+declare const classes$2: (props?: ({
   size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "base" | null | undefined;
-  gap?: "xs" | "sm" | "md" | "lg" | "xl" | "none" | null | undefined;
+  gap?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | 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$1> {
+  rounded?: "none" | "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;
+} & class_variance_authority_types3.ClassProp) | undefined) => string;
+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 +306,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 +318,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 +331,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,15 +342,52 @@ 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: react2.ForwardRefExoticComponent<InputProps & react2.RefAttributes<HTMLInputElement>>;
+declare const Input: react3.ForwardRefExoticComponent<InputProps & react3.RefAttributes<HTMLInputElement>>;
+//#endregion
+//#region src/ui/layout/layout.d.ts
+declare const classes$1: (props?: ({
+  type?: "content" | "main" | null | undefined;
+  maxWidth?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
+} & class_variance_authority_types3.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_runtime6.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;
-} & class_variance_authority_types0.ClassProp) | undefined) => string;
+  size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full" | "square" | null | undefined;
+  rounded?: "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
+} & class_variance_authority_types3.ClassProp) | undefined) => string;
 interface SkeletonProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof classes> {
   /**
    * @param width - Width of the skeleton
@@ -228,7 +436,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,
@@ -237,7 +444,7 @@ declare function Skeleton({
   height,
   className,
   ...props
-}: SkeletonProps): react_jsx_runtime0.JSX.Element;
+}: SkeletonProps): react_jsx_runtime6.JSX.Element;
 //#endregion
 //#region src/ui/tooltip/tooltip-container.d.ts
 type SubPlacement = 'start' | 'end';
@@ -283,9 +490,8 @@ interface TooltipContainerProps extends HTMLAttributes<HTMLDivElement> {
  * @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: react2.ForwardRefExoticComponent<TooltipContainerProps & react2.RefAttributes<HTMLDivElement>>;
+declare const TooltipContainer: react3.ForwardRefExoticComponent<TooltipContainerProps & react3.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, Carousel, type CarouselApi, type CarouselContextProps, CarouselItem, CarouselNext, type CarouselOptions, type CarouselPlugin, CarouselPrevious, type CarouselProps, CarouselWrapper, ConditionalWrapper, type ConditionalWrapperProps, Footer, type FooterProps, Header, type HeaderProps, Input, type InputProps, Layout, type LayoutProps, Skeleton, type SkeletonProps, TooltipContainer as Tooltip, type TooltipContainerProps as TooltipProps };

package/dist/ui/index.mjs

@@ -1 +1 @@
-import{f as e}from"../util-DCPr_-5a.mjs";import{t}from"../hooks-5I2NBtcY.mjs";import{debounce as n}from"lodash-es";import r from"clsx";import i,{forwardRef as a,useCallback as o,useEffect as s,useMemo as c,useRef as l,useState as u}from"react";import{jsx as d,jsxs as f}from"react/jsx-runtime";import{cva as p}from"class-variance-authority";import{createPortal as m}from"react-dom";function h({className:e,items:t,render:n,...a}){return d(`nav`,{className:r(`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),...a,children:d(`div`,{className:`komc:grid komc:min-h-15 komc:p-0`,style:{gridTemplateColumns:`repeat(${t.length}, 1fr)`},children:t.map((e,t)=>d(i.Fragment,{children:n(e)},t))})})}const g=p(e(`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}});var _=a(({children:e=`button`,type:t=`button`,size:n=`md`,gap:r=`sm`,outline:i=`line`,rounded:a=`sm`,variant:o=`blue`,className:s,...c},l)=>d(`button`,{ref:l,type:t,className:g({size:n,outline:i,gap:r,rounded:a,variant:o,className:s}),...c,children:e}));function v({condition:e,wrapper:t,children:n}){return e?t(n):n}const y=p(e(`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`}}});var b=a(({prefix:e=null,surffix:t=null,size:n=`lg`,gap:r=`xl`,outline:i=`line`,rounded:a=`lg`,className:o,...s},c)=>f(`div`,{className:y({size:n,gap:r,outline:i,rounded:a,className:o}),children:[e,d(`input`,{ref:c,type:`text`,...s}),t]}));const x=p(e(`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 S({size:e,rounded:t,width:n,height:r,className:i,...a}){let o=n?typeof n==`string`?n:`${n}px`:void 0,s=r?typeof r==`string`?r:`${r}px`:void 0;return d(`div`,{className:x({size:e,rounded:t,className:i}),style:{width:o,height:s},...a})}function C({children:e,setOpen:t}){return d(`div`,{className:r(`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 w=p(e(`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}});var T=a(({portal:e,children:t,className:n,placement:r,...i},a)=>d(`div`,{ref:a,role:`tooltip`,className:w({portal:e,placement:r,className:n}),...i,children:t}));const E=p(e(`komc:absolute komc:w-2 komc:h-2 komc:bg-inherit`,`komc:transition-opacity komc:duration-300`),{variants:{placement:{top:e(`komc:top-full komc:-mt-1 komc:left-1/2`),bottom:e(`komc:bottom-full komc:-mb-1 komc:left-1/2`),left:e(`komc:left-full komc:-ml-1 komc:top-1/2`),right:e(`komc:right-full komc:-mr-1 komc:top-1/2`),"top-start":e(`komc:top-full komc:-mt-1 komc:left-5`),"top-end":e(`komc:top-full komc:-mt-1 komc:right-5`),"bottom-start":e(`komc:bottom-full komc:-mb-1 komc:left-5`),"bottom-end":e(`komc:bottom-full komc:-mb-1 komc:right-5`),"left-start":e(`komc:left-full komc:-ml-1 komc:top-3`),"left-end":e(`komc:left-full komc:-ml-1 komc:bottom-3`),"right-start":e(`komc:right-full komc:-mr-1 komc:top-3`),"right-end":e(`komc:right-full komc:-mr-1 komc:bottom-3`)}},defaultVariants:{placement:`top`}});var D=({placement:e,className:t,offset:n,style:r,...i})=>{let a=c(()=>{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 d(`div`,{className:E({placement:e,className:t}),style:{transform:`translate(${n?.x}px, ${n?.y}px) ${a}`},...i})};const O=(e,t)=>{let[,n]=e.split(`-`);return n?`${t}-${n}`:t};function k({placement:e,className:t,content:i,open:a,hiddenRef:c,containerRef:p}){let[h,g]=u(!1),_=l(null),[v,y]=u(e),[b,x]=u({top:0,left:0}),[S,C]=u({x:0,y:0}),w=o(n(()=>{let e=p?.current,t=c.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]=v.split(`-`),l=i+n.top,u=a+n.left+n.width/2-r.width/2;switch(o){case`top`:l-=r.height;break;case`bottom`:l+=n.height;break;case`left`:l+=n.height/2-r.height/2,u-=r.width/2+n.width/2;break;case`right`:l+=n.height/2-r.height/2,u+=r.width/2+n.width/2;break}if([`top`,`bottom`].includes(o))switch(s){case`start`:u+=r.width/2-24;break;case`end`:u-=r.width/2-24;break}if([`left`,`right`].includes(o))switch(s){case`start`:l+=r.height/2+n.height/2-24;break;case`end`:l-=r.height/2+n.height/2-24;break}let d=u,f=window.innerWidth;d+r.width>f-4&&(d=f-r.width-4),d<4&&(d=4),x({top:l,left:d}),C({x:u-d,y:0})},50),[v]),E=o(n(()=>{if(!c.current)return;let{top:t,height:n}=c.current.getBoundingClientRect();y(r=>{let i=e;return t+n>=window.innerHeight?i=O(r,`top`):t<0&&(i=O(r,`bottom`)),i})},50),[e]);return s(()=>(g(!0),E(),window.addEventListener(`scroll`,w,{passive:!0}),window.addEventListener(`resize`,w),window.addEventListener(`scroll`,E,{passive:!0}),window.addEventListener(`resize`,E),()=>{window.removeEventListener(`scroll`,w),window.removeEventListener(`resize`,w),window.removeEventListener(`scroll`,E),window.removeEventListener(`resize`,E)}),[w,E]),s(()=>{h&&w()},[h,w]),h?m(f(T,{ref:_,portal:!0,placement:v,className:r(t,a?`komc:visible komc:opacity-100`:`komc:opacity-0 komc:invisible`),style:{...b},children:[d(`span`,{children:i}),d(D,{placement:v,offset:S})]}),document.body):null}var A=a(({children:e,content:n,defaultOpen:i=!1,className:a,placement:o=`top`},s)=>{let[c,p]=u(i),m=l(null),h=l(null);return t({ref:m,setOpen:p}),f(`div`,{ref:m,className:`komc:flex komc:shrink-0 komc:relative komc:overflow-hidden komc:w-fit komc:h-fit`,children:[d(C,{setOpen:p,children:e}),d(k,{placement:o,className:a,open:c,content:n,hiddenRef:h,containerRef:m}),d(T,{ref:h,role:`presentation`,placement:o,className:r(`komc:opacity-0 komc:invisible`,a),children:d(`span`,{children:n})})]})});export{h as BottomAppBar,_ as Button,v as ConditionalWrapper,b as Input,S as Skeleton,A as Tooltip};
+import{f as e}from"../util-DCPr_-5a.mjs";import{t}from"../hooks-5I2NBtcY.mjs";import{debounce as n}from"lodash-es";import r from"clsx";import i,{forwardRef as a,useCallback as o,useEffect as s,useMemo as c,useRef as l,useState as u}from"react";import{jsx as d,jsxs as f}from"react/jsx-runtime";import{cva as p}from"class-variance-authority";import m from"embla-carousel-react";import{createPortal as h}from"react-dom";function g({className:e,items:t,render:n,...a}){return d(`nav`,{"data-komc":!0,className:r(`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),...a,children:d(`div`,{className:`komc:grid komc:min-h-15`,style:{gridTemplateColumns:`repeat(${t.length}, 1fr)`},children:t.map((e,t)=>d(i.Fragment,{children:n(e)},t))})})}const _=p(e(`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}});var v=a(({children:e=`button`,type:t=`button`,size:n=`md`,gap:r=`sm`,outline:i=`line`,rounded:a=`sm`,variant:o=`blue`,className:s,...c},l)=>d(`button`,{ref:l,type:t,"data-komc":!0,className:_({size:n,outline:i,gap:r,rounded:a,variant:o,className:s}),...c,children:e}));const y=i.createContext(null);function b(){let e=i.useContext(y);if(!e)throw Error(`useCarousel must be used within a <Carousel />`);return e}function x({orientation:t=`horizontal`,options:n,setApi:r,plugins:i,className:a,children:c,...l}){let[f,p]=m({...n,axis:t===`horizontal`?`x`:`y`},i),[h,g]=u(!1),[_,v]=u(!1),b=o(e=>{e&&(g(e.canScrollPrev()),v(e.canScrollNext()))},[]),x=o(()=>{p?.scrollPrev()},[p]),S=o(()=>{p?.scrollNext()},[p]),C=o(e=>{e.key===`ArrowLeft`?(e.preventDefault(),x()):e.key===`ArrowRight`&&(e.preventDefault(),S())},[x,S]);return s(()=>{!p||!r||r(p)},[p,r]),s(()=>{if(p)return b(p),p.on(`reInit`,b),p.on(`select`,b),()=>{p?.off(`select`,b)}},[p,b]),d(y.Provider,{value:{carouselRef:f,api:p,options:n,orientation:t||(n?.axis===`y`?`vertical`:`horizontal`),scrollPrev:x,scrollNext:S,canScrollPrev:h,canScrollNext:_},children:d(`div`,{"data-komc":!0,onKeyDownCapture:C,className:e(`komc:relative`,a),...l,children:c})})}function S({className:t,...n}){let{carouselRef:r,orientation:i}=b();return d(`div`,{ref:r,"data-komc":!0,className:`komc:h-full komc:overflow-hidden`,children:d(`div`,{className:e(`komc:flex komc:h-full`,i===`horizontal`?`komc:-ml-4`:`komc:-mt-4 komc:flex-col`,t),...n})})}function C({className:t,...n}){let{orientation:r}=b();return d(`div`,{"data-komc":!0,className:e(`komc:min-w-0 komc:shrink-0 komc:grow-0 komc:basis-full`,r===`horizontal`?`komc:pl-4`:`komc:pt-4`,t),...n})}function w({children:e,className:t,...n}){let{scrollPrev:i,canScrollPrev:a}=b();return d(`button`,{type:`button`,"data-komc":!0,disabled:!a,className:r(`komc:w-full`,t),onClick:i,...n,children:e})}function T({children:e,className:t,...n}){let{scrollNext:i,canScrollNext:a}=b();return d(`button`,{type:`button`,"data-komc":!0,disabled:!a,className:r(`komc:w-full`,t),onClick:i,...n,children:e})}function E({condition:e,wrapper:t,children:n}){return e?t(n):n}const D=p(`komc:flex komc:flex-col komc:w-full komc:max-w-7xl 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 O({className:e,children:t,maxWidth:n,...i}){return d(`footer`,{"data-komc":!0,className:r(`komc:block komc:w-full komc:h-full`,`komc:bg-white komc:border-t komc:border-neutral-200`,e),...i,children:d(`div`,{className:D({maxWidth:n}),children:t})})}const k=p(e(`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 A({children:e,maxWidth:t,size:n,className:i,...a}){return d(`header`,{"data-komc":!0,className:r(`komc:w-full komc:sticky komc:top-0 komc:z-1000 komc:bg-white`,`komc:transition-all komc:duration-200`,i),...a,children:d(`div`,{className:k({maxWidth:t,size:n}),children:e})})}const j=p(e(`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`}}});var M=a(({prefix:e=null,surffix:t=null,size:n=`lg`,gap:r=`xl`,outline:i=`line`,rounded:a=`lg`,className:o,...s},c)=>f(`div`,{"data-komc":!0,className:j({size:n,gap:r,outline:i,rounded:a,className:o}),children:[e,d(`input`,{ref:c,type:`text`,...s}),t]}));const N=p(`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 P({children:e,className:t,type:n,maxWidth:r,...i}){return d(`div`,{"data-komc":!0,className:N({type:n,maxWidth:r,className:t}),...i,children:e})}const F=p(e(`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 I({size:e,rounded:t,width:n,height:r,className:i,...a}){let o=n?typeof n==`string`?n:`${n}px`:void 0,s=r?typeof r==`string`?r:`${r}px`:void 0;return d(`div`,{"data-komc":!0,className:F({size:e,rounded:t,className:i}),style:{width:o,height:s},...a})}function L({children:e,setOpen:t}){return d(`div`,{"data-komc":!0,className:r(`komc:inline-flex komc:shrink-0 komc:justify-center`,`komc:items-center komc:outline-none`),onMouseLeave:()=>t(!1),onMouseOver:()=>t(!0),onFocus:()=>t(!0),onBlur:()=>t(!1),onClick:()=>t(!0),children:e})}const R=p(e(`komc:absolute komc:z-99 komc:w-max komc:max-w-70 komc:p-2 komc:rounded-md`,`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)] komc:text-xs`),{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}});var z=a(({portal:e,children:t,className:n,placement:r,...i},a)=>d(`div`,{ref:a,"data-komc":!0,role:`tooltip`,className:R({portal:e,placement:r,className:n}),...i,children:t}));const B=p(e(`komc:absolute komc:w-2 komc:h-2 komc:bg-inherit`,`komc:transition-opacity komc:duration-300`),{variants:{placement:{top:e(`komc:top-full komc:-mt-1 komc:left-1/2`),bottom:e(`komc:bottom-full komc:-mb-1 komc:left-1/2`),left:e(`komc:left-full komc:-ml-1 komc:top-1/2`),right:e(`komc:right-full komc:-mr-1 komc:top-1/2`),"top-start":e(`komc:top-full komc:-mt-1 komc:left-5`),"top-end":e(`komc:top-full komc:-mt-1 komc:right-5`),"bottom-start":e(`komc:bottom-full komc:-mb-1 komc:left-5`),"bottom-end":e(`komc:bottom-full komc:-mb-1 komc:right-5`),"left-start":e(`komc:left-full komc:-ml-1 komc:top-3`),"left-end":e(`komc:left-full komc:-ml-1 komc:bottom-3`),"right-start":e(`komc:right-full komc:-mr-1 komc:top-3`),"right-end":e(`komc:right-full komc:-mr-1 komc:bottom-3`)}},defaultVariants:{placement:`top`}});var V=({placement:e,className:t,offset:n,style:r,...i})=>{let a=c(()=>{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 d(`div`,{className:B({placement:e,className:t}),style:{transform:`translate(${n?.x}px, ${n?.y}px) ${a}`},...i})};const H=(e,t)=>{let[,n]=e.split(`-`);return n?`${t}-${n}`:t};function U({placement:e,className:t,content:i,open:a,hiddenRef:c,containerRef:p}){let[m,g]=u(!1),_=l(null),[v,y]=u(e),[b,x]=u({top:0,left:0}),[S,C]=u({x:0,y:0}),w=o(n(()=>{let e=p?.current,t=c.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]=v.split(`-`),l=i+n.top,u=a+n.left+n.width/2-r.width/2;switch(o){case`top`:l-=r.height;break;case`bottom`:l+=n.height;break;case`left`:l+=n.height/2-r.height/2,u-=r.width/2+n.width/2;break;case`right`:l+=n.height/2-r.height/2,u+=r.width/2+n.width/2;break}if([`top`,`bottom`].includes(o))switch(s){case`start`:u+=r.width/2-24;break;case`end`:u-=r.width/2-24;break}if([`left`,`right`].includes(o))switch(s){case`start`:l+=r.height/2+n.height/2-24;break;case`end`:l-=r.height/2+n.height/2-24;break}let d=u,f=window.innerWidth;d+r.width>f-4&&(d=f-r.width-4),d<4&&(d=4),x({top:l,left:d}),C({x:u-d,y:0})},50),[v]),T=o(n(()=>{if(!c.current)return;let{top:t,height:n}=c.current.getBoundingClientRect();y(r=>{let i=e;return t+n>=window.innerHeight?i=H(r,`top`):t<0&&(i=H(r,`bottom`)),i})},50),[e]);return s(()=>(g(!0),T(),window.addEventListener(`scroll`,w,{passive:!0}),window.addEventListener(`resize`,w),window.addEventListener(`scroll`,T,{passive:!0}),window.addEventListener(`resize`,T),()=>{window.removeEventListener(`scroll`,w),window.removeEventListener(`resize`,w),window.removeEventListener(`scroll`,T),window.removeEventListener(`resize`,T)}),[w,T]),s(()=>{m&&w()},[m,w]),m?h(f(z,{ref:_,portal:!0,"data-komc":!0,placement:v,className:r(t,a?`komc:visible komc:opacity-100`:`komc:opacity-0 komc:invisible`),style:{...b},children:[d(`span`,{children:i}),d(V,{placement:v,offset:S})]}),document.body):null}var W=a(({children:e,content:n,defaultOpen:i=!1,className:a,placement:o=`top`},s)=>{let[c,p]=u(i),m=l(null),h=l(null);return t({ref:m,setOpen:p}),f(`div`,{ref:m,"data-komc":!0,className:`komc:flex komc:shrink-0 komc:relative komc:overflow-hidden komc:w-fit komc:h-fit`,children:[d(L,{setOpen:p,children:e}),d(U,{placement:o,className:a,open:c,content:n,hiddenRef:h,containerRef:m}),d(z,{ref:h,role:`presentation`,placement:o,className:r(`komc:opacity-0 komc:invisible`,a),children:d(`span`,{children:n})})]})});export{g as BottomAppBar,v as Button,x as Carousel,C as CarouselItem,T as CarouselNext,w as CarouselPrevious,S as CarouselWrapper,E as ConditionalWrapper,O as Footer,A as Header,M as Input,P as Layout,I as Skeleton,W as Tooltip};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@machinerd/js-module",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
   "description": "",
   "main": "dist/index.mjs",
@@ -52,6 +52,8 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.19",
+    "embla-carousel": "^8.6.0",
+    "embla-carousel-react": "^8.6.0",
     "google-libphonenumber": "^3.2.43",
     "js-cookie": "^3.0.5",
     "lodash-es": "^4.17.21",