@bigtablet/design-system 2.4.3 → 2.5.0

package/dist/index.css

@@ -188,7 +188,8 @@
   transition:
     background 0.2s ease-in-out,
     color 0.2s ease-in-out,
-    border-color 0.2s ease-in-out;
+    border-color 0.2s ease-in-out,
+    transform 0.1s ease-in-out;
 }
 .button::before {
   content: "";
@@ -201,6 +202,9 @@
   transition: background 0.2s ease-in-out;
   pointer-events: none;
 }
+.button:active:not(:disabled) {
+  transform: scale(0.97);
+}
 .button:disabled {
   cursor: not-allowed;
 }
@@ -346,6 +350,11 @@
 .card {
   background: #FFFFFF;
   border-radius: 12px;
+  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.card_hoverable:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.2), 0 6px 6px 0px rgba(0, 0, 0, 0.12);
 }
 .card_bordered {
   border: 1px solid #E5E5E5;
@@ -475,6 +484,7 @@
   border-top: 0;
   border-left: 0;
   transform: translate(-50%, -50%) rotate(45deg);
+  animation: checkbox_check_in 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
 }
 .checkbox_input:indeterminate ~ .checkbox_state_layer .checkbox_icon::after {
   content: "";
@@ -487,6 +497,7 @@
   transform: translate(-50%, -50%);
   border: none;
   border-radius: 1px;
+  animation: checkbox_dash_in 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
 }
 .checkbox_error .checkbox_icon {
   border-color: #EF4444;
@@ -496,6 +507,26 @@
   background: #EF4444;
   border-color: #EF4444;
 }
