@jbpark/ui-kit 1.1.6 → 2.0.0

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-B9mWYXv2.mjs";
+import { a as findKey, i as MenuProps, n as Menu, r as MenuItem, t as ClickEventHandler } from "./index-BO7hcWjo.mjs";
 export { ClickEventHandler, MenuItem, MenuProps, Menu as default, findKey };

package/dist/Menu.mjs

@@ -1,6 +1,6 @@
 'use client';
 
-import { l as Menu_default, u as findKey } from "./src-DsjrAVBb.mjs";
+import { l as Menu_default, u as findKey } from "./src-C3CveHCK.mjs";
 import "./utils-DEenfsJ-.mjs";
 import "./Typography-LYvEW-c8.mjs";
 import "./Reveals-BpnYZJUk.mjs";

package/dist/{index-B9mWYXv2.d.mts → index-BO7hcWjo.d.mts}

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime4 from "react/jsx-runtime";
+import * as react_jsx_runtime6 from "react/jsx-runtime";
 
 //#region src/components/molecules/Menu/index.d.ts
 interface MenuItem {
@@ -54,6 +54,6 @@ declare const Menu: ({
   inlineOffset,
   onClick,
   ...props
-}: MenuProps) => react_jsx_runtime4.JSX.Element;
+}: MenuProps) => react_jsx_runtime6.JSX.Element;
 //#endregion
 export { findKey as a, MenuProps as i, Menu as n, MenuItem as r, ClickEventHandler as t };

package/dist/index.d.mts

@@ -1,10 +1,10 @@
 import { t as Typography } from "./index-BqaluEQ4.mjs";
-import { i as MenuProps, n as Menu } from "./index-B9mWYXv2.mjs";
+import { i as MenuProps, n as Menu } from "./index-BO7hcWjo.mjs";
 import { a as Reveals } from "./index-DS-PGSIg.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_runtime18 from "react/jsx-runtime";
 import * as swiper_react0 from "swiper/react";
 import { SwiperProps } from "swiper/react";
 import "swiper/css";
@@ -18,7 +18,7 @@ import { SwiperOptions } from "swiper/types";
 //#region src/core/button.d.ts
 declare const buttonVariants: (props?: ({
   variant?: "outline" | "link" | "default" | "destructive" | "secondary" | "ghost" | null | undefined;
-  size?: "icon" | "default" | "sm" | "lg" | null | undefined;
+  size?: "default" | "icon" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types0.ClassProp) | undefined) => string;
 type Props$22 = React$2.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
   asChild?: boolean;
@@ -26,12 +26,13 @@ type Props$22 = React$2.ComponentProps<'button'> & VariantProps<typeof buttonVar
 //#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$21 extends Omit<Props$22, '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$21) => react_jsx_runtime18.JSX.Element;
 //#endregion
 //#region src/components/atoms/Checkbox/Group/index.d.ts
 type Option = {
@@ -90,7 +91,7 @@ declare const Checkbox: {
     checked: _checked,
     onChange: _onChange,
     ...props
-  }: Props$19): react_jsx_runtime19.JSX.Element;
+  }: Props$19): react_jsx_runtime18.JSX.Element;
   Group: ({
     direction,
     placement,
@@ -98,7 +99,7 @@ declare const Checkbox: {
     classNames,
     options: _options,
     onChange
-  }: Props$20) => react_jsx_runtime19.JSX.Element;
+  }: Props$20) => react_jsx_runtime18.JSX.Element;
 };
 //#endregion
 //#region src/components/atoms/FloatButton/BackTop/index.d.ts
@@ -114,13 +115,13 @@ declare const FloatButton: {
     className,
     children,
     ...props
-  }: Props$17): react_jsx_runtime19.JSX.Element;
+  }: Props$17): react_jsx_runtime18.JSX.Element;
   BackTop: ({
     visibilityHeight,
     className,
     onClick,
     ...props
-  }: Props$18) => react_jsx_runtime19.JSX.Element;
+  }: Props$18) => react_jsx_runtime18.JSX.Element;
 };
 //#endregion
 //#region src/components/atoms/Input/Search/index.d.ts
