@jbpark/ui-kit 1.1.7 → 2.0.1

package/dist/Menu.d.mts

@@ -1,2 +1,2 @@
-import { a as findKey, i as MenuProps, n as Menu, r as MenuItem, t as ClickEventHandler } from "./index-BNeH6gYs.mjs";
-export { ClickEventHandler, MenuItem, MenuProps, Menu as default, findKey };
+import { a as MenuProps, c as buildSelectionMap, i as MenuItem, l as findKey, n as MENU_CLASSNAMES, o as Props, r as Menu, s as SelectionMap, t as ClickEventHandler } from "./index-CbElazGe.mjs";
+export { ClickEventHandler, MENU_CLASSNAMES, MenuItem, MenuProps, Props, SelectionMap, buildSelectionMap, Menu as default, findKey };

package/dist/Menu.mjs

@@ -1,8 +1,8 @@
 'use client';
 
-import { l as Menu_default, u as findKey } from "./src-DBVgtbBS.mjs";
+import { d as buildSelectionMap, f as findKey, l as MENU_CLASSNAMES, u as Menu_default } from "./src-DbD2jnc4.mjs";
 import "./utils-DEenfsJ-.mjs";
 import "./Typography-LYvEW-c8.mjs";
 import "./Reveals-BpnYZJUk.mjs";
 
-export { Menu_default as default, findKey };
+export { MENU_CLASSNAMES, buildSelectionMap, Menu_default as default, findKey };

package/dist/Reveals.d.mts

@@ -1,2 +1,2 @@
-import { a as Reveals, i as Props, n as DELAY, o as Item, r as DURATION, s as ItemProps, t as CASCADE } from "./index-CvYPwbSk.mjs";
+import { a as Reveals, i as Props, n as DELAY, o as Item, r as DURATION, s as ItemProps, t as CASCADE } from "./index-CbaWHQ3Y.mjs";
 export { CASCADE, DELAY, DURATION, Item, ItemProps, Props as RevealsProps, Reveals as default };

package/dist/{index-BNeH6gYs.d.mts → index-CbElazGe.d.mts}

@@ -5,16 +5,14 @@ interface MenuItem {
   label: React.ReactNode;
   key: React.Key;
   type?: string;
-  itemKey?: React.Key;
-  keyPath?: React.Key[];
   path?: string;
   children?: MenuItem[];
 }
 interface Props {
-  fullSize?: boolean;
   mode?: 'horizontal' | 'vertical' | 'inline';
   selectedKeys?: React.Key[];
   defaultSelectedKeys?: React.Key[];
+  selectionMap?: SelectionMap;
   offset?: [number, number];
   inlineOffset?: number;
   classNames?: {
@@ -30,8 +28,9 @@ interface Props {
     label?: React.CSSProperties;
   };
   onClick?: ClickEventHandler;
+  onSelect?: ClickEventHandler;
 }
-interface MenuProps extends Props, Omit<React.HTMLAttributes<HTMLElement>, 'onClick'> {
+interface MenuProps extends Props, Omit<React.HTMLAttributes<HTMLElement>, 'onClick' | 'onSelect'> {
   items?: MenuItem[];
 }
 type ClickEventHandler = (params: {
@@ -40,12 +39,14 @@ type ClickEventHandler = (params: {
   keyPath: React.Key[];
   item: MenuItem;
 }) => void;
-declare function findKey(menu: MenuItem, targetKeys: React.Key[]): boolean;
+declare const MENU_CLASSNAMES: string[];
+type SelectionMap = ReadonlyMap<React.Key, boolean>;
+declare function buildSelectionMap(items: MenuItem[], selectedKeysSet: ReadonlySet<React.Key>): SelectionMap;
+declare function findKey(menu: MenuItem, targetKeys: ReadonlySet<React.Key>): boolean;
 declare const Menu: ({
   items,
   mode,
-  fullSize,
-  defaultSelectedKeys: _defaultSelectedKeys,
+  defaultSelectedKeys,
   selectedKeys: _selectedKeys,
   className,
   classNames,
@@ -53,7 +54,8 @@ declare const Menu: ({
   offset,
   inlineOffset,
   onClick,
+  onSelect: _onSelect,
   ...props
 }: MenuProps) => react_jsx_runtime0.JSX.Element;
 //#endregion
-export { findKey as a, MenuProps as i, Menu as n, MenuItem as r, ClickEventHandler as t };
+export { MenuProps as a, buildSelectionMap as c, MenuItem as i, findKey as l, MENU_CLASSNAMES as n, Props as o, Menu as r, SelectionMap as s, ClickEventHandler as t };

package/dist/{index-CvYPwbSk.d.mts → index-CbaWHQ3Y.d.mts}

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime7 from "react/jsx-runtime";
+import * as react_jsx_runtime8 from "react/jsx-runtime";
 import { MotionProps } from "motion/react";
 
 //#region src/components/molecules/Reveals/Item/index.d.ts
@@ -54,7 +54,7 @@ declare const Item: ({
   transition,
   className,
   ...props
-}: ItemProps) => react_jsx_runtime7.JSX.Element;
+}: ItemProps) => react_jsx_runtime8.JSX.Element;
 //#endregion
 //#region src/components/molecules/Reveals/index.d.ts
 interface Props extends React.HTMLAttributes<HTMLDivElement>, ItemProps {
@@ -79,7 +79,7 @@ declare const Reveals: {
     duration,
     delay,
     ...props
-  }: Props): react_jsx_runtime7.JSX.Element;
+  }: Props): react_jsx_runtime8.JSX.Element;
   Item: ({
     effect,
     children,
@@ -91,7 +91,7 @@ declare const Reveals: {
     transition,
     className,
     ...props
-  }: ItemProps) => react_jsx_runtime7.JSX.Element;
+  }: ItemProps) => react_jsx_runtime8.JSX.Element;
 };
 //#endregion
 export { Reveals as a, Props as i, DELAY as n, Item as o, DURATION as r, ItemProps as s, CASCADE as t };

package/dist/index.d.mts

@@ -1,10 +1,10 @@
 import { t as Typography } from "./index-DP36DulT.mjs";
-import { i as MenuProps, n as Menu } from "./index-BNeH6gYs.mjs";
-import { a as Reveals } from "./index-CvYPwbSk.mjs";
+import { a as MenuProps, r as Menu } from "./index-CbElazGe.mjs";
+import { a as Reveals } from "./index-CbaWHQ3Y.mjs";
 import * as React$2 from "react";
 import React$1, { ChangeEvent, HTMLAttributes, InputHTMLAttributes, MouseEvent } from "react";
 import { VariantProps } from "class-variance-authority";
-import * as react_jsx_runtime19 from "react/jsx-runtime";
+import * as react_jsx_runtime20 from "react/jsx-runtime";
 import * as swiper_react0 from "swiper/react";
 import { SwiperProps } from "swiper/react";
 import "swiper/css";