+@keyframes checkbox_check_in {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -50%) rotate(45deg) scale(0.5);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) rotate(45deg) scale(1);
+  }
+}
+@keyframes checkbox_dash_in {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -50%) scaleX(0);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scaleX(1);
+  }
+}
 
 /* src/ui/chip/style.scss */
 @keyframes skeleton_loading {
@@ -751,6 +782,10 @@
   justify-content: center;
   flex-shrink: 0;
   color: #666666;
+  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.dropdown_icon.is_open {
+  transform: rotate(180deg);
 }
 .dropdown_list {
   position: absolute;
@@ -769,12 +804,16 @@
   overflow-y: auto;
   overflow-x: hidden;
   padding: 4px 0;
+  animation: dropdown_slide_down 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+  transform-origin: top center;
 }
 .dropdown_list_up {
   top: auto;
   bottom: 100%;
   margin-top: 0;
   margin-bottom: 4px;
+  animation: dropdown_slide_up 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+  transform-origin: bottom center;
 }
 .dropdown_option {
   width: 100%;
@@ -846,6 +885,26 @@
   border: none;
   margin: 0;
 }
+@keyframes dropdown_slide_down {
+  from {
+    opacity: 0;
+    transform: translateY(-8px) scaleY(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scaleY(1);
+  }
+}
+@keyframes dropdown_slide_up {
+  from {
+    opacity: 0;
+    transform: translateY(8px) scaleY(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scaleY(1);
+  }
+}
 
 /* src/ui/date-picker/style.scss */
 @keyframes skeleton_loading {
@@ -1391,6 +1450,7 @@
   place-items: center;
   background: rgba(0, 0, 0, 0.5);
   z-index: 100;
+  animation: modal_overlay_fade 0.15s ease-in-out;
 }
 .modal_panel {
   background: #FFFFFF;
@@ -1398,6 +1458,7 @@
   box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.2), 0 9px 9px 0px rgba(0, 0, 0, 0.12);
   max-width: calc(100% - 64px);
   overflow: visible;
+  animation: modal_panel_enter 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
 }
 .modal_header {
   padding: 16px;
@@ -1412,6 +1473,24 @@
   padding: 16px;
   overflow: visible;
 }
+@keyframes modal_overlay_fade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes modal_panel_enter {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
 
 /* src/ui/otp-input/style.scss */
 @keyframes skeleton_loading {
@@ -1666,6 +1745,7 @@
   transform: translate(-50%, -50%);
   background: #121212;
   border-radius: 9999px;
+  animation: radio_dot_in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 .radio_size_md .radio_input:checked ~ .radio_state_layer .radio_dot::after {
   width: 10px;
@@ -1675,6 +1755,16 @@
   width: 10px;
   height: 10px;
 }
+@keyframes radio_dot_in {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
 
 /* src/ui/spinner/style.scss */
 @keyframes skeleton_loading {

package/dist/index.d.ts

@@ -509,6 +509,8 @@ interface CardProps extends React$1.HTMLAttributes<HTMLDivElement> {
     padding?: "none" | "sm" | "md" | "lg";
     /** 테두리 표시 여부 (기본값: false) */
     bordered?: boolean;
+    /** hover 시 살짝 떠오르는 효과 (기본값: false) */
+    hoverable?: boolean;
 }
 /**
  * 카드 컴포넌트를 렌더링한다.
@@ -516,7 +518,7 @@ interface CardProps extends React$1.HTMLAttributes<HTMLDivElement> {
  * @param props 카드 속성
  * @returns 렌더링된 카드 UI
  */
-declare const Card: ({ heading, headingAs: HeadingTag, shadow, padding, bordered, className, children, ...props }: CardProps) => react_jsx_runtime.JSX.Element;
+declare const Card: ({ heading, headingAs: HeadingTag, shadow, padding, bordered, hoverable, className, children, ...props }: CardProps) => react_jsx_runtime.JSX.Element;
 
 interface CheckboxProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size"> {
     /** 체크박스 옆에 표시할 라벨 */

package/dist/index.js

@@ -4,7 +4,7 @@ import * as React4 from 'react';
 import { createContext, useContext, useState, useCallback } from 'react';
 import { createPortal } from 'react-dom';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { X, ChevronDown, Check, Bell, Info, AlertTriangle, XCircle, CheckCircle2 } from 'lucide-react';
+import { ChevronDown, Check, X, Bell, Info, AlertTriangle, XCircle, CheckCircle2 } from 'lucide-react';
 
 // src/styles/a11y/index.ts
 var a11y = {
@@ -664,6 +664,7 @@ var Card = ({
   shadow = "sm",
   padding = "md",
   bordered = false,
+  hoverable = false,
   className,
   children,
   ...props
@@ -672,7 +673,7 @@ var Card = ({
     "card",
     `card_shadow_${shadow}`,
     `card_p_${padding}`,
-    { card_bordered: bordered },
+    { card_bordered: bordered, card_hoverable: hoverable },
     className
   );
   return /* @__PURE__ */ jsxs("div", { className: cardClassName, ...props, children: [
@@ -948,9 +949,9 @@ var Dropdown = ({
   };
   React4.useEffect(() => {
     if (!isOpen) return;
-    const idx = options.findIndex((o) => o.value === currentValue && !o.disabled);
+    const matchedIndex = options.findIndex((o) => o.value === currentValue && !o.disabled);
     setActiveIndex(
-      idx >= 0 ? idx : Math.max(
+      matchedIndex >= 0 ? matchedIndex : Math.max(
         0,
         options.findIndex((o) => !o.disabled)
       )
@@ -992,7 +993,7 @@ var Dropdown = ({
               disabled,
               children: [
                 /* @__PURE__ */ jsx("span", { className: currentOption ? "dropdown_value" : "dropdown_placeholder", children: currentOption ? currentOption.label : placeholder }),
-                /* @__PURE__ */ jsx("span", { className: "dropdown_icon", "aria-hidden": "true", children: isOpen ? /* @__PURE__ */ jsx(X, { size: 24 }) : /* @__PURE__ */ jsx(ChevronDown, { size: 24 }) })
+                /* @__PURE__ */ jsx("span", { className: cn("dropdown_icon", { is_open: isOpen }), "aria-hidden": "true", children: /* @__PURE__ */ jsx(ChevronDown, { size: 24 }) })
               ]
             }
           )
@@ -2090,9 +2091,9 @@ var OtpInput = ({
     if (autoFocus) inputsRef.current[0]?.focus();
   }, [autoFocus]);
   const digits = React4.useMemo(() => {
-    const arr = value.split("").slice(0, length);
-    while (arr.length < length) arr.push("");
-    return arr;
+    const chars = value.split("").slice(0, length);
+    while (chars.length < length) chars.push("");
+    return chars;
   }, [value, length]);
   const focusInput = (index) => {
     inputsRef.current[index]?.focus();
@@ -2101,12 +2102,12 @@ var OtpInput = ({
     onChange?.(newDigits.join(""));
   };
   const handleChange = (index, e) => {
-    const val = e.target.value;
-    if (val && !/^\d$/.test(val)) return;
+    const nextDigit = e.target.value;
+    if (nextDigit && !/^\d$/.test(nextDigit)) return;
     const newDigits = [...digits];
-    newDigits[index] = val;
+    newDigits[index] = nextDigit;
     updateValue(newDigits);
-    if (val && index < length - 1) {
+    if (nextDigit && index < length - 1) {
       focusInput(index + 1);
     }
   };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bigtablet/design-system",
-	"version": "2.4.3",
+	"version": "2.5.0",
 	"description": "Bigtablet Design System UI Components",
 	"type": "module",
 	"types": "dist/index.d.ts",