@@ -138,7 +139,7 @@ interface Props$16 extends InputHTMLAttributes<HTMLInputElement> {
 declare const Input: {
   ({
     ...props
-  }: InputHTMLAttributes<HTMLInputElement>): react_jsx_runtime19.JSX.Element;
+  }: InputHTMLAttributes<HTMLInputElement>): react_jsx_runtime18.JSX.Element;
   Search: React$2.ForwardRefExoticComponent<Props$16 & React$2.RefAttributes<HTMLInputElement>>;
   TextArea: ({
     className,
@@ -146,7 +147,7 @@ declare const Input: {
     ...props
   }: React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
     ref?: React.Ref<HTMLTextAreaElement>;
-  }) => react_jsx_runtime19.JSX.Element;
+  }) => react_jsx_runtime18.JSX.Element;
 };
 //#endregion
 //#region src/components/atoms/Progress/index.d.ts
@@ -163,7 +164,7 @@ declare const Progress: ({
   className,
   direction,
   classNames
-}: Props$15) => react_jsx_runtime19.JSX.Element;
+}: Props$15) => react_jsx_runtime18.JSX.Element;
 //#endregion
 //#region src/components/atoms/Skeleton/index.d.ts
 interface Props$14 extends React.HTMLAttributes<HTMLDivElement> {
@@ -198,15 +199,15 @@ declare const Skeleton: {
     height,
     children,
     ...props
-  }: Props$14): string | number | bigint | boolean | 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> | react_jsx_runtime19.JSX.Element | null | undefined;
+  }: Props$14): string | number | bigint | boolean | 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> | react_jsx_runtime18.JSX.Element | null | undefined;
   Button: ({
     className,
     ...props
-  }: Props$14) => react_jsx_runtime19.JSX.Element;
+  }: Props$14) => react_jsx_runtime18.JSX.Element;
   Node: ({
     className,
     ...props
-  }: Props$14) => react_jsx_runtime19.JSX.Element;
+  }: Props$14) => react_jsx_runtime18.JSX.Element;
 };
 //#endregion
 //#region src/components/atoms/Spin/index.d.ts
@@ -217,7 +218,7 @@ declare const Spin: ({
   spinning,
   className,
   ...props
-}: Props$13) => react_jsx_runtime19.JSX.Element | null;
+}: Props$13) => react_jsx_runtime18.JSX.Element | null;
 //#endregion
 //#region src/components/atoms/Switch/index.d.ts
 interface Props$12 extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange'> {
@@ -234,7 +235,7 @@ declare const Switch: ({
   className,
   classNames,
   ...props
-}: Props$12) => react_jsx_runtime19.JSX.Element;
+}: Props$12) => react_jsx_runtime18.JSX.Element;
 //#endregion
 //#region src/components/molecules/Card/index.d.ts
 interface Props$11 extends Omit<React.HTMLProps<HTMLDivElement>, 'title'> {
@@ -252,7 +253,7 @@ declare const Card: ({
   classNames,
   variant,
   ...props
-}: Props$11) => react_jsx_runtime19.JSX.Element;
+}: Props$11) => react_jsx_runtime18.JSX.Element;
 //#endregion
 //#region src/components/molecules/Collapse/index.d.ts
 interface Item {
@@ -279,7 +280,7 @@ declare const Collapse: ({
   className,
   classNames,
   defaultActiveKey
-}: Props$10) => react_jsx_runtime19.JSX.Element;
+}: Props$10) => react_jsx_runtime18.JSX.Element;
 //#endregion
 //#region src/components/molecules/Dropdown/index.d.ts
 type ChangeEventHandler = (open: boolean) => void;
@@ -297,7 +298,7 @@ declare const Dropdown: ({
   open: _open,
   onOpenChange,
   ...props
-}: Props$9) => react_jsx_runtime19.JSX.Element;
+}: Props$9) => react_jsx_runtime18.JSX.Element;
 //#endregion
 //#region src/components/molecules/Marquees/Item/index.d.ts
 interface ItemProps {
@@ -327,7 +328,7 @@ declare const Marquees: {
     pauseOnHover,
     autoFill,
     ...props
-  }: Props$7): react_jsx_runtime19.JSX.Element;
+  }: Props$7): react_jsx_runtime18.JSX.Element;
   Item: ({
     width: _width,
     speed,
@@ -335,7 +336,7 @@ declare const Marquees: {
     pause: _pause,
     pauseOnHover,
     children
-  }: Props$8) => react_jsx_runtime19.JSX.Element;
+  }: Props$8) => react_jsx_runtime18.JSX.Element;
 };
 //#endregion
 //#region src/components/molecules/Space/index.d.ts
