@bigtablet/design-system 2.0.2 → 2.0.4

package/dist/index.css

@@ -513,6 +513,34 @@
   border: 1px solid #E5E5E5;
   overflow: hidden;
   transition: border-color 0.2s ease-in-out;
+  position: relative;
+}
+.chip::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  border-radius: inherit;
+  transition: background 0.2s ease-in-out;
+  pointer-events: none;
+}
+.chip:hover::before {
+  background: rgba(0, 0, 0, 0.05);
+}
+.chip:active::before {
+  background: rgba(26, 26, 26, 0.12);
+}
+.chip.chip_icon_hovered:hover::before,
+.chip.chip_icon_hovered:active::before {
+  background: transparent;
+}
+.chip .chip_icon:hover {
+  background: rgba(0, 0, 0, 0.05);
+}
+.chip .chip_icon:active {
+  background: rgba(26, 26, 26, 0.12);
 }
 .chip_content {
   flex: 1;
@@ -542,15 +570,9 @@
   transition: background 0.2s ease-in-out;
   pointer-events: none;
 }
-.chip_content:hover:not(:disabled)::before {
-  background: rgba(0, 0, 0, 0.05);
-}
 .chip_content:focus-visible:not(:disabled)::before {
   background: rgba(0, 0, 0, 0.08);
 }
-.chip_content:active:not(:disabled)::before {
-  background: rgba(26, 26, 26, 0.12);
-}
 .chip_content:disabled {
   cursor: not-allowed;
 }
@@ -573,9 +595,6 @@
 .chip_trailing:focus-visible:not(:disabled) .chip_icon {
   background: rgba(0, 0, 0, 0.08);
 }
-.chip_trailing:active:not(:disabled) .chip_icon {
-  background: rgba(26, 26, 26, 0.12);
-}
 .chip_trailing:disabled {
   cursor: not-allowed;
 }
@@ -588,14 +607,12 @@
   flex-shrink: 0;
   border-radius: 9999px;
   transition: background 0.2s ease-in-out;
+  position: relative;
 }
 .chip_icon svg {
   width: 100%;
   height: 100%;
 }