@@ -20,18 +20,19 @@ declare const buttonVariants: (props?: ({
   variant?: "outline" | "link" | "default" | "destructive" | "secondary" | "ghost" | null | undefined;
   size?: "icon" | "default" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types0.ClassProp) | undefined) => string;
-type Props$22 = React$2.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
+type Props$23 = React$2.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
   asChild?: boolean;
 };
 //#endregion
 //#region src/components/atoms/Button/index.d.ts
 type PresetColors = 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold';
-interface Props$21 extends Omit<Props$22, 'size'> {
+interface Props$22 extends Omit<Props$23, 'size' | 'variant'> {
   icon?: React.ReactNode;
   block?: boolean;
   danger?: boolean;
   disabled?: boolean;
   size?: 'small' | 'medium' | 'large';
+  variant?: 'solid' | 'outlined' | 'dashed' | 'filled' | 'text' | 'link';
   color?: PresetColors | 'default' | 'primary' | 'danger';
   loading?: boolean | {
     icon: React.ReactNode;
@@ -50,7 +51,7 @@ declare const Button: ({
   children,
   onMouseDown,
   ...props
-}: Props$21) => react_jsx_runtime19.JSX.Element;
+}: Props$22) => react_jsx_runtime20.JSX.Element;
 //#endregion
 //#region src/components/atoms/Checkbox/Group/index.d.ts
 type Option = {
@@ -59,7 +60,7 @@ type Option = {
   checked?: boolean;
 };
 type Options = string[] | number[] | boolean[] | Option[];
-interface Props$20 extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+interface Props$21 extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
   options?: Options;
   direction?: string;
   placement?: string;
@@ -69,7 +70,7 @@ interface Props$20 extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'
 //#endregion
 //#region src/components/atoms/Checkbox/index.d.ts
 type OptionValue = string | number | boolean;
-interface Props$19 extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+interface Props$20 extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
   placement?: string;
   checked?: boolean;
   value?: OptionValue;
@@ -90,7 +91,7 @@ declare const Checkbox: {
     checked: _checked,
     onChange: _onChange,
     ...props
-  }: Props$19): react_jsx_runtime19.JSX.Element;
+  }: Props$20): react_jsx_runtime20.JSX.Element;
   Group: ({
     direction,
     placement,
@@ -98,33 +99,33 @@ declare const Checkbox: {
     classNames,
     options: _options,
     onChange
-  }: Props$20) => react_jsx_runtime19.JSX.Element;
+  }: Props$21) => react_jsx_runtime20.JSX.Element;
 };
 //#endregion
 //#region src/components/atoms/FloatButton/BackTop/index.d.ts
-interface Props$18 extends Props$21 {
+interface Props$19 extends Props$22 {
   visibilityHeight?: number;
   onClick?: (e: MouseEvent<HTMLElement>) => void;
 }
 //#endregion
 //#region src/components/atoms/FloatButton/index.d.ts
-interface Props$17 extends Props$21 {}
+interface Props$18 extends Props$22 {}
 declare const FloatButton: {
   ({
     className,
     children,
     ...props
-  }: Props$17): react_jsx_runtime19.JSX.Element;
+  }: Props$18): react_jsx_runtime20.JSX.Element;
   BackTop: ({
     visibilityHeight,
     className,
     onClick,
     ...props
-  }: Props$18) => react_jsx_runtime19.JSX.Element;
+  }: Props$19) => react_jsx_runtime20.JSX.Element;
 };
 //#endregion
 //#region src/components/atoms/Input/Search/index.d.ts
-interface Props$16 extends InputHTMLAttributes<HTMLInputElement> {
+interface Props$17 extends InputHTMLAttributes<HTMLInputElement> {
   allowClear?: boolean;
   onChange: (e: ChangeEvent<HTMLInputElement> | {
     target: {
@@ -138,17 +139,29 @@ interface Props$16 extends InputHTMLAttributes<HTMLInputElement> {
 declare const Input: {
   ({
     ...props
-  }: InputHTMLAttributes<HTMLInputElement>): react_jsx_runtime19.JSX.Element;
-  Search: React$2.ForwardRefExoticComponent<Props$16 & React$2.RefAttributes<HTMLInputElement>>;
+  }: InputHTMLAttributes<HTMLInputElement>): react_jsx_runtime20.JSX.Element;
+  Search: React$2.ForwardRefExoticComponent<Props$17 & React$2.RefAttributes<HTMLInputElement>>;
   TextArea: ({
     className,
     ref,
     ...props
   }: React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
     ref?: React.Ref<HTMLTextAreaElement>;
-  }) => react_jsx_runtime19.JSX.Element;
+  }) => react_jsx_runtime20.JSX.Element;
 };
 //#endregion
+//#region src/components/atoms/Popover/index.d.ts
+interface Props$16 {
+  title?: React.ReactNode;
+  content: React.ReactNode;
+  children: React.ReactNode;
+}
+declare const Popover: ({
+  title,
+  content,
+  children
+}: Props$16) => react_jsx_runtime20.JSX.Element;
+//#endregion
 //#region src/components/atoms/Progress/index.d.ts
 interface Props$15 extends React.HTMLAttributes<HTMLElement> {
   value: number;
@@ -163,7 +176,7 @@ declare const Progress: ({
   className,
   direction,
   classNames
-}: Props$15) => react_jsx_runtime19.JSX.Element;
+}: Props$15) => react_jsx_runtime20.JSX.Element;
 //#endregion
 //#region src/components/atoms/Skeleton/index.d.ts
 interface Props$14 extends React.HTMLAttributes<HTMLDivElement> {
@@ -198,15 +211,15 @@ declare const Skeleton: {
     height,
     children,
     ...props
-  }: Props$14): string | number | bigint | boolean | react_jsx_runtime19.JSX.Element | Iterable<React$2.ReactNode> | Promise<string | number | bigint | boolean | React$2.ReactPortal | React$2.ReactElement<unknown, string | React$2.JSXElementConstructor<any>> | Iterable<React$2.ReactNode> | null | undefined> | null | undefined;
+  }: Props$14): string | number | bigint | boolean | react_jsx_runtime20.JSX.Element | Iterable<React$2.ReactNode> | Promise<string | number | bigint | boolean | React$2.ReactPortal | React$2.ReactElement<unknown, string | React$2.JSXElementConstructor<any>> | Iterable<React$2.ReactNode> | null | undefined> | null | undefined;
   Button: ({
     className,
     ...props
-  }: Props$14) => react_jsx_runtime19.JSX.Element;
+  }: Props$14) => react_jsx_runtime20.JSX.Element;
   Node: ({
     className,
     ...props
-  }: Props$14) => react_jsx_runtime19.JSX.Element;
+  }: Props$14) => react_jsx_runtime20.JSX.Element;
 };
 //#endregion
 //#region src/components/atoms/Spin/index.d.ts
@@ -217,7 +230,7 @@ declare const Spin: ({
   spinning,
   className,
   ...props
-}: Props$13) => react_jsx_runtime19.JSX.Element | null;
+}: Props$13) => react_jsx_runtime20.JSX.Element | null;
 //#endregion
 //#region src/components/atoms/Switch/index.d.ts
 interface Props$12 extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange'> {