@@ -366,7 +367,7 @@ declare const Space: ({
   hidden,
   style,
   ...props
-}: Props$6) => react_jsx_runtime19.JSX.Element;
+}: Props$6) => react_jsx_runtime18.JSX.Element;
 //#endregion
 //#region src/components/organisms/Drawer/index.d.ts
 interface Props$5 {
@@ -416,7 +417,7 @@ declare const Drawer: ({
   container,
   onClose,
   ...props
-}: Props$5) => react_jsx_runtime19.JSX.Element | null;
+}: Props$5) => react_jsx_runtime18.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 +456,12 @@ declare const List: {
     classNames,
     renderItem,
     ...props
-  }: Props$4<T>): string | number | bigint | true | 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> | react_jsx_runtime19.JSX.Element;
+  }: Props$4<T>): string | number | bigint | true | 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> | react_jsx_runtime18.JSX.Element;
   Item: ({
     children,
     className,
     ...props
-  }: React$1.HTMLAttributes<HTMLDivElement>) => react_jsx_runtime19.JSX.Element;
+  }: React$1.HTMLAttributes<HTMLDivElement>) => react_jsx_runtime18.JSX.Element;
 };
 //#endregion
 //#region src/components/organisms/Modal/index.d.ts
@@ -514,7 +515,7 @@ declare const Modal: {
     onOk,
     onCancel,
     ...props
-  }: Props$3): react_jsx_runtime19.JSX.Element | null;
+  }: Props$3): react_jsx_runtime18.JSX.Element | null;
   destroy(id?: string): void;
   destroyAll(): void;
   info(props: StaticProps): string | undefined;
@@ -543,13 +544,13 @@ declare const Swiper: {
     renderItem,
     loadingClassName,
     ...props
-  }: Props$2<T>): react_jsx_runtime19.JSX.Element;
+  }: Props$2<T>): react_jsx_runtime18.JSX.Element;
   Slide: {
     ({
       children,
       className,
       ...props
-    }: swiper_react0.SwiperSlideProps): react_jsx_runtime19.JSX.Element;
+    }: swiper_react0.SwiperSlideProps): react_jsx_runtime18.JSX.Element;
     displayName: string;
   };
 };
@@ -564,27 +565,27 @@ declare const Layout: {
     children,
     className,
     ...props
-  }: Props): react_jsx_runtime19.JSX.Element;
+  }: Props): react_jsx_runtime18.JSX.Element;
   Content: ({
     children,
     className,
     ...props
-  }: React.HTMLAttributes<HTMLDivElement>) => react_jsx_runtime19.JSX.Element;
+  }: React.HTMLAttributes<HTMLDivElement>) => react_jsx_runtime18.JSX.Element;
   Footer: ({
     children,
     className,
     ...props
-  }: React.HTMLAttributes<HTMLDivElement>) => react_jsx_runtime19.JSX.Element;
+  }: React.HTMLAttributes<HTMLDivElement>) => react_jsx_runtime18.JSX.Element;
   Header: ({
     children,
     className,
     ...props
-  }: Props$1) => react_jsx_runtime19.JSX.Element;
+  }: Props$1) => react_jsx_runtime18.JSX.Element;
   Sider: ({
     children,
     className,
     ...props
-  }: React.HTMLAttributes<HTMLDivElement>) => react_jsx_runtime19.JSX.Element;
+  }: React.HTMLAttributes<HTMLDivElement>) => react_jsx_runtime18.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 };

package/dist/index.mjs

@@ -1,4 +1,4 @@
-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-DsjrAVBb.mjs";
+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-C3CveHCK.mjs";
 import "./utils-DEenfsJ-.mjs";
 import { t as Typography_default } from "./Typography-LYvEW-c8.mjs";
 import { i as Reveals_default } from "./Reveals-BpnYZJUk.mjs";

