@machinerd/js-module 0.0.11 → 0.1.0

package/dist/ui/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(`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;

package/dist/ui/index.d.cts

@@ -0,0 +1,291 @@
+import * as react4 from "react";
+import React$1, { HTMLAttributes } from "react";
+import * as class_variance_authority_types1 from "class-variance-authority/types";
+import { VariantProps } from "class-variance-authority";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/ui/bottom-app-bar/bottom-app-bar.d.ts
+interface BottomAppBarProps<T> extends React$1.HTMLAttributes<HTMLElement> {
+  items: T[];
+  render: (item: T) => React$1.ReactNode;
+}
+declare function BottomAppBar<T>({
+  className,
+  items,
+  render,
+  ...props
+}: BottomAppBarProps<T>): React$1.ReactNode;
+//#endregion
+//#region src/ui/button/button.d.ts
+declare const classes$2: (props?: ({
+  size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "base" | null | undefined;
+  gap?: "xs" | "sm" | "md" | "lg" | "xl" | "none" | null | undefined;
+  outline?: "line" | "solid" | "clear" | "dashed" | "dotted" | null | undefined;
+  rounded?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full" | "none" | "2.5xl" | null | undefined;
+  variant?: "default" | "ghost" | "white" | "blue" | "night" | "charcoal" | "slate" | "red" | "yellow" | "black" | null | undefined;
+} & class_variance_authority_types1.ClassProp) | undefined) => string;
+interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'suffix' | 'prefix'>, VariantProps<typeof classes$2> {
+  /**
+   * @param size - Height of the button
+   * @default md - 40px
+   * @property
+   * - xs: 30px
+   * - sm: 32px
+   * - base: 36px
+   * - md: 40px
+   * - lg: 44px
+   * - xl: 48px
+   * - 2xl: 52px
+   * - 3xl: 56px
+   */
+  size?: VariantProps<typeof classes$2>['size'];
+  /**
+   * @param gap - Gap between the button and the content
+   * @default sm - 8px
+   * @property
+   * - none: 0
+   * - xs: 4px
+   * - sm: 8px
+   * - md: 12px
+   * - lg: 16px
+   * - xl: 20px
+   */
+  gap?: VariantProps<typeof classes$2>['gap'];
+  /**
+   * @param rounded - Border radius of the button
+   * @default sm
+   * @property
+   * - none: 0
+   * - sm: 2px
+   * - md: 6px
+   * - lg: 8px
+   * - xl: 12px
+   * - 2xl: 16px
+   * - 2.5xl: 20px
+   * - 3xl: 24px
+   * - full: 100%
+   */
+  rounded?: VariantProps<typeof classes$2>['rounded'];
+  /**
+   * @param variant - Variant of the button
+   * @default blue
+   * @property
+   * - default
+   * - ghost
+   * - white
+   * - blue
+   * - night
+   * - charcoal
+   * - slate
+   * - red
+   * - yellow
+   * - black
+   */
+  variant?: VariantProps<typeof classes$2>['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>>;
+//#endregion
+//#region src/ui/conditional-wrapper/conditional-wrapper.d.ts
+interface ConditionalWrapperProps {
+  condition: boolean;
+  wrapper: (children: React.ReactNode) => React.ReactNode;
+  children: React.ReactNode;
+}
+/**
+ * @param condition - Condition to wrap the children
+ * @param wrapper - Wrapper function
+ * @param children - Children to wrap
+ */
+declare function ConditionalWrapper({
+  condition,
+  wrapper,
+  children
+}: ConditionalWrapperProps): react4.ReactNode;
+//#endregion
+//#region src/ui/input/input.d.ts
+declare const classes$1: (props?: ({
+  size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "base" | null | undefined;
+  gap?: "xs" | "sm" | "md" | "lg" | "xl" | "none" | null | undefined;
+  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> {
+  /**
+   * @param size - Height of the input
+   * @default lg - 44px
+   * @property
+   * - xs: 30px
+   * - sm: 32px
+   * - base: 36px
+   * - md: 40px
+   * - lg: 44px
+   * - xl: 48px
+   * - 2xl: 52px
+   * - 3xl: 56px
+   */
+  size?: VariantProps<typeof classes$1>['size'];
+  /**
+   * @param gap - Gap between the input and the prefix/suffix
+   * @default xl - 20px
+   * @property
+   * - none: 0
+   * - xs: 4px
+   * - sm: 8px
+   * - md: 12px
+   * - lg: 16px
+   * - xl: 20px
+   */
+  gap?: VariantProps<typeof classes$1>['gap'];
+  outline?: VariantProps<typeof classes$1>['outline'];
+  /**
+   * @param rounded - Border radius of the input
+   * @default lg
+   * @property
+   * - none: 0
+   * - sm: 2px
+   * - md: 6px
+   * - lg: 8px
+   * - xl: 12px
+   * - 2xl: 16px
+   */
+  rounded?: VariantProps<typeof classes$1>['rounded'];
+  prefix?: React.ReactNode;
+  surffix?: React.ReactNode;
+}
+/**
+ * @param prefix - Prefix of the input
+ * @param surffix - Surffix of the input
+ * @param size - Size of the input
+ * @param gap - Gap between the input and the prefix/suffix
+ * @param outline - Outline of the input
+ * @param rounded - Border radius of the input
+ * @param className - Class name
+ */
+declare const Input: react4.ForwardRefExoticComponent<InputProps & react4.RefAttributes<HTMLInputElement>>;
+//#endregion
+//#region src/ui/skeleton/skeleton.d.ts
+declare const classes: (props?: ({
+  size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "square" | "full" | null | undefined;
+  rounded?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full" | "none" | null | undefined;
+} & class_variance_authority_types1.ClassProp) | undefined) => string;
+interface SkeletonProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof classes> {
+  /**
+   * @param width - Width of the skeleton
+   * @description string or number, number unit is px
+   * @default 100
+   */
+  width?: string | number;
+  /**
+   * @param height - Height of the skeleton
+   * @description string or number, number unit is px
+   * @default 100
+   */
+  height?: string | number;
+  /**
+   * @param size - Size of the skeleton (height)
+   * @default sm
+   * @property
+   * - xs: 4px
+   * - sm: 8px
+   * - md: 12px
+   * - lg: 16px
+   * - xl: 20px
+   * - 2xl: 24px
+   * - 3xl: 28px
+   * - square: 100%
+   * - full: 100%
+   */
+  size?: VariantProps<typeof classes>['size'];
+  /**
+   * @param rounded - Rounded of the skeleton
+   * @default sm
+   * @property
+   * - none: 0
+   * - sm: 2px
+   * - md: 6px
+   * - lg: 8px
+   * - xl: 12px
+   * - 2xl: 16px
+   * - 3xl: 20px
+   * - full: 100%
+   */
+  rounded?: VariantProps<typeof classes>['rounded'];
+}
+/**
+ * @param size - Size of the skeleton (height)
+ * @param rounded - Rounded of the skeleton
+ * @param width - Width of the skeleton
+ * @param height - Height of the skeleton
+ * @param className - Class name
+ */
+declare function Skeleton({
+  size,
+  rounded,
+  width,
+  height,
+  className,
+  ...props
+}: SkeletonProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/ui/tooltip/tooltip-container.d.ts
+type SubPlacement = 'start' | 'end';
+type MainPlacement = 'top' | 'bottom' | 'left' | 'right';
+type TooltipPlacement = MainPlacement | `${MainPlacement}-${SubPlacement}`;
+interface TooltipContainerProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * @param children - Trigger element
+   */
+  children: React.ReactNode;
+  /**
+   * @param content - Tooltip content
+   */
+  content: string;
+  /**
+   * @param placement - Placement of the tooltip
+   * @default top
+   * @property
+   * - top
+   * - bottom
+   * - left
+   * - right
+   * - top-start
+   * - top-end
+   * - bottom-start
+   * - bottom-end
+   * - left-start
+   * - left-end
+   * - right-start
+   * - right-end
+   */
+  placement?: TooltipPlacement;
+  /**
+   * @param defaultOpen - Default open state of the tooltip
+   * @default false
+   * @property
+   * - true: Open the tooltip
+   * - false: Close the tooltip
+   */
+  defaultOpen?: boolean;
+}
+/**
+ * @param children - Trigger element
+ * @param content - Tooltip content
+ * @param defaultOpen - Default open state of the tooltip
+ * @param className - Class name
+ * @param placement - Placement of the tooltip
+ */
+declare const TooltipContainer: react4.ForwardRefExoticComponent<TooltipContainerProps & react4.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { BottomAppBar, type BottomAppBarProps, Button, type ButtonProps, ConditionalWrapper, type ConditionalWrapperProps, Input, type InputProps, Skeleton, type SkeletonProps, TooltipContainer as Tooltip, type TooltipContainerProps as TooltipProps };

package/dist/ui/index.d.mts

@@ -0,0 +1,291 @@
+import * as react2 from "react";
+import React$1, { HTMLAttributes } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { VariantProps } from "class-variance-authority";
+import * as class_variance_authority_types0 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;
+}
+declare function BottomAppBar<T>({
+  className,
+  items,
+  render,
+  ...props
+}: BottomAppBarProps<T>): React$1.ReactNode;
+//#endregion
+//#region src/ui/button/button.d.ts
+declare const classes$2: (props?: ({
+  size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "base" | null | undefined;
+  gap?: "xs" | "sm" | "md" | "lg" | "xl" | "none" | null | undefined;
+  outline?: "line" | "solid" | "clear" | "dashed" | "dotted" | null | undefined;
+  rounded?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full" | "none" | "2.5xl" | null | undefined;
+  variant?: "default" | "ghost" | "white" | "blue" | "night" | "charcoal" | "slate" | "red" | "yellow" | "black" | null | undefined;
+} & class_variance_authority_types0.ClassProp) | undefined) => string;
+interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'suffix' | 'prefix'>, VariantProps<typeof classes$2> {
+  /**
+   * @param size - Height of the button
+   * @default md - 40px
+   * @property
+   * - xs: 30px
+   * - sm: 32px
+   * - base: 36px
+   * - md: 40px
+   * - lg: 44px
+   * - xl: 48px
+   * - 2xl: 52px
+   * - 3xl: 56px
+   */
+  size?: VariantProps<typeof classes$2>['size'];
+  /**
+   * @param gap - Gap between the button and the content
+   * @default sm - 8px
+   * @property
+   * - none: 0
+   * - xs: 4px
+   * - sm: 8px
+   * - md: 12px
+   * - lg: 16px
+   * - xl: 20px
+   */
+  gap?: VariantProps<typeof classes$2>['gap'];
+  /**
+   * @param rounded - Border radius of the button
+   * @default sm
+   * @property
+   * - none: 0
+   * - sm: 2px
+   * - md: 6px
+   * - lg: 8px
+   * - xl: 12px
+   * - 2xl: 16px
+   * - 2.5xl: 20px
+   * - 3xl: 24px
+   * - full: 100%
+   */
+  rounded?: VariantProps<typeof classes$2>['rounded'];
+  /**
+   * @param variant - Variant of the button
+   * @default blue
+   * @property
+   * - default
+   * - ghost
+   * - white
+   * - blue
+   * - night
+   * - charcoal
+   * - slate
+   * - red
+   * - yellow
+   * - black
+   */
+  variant?: VariantProps<typeof classes$2>['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>>;
+//#endregion
+//#region src/ui/conditional-wrapper/conditional-wrapper.d.ts
+interface ConditionalWrapperProps {
+  condition: boolean;
+  wrapper: (children: React.ReactNode) => React.ReactNode;
+  children: React.ReactNode;
+}
+/**
+ * @param condition - Condition to wrap the children
+ * @param wrapper - Wrapper function
+ * @param children - Children to wrap
+ */
+declare function ConditionalWrapper({
+  condition,
+  wrapper,
+  children
+}: ConditionalWrapperProps): react2.ReactNode;
+//#endregion
+//#region src/ui/input/input.d.ts
+declare const classes$1: (props?: ({
+  size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "base" | null | undefined;
+  gap?: "xs" | "sm" | "md" | "lg" | "xl" | "none" | null | undefined;
+  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> {
+  /**
+   * @param size - Height of the input
+   * @default lg - 44px
+   * @property
+   * - xs: 30px
+   * - sm: 32px
+   * - base: 36px
+   * - md: 40px
+   * - lg: 44px
+   * - xl: 48px
+   * - 2xl: 52px
+   * - 3xl: 56px
+   */
+  size?: VariantProps<typeof classes$1>['size'];
+  /**
+   * @param gap - Gap between the input and the prefix/suffix
+   * @default xl - 20px
+   * @property
+   * - none: 0
+   * - xs: 4px
+   * - sm: 8px
+   * - md: 12px
+   * - lg: 16px
+   * - xl: 20px
+   */
+  gap?: VariantProps<typeof classes$1>['gap'];
+  outline?: VariantProps<typeof classes$1>['outline'];
+  /**
+   * @param rounded - Border radius of the input
+   * @default lg
+   * @property
+   * - none: 0
+   * - sm: 2px
+   * - md: 6px
+   * - lg: 8px
+   * - xl: 12px
+   * - 2xl: 16px
+   */
+  rounded?: VariantProps<typeof classes$1>['rounded'];
+  prefix?: React.ReactNode;
+  surffix?: React.ReactNode;
+}
+/**
+ * @param prefix - Prefix of the input
+ * @param surffix - Surffix of the input
+ * @param size - Size of the input
+ * @param gap - Gap between the input and the prefix/suffix
+ * @param outline - Outline of the input
+ * @param rounded - Border radius of the input
+ * @param className - Class name
+ */
+declare const Input: react2.ForwardRefExoticComponent<InputProps & react2.RefAttributes<HTMLInputElement>>;
+//#endregion
+//#region src/ui/skeleton/skeleton.d.ts
+declare const classes: (props?: ({
+  size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "square" | "full" | null | undefined;
+  rounded?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full" | "none" | null | undefined;
+} & class_variance_authority_types0.ClassProp) | undefined) => string;
+interface SkeletonProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof classes> {
+  /**
+   * @param width - Width of the skeleton
+   * @description string or number, number unit is px
+   * @default 100
+   */
+  width?: string | number;
+  /**
+   * @param height - Height of the skeleton
+   * @description string or number, number unit is px
+   * @default 100
+   */
+  height?: string | number;
+  /**
+   * @param size - Size of the skeleton (height)
+   * @default sm
+   * @property
+   * - xs: 4px
+   * - sm: 8px
+   * - md: 12px
+   * - lg: 16px
+   * - xl: 20px
+   * - 2xl: 24px
+   * - 3xl: 28px
+   * - square: 100%
+   * - full: 100%
+   */
+  size?: VariantProps<typeof classes>['size'];
+  /**
+   * @param rounded - Rounded of the skeleton
+   * @default sm
+   * @property
+   * - none: 0
+   * - sm: 2px
+   * - md: 6px
+   * - lg: 8px
+   * - xl: 12px
+   * - 2xl: 16px
+   * - 3xl: 20px
+   * - full: 100%
+   */
+  rounded?: VariantProps<typeof classes>['rounded'];
+}
+/**
+ * @param size - Size of the skeleton (height)
+ * @param rounded - Rounded of the skeleton
+ * @param width - Width of the skeleton
+ * @param height - Height of the skeleton
+ * @param className - Class name
+ */
+declare function Skeleton({
+  size,
+  rounded,
+  width,
+  height,
+  className,
+  ...props
+}: SkeletonProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/ui/tooltip/tooltip-container.d.ts
+type SubPlacement = 'start' | 'end';
+type MainPlacement = 'top' | 'bottom' | 'left' | 'right';
+type TooltipPlacement = MainPlacement | `${MainPlacement}-${SubPlacement}`;
+interface TooltipContainerProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * @param children - Trigger element
+   */
+  children: React.ReactNode;
+  /**
+   * @param content - Tooltip content
+   */
+  content: string;
+  /**
+   * @param placement - Placement of the tooltip
+   * @default top
+   * @property
+   * - top
+   * - bottom
+   * - left
+   * - right
+   * - top-start
+   * - top-end
+   * - bottom-start
+   * - bottom-end
+   * - left-start
+   * - left-end
+   * - right-start
+   * - right-end
+   */
+  placement?: TooltipPlacement;
+  /**
+   * @param defaultOpen - Default open state of the tooltip
+   * @default false
+   * @property
+   * - true: Open the tooltip
+   * - false: Close the tooltip
+   */
+  defaultOpen?: boolean;
+}
+/**
+ * @param children - Trigger element
+ * @param content - Tooltip content
+ * @param defaultOpen - Default open state of the tooltip
+ * @param className - Class name
+ * @param placement - Placement of the tooltip
+ */
+declare const TooltipContainer: 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 };

package/dist/ui/index.mjs

@@ -0,0 +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};

package/dist/util/index.cjs

@@ -1 +1 @@
-const e=require(`../chunk-Bmb41Sf3.cjs`);let t=require(`js-cookie`);t=e.t(t);let n=require(`query-string`);n=e.t(n);let r=require(`lodash-es`),i=require(`slug`);i=e.t(i);let a=require(`google-libphonenumber`);a=e.t(a);let o=require(`dayjs`);o=e.t(o),require(`dayjs/locale/ko.js`);let s=require(`dayjs/plugin/relativeTime.js`);s=e.t(s);let c=require(`nanoid`);const l=e=>t.default.get(e),u=(e,n,r)=>t.default.set(e,n,r),d=()=>typeof window>`u`?[]:JSON.parse(localStorage.getItem(`search-history`)||`[]`),f=e=>{let t=(0,r.uniq)([e,...d()]).slice(0,10);return localStorage.setItem(`search-history`,JSON.stringify(t)),t},p=e=>{let t=d();return t.splice(e,1),localStorage.setItem(`search-history`,JSON.stringify(t)),t},m=()=>{localStorage.setItem(`search-history`,JSON.stringify([]))},h=e=>e.endsWith(`/search`),g=e=>h(e)?e:`${e}/search`.replace(`//`,`/`),_=e=>e.replace(`/search`,``).replace(`//`,`/`),v=(e,t)=>{let n=new URLSearchParams(e);return n.delete(t),Object.fromEntries(n)},y=a.default.PhoneNumberFormat,b=a.default.PhoneNumberUtil.getInstance();i.default.extend({'"':`-`,"”":`-`,"“":`-`,"•":`----`}),i.default.setLocale(`en`);const x=(e,t=[])=>{if(typeof window>`u`)return``;let{hash:r,search:i}=window.location,a=n.default.parse(i);Object.keys(e).forEach(t=>{e[t]?a[t]=e[t]:delete a[t]});let o={...a};return Object.keys(a).forEach(e=>{t.includes(e)&&delete o[e]}),`?${n.default.stringify(o,{encode:!0})}${r}`},S=(e,t)=>{let n=0;return e%t===0&&(n=e/t),n=Math.ceil(e/t),n<1&&(n=1),n},C=e=>{let t=[...e];for(let e=t.length-1;e>0;e--){let n=Math.floor(Math.random()*(e+1));[t[e],t[n]]=[t[n],t[e]]}return t},w=e=>{let t=document.getElementById(`naverMapLib`);if(!t){let t=document.createElement(`script`);t.src=`https://oapi.map.naver.com/openapi/v3/maps.js?ncpKeyId=ecs1pyoo9b`,t.id=`naverMapLib`,document.body.appendChild(t),t.onload=()=>{e&&e()}}t&&e&&e()},T=(e,t,n)=>t?e===`ko`&&n&&n!==`82`||e!==`ko`&&n?`+${n}-${t.replace(/^0/,``)}`:t:`-`,E=({phone:e,country:t={callingCode:`82`,alpha2Code:`KR`},format:n=y.INTERNATIONAL,locale:r})=>{if(!e||e===`-`)return`-`;try{let i=b.parseAndKeepRawInput(e,t?.alpha2Code||`KR`),a=i.getCountryCode();return r===`ko`&&t?.alpha2Code===`KR`&&a===82?b.format(i,y.NATIONAL):b.format(i,n)}catch{return T(r||`en`,e,t?.callingCode)}},D=(e,...t)=>{let n=`${e}`;return t.forEach(e=>{e&&(n=`${n}-${(0,i.default)(e)}`)}),n},O=e=>{let t=[];e.i18n?.forEach(e=>{e.locale===`en`&&e.name&&t.push(e.name)});let n=e.series?.i18n.find(e=>e.locale===`en`);return n?.name&&t.push(n.name.toLowerCase()),e.stockNo&&t.push(e.stockNo[0]),D(e.id,...t)},k=e=>{let t=e;return t.length>0?t[0].trim():``},A=(e=`en`,t,n)=>{if(!t||!n||t.length<=0)return``;let r=[...t].sort(M);if(e){let t=r.findIndex(t=>t.locale===e);if(t){let e=r.splice(t,1);r.unshift(e[0])}}for(let e of r){let t=e[n];if(!(Array.isArray(t)&&t.length===0)&&t)return t}return``},j=(e,t,n)=>{if(!t||!n||t.length<=0)return``;let r=[...t].sort(M);if(e){let t=r.findIndex(t=>t.locale===e);if(t){let e=r.splice(t,1);r.unshift(e[0])}}let i=``;for(let e of r){let t=e[n];if(t){i=String(t);break}}return i},M=(e,t)=>e.priority<t.priority?-1:e.priority>t.priority?1:0,N=(e,t,n)=>{if(e){let r;r=Array.isArray(e)?e[0]:e;try{return t(r)}catch{return n}}return n},P=(e,t)=>{let{[t]:n,...r}=e;return r},F=(e,t)=>Object.fromEntries(Object.entries(e).filter(([e])=>!t.includes(e))),I=(e,t)=>(0,r.intersection)(e,t).length>0,L=e=>e.split(`:`).pop()?.split(`.`).pop(),R=(e,...t)=>[e,t].flat().join(`.`).replace(`:.`,`.`),z=(e=`en`,t)=>{if(t.length<=0)return`-`;let n=t[0];return n?B(e,n.i18n):`-`},B=(e=`en`,t)=>{if(t.length===0)return``;let n=A(e,t,`address1`)?.replace(`대한민국`,``)||``,r=t.find(t=>t.locale===e)?.address2,i=[n];return e===`ko`?i.push(r):i.unshift(r),i.filter(Boolean).join(`, `).trim()},V=e=>{let t=0;for(let n of e)t+=n.weight;let n=Math.random()*t,r=0;for(let t of e)if(r+=t.weight,n<r)return t;return e[e.length-1]},H=e=>new Promise(t=>setTimeout(t,e));function U(e,t=0){if(e==0)return`0 Bytes`;let n=1024,r=t,i=[`Bytes`,`KB`,`MB`,`GB`,`TB`,`PB`,`EB`,`ZB`,`YB`],a=Math.floor(Math.log(e)/Math.log(n));return parseFloat((e/n**+a).toFixed(r))+` `+i[a]}const W=e=>e.split(`.`).slice(0,-1).join(`.`),G=e=>e.split(`.`).pop(),K=(e,t)=>{let n={directory:``,filename:``,extension:``,filenameWithoutExtension:``},r=e.lastIndexOf(`/`),i=r>=0?e.substring(r+1):e,a=i.lastIndexOf(`.`),o=a>0?i.substring(a+1):``,s=a>0?i.substring(0,a):i;if(n.filename=i,n.extension=o,n.filenameWithoutExtension=s,e.startsWith(`http`)){let r=t?`/static/`:`/media/`,i=e.indexOf(r);if(i!==-1){let t=e.substring(i+r.length),a=t.lastIndexOf(`/`);return n.directory=a===-1?``:t.substring(0,a),n}}return n.directory=r===-1?``:e.substring(0,r),n};o.default.extend(s.default);const q=(e,t=`YYYY-MM-DD`,n=`en`)=>{let r=(0,o.default)(e).locale(n);return(0,o.default)().diff(r,`hour`)<12?r.fromNow():r.format(t)},J=(e,t)=>{let n=[];for(let r=e;r<t;r++)n.push(r);return n},Y=(e,t,n=1)=>{let r=[],i=J(e,t);for(;r.length<n;){let t=Math.ceil(e),n=Math.floor(i.length),a=Math.floor(Math.random()*(n-t))+t,o=i.splice(a,1);r.push(o[0])}return[...r]},X=()=>(0,c.customAlphabet)(`0123456789abcdefghijklmnopqrstuvwxyz`,5)(),Z=e=>{for(let t=0;t<e;t++)console.log(X())};exports.appendSearchPath=g,exports.calcPageCount=S,exports.clearQueryByKey=v,exports.clearSearchPath=_,exports.comparePriorityAsc=M,exports.composeKey=R,exports.deleteAllSearchHistory=m,exports.deleteSearchHistory=p,exports.displayDatetime=q,exports.existLeastOne=I,exports.formatBytes=U,exports.formatI18nNumber=E,exports.genNanoID=X,exports.getCookie=l,exports.getFileExtension=G,exports.getFilename=W,exports.getFirstLocationAddress=z,exports.getFullAddress=B,exports.getI18nKey=L,exports.getI18nValue=j,exports.getI18nValues=A,exports.getModelName=k,exports.getSearchHistory=d,exports.insertSearchHistory=f,exports.isSearchPage=h,exports.link=x,exports.loadExLib=w,exports.parsePath=K,exports.parseQuery=N,exports.printNanoID=Z,exports.productSlugify=O,exports.randomNum=Y,exports.recomposeI18nNumber=T,exports.selectItemByWeight=V,exports.setCookies=u,exports.shuffle=C,exports.sleep=H,exports.slugify=D,exports.withoutProperties=F,exports.withoutProperty=P;
+const e=require(`../util-CDkao6z3.cjs`);exports.appendSearchPath=e.P,exports.calcPageCount=e.d,exports.clearQueryByKey=e.F,exports.clearSearchPath=e.I,exports.cn=e.f,exports.comparePriorityAsc=e.p,exports.composeKey=e.m,exports.deleteAllSearchHistory=e.L,exports.deleteSearchHistory=e.R,exports.displayDatetime=e.o,exports.existLeastOne=e.h,exports.formatBytes=e.s,exports.formatI18nNumber=e.g,exports.genNanoID=e.t,exports.generatePage=e.n,exports.generatePageGroup=e.r,exports.getCookie=e.z,exports.getFileExtension=e.c,exports.getFilename=e.l,exports.getFirstLocationAddress=e._,exports.getFullAddress=e.v,exports.getI18nKey=e.y,exports.getI18nValue=e.b,exports.getI18nValues=e.x,exports.getModelName=e.S,exports.getSearchHistory=e.B,exports.insertSearchHistory=e.V,exports.isSearchPage=e.H,exports.link=e.C,exports.loadExLib=e.w,exports.parsePath=e.u,exports.parseQuery=e.T,exports.printNanoID=e.i,exports.productSlugify=e.E,exports.randomNum=e.a,exports.recomposeI18nNumber=e.D,exports.selectItemByWeight=e.O,exports.setCookies=e.U,exports.shuffle=e.k,exports.sleep=e.A,exports.slugify=e.j,exports.withoutProperties=e.M,exports.withoutProperty=e.N;