@@ -234,7 +247,7 @@ declare const Switch: ({
   className,
   classNames,
   ...props
-}: Props$12) => react_jsx_runtime19.JSX.Element;
+}: Props$12) => react_jsx_runtime20.JSX.Element;
 //#endregion
 //#region src/components/molecules/Card/index.d.ts
 interface Props$11 extends Omit<React.HTMLProps<HTMLDivElement>, 'title'> {
@@ -252,7 +265,7 @@ declare const Card: ({
   classNames,
   variant,
   ...props
-}: Props$11) => react_jsx_runtime19.JSX.Element;
+}: Props$11) => react_jsx_runtime20.JSX.Element;
 //#endregion
 //#region src/components/molecules/Collapse/index.d.ts
 interface Item {
@@ -279,7 +292,7 @@ declare const Collapse: ({
   className,
   classNames,
   defaultActiveKey
-}: Props$10) => react_jsx_runtime19.JSX.Element;
+}: Props$10) => react_jsx_runtime20.JSX.Element;
 //#endregion
 //#region src/components/molecules/Dropdown/index.d.ts
 type ChangeEventHandler = (open: boolean) => void;
@@ -297,7 +310,7 @@ declare const Dropdown: ({
   open: _open,
   onOpenChange,
   ...props
-}: Props$9) => react_jsx_runtime19.JSX.Element;
+}: Props$9) => react_jsx_runtime20.JSX.Element;
 //#endregion
 //#region src/components/molecules/Marquees/Item/index.d.ts
 interface ItemProps {
@@ -327,7 +340,7 @@ declare const Marquees: {
     pauseOnHover,
     autoFill,
     ...props
-  }: Props$7): react_jsx_runtime19.JSX.Element;
+  }: Props$7): react_jsx_runtime20.JSX.Element;
   Item: ({
     width: _width,
     speed,
@@ -335,7 +348,7 @@ declare const Marquees: {
     pause: _pause,
     pauseOnHover,
     children
-  }: Props$8) => react_jsx_runtime19.JSX.Element;
+  }: Props$8) => react_jsx_runtime20.JSX.Element;
 };
 //#endregion
 //#region src/components/molecules/Space/index.d.ts
@@ -366,7 +379,7 @@ declare const Space: ({
   hidden,
   style,
   ...props
-}: Props$6) => react_jsx_runtime19.JSX.Element;
+}: Props$6) => react_jsx_runtime20.JSX.Element;
 //#endregion
 //#region src/components/organisms/Drawer/index.d.ts
 interface Props$5 {
@@ -416,7 +429,7 @@ declare const Drawer: ({
   container,
   onClose,
   ...props
-}: Props$5) => react_jsx_runtime19.JSX.Element | null;
+}: Props$5) => react_jsx_runtime20.JSX.Element | null;
 //#endregion
 //#region src/components/organisms/List/index.d.ts
 interface Props$4<T> extends Omit<React$1.HTMLAttributes<HTMLDivElement>, 'title'> {
@@ -455,12 +468,12 @@ declare const List: {
     classNames,
     renderItem,
     ...props
-  }: Props$4<T>): string | number | bigint | true | react_jsx_runtime19.JSX.Element | Iterable<React$1.ReactNode> | Promise<string | number | bigint | boolean | React$1.ReactPortal | React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>> | Iterable<React$1.ReactNode> | null | undefined>;
+  }: Props$4<T>): string | number | bigint | true | react_jsx_runtime20.JSX.Element | Iterable<React$1.ReactNode> | Promise<string | number | bigint | boolean | React$1.ReactPortal | React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>> | Iterable<React$1.ReactNode> | null | undefined>;
   Item: ({
     children,
     className,
     ...props
-  }: React$1.HTMLAttributes<HTMLDivElement>) => react_jsx_runtime19.JSX.Element;
+  }: React$1.HTMLAttributes<HTMLDivElement>) => react_jsx_runtime20.JSX.Element;
 };
 //#endregion
 //#region src/components/organisms/Modal/index.d.ts
@@ -514,7 +527,7 @@ declare const Modal: {
     onOk,
     onCancel,
     ...props
-  }: Props$3): react_jsx_runtime19.JSX.Element | null;
+  }: Props$3): react_jsx_runtime20.JSX.Element | null;
   destroy(id?: string): void;
   destroyAll(): void;
   info(props: StaticProps): string | undefined;
@@ -543,13 +556,13 @@ declare const Swiper: {
     renderItem,
     loadingClassName,
     ...props
-  }: Props$2<T>): react_jsx_runtime19.JSX.Element;
+  }: Props$2<T>): react_jsx_runtime20.JSX.Element;
   Slide: {
     ({
       children,
       className,
       ...props
-    }: swiper_react0.SwiperSlideProps): react_jsx_runtime19.JSX.Element;
+    }: swiper_react0.SwiperSlideProps): react_jsx_runtime20.JSX.Element;
     displayName: string;
   };
 };
@@ -564,27 +577,27 @@ declare const Layout: {
     children,
     className,
     ...props
-  }: Props): react_jsx_runtime19.JSX.Element;
+  }: Props): react_jsx_runtime20.JSX.Element;
   Content: ({
     children,
     className,
     ...props
-  }: React.HTMLAttributes<HTMLDivElement>) => react_jsx_runtime19.JSX.Element;
+  }: React.HTMLAttributes<HTMLDivElement>) => react_jsx_runtime20.JSX.Element;
   Footer: ({
     children,
     className,
     ...props
-  }: React.HTMLAttributes<HTMLDivElement>) => react_jsx_runtime19.JSX.Element;
+  }: React.HTMLAttributes<HTMLDivElement>) => react_jsx_runtime20.JSX.Element;
   Header: ({
     children,
     className,
     ...props
-  }: Props$1) => react_jsx_runtime19.JSX.Element;
+  }: Props$1) => react_jsx_runtime20.JSX.Element;
   Sider: ({
     children,
     className,
     ...props
-  }: React.HTMLAttributes<HTMLDivElement>) => react_jsx_runtime19.JSX.Element;
+  }: React.HTMLAttributes<HTMLDivElement>) => react_jsx_runtime20.JSX.Element;
 };
 //#endregion
-export { Button, Card, Checkbox, Collapse, Drawer, Dropdown, FloatButton, Input, Layout, List, Marquees, Menu, Modal, Progress, Reveals, Skeleton, Space, Spin, Swiper, Switch, Typography };
+export { Button, Card, Checkbox, Collapse, Drawer, Dropdown, FloatButton, Input, Layout, List, Marquees, Menu, Modal, Popover, Progress, Reveals, Skeleton, Space, Spin, Swiper, Switch, Typography };

package/dist/index.mjs