package/dist/output.css

@@ -669,10 +669,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;
   }
@@ -896,6 +906,9 @@
   .whitespace-pre-wrap {
     white-space: pre-wrap;
   }
+  .text-\(--btn-bg\) {
+    color: var(--btn-bg);
+  }
   .text-\(--btn-fg\) {
     color: var(--btn-fg);
   }
@@ -1114,6 +1127,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) {
@@ -1817,6 +1850,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 +1863,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-DsjrAVBb.mjs → src-C3CveHCK.mjs}

@@ -66,9 +66,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 +83,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 +250,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
 	});
@@ -4597,6 +4601,7 @@ const Marquees = ({ className, items, speed, pauseOnHover = true, autoFill = tru
 	const [pause, setPause] = useState(false);
 	const throttledWidth = useThrottle(width, 200);
 	const { size } = useResponsiveSize();
+	const { size: innerSize, ref: innerRef } = useResponsiveSize();
 	const hoverEvents = pauseOnHover ? {
 		onMouseEnter: () => {
 			setPause(true);
@@ -4605,6 +4610,7 @@ const Marquees = ({ className, items, speed, pauseOnHover = true, autoFill = tru
 			setPause(false);
 		}
 	} : {};
+	const maxWidth = typeof throttledWidth === "string" ? "100%" : Math.min(throttledWidth, innerSize.width);
 	useEffect(() => {
 		if (!size.width) return;
 		setWidth(size.width);
@@ -4619,12 +4625,13 @@ const Marquees = ({ className, items, speed, pauseOnHover = true, autoFill = tru
 		};
 	}, []);
 	return /* @__PURE__ */ jsx("div", {
+		ref: innerRef,
 		className: cn(className),
 		...hoverEvents,
 		...props,
 		children: /* @__PURE__ */ jsx("div", {
 			className: cn("flex flex-col gap-y-5", "overflow-hidden", "whitespace-nowrap", "bg-inherit"),
-			style: { width: throttledWidth },
+			style: { width: maxWidth },
 			children: items?.map(({ children, key: itemKey, ...item }, key) => /* @__PURE__ */ jsx(Item_default$1, {
 				width: throttledWidth,
 				pause,
@@ -4996,7 +5003,7 @@ const createModalRoot = (container) => {
 	}
 	return rootEl;
 };
-const Modal = ({ open = false, maskClosable = false, closable = false, closeIcon, className, classNames, style, title, footer, container, children, okText = "확인", cancelText = "취소", onOk, onCancel, ...props }) => {
+const Modal = ({ open = false, maskClosable = false, closable = false, closeIcon, className, classNames, style, title, footer, container, children, okText = "OK", cancelText = "Cancel", onOk, onCancel, ...props }) => {
 	if (typeof window === "undefined") return null;
 	return /* @__PURE__ */ jsx(Dialog, {
 		open,
@@ -5030,7 +5037,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
 					})] })
@@ -5046,7 +5053,7 @@ const STATIC_ICONS = {
 	warning: /* @__PURE__ */ jsx(OctagonAlert, { className: "text-yellow-400" }),
 	confirm: /* @__PURE__ */ jsx(CircleQuestionMark, {})
 };
-const StaticModal = ({ type, title, content, okText = "확인", cancelText = "취소", id, container, icon, onOk, onCancel, ...props }) => {
+const StaticModal = ({ type, title, content, okText = "OK", cancelText = "Cancel", id, container, icon, onOk, onCancel, ...props }) => {
 	const [open, setOpen] = useState(true);
 	const closeModal = (callback) => {
 		callback?.();
@@ -5058,7 +5065,7 @@ const StaticModal = ({ type, title, content, okText = "확인", cancelText = "
 	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

package/dist/{src-CHbpO4Np.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;
-  } /* orange-600 느낌 */
+    --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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbpark/ui-kit",
-  "version": "1.1.6",
+  "version": "2.0.0",
   "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",
@@ -83,7 +83,7 @@
   },
   "dependencies": {
     "@gsap/react": "^2.1.2",
-    "@jbpark/use-hooks": "^1.0.0",
+    "@jbpark/use-hooks": "^2.0.2",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-dialog": "^1.1.15",