-.chip_trailing:hover:not(:disabled) .chip_icon {
-  background: rgba(0, 0, 0, 0.05);
-}
 .chip_label {
   white-space: nowrap;
 }

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import * as React$1 from 'react';
+import React__default from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 declare const a11y: {
@@ -537,7 +538,7 @@ declare const Checkbox: {
 };
 
 type ChipType = "basic" | "input" | "filter";
-interface ChipProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "onClick"> {
+interface ChipProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, "onClick"> {
     /** 칩 유형 (기본값: "basic") */
     type?: ChipType;
     /** 라벨 텍스트 */
@@ -551,7 +552,7 @@ interface ChipProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "onClic
     /** 팝업 열림 상태 (filter 타입에서 aria-expanded로 사용) */
     open?: boolean;
     /** 칩 클릭 시 콜백 */
-    onClick?: (event: React$1.MouseEvent<HTMLButtonElement>) => void;
+    onClick?: (event: React__default.MouseEvent<HTMLButtonElement>) => void;
     /** 삭제 버튼 클릭 시 콜백 */
     onRemove?: () => void;
 }

package/dist/index.js

@@ -1,6 +1,6 @@
 "use client";
 import './index.css';
-import * as React4 from 'react';
+import * as React5 from 'react';
 import { createContext, useContext, useState, useCallback } from 'react';
 import { createPortal } from 'react-dom';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -483,8 +483,8 @@ var FOCUSABLE_SELECTORS = [
   '[tabindex]:not([tabindex="-1"])'
 ].join(", ");
 function useFocusTrap(containerRef, isActive) {
-  const previousActiveElement = React4.useRef(null);
-  React4.useEffect(() => {
+  const previousActiveElement = React5.useRef(null);
+  React5.useEffect(() => {
     if (!isActive) return;
     const container = containerRef.current;
     if (!container) return;
@@ -589,9 +589,9 @@ var AlertModal = ({
   onCancel,
   onClose
 }) => {
-  const panelRef = React4.useRef(null);
-  const titleId = React4.useId();
-  const messageId = React4.useId();
+  const panelRef = React5.useRef(null);
+  const titleId = React5.useId();
+  const messageId = React5.useId();
   useFocusTrap(panelRef, true);
   const modalClassName = cn("alert_modal", `alert_variant_${variant}`);
   const actionsClassName = cn("alert_actions", `alert_actions_${actionsAlign}`);
@@ -683,12 +683,12 @@ var Checkbox = ({
   ref,
   ...props
 }) => {
-  const inputRef = React4.useRef(null);
-  React4.useImperativeHandle(
+  const inputRef = React5.useRef(null);
+  React5.useImperativeHandle(
     ref,
     () => inputRef.current
   );
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     if (!inputRef.current) return;
     inputRef.current.indeterminate = Boolean(indeterminate);
   }, [indeterminate]);
@@ -731,9 +731,12 @@ var Chip = ({
   className,
   ...props
 }) => {
+  const [iconHovered, setIconHovered] = useState(false);
   const hasLeading = selected;
   const hasTrailingButton = type === "input" && removable;
   const hasTrailingIcon = hasTrailingButton || type === "filter";
+  const enterIcon = () => setIconHovered(true);
+  const leaveIcon = () => setIconHovered(false);
   const chipClassName = cn(
     "chip",
     `chip_type_${type}`,
@@ -741,6 +744,7 @@ var Chip = ({
     hasLeading && "chip_has_leading",
     hasTrailingIcon && "chip_has_trailing",
     disabled && "chip_disabled",
+    iconHovered && "chip_icon_hovered",
     className
   );
   return /* @__PURE__ */ jsxs("div", { className: chipClassName, ...props, children: [
@@ -753,9 +757,27 @@ var Chip = ({
         onClick,
         ...type === "filter" ? { "aria-haspopup": "listbox", "aria-expanded": !!open } : {},
         children: [
-          hasLeading && /* @__PURE__ */ jsx("span", { className: "chip_icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(CheckIcon, {}) }),
+          hasLeading && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "chip_icon",
+              "aria-hidden": "true",
+              onPointerEnter: enterIcon,
+              onPointerLeave: leaveIcon,
+              children: /* @__PURE__ */ jsx(CheckIcon, {})
+            }
+          ),
           /* @__PURE__ */ jsx("span", { className: "chip_label", children: label }),
-          type === "filter" && /* @__PURE__ */ jsx("span", { className: "chip_icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(ChevronDownIcon, {}) })
+          type === "filter" && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "chip_icon",
+              "aria-hidden": "true",
+              onPointerEnter: enterIcon,
+              onPointerLeave: leaveIcon,
+              children: /* @__PURE__ */ jsx(ChevronDownIcon, {})
+            }
+          )
         ]
       }
     ),
@@ -767,7 +789,16 @@ var Chip = ({
         disabled,
         onClick: onRemove,
         "aria-label": "Remove",
-        children: /* @__PURE__ */ jsx("span", { className: "chip_icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(CloseIcon, {}) })
+        children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "chip_icon",
+            "aria-hidden": "true",
+            onPointerEnter: enterIcon,
+            onPointerLeave: leaveIcon,
+            children: /* @__PURE__ */ jsx(CloseIcon, {})
+          }
+        )
       }
     )
   ] });
@@ -794,9 +825,9 @@ var DatePicker = ({
   minDateSrFormat = "Minimum date: {date}",
   selectableRangeUntilTodaySrText = "Selectable up to today"
 }) => {
-  const groupId = React4.useId();
-  const constraintId = React4.useId();
-  const { todayYear, todayMonth, todayDay } = React4.useMemo(() => {
+  const groupId = React5.useId();
+  const constraintId = React5.useId();
+  const { todayYear, todayMonth, todayDay } = React5.useMemo(() => {
     const now = /* @__PURE__ */ new Date();
     return {
       todayYear: now.getFullYear(),
@@ -805,7 +836,7 @@ var DatePicker = ({
     };
   }, []);
   const endYear = endYearProp ?? todayYear + 10;
-  const parsed = React4.useMemo(() => {
+  const parsed = React5.useMemo(() => {
     if (!value) return { year: 0, month: 0, day: 0 };
     const [y, m, d] = value.split("-").map(Number);
     return {
@@ -814,7 +845,7 @@ var DatePicker = ({
       day: d || 0
     };
   }, [value]);
-  const min = React4.useMemo(() => {
+  const min = React5.useMemo(() => {
     if (!minDate) return { year: 0, month: 0, day: 0 };
     const [y, m, d] = minDate.split("-").map(Number);
     return {
@@ -828,7 +859,7 @@ var DatePicker = ({
   const minMonth = min.year > 0 && year === min.year ? min.month : 1;
   const maxMonth = selectableRange === "until-today" && year === todayYear ? todayMonth : 12;
   const minDay = min.year > 0 && min.month > 0 && year === min.year && month === min.month ? min.day : 1;
-  const maxDay = React4.useMemo(() => {
+  const maxDay = React5.useMemo(() => {
     if (!year || !month) return 31;
     const daysInMonth = getDaysInMonth(year, month);
     if (selectableRange === "until-today" && year === todayYear && month === todayMonth) {
@@ -836,19 +867,19 @@ var DatePicker = ({
     }
     return daysInMonth;
   }, [year, month, selectableRange, todayYear, todayMonth, todayDay]);
-  const yearOptions = React4.useMemo(
+  const yearOptions = React5.useMemo(
     () => range(startYear, maxYear),
     [startYear, maxYear]
   );
-  const monthOptions = React4.useMemo(
+  const monthOptions = React5.useMemo(
     () => range(minMonth, Math.max(minMonth, maxMonth)),
     [minMonth, maxMonth]
   );
-  const dayOptions = React4.useMemo(
+  const dayOptions = React5.useMemo(
     () => range(minDay, Math.max(minDay, maxDay)),
     [minDay, maxDay]
   );
-  const emit = React4.useCallback(
+  const emit = React5.useCallback(
     (yy, mm, dd) => {
       if (mode === "year-month") {
         onChange(`${yy}-${pad(mm)}`);
@@ -859,7 +890,7 @@ var DatePicker = ({
     },
     [mode, onChange]
   );
-  const handleYearChange = React4.useCallback(
+  const handleYearChange = React5.useCallback(
     (newYear) => {
       let newMonth = month;
       const newMinMonth = min.year > 0 && newYear === min.year ? min.month : 1;
@@ -874,14 +905,14 @@ var DatePicker = ({
     },
     [month, day, min.year, min.month, selectableRange, todayYear, todayMonth, emit]
   );
-  const handleMonthChange = React4.useCallback(
+  const handleMonthChange = React5.useCallback(
     (newMonth) => {
       if (!year) return;
       emit(year, newMonth, day || void 0);
     },
     [year, day, emit]
   );
-  const handleDayChange = React4.useCallback(
+  const handleDayChange = React5.useCallback(
     (newDay) => {
       if (!year || !month) return;
       emit(year, month, newDay);
@@ -986,9 +1017,9 @@ var FileInput = ({
   disabled,
   ...props
 }) => {
-  const inputId = React4.useId();
-  const helperId = React4.useId();
-  const [previewUrls, setPreviewUrls] = React4.useState([]);
+  const inputId = React5.useId();
+  const helperId = React5.useId();
+  const [previewUrls, setPreviewUrls] = React5.useState([]);
   const handleChange = (e) => {
     const files = e.currentTarget.files;
     onFiles?.(files);
@@ -1006,7 +1037,7 @@ var FileInput = ({
       setPreviewUrls([]);
     }
   };
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     return () => {
       previewUrls.forEach((url) => URL.revokeObjectURL(url));
     };
@@ -1736,18 +1767,18 @@ var Modal = ({
   ariaLabel,
   ...props
 }) => {
-  const panelRef = React4.useRef(null);
-  const titleId = React4.useId();
+  const panelRef = React5.useRef(null);
+  const titleId = React5.useId();
   useFocusTrap(panelRef, open);
-  const handleEscape = React4.useEffectEvent((e) => {
+  const handleEscape = React5.useEffectEvent((e) => {
     if (e.key === "Escape") onClose?.();
   });
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     if (!open) return;
     document.addEventListener("keydown", handleEscape);
     return () => document.removeEventListener("keydown", handleEscape);
   }, [open]);
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     if (!open) return;
     const body = document.body;
     const openModals = parseInt(body.dataset.openModals || "0", 10);
@@ -1842,7 +1873,7 @@ var Pagination = ({
 }) => {
   const prevDisabled = page <= 1;
   const nextDisabled = page >= totalPages;
-  const items = React4.useMemo(() => getPaginationItems(page, totalPages), [page, totalPages]);
+  const items = React5.useMemo(() => getPaginationItems(page, totalPages), [page, totalPages]);
   return /* @__PURE__ */ jsxs("nav", { className: "pagination", "aria-label": "Pagination", children: [
     /* @__PURE__ */ jsx(
       "button",
@@ -1909,21 +1940,21 @@ var Select = ({
   className,
   textAlign = "left"
 }) => {
-  const internalId = React4.useId();
+  const internalId = React5.useId();
   const selectId = id ?? internalId;
   const isControlled = value !== void 0;
-  const [internalValue, setInternalValue] = React4.useState(defaultValue);
+  const [internalValue, setInternalValue] = React5.useState(defaultValue);
   const currentValue = isControlled ? value ?? null : internalValue;
-  const [isOpen, setIsOpen] = React4.useState(false);
-  const [activeIndex, setActiveIndex] = React4.useState(-1);
-  const [dropUp, setDropUp] = React4.useState(false);
-  const wrapperRef = React4.useRef(null);
-  const controlRef = React4.useRef(null);
-  const currentOption = React4.useMemo(
+  const [isOpen, setIsOpen] = React5.useState(false);
+  const [activeIndex, setActiveIndex] = React5.useState(-1);
+  const [dropUp, setDropUp] = React5.useState(false);
+  const wrapperRef = React5.useRef(null);
+  const controlRef = React5.useRef(null);
+  const currentOption = React5.useMemo(
     () => options.find((o) => o.value === currentValue) ?? null,
     [options, currentValue]
   );
-  const setValue = React4.useCallback(
+  const setValue = React5.useCallback(
     (next) => {
       const option = options.find((o) => o.value === next) ?? null;
       if (!isControlled) setInternalValue(next);
@@ -1931,12 +1962,12 @@ var Select = ({
     },
     [isControlled, onChange, options]
   );
-  const handleOutsideClick = React4.useEffectEvent((e) => {
+  const handleOutsideClick = React5.useEffectEvent((e) => {
     if (!wrapperRef.current?.contains(e.target)) {
       setIsOpen(false);
     }
   });
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     document.addEventListener("mousedown", handleOutsideClick);
     return () => document.removeEventListener("mousedown", handleOutsideClick);
   }, []);
@@ -2001,7 +2032,7 @@ var Select = ({
         break;
     }
   };
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     if (!isOpen) return;
     const idx = options.findIndex((o) => o.value === currentValue && !o.disabled);
     setActiveIndex(
@@ -2011,7 +2042,7 @@ var Select = ({
       )
     );
   }, [isOpen, options, currentValue]);
-  React4.useLayoutEffect(() => {
+  React5.useLayoutEffect(() => {
     if (!isOpen || !controlRef.current) return;
     const rect = controlRef.current.getBoundingClientRect();
     const listHeight = Math.min(options.length * 40, 288);
@@ -2126,7 +2157,7 @@ var Switch = ({
   ...props
 }) => {
   const isControlled = checked !== void 0;
-  const [innerChecked, setInnerChecked] = React4.useState(!!defaultChecked);
+  const [innerChecked, setInnerChecked] = React5.useState(!!defaultChecked);
   const isOn = isControlled ? !!checked : innerChecked;
   const handleToggle = () => {
     if (disabled) return;
@@ -2176,21 +2207,21 @@ var TextField = ({
   ref,
   ...props
 }) => {
-  const generatedId = React4.useId();
+  const generatedId = React5.useId();
   const inputId = id ?? generatedId;
   const helperId = supportingText ? `${inputId}-help` : void 0;
   const isControlled = value !== void 0;
   const applyTransform = (nextValue) => transformValue ? transformValue(nextValue) : nextValue;
-  const [innerValue, setInnerValue] = React4.useState(
+  const [innerValue, setInnerValue] = React5.useState(
     () => applyTransform(value ?? defaultValue ?? "")
   );
-  const isComposingRef = React4.useRef(false);
-  React4.useEffect(() => {
+  const isComposingRef = React5.useRef(false);
+  React5.useEffect(() => {
     if (!isControlled) return;
     const nextValue = value ?? "";
     setInnerValue(transformValue ? transformValue(nextValue) : nextValue);
   }, [isControlled, value, transformValue]);
-  const handleClear = React4.useCallback(() => {
+  const handleClear = React5.useCallback(() => {
     setInnerValue("");
     onChangeAction?.("");
   }, [onChangeAction]);
@@ -2254,7 +2285,7 @@ var TextField = ({
   ] });
 };
 TextField.displayName = "TextField";
-var ToastContext = React4.createContext(null);
+var ToastContext = React5.createContext(null);
 var VARIANT_ICONS = {
   success: /* @__PURE__ */ jsx(CheckCircle2, { size: 18 }),
   error: /* @__PURE__ */ jsx(XCircle, { size: 18 }),
@@ -2263,9 +2294,9 @@ var VARIANT_ICONS = {
   default: /* @__PURE__ */ jsx(Bell, { size: 18 })
 };
 var ToastItemComponent = ({ item, onRemove, closeAriaLabel }) => {
-  const [exiting, setExiting] = React4.useState(false);
-  const closingRef = React4.useRef(false);
-  const close = React4.useCallback(() => {
+  const [exiting, setExiting] = React5.useState(false);
+  const closingRef = React5.useRef(false);
+  const close = React5.useCallback(() => {
     if (closingRef.current) return;
     closingRef.current = true;
     setExiting(true);
@@ -2292,19 +2323,19 @@ var ToastProvider = ({
   maxCount = 5,
   closeAriaLabel = "Close"
 }) => {
-  const [toasts, setToasts] = React4.useState([]);
-  const [isMounted, setIsMounted] = React4.useState(false);
-  React4.useEffect(() => {
+  const [toasts, setToasts] = React5.useState([]);
+  const [isMounted, setIsMounted] = React5.useState(false);
+  React5.useEffect(() => {
     setIsMounted(true);
   }, []);
-  const addToast = React4.useCallback(
+  const addToast = React5.useCallback(
     (message, variant, duration = 3e3) => {
       const id = crypto.randomUUID();
       setToasts((prev) => [{ id, message, variant, duration }, ...prev].slice(0, maxCount));
     },
     [maxCount]
   );
-  const removeToast = React4.useCallback((id) => {
+  const removeToast = React5.useCallback((id) => {
     setToasts((prev) => prev.filter((t) => t.id !== id));
   }, []);
   return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: { addToast }, children: [

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bigtablet/design-system",
-	"version": "2.0.2",
+	"version": "2.0.4",
 	"description": "Bigtablet Design System UI Components",
 	"type": "module",
 	"types": "dist/index.d.ts",
@@ -106,7 +106,7 @@
 		"husky": "^9.1.7",
 		"jsdom": "^29.0.1",
 		"lucide-react": "^1.7.0",
-		"next": "^16.2.2",
+		"next": "^16.2.3",
 		"playwright": "^1.57.0",
 		"react": "^19.2.4",
 		"react-dom": "^19.2.4",