@@ -1,6 +1,6 @@
-import { _ as Input_default, a as Drawer_default, b as Button_default, c as Dropdown_default, d as Collapse_default, f as Card_default, g as Progress_default, h as Skeleton_default, i as List_default, l as Menu_default, m as Spin_default, n as Swiper_default, o as Space_default, p as Switch_default, r as Modal_default, s as Marquees_default, t as Layout_default, v as FloatButton_default, y as Checkbox_default } from "./src-DBVgtbBS.mjs";
+import { C as Button_default, S as Checkbox_default, _ as Skeleton_default, a as Drawer_default, b as Input_default, c as Dropdown_default, g as Spin_default, h as Switch_default, i as List_default, m as Card_default, n as Swiper_default, o as Space_default, p as Collapse_default, r as Modal_default, s as Marquees_default, t as Layout_default, u as Menu_default, v as Progress_default, x as FloatButton_default, y as Popover_default } from "./src-DbD2jnc4.mjs";
 import "./utils-DEenfsJ-.mjs";
 import { t as Typography_default } from "./Typography-LYvEW-c8.mjs";
 import { i as Reveals_default } from "./Reveals-BpnYZJUk.mjs";
 
-export { Button_default as Button, Card_default as Card, Checkbox_default as Checkbox, Collapse_default as Collapse, Drawer_default as Drawer, Dropdown_default as Dropdown, FloatButton_default as FloatButton, Input_default as Input, Layout_default as Layout, List_default as List, Marquees_default as Marquees, Menu_default as Menu, Modal_default as Modal, Progress_default as Progress, Reveals_default as Reveals, Skeleton_default as Skeleton, Space_default as Space, Spin_default as Spin, Swiper_default as Swiper, Switch_default as Switch, Typography_default as Typography };
+export { Button_default as Button, Card_default as Card, Checkbox_default as Checkbox, Collapse_default as Collapse, Drawer_default as Drawer, Dropdown_default as Dropdown, FloatButton_default as FloatButton, Input_default as Input, Layout_default as Layout, List_default as List, Marquees_default as Marquees, Menu_default as Menu, Modal_default as Modal, Popover_default as Popover, Progress_default as Progress, Reveals_default as Reveals, Skeleton_default as Skeleton, Space_default as Space, Spin_default as Spin, Swiper_default as Swiper, Switch_default as Switch, Typography_default as Typography };

package/dist/output.css

@@ -11,7 +11,6 @@
     --color-yellow-400: oklch(85.2% 0.199 91.936);
     --color-green-400: oklch(79.2% 0.209 151.711);
     --color-blue-400: oklch(70.7% 0.165 254.624);
-    --color-gray-100: oklch(96.7% 0.003 264.542);
     --color-gray-200: oklch(92.8% 0.006 264.531);
     --color-black: #000;
     --color-white: #fff;
@@ -232,12 +231,6 @@
   .inset-0 {
     inset: calc(var(--spacing) * 0);
   }
-  .inset-x-0 {
-    inset-inline: calc(var(--spacing) * 0);
-  }
-  .inset-y-0 {
-    inset-block: calc(var(--spacing) * 0);
-  }
   .top-0 {
     top: calc(var(--spacing) * 0);
   }
@@ -409,9 +402,6 @@
   .h-full {
     height: 100%;
   }
-  .h-screen {
-    height: 100vh;
-  }
   .min-h-\[60px\] {
     min-height: 60px;
   }
@@ -448,18 +438,12 @@
   .w-full {
     width: 100%;
   }
-  .w-screen {
-    width: 100vw;
-  }
   .max-w-\[calc\(100\%-2rem\)\] {
     max-width: calc(100% - 2rem);
   }
   .min-w-80 {
     min-width: calc(var(--spacing) * 80);
   }
-  .min-w-\[180px\] {
-    min-width: 180px;
-  }
   .min-w-\[200px\] {
     min-width: 200px;
   }
@@ -484,8 +468,8 @@
   .basis-0 {
     flex-basis: calc(var(--spacing) * 0);
   }
-  .basis-1\/6 {
-    flex-basis: calc(1/6 * 100%);
+  .origin-\[--radix-popover-content-transform-origin\] {
+    transform-origin: --radix-popover-content-transform-origin;
   }
   .translate-x-\[-50\%\] {
     --tw-translate-x: -50%;
@@ -604,9 +588,6 @@
   .gap-y-0 {
     row-gap: calc(var(--spacing) * 0);
   }
-  .gap-y-4 {
-    row-gap: calc(var(--spacing) * 4);
-  }
   .gap-y-5 {
     row-gap: calc(var(--spacing) * 5);
   }
@@ -669,10 +650,20 @@
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 2px;
   }
+  .border-dashed {
+    --tw-border-style: dashed;
+    border-style: dashed;
+  }
   .border-none {
     --tw-border-style: none;
     border-style: none;
   }
+  .border-\(--btn-border\) {
+    border-color: var(--btn-border);
+  }
+  .border-\[rgb\(var\(--btn-border\)\/0\.5\)\] {
+    border-color: rgb(var(--btn-border)/0.5);
+  }
   .border-current {
     border-color: currentcolor;
   }
@@ -718,15 +709,15 @@
   .bg-destructive {
     background-color: var(--destructive);
   }
-  .bg-gray-100 {
-    background-color: var(--color-gray-100);
-  }
   .bg-inherit {
     background-color: inherit;
   }
   .bg-muted {
     background-color: var(--muted);
   }
+  .bg-popover {
+    background-color: var(--popover);
+  }
   .bg-primary {
     background-color: var(--primary);
   }
@@ -760,9 +751,6 @@
   .p-6 {
     padding: calc(var(--spacing) * 6);
   }
-  .p-8 {
-    padding: calc(var(--spacing) * 8);
-  }
   .px-3 {
     padding-inline: calc(var(--spacing) * 3);
   }
@@ -884,9 +872,6 @@
   .text-nowrap {
     text-wrap: nowrap;
   }
-  .text-wrap {
-    text-wrap: wrap;
-  }
   .break-all {
     word-break: break-all;
   }
@@ -896,6 +881,9 @@
   .whitespace-pre-wrap {
     white-space: pre-wrap;
   }
+  .text-\(--btn-bg\) {
+    color: var(--btn-bg);
+  }
   .text-\(--btn-fg\) {
     color: var(--btn-fg);
   }
@@ -914,6 +902,9 @@
   .text-muted-foreground {
     color: var(--muted-foreground);
   }
+  .text-popover-foreground {
+    color: var(--popover-foreground);
+  }
   .text-primary {
     color: var(--primary);
   }
@@ -1114,6 +1105,26 @@
       }
     }
   }
+  .hover\:bg-muted\/80 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--muted);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--muted) 80%, transparent);
+        }
+      }
+    }
+  }
+  .hover\:bg-primary\/10 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--primary);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--primary) 10%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-primary\/90 {
     &:hover {
       @media (hover: hover) {
@@ -1295,6 +1306,26 @@
       }
     }
   }
