@machinerd/js-module 0.1.0 → 0.2.1

package/dist/hooks/index.mjs

@@ -1 +1 @@
-import{n as e,t}from"../hooks-5I2NBtcY.mjs";export{t as useOutsideClick,e as useWindowSize};
+import{n as e,t}from"../hooks-C9M3V-Pb.mjs";export{t as useOutsideClick,e as useWindowSize};

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/client-only/index.cjs

@@ -0,0 +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(`embla-carousel-react`);c=e.t(c);let l=require(`react-dom`);const u=a.default.createContext(null);function d(){let e=a.default.useContext(u);if(!e)throw Error(`useCarousel must be used within a <Carousel />`);return e}function f({orientation:e=`horizontal`,options:n,setApi:r,plugins:i,className:s,children:l,...d}){let[f,p]=(0,c.default)({...n,axis:e===`horizontal`?`x`:`y`},i),[m,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)(()=>{p?.scrollPrev()},[p]),b=(0,a.useCallback)(()=>{p?.scrollNext()},[p]),x=(0,a.useCallback)(e=>{e.key===`ArrowLeft`?(e.preventDefault(),y()):e.key===`ArrowRight`&&(e.preventDefault(),b())},[y,b]);return(0,a.useEffect)(()=>{!p||!r||r(p)},[p,r]),(0,a.useEffect)(()=>{if(p)return v(p),p.on(`reInit`,v),p.on(`select`,v),()=>{p?.off(`select`,v)}},[p,v]),(0,o.jsx)(u.Provider,{value:{carouselRef:f,api:p,options:n,orientation:e||(n?.axis===`y`?`vertical`:`horizontal`),scrollPrev:y,scrollNext:b,canScrollPrev:m,canScrollNext:g},children:(0,o.jsx)(`div`,{"data-komc":!0,onKeyDownCapture:x,className:t.f(`komc:relative`,s),...d,children:l})})}function p({className:e,...n}){let{carouselRef:r,orientation:i}=d();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 m({className:e,...n}){let{orientation:r}=d();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 h({children:e,className:t,...n}){let{scrollPrev:r,canScrollPrev:a}=d();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 g({children:e,className:t,...n}){let{scrollNext:r,canScrollNext:a}=d();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 _({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 v=(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}}),y=(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:v({portal:e,placement:r,className:n}),...i,children:t}));var b=y;const x=(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`}}),S=({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:x({placement:e,className:t}),style:{transform:`translate(${n?.x}px, ${n?.y}px) ${s}`},...i})};var C=S;const w=24,T=(e,t)=>{let[,n]=e.split(`-`);return n?`${t}-${n}`:t};function E({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}),x=(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]),S=(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=T(r,`top`):t<0&&(i=T(r,`bottom`)),i})},50),[e]);return(0,a.useEffect)(()=>(f(!0),S(),window.addEventListener(`scroll`,x,{passive:!0}),window.addEventListener(`resize`,x),window.addEventListener(`scroll`,S,{passive:!0}),window.addEventListener(`resize`,S),()=>{window.removeEventListener(`scroll`,x),window.removeEventListener(`resize`,x),window.removeEventListener(`scroll`,S),window.removeEventListener(`resize`,S)}),[x,S]),(0,a.useEffect)(()=>{d&&x()},[d,x]),d?(0,l.createPortal)((0,o.jsxs)(b,{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)(C,{placement:m,offset:v})]}),document.body):null}const D=(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)(_,{setOpen:d,children:e}),(0,o.jsx)(E,{placement:c,className:s,open:u,content:t,hiddenRef:p,containerRef:f}),(0,o.jsx)(b,{ref:p,role:`presentation`,placement:c,className:(0,i.default)(`komc:opacity-0 komc:invisible`,s),children:(0,o.jsx)(`span`,{children:t})})]})});var O=D;exports.Carousel=f,exports.CarouselItem=m,exports.CarouselNext=g,exports.CarouselPrevious=h,exports.CarouselWrapper=p,exports.Tooltip=O;

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

@@ -0,0 +1,136 @@
+import * as react4 from "react";
+import React$1, { ComponentProps, HTMLAttributes } from "react";
+import useEmblaCarousel, { UseEmblaCarouselType } from "embla-carousel-react";
+import * as react_jsx_runtime4 from "react/jsx-runtime";
+
+//#region src/ui/client-only/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/client-only/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_runtime4.JSX.Element;
+//#endregion
+//#region src/ui/client-only/carousel/carousel-wrapper.d.ts
+declare function CarouselWrapper({
+  className,
+  ...props
+}: React$1.ComponentProps<'div'>): react_jsx_runtime4.JSX.Element;
+//#endregion
+//#region src/ui/client-only/carousel/carousel-item.d.ts
+declare function CarouselItem({
+  className,
+  ...props
+}: React$1.ComponentProps<'div'>): react_jsx_runtime4.JSX.Element;
+//#endregion
+//#region src/ui/client-only/carousel/carousel-previous.d.ts
+declare function CarouselPrevious({
+  children,
+  className,
+  ...props
+}: React$1.ComponentProps<'button'>): react_jsx_runtime4.JSX.Element;
+//#endregion
+//#region src/ui/client-only/carousel/carousel-next.d.ts
+declare function CarouselNext({
+  children,
+  className,
+  ...props
+}: React$1.ComponentProps<'button'>): react_jsx_runtime4.JSX.Element;
+//#endregion
+//#region src/ui/client-only/tooltip/tooltip-container.d.ts
+type SubPlacement = 'start' | 'end';
+type MainPlacement = 'top' | 'bottom' | 'left' | 'right';
+type TooltipPlacement = MainPlacement | `${MainPlacement}-${SubPlacement}`;
+interface TooltipContainerProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * @param children - Trigger element
+   */
+  children: React.ReactNode;
+  /**
+   * @param content - Tooltip content
+   */
+  content: string;
+  /**
+   * @param placement - Placement of the tooltip
+   * @default top
+   * @property
+   * - top
+   * - bottom
+   * - left
+   * - right
+   * - top-start
+   * - top-end
+   * - bottom-start
+   * - bottom-end
+   * - left-start
+   * - left-end
+   * - right-start
+   * - right-end
+   */
+  placement?: TooltipPlacement;
+  /**
+   * @param defaultOpen - Default open state of the tooltip
+   * @default false
+   * @property
+   * - true: Open the tooltip
+   * - false: Close the tooltip
+   */
+  defaultOpen?: boolean;
+}
+/**
+ * @param children - Trigger element
+ * @param content - Tooltip content
+ * @param defaultOpen - Default open state of the tooltip
+ * @param placement - Placement of the tooltip
+ */
+declare const TooltipContainer: react4.ForwardRefExoticComponent<TooltipContainerProps & react4.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Carousel, type CarouselApi, type CarouselContextProps, CarouselItem, CarouselNext, type CarouselOptions, type CarouselPlugin, CarouselPrevious, type CarouselProps, CarouselWrapper, TooltipContainer as Tooltip, type TooltipContainerProps as TooltipProps };

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

@@ -0,0 +1,136 @@
+import * as react0 from "react";
+import React$1, { ComponentProps, HTMLAttributes } from "react";
+import * as react_jsx_runtime3 from "react/jsx-runtime";
+import useEmblaCarousel, { UseEmblaCarouselType } from "embla-carousel-react";
+
+//#region src/ui/client-only/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/client-only/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_runtime3.JSX.Element;
+//#endregion
+//#region src/ui/client-only/carousel/carousel-wrapper.d.ts
+declare function CarouselWrapper({
+  className,
+  ...props
+}: React$1.ComponentProps<'div'>): react_jsx_runtime3.JSX.Element;
+//#endregion
+//#region src/ui/client-only/carousel/carousel-item.d.ts
+declare function CarouselItem({
+  className,
+  ...props
+}: React$1.ComponentProps<'div'>): react_jsx_runtime3.JSX.Element;
+//#endregion
+//#region src/ui/client-only/carousel/carousel-previous.d.ts
+declare function CarouselPrevious({
+  children,
+  className,
+  ...props
+}: React$1.ComponentProps<'button'>): react_jsx_runtime3.JSX.Element;
+//#endregion
+//#region src/ui/client-only/carousel/carousel-next.d.ts
+declare function CarouselNext({
+  children,
+  className,
+  ...props
+}: React$1.ComponentProps<'button'>): react_jsx_runtime3.JSX.Element;
+//#endregion
+//#region src/ui/client-only/tooltip/tooltip-container.d.ts
+type SubPlacement = 'start' | 'end';
+type MainPlacement = 'top' | 'bottom' | 'left' | 'right';
+type TooltipPlacement = MainPlacement | `${MainPlacement}-${SubPlacement}`;
+interface TooltipContainerProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * @param children - Trigger element
+   */
+  children: React.ReactNode;
+  /**
+   * @param content - Tooltip content
+   */
+  content: string;
+  /**
+   * @param placement - Placement of the tooltip
+   * @default top
+   * @property
+   * - top
+   * - bottom
+   * - left
+   * - right
+   * - top-start
+   * - top-end
+   * - bottom-start
+   * - bottom-end
+   * - left-start
+   * - left-end
+   * - right-start
+   * - right-end
+   */
+  placement?: TooltipPlacement;
+  /**
+   * @param defaultOpen - Default open state of the tooltip
+   * @default false
+   * @property
+   * - true: Open the tooltip
+   * - false: Close the tooltip
+   */
+  defaultOpen?: boolean;
+}
+/**
+ * @param children - Trigger element
+ * @param content - Tooltip content
+ * @param defaultOpen - Default open state of the tooltip
+ * @param placement - Placement of the tooltip
+ */
+declare const TooltipContainer: react0.ForwardRefExoticComponent<TooltipContainerProps & react0.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Carousel, type CarouselApi, type CarouselContextProps, CarouselItem, CarouselNext, type CarouselOptions, type CarouselPlugin, CarouselPrevious, type CarouselProps, CarouselWrapper, TooltipContainer as Tooltip, type TooltipContainerProps as TooltipProps };

package/dist/ui/client-only/index.mjs

@@ -0,0 +1 @@
+import{f as e}from"../../util-BrmjOcya.mjs";import{t}from"../../hooks-C9M3V-Pb.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";const g=i.createContext(null);function _(){let e=i.useContext(g);if(!e)throw Error(`useCarousel must be used within a <Carousel />`);return e}function v({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,_]=u(!1),[v,y]=u(!1),b=o(e=>{e&&(_(e.canScrollPrev()),y(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(g.Provider,{value:{carouselRef:f,api:p,options:n,orientation:t||(n?.axis===`y`?`vertical`:`horizontal`),scrollPrev:x,scrollNext:S,canScrollPrev:h,canScrollNext:v},children:d(`div`,{"data-komc":!0,onKeyDownCapture:C,className:e(`komc:relative`,a),...l,children:c})})}function y({className:t,...n}){let{carouselRef:r,orientation:i}=_();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 b({className:t,...n}){let{orientation:r}=_();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 x({children:e,className:t,...n}){let{scrollPrev:i,canScrollPrev:a}=_();return d(`button`,{type:`button`,"data-komc":!0,disabled:!a,className:r(`komc:w-full`,t),onClick:i,...n,children:e})}function S({children:e,className:t,...n}){let{scrollNext:i,canScrollNext:a}=_();return d(`button`,{type:`button`,"data-komc":!0,disabled:!a,className:r(`komc:w-full`,t),onClick:i,...n,children:e})}function C({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 w=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 T=a(({portal:e,children:t,className:n,placement:r,...i},a)=>d(`div`,{ref:a,"data-komc":!0,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[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]),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(()=>{m&&w()},[m,w]),m?h(f(T,{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(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,"data-komc":!0,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{v as Carousel,b as CarouselItem,S as CarouselNext,x as CarouselPrevious,y as CarouselWrapper,A as Tooltip};