+  .data-\[side\=bottom\]\:slide-in-from-top-2 {
+    &[data-side="bottom"] {
+      --tw-enter-translate-y: calc(2*var(--spacing)*-1);
+    }
+  }
+  .data-\[side\=left\]\:slide-in-from-right-2 {
+    &[data-side="left"] {
+      --tw-enter-translate-x: calc(2*var(--spacing));
+    }
+  }
+  .data-\[side\=right\]\:slide-in-from-left-2 {
+    &[data-side="right"] {
+      --tw-enter-translate-x: calc(2*var(--spacing)*-1);
+    }
+  }
+  .data-\[side\=top\]\:slide-in-from-bottom-2 {
+    &[data-side="top"] {
+      --tw-enter-translate-y: calc(2*var(--spacing));
+    }
+  }
   .data-\[state\=checked\]\:translate-x-\[calc\(100\%-2px\)\] {
     &[data-state="checked"] {
       --tw-translate-x: calc(100% - 2px);
@@ -1817,6 +1848,7 @@
 @layer components {
   [data-slot='button'][data-color] {
     --btn-fg: white;
+    --btn-border: var(--btn-bg);
     --btn-bg-hover: var(--btn-bg);
     @supports (color: color-mix(in lab, red, red)) {
       --btn-bg-hover: color-mix(in oklch, var(--btn-bg), black 12%);
@@ -1829,52 +1861,71 @@
   [data-slot='button'][data-color='yellow'], [data-slot='button'][data-color='lime'], [data-slot='button'][data-color='gold'] {
     --btn-fg: black;
   }
+  [data-slot='button'][data-color='default'] {
+    --btn-bg: var(--muted);
+    --btn-border: 107 114 128;
+  }
   [data-slot='button'][data-color='primary'] {
     --btn-bg: var(--primary);
+    --btn-border: var(--primary);
     --btn-fg: var(--primary-foreground);
   }
   [data-slot='button'][data-color='danger'] {
     --btn-bg: var(--destructive);
+    --btn-border: 239 68 68;
     --btn-fg: white;
   }
   [data-slot='button'][data-color='blue'] {
     --btn-bg: #3b82f6;
+    --btn-border: 59 130 246;
   }
   [data-slot='button'][data-color='purple'] {
     --btn-bg: #a855f7;
+    --btn-border: 168 85 247;
   }
   [data-slot='button'][data-color='cyan'] {
     --btn-bg: #06b6d4;
+    --btn-border: 6 182 212;
   }
   [data-slot='button'][data-color='green'] {
     --btn-bg: #22c55e;
+    --btn-border: 34 197 94;
   }
   [data-slot='button'][data-color='magenta'] {
     --btn-bg: #d946ef;
+    --btn-border: 217 70 239;
   }
   [data-slot='button'][data-color='pink'] {
     --btn-bg: #ec4899;
+    --btn-border: 236 72 153;
   }
   [data-slot='button'][data-color='red'] {
     --btn-bg: #ef4444;
+    --btn-border: 239 68 68;
   }
   [data-slot='button'][data-color='orange'] {
     --btn-bg: #f97316;
+    --btn-border: 249 115 22;
   }
   [data-slot='button'][data-color='yellow'] {
     --btn-bg: #eab308;
+    --btn-border: 234 179 8;
   }
   [data-slot='button'][data-color='volcano'] {
     --btn-bg: #ea580c;
+    --btn-border: 234 88 12;
   }
   [data-slot='button'][data-color='geekblue'] {
     --btn-bg: #6366f1;
+    --btn-border: 99 102 241;
   }
   [data-slot='button'][data-color='lime'] {
     --btn-bg: #84cc16;
+    --btn-border: 132 204 22;
   }
   [data-slot='button'][data-color='gold'] {
     --btn-bg: #f59e0b;
+    --btn-border: 245 158 11;
   }
 }
 @property --tw-translate-x {

package/dist/{src-BMCpZppe.css → src-DbBw9pxl.css}

@@ -125,6 +125,7 @@
 @layer components {
   [data-slot='button'][data-color] {
     --btn-fg: white;
+    --btn-border: var(--btn-bg);
     --btn-bg-hover: color-mix(in oklch, var(--btn-bg), black 12%);
     --btn-bg-active: color-mix(in oklch, var(--btn-bg), black 22%);
   }
@@ -135,53 +136,74 @@
     --btn-fg: black;
   }
 
+  [data-slot='button'][data-color='default'] {
+    --btn-bg: var(--muted);
+    --btn-border: 107 114 128;
+  }
+
   [data-slot='button'][data-color='primary'] {
     --btn-bg: var(--primary);
+    --btn-border: var(--primary);
     --btn-fg: var(--primary-foreground);
   }
+
   [data-slot='button'][data-color='danger'] {
     --btn-bg: var(--destructive);
+    --btn-border: 239 68 68;
     --btn-fg: white;
   }
 
   [data-slot='button'][data-color='blue'] {
     --btn-bg: #3b82f6;
+    --btn-border: 59 130 246;
   } /* blue-500 */
   [data-slot='button'][data-color='purple'] {
     --btn-bg: #a855f7;
+    --btn-border: 168 85 247;
   } /* purple-500 */
   [data-slot='button'][data-color='cyan'] {
     --btn-bg: #06b6d4;
+    --btn-border: 6 182 212;
   } /* cyan-500 */
   [data-slot='button'][data-color='green'] {
     --btn-bg: #22c55e;
+    --btn-border: 34 197 94;
   } /* green-500 */
   [data-slot='button'][data-color='magenta'] {
     --btn-bg: #d946ef;
+    --btn-border: 217 70 239;
   } /* fuchsia-500 */
   [data-slot='button'][data-color='pink'] {
     --btn-bg: #ec4899;
+    --btn-border: 236 72 153;
   } /* pink-500 */
   [data-slot='button'][data-color='red'] {
     --btn-bg: #ef4444;
+    --btn-border: 239 68 68;
   } /* red-500 */
   [data-slot='button'][data-color='orange'] {
     --btn-bg: #f97316;
+    --btn-border: 249 115 22;
   } /* orange-500 */
   [data-slot='button'][data-color='yellow'] {
     --btn-bg: #eab308;
+    --btn-border: 234 179 8;
   } /* yellow-500 */
   [data-slot='button'][data-color='volcano'] {
     --btn-bg: #ea580c;
+    --btn-border: 234 88 12;
   } /* orange-600 */
   [data-slot='button'][data-color='geekblue'] {
     --btn-bg: #6366f1;
+    --btn-border: 99 102 241;
   } /* indigo-500 */
   [data-slot='button'][data-color='lime'] {
     --btn-bg: #84cc16;
+    --btn-border: 132 204 22;
   } /* lime-500 */
   [data-slot='button'][data-color='gold'] {
     --btn-bg: #f59e0b;
+    --btn-border: 245 158 11;
   } /* amber-500 */
 }
 

package/dist/{src-DBVgtbBS.mjs → src-DbD2jnc4.mjs}

@@ -2,13 +2,14 @@ import { t as cn } from "./utils-DEenfsJ-.mjs";
 import { t as Typography_default } from "./Typography-LYvEW-c8.mjs";
 import { ArrowUp, Check, ChevronDown, CircleQuestionMark, CircleX, Info, Loader2, LoaderCircle, OctagonAlert, OctagonX, Search, Square, SquareCheck, X, XIcon } from "lucide-react";
 import * as React$1 from "react";
-import React, { Children, createElement, forwardRef, useEffect, useId, useRef, useState } from "react";
+import React, { Children, createElement, forwardRef, useEffect, useId, useMemo, useRef, useState } from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import * as LabelPrimitive from "@radix-ui/react-label";
 import { useIntersectionObserver, useThrottle, useWindowScroll } from "@uidotdev/usehooks";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
 import * as ProgressPrimitive from "@radix-ui/react-progress";
 import * as SwitchPrimitive from "@radix-ui/react-switch";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
@@ -66,9 +67,12 @@ function Button$2({ className, variant, size, asChild = false, ...props }) {
 //#endregion
 //#region src/components/atoms/Button/index.tsx
 const variantClasses = {
-	default: "",
-	secondary: "",
-	ghost: ""
+	solid: "",
+	outlined: cn("border border-[rgb(var(--btn-border)/0.5)]", "bg-background text-foreground", "hover:bg-accent"),
+	dashed: cn("border border-dashed border-[rgb(var(--btn-border)/0.5)]", "bg-background text-foreground", "hover:bg-accent"),
+	filled: cn("bg-muted text-foreground", "hover:bg-muted/80"),
+	text: cn("bg-transparent text-foreground", "hover:bg-accent"),
+	link: cn("bg-transparent text-primary", "underline-offset-4 hover:underline", "hover:bg-primary/10")
 };
 const sizesClasses = {
 	small: "h-6 px-3 text-sm",
@@ -80,20 +84,21 @@ const iconSizes = {
 	medium: "size-8",
 	large: "size-10"
 };
-const Button$1 = ({ icon, className, variant = "default", size = "medium", color = "default", block = false, disabled, loading, danger, children, onMouseDown, ...props }) => {
+const Button$1 = ({ icon, className, variant = "solid", size = "medium", color = "default", block = false, disabled, loading, danger, children, onMouseDown, ...props }) => {
 	const iconOnly = icon && !children;
 	const computedColor = danger ? "danger" : color;
 	const colored = computedColor && computedColor !== "default";
 	return /* @__PURE__ */ jsxs(Button$2, {
-		variant,
 		disabled,
-		"data-color": colored ? computedColor : void 0,
-		className: cn(variantClasses[variant || "default"], "inline-flex items-center justify-center gap-x-2", "rounded-lg", "cursor-pointer", "h-auto py-0", sizesClasses[size || "medium"], iconOnly && iconSizes[size || "medium"], block && "w-full", colored && [
+		variant: "default",
+		"data-color": computedColor,
+		className: cn("inline-flex items-center justify-center gap-x-2", "rounded-lg", "cursor-pointer", "h-auto py-0", "transition-all", variantClasses[variant || "solid"], sizesClasses[size || "medium"], iconOnly && iconSizes[size || "medium"], block && "w-full", colored && (variant === "solid" ? [
 			"bg-(--btn-bg)",
 			"hover:bg-(--btn-bg-hover)",
 			"active:bg-(--btn-bg-active)",
-			"text-(--btn-fg)"
-		], className),
+			"text-(--btn-fg)",
+			"border-(--btn-border)"
+		] : ["text-(--btn-bg)", "border-[rgb(var(--btn-border)/0.5)]"]), className),
 		onMouseDown: (e) => {
 			e.preventDefault();
 			onMouseDown?.(e);
@@ -246,7 +251,7 @@ var BackTop_default = BackTop;
 const FloatButton = ({ className, children, ...props }) => {
 	return /* @__PURE__ */ jsx(Button_default$1, {
 		className: cn("fixed right-5 bottom-5 rounded-full", "bg-white hover:bg-white", "z-50 h-12 w-12", "shadow-md", className),
-		variant: "outline",
+		variant: "outlined",
 		...props,
 		children
 	});
@@ -335,6 +340,44 @@ Input.Search = Search_default;
 Input.TextArea = TextArea_default;
 var Input_default = Input;
 
+//#endregion
+//#region src/core/popover.tsx
+const Popover$1 = PopoverPrimitive.Root;
+const PopoverTrigger = PopoverPrimitive.Trigger;
+const PopoverAnchor = PopoverPrimitive.Anchor;
+const PopoverContent = React$1.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(PopoverPrimitive.Content, {
+	ref,
+	align,
+	sideOffset,
+	className: cn(`bg-popover text-popover-foreground data-[state=open]:animate-in
+        data-[state=closed]:animate-out data-[state=closed]:fade-out-0
+        data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95
+        data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2
+        data-[side=left]:slide-in-from-right-2
+        data-[side=right]:slide-in-from-left-2
+        data-[side=top]:slide-in-from-bottom-2 z-50 w-72
+        origin-[--radix-popover-content-transform-origin] rounded-md border p-4
+        shadow-md outline-none`, className),
+	...props
+}) }));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+//#endregion
+//#region src/components/atoms/Popover/index.tsx
+const Popover = ({ title, content, children }) => {
+	return /* @__PURE__ */ jsxs(Popover$1, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+		asChild: true,
+		children
+	}), /* @__PURE__ */ jsxs(PopoverContent, {
+		align: "start",
+		children: [title && typeof title === "string" ? /* @__PURE__ */ jsx(Typography_default.Title, {
+			level: 5,
+			children: title
+		}) : title, content]
+	})] });
+};
+var Popover_default = Popover;
+
 //#endregion
 //#region src/core/progress.tsx
 const Progress$1 = React$1.forwardRef(({ className, barClassName, barStyle, value, ...props }, ref) => /* @__PURE__ */ jsx(ProgressPrimitive.Root, {
@@ -570,24 +613,7 @@ const Collapse = ({ expandIcon, accordion = false, items: _items = [], className
 var Collapse_default = Collapse;
 
 //#endregion
-//#region src/components/molecules/Menu/index.tsx
-const MENU_CLASSNAMES = [
-	"p-0",
-	"bg-white",
-	"shadow-md",
-	"rounded-md"
-];
-const OPEN_CLASSNAMES = ["underline", "underline-offset-8"];
-const HOVER_CLASSNAMES = ["hover:underline", "hover:underline-offset-8"];
-const OFFSET = [8, 8];
-const INLINE_OFFSET = 16;
-function findKey(menu, targetKeys) {
-	if (targetKeys.includes(menu.key)) return true;
-	if (menu.children && Array.isArray(menu.children)) {
-		for (const child of menu.children) if (findKey(child, targetKeys)) return true;
-	}
-	return false;
-}
+//#region src/components/molecules/Menu/Item/Label/index.tsx
 const Label = ({ children, level = 4, className, ...props }) => {
 	if (typeof children === "string") return /* @__PURE__ */ jsx(Typography_default.Text, {
 		level,
@@ -597,94 +623,39 @@ const Label = ({ children, level = 4, className, ...props }) => {
 	});
 	return children;
 };
-const Item$2 = ({ itemKey = "", keyPath = [], root = false, mode, label, children, selectedKeys = [], fullSize, classNames, styles, offset = OFFSET, inlineOffset = INLINE_OFFSET, onClick, ...props }) => {
+var Label_default = Label;
+
+//#endregion
+//#region src/components/molecules/Menu/Item/index.tsx
+const OFFSET = [8, 8];
+const INLINE_OFFSET = 16;
+const STYLES = {
+	hover: { classes: ["hover:underline", "hover:underline-offset-8"] },
+	open: { classes: ["underline", "underline-offset-8"] }
+};
+const getItemClasses = (root, isHorizontal, isInline, hasChildren, customClasses) => cn("px-4 py-2", "cursor-pointer", "whitespace-nowrap", root && isHorizontal ? "inline-flex" : "flex", ...root ? [
+	"h-full",
+	"rounded-none border-transparent",
+	hasChildren && "hover:border-current",
+	isHorizontal ? "border-b-2" : "border-r-2",
+	isInline && "border-none"
+] : ["rounded-md", ...STYLES.hover.classes], customClasses);
+const Item$2 = ({ itemKey, keyPath, root = false, mode, label, children, selectedKeys = [], selectionMap, classNames, styles, offset = OFFSET, inlineOffset = INLINE_OFFSET, onClick, onSelect, ...props }) => {
 	const [open, setOpen] = useState(false);
-	const [position, setPosition] = useState({
-		top: 0,
-		left: 0
-	});
 	const itemRef = useRef(null);
 	const isHorizontal = mode === "horizontal";
 	const isInline = mode === "inline";
 	const [left, top] = offset;
+	const selected = selectionMap?.get(itemKey) ?? false;
 	const item = {
 		...props,
 		label,
 		key: itemKey,
 		children
 	};
-	const itemClassNames = cn("px-4 py-2", "cursor-pointer", "whitespace-nowrap", root && isHorizontal ? "inline-flex" : "flex", ...root ? [
-		"h-full",
-		"rounded-none border-transparent",
-		!!children?.length && "hover:border-current",
-		isHorizontal ? "border-b-2" : "border-r-2",
-		isInline && "border-none",
-		classNames?.rootItem
-	] : [
-		"rounded-md",
-		...HOVER_CLASSNAMES,
-		classNames?.item
-	]);
-	const childrenContainerClassNames = cn(isInline ? "relative overflow-hidden" : "absolute min-w-[200px]", !isInline && root && isHorizontal ? "left-0 top-full pt-2 pl-0" : !isInline ? "left-full top-0 pl-2 pt-0" : "pl-4", ...fullSize ? [
-		...MENU_CLASSNAMES,
-		"fixed flex justify-center items-start",
-		isHorizontal ? "inset-x-0 w-screen" : "inset-y-0 h-screen"
-	] : []);
-	const childrenContainerStyle = fullSize ? isHorizontal ? {
-		top: position.top,
-		marginTop: top
-	} : {
-		left: position.left,
-		marginLeft: left
-	} : isInline ? { paddingLeft: inlineOffset } : root && isHorizontal ? { paddingTop: top } : { paddingLeft: left };
-	useEffect(() => {
-		if (!itemRef.current) return;
-		const $item = itemRef.current;
-		const onResize = () => {
-			setPosition({
-				top: $item.offsetTop + $item.offsetHeight,
-				left: $item.offsetLeft + $item.offsetWidth
-			});
-		};
-		onResize();
-		window.addEventListener("resize", onResize);
-		return () => window.removeEventListener("resize", onResize);
-	}, []);
-	if (!root && fullSize) return /* @__PURE__ */ jsxs("li", {
-		className: cn("basis-1/6", "min-w-[180px]"),
-		children: [/* @__PURE__ */ jsx("div", {
-			className: cn(itemClassNames, "justify-center"),
-			onClick: (e) => {
-				e.stopPropagation();
-				onClick?.({
-					domEvent: e,
-					key: itemKey,
-					keyPath,
-					item
-				});
-			},
-			children: /* @__PURE__ */ jsx(Label, {
-				className: "font-semibold",
-				children: label
-			})
-		}), /* @__PURE__ */ jsx("ul", { children: children?.map((child) => /* @__PURE__ */ jsx("li", {
-			className: cn(itemClassNames, "justify-center", ...findKey(child, selectedKeys) ? [...OPEN_CLASSNAMES, ...HOVER_CLASSNAMES] : []),
-			onClick: (e) => {
-				e.stopPropagation();
-				onClick?.({
-					domEvent: e,
-					key: child.key,
-					keyPath: [...keyPath, child.key],
-					item: child
-				});
-			},
-			children: /* @__PURE__ */ jsx(Label, {
-				level: 5,
-				className: "text-center text-wrap",
-				children: child.label
-			})
-		}, child.key)) })]
-	});
+	const itemClassNames = getItemClasses(root, isHorizontal, isInline, !!children?.length, root ? classNames?.rootItem : classNames?.item);
+	const childrenContainerClassNames = cn(isInline ? "relative overflow-hidden" : "absolute min-w-[200px]", !isInline && root && isHorizontal ? "left-0 top-full pt-2 pl-0" : !isInline ? "left-full top-0 pl-2 pt-0" : "pl-4");
+	const childrenContainerStyle = isInline ? { paddingLeft: inlineOffset } : root && isHorizontal ? { paddingTop: top } : { paddingLeft: left };
 	return /* @__PURE__ */ jsxs("li", {
 		ref: itemRef,
 		className: cn("group", "relative", root && isHorizontal ? "inline-block" : "block"),
@@ -697,23 +668,29 @@ const Item$2 = ({ itemKey = "", keyPath = [], root = false, mode, label, childre
 			setOpen(false);
 		},
 		children: [/* @__PURE__ */ jsx("div", {
-			className: cn(itemClassNames, ...findKey(item, selectedKeys) ? root ? ["border-current"] : [...OPEN_CLASSNAMES, ...HOVER_CLASSNAMES] : root && !!children?.length ? ["group-hover:border-current"] : []),
+			role: "menuitem",
+			"aria-expanded": children?.length ? open : void 0,
+			"aria-haspopup": children?.length ? "menu" : void 0,
+			"aria-selected": selected,
+			className: cn(itemClassNames, ...selected ? root ? ["border-current"] : [...STYLES.open.classes, ...STYLES.hover.classes] : root && !!children?.length ? ["group-hover:border-current"] : []),
 			style: root ? styles?.rootItem : styles?.item,
 			onClick: (e) => {
 				e.stopPropagation();
 				if (isInline) setOpen(!open);
-				onClick?.({
+				const params = {
 					domEvent: e,
 					key: itemKey,
 					keyPath,
 					item
-				});
+				};
+				onClick?.(params);
+				if (!selected) onSelect?.(params);
 			},
 			children: /* @__PURE__ */ jsxs("div", {
 				className: cn("w-full", "inline-flex items-center justify-between"),
 				children: [
-					/* @__PURE__ */ jsx(Label, {
-						className: cn(classNames?.label, root && classNames?.rootItem, ...findKey(item, selectedKeys) ? root ? [] : [...OPEN_CLASSNAMES, ...HOVER_CLASSNAMES] : []),
+					/* @__PURE__ */ jsx(Label_default, {
+						className: cn(classNames?.label),
 						style: styles?.label,
 						children: label
 					}),
@@ -738,59 +715,85 @@ const Item$2 = ({ itemKey = "", keyPath = [], root = false, mode, label, childre
 			} : { opacity: 0 },
 			transition: { duration: .2 },
 			children: /* @__PURE__ */ jsx("ul", {
-				className: cn(fullSize ? [
-					"h-auto",
-					"flex flex-nowrap gap-y-4",
-					"p-8"
-				] : MENU_CLASSNAMES, isInline && "shadow-none", classNames?.subMenu),
+				className: cn(MENU_CLASSNAMES, isInline && "shadow-none", classNames?.subMenu),
 				style: styles?.subMenu,
 				children: children.map((child) => /* @__PURE__ */ createElement(Item$2, {
 					...child,
 					key: child.key,
 					itemKey: child.key,
 					keyPath: [...keyPath, child.key],
+					selectionMap,
 					mode,
 					selectedKeys,
-					fullSize,
 					classNames,
 					styles,
 					offset,
 					inlineOffset,
-					onClick
+					onClick,
+					onSelect
 				}))
 			})
 		}) })]
 	});
 };
-const Menu = ({ items, mode = "vertical", fullSize = false, defaultSelectedKeys: _defaultSelectedKeys = [], selectedKeys: _selectedKeys = [], className, classNames, styles, offset, inlineOffset, onClick = () => {}, ...props }) => {
-	const [selectedKeys, setSelectedKeys] = useState(_defaultSelectedKeys);
-	useEffect(() => {
-		if (!_defaultSelectedKeys.length) return;
-		setSelectedKeys(_defaultSelectedKeys);
-		return () => setSelectedKeys([]);
-	}, [_defaultSelectedKeys]);
-	useEffect(() => {
-		if (!_selectedKeys.length) return;
-		setSelectedKeys(_selectedKeys);
-		return () => setSelectedKeys([]);
-	}, [_selectedKeys]);
+var Item_default$2 = Item$2;
+
+//#endregion
+//#region src/components/molecules/Menu/index.tsx
+const MENU_CLASSNAMES = [
+	"p-0",
+	"bg-white",
+	"shadow-md",
+	"rounded-md"
+];
+function buildSelectionMap(items, selectedKeysSet) {
+	const map = /* @__PURE__ */ new Map();
+	const dfs = (node) => {
+		const self = selectedKeysSet.has(node.key);
+		const hasSelectedChild = node.children?.some((child) => dfs(child)) ?? false;
+		const isSelected = self || hasSelectedChild;
+		map.set(node.key, isSelected);
+		return isSelected;
+	};
+	items.forEach(dfs);
+	return map;
+}
+function findKey(menu, targetKeys) {
+	if (targetKeys.has(menu.key)) return true;
+	if (menu.children && Array.isArray(menu.children)) {
+		for (const child of menu.children) if (findKey(child, targetKeys)) return true;
+	}
+	return false;
+}
+const Menu = ({ items, mode = "vertical", defaultSelectedKeys = [], selectedKeys: _selectedKeys, className, classNames, styles, offset, inlineOffset, onClick, onSelect: _onSelect, ...props }) => {
+	const isControlled = _selectedKeys !== void 0;
+	const [uncontrolledSelectedKeys, setUncontrolledSelectedKeys] = useState(defaultSelectedKeys ?? []);
+	const selectedKeys = isControlled ? _selectedKeys : uncontrolledSelectedKeys;
+	const selectedKeysSet = useMemo(() => new Set(selectedKeys ?? []), [selectedKeys]);
+	const selectionMap = useMemo(() => buildSelectionMap(items ?? [], selectedKeysSet), [items, selectedKeysSet]);
+	const onSelect = (params) => {
+		if (!isControlled) setUncontrolledSelectedKeys([params.key]);
+		_onSelect?.(params);
+	};
 	return /* @__PURE__ */ jsx("ul", {
+		role: "menu",
 		className: cn(MENU_CLASSNAMES, mode === "horizontal" ? "flex" : "inline-block", className),
 		...props,
-		children: items?.map((item) => /* @__PURE__ */ createElement(Item$2, {
+		children: items?.map((item) => /* @__PURE__ */ createElement(Item_default$2, {
 			root: true,
 			...item,
 			key: item.key,
 			itemKey: item.key,
 			keyPath: [item.key],
 			selectedKeys,
+			selectionMap,
 			mode,
-			fullSize,
 			classNames,
 			styles,
 			offset,
 			inlineOffset,
-			onClick
+			onClick,
+			onSelect
 		}))
 	});
 };
@@ -5033,7 +5036,7 @@ const Modal = ({ open = false, maskClosable = false, closable = false, closeIcon
 						onClick: onOk,
 						children: okText
 					}), /* @__PURE__ */ jsx(Button_default$1, {
-						variant: "outline",
+						variant: "outlined",
 						onClick: onCancel,
 						children: cancelText
 					})] })
@@ -5061,7 +5064,7 @@ const StaticModal = ({ type, title, content, okText = "OK", cancelText = "Cancel
 	const footer = type === "confirm" ? /* @__PURE__ */ jsxs("div", {
 		className: "grid w-full grid-cols-5 gap-x-2",
 		children: [/* @__PURE__ */ jsx(Button_default$1, {
-			variant: "outline",
+			variant: "outlined",
 			className: "col-span-2",
 			onClick: () => closeModal(onCancel),
 			children: cancelText
@@ -5273,4 +5276,4 @@ Layout.Sider = Sider_default;
 var Layout_default = Layout;
 
 //#endregion
-export { Input_default as _, Drawer_default as a, Button_default$1 as b, Dropdown_default as c, Collapse_default as d, Card_default as f, Progress_default as g, Skeleton_default as h, List_default as i, Menu_default as l, Spin_default as m, Swiper_default as n, Space_default as o, Switch_default as p, Modal_default as r, Marquees_default as s, Layout_default as t, findKey as u, FloatButton_default as v, Checkbox_default as y };
+export { Button_default$1 as C, Checkbox_default as S, Skeleton_default as _, Drawer_default as a, Input_default as b, Dropdown_default as c, buildSelectionMap as d, findKey as f, Spin_default as g, Switch_default as h, List_default as i, MENU_CLASSNAMES as l, Card_default as m, Swiper_default as n, Space_default as o, Collapse_default as p, Modal_default as r, Marquees_default as s, Layout_default as t, Menu_default as u, Progress_default as v, FloatButton_default as x, Popover_default as y };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbpark/ui-kit",
-  "version": "1.1.7",
+  "version": "2.0.1",
   "description": "Modern React UI component library built with TypeScript, Tailwind CSS, and Radix UI. Featuring atoms, molecules, organisms and layout templates for building beautiful interfaces.",
   "keywords": [
     "react",
@@ -88,6 +88,7 @@
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-progress": "^1.1.7",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-switch": "^1.2.6",