@bigtablet/design-system 1.14.3 → 1.16.0

package/dist/index.css

@@ -683,6 +683,12 @@
   overflow-x: hidden;
   padding: 0.25rem 0;
 }
+.select_list_up {
+  top: auto;
+  bottom: 100%;
+  margin-top: 0;
+  margin-bottom: 0.25rem;
+}
 .select_option {
   width: 100%;
   box-sizing: border-box;

package/dist/index.js

@@ -315,7 +315,9 @@ var Select = ({
   const currentValue = isControlled ? value ?? null : internalValue;
   const [isOpen, setIsOpen] = React3.useState(false);
   const [activeIndex, setActiveIndex] = React3.useState(-1);
+  const [dropUp, setDropUp] = React3.useState(false);
   const wrapperRef = React3.useRef(null);
+  const controlRef = React3.useRef(null);
   const currentOption = React3.useMemo(
     () => options.find((o) => o.value === currentValue) ?? null,
     [options, currentValue]
@@ -413,6 +415,14 @@ var Select = ({
       )
     );
   }, [isOpen, options, currentValue]);
+  React3.useLayoutEffect(() => {
+    if (!isOpen || !controlRef.current) return;
+    const rect = controlRef.current.getBoundingClientRect();
+    const listHeight = Math.min(options.length * 40, 288);
+    const spaceBelow = window.innerHeight - rect.bottom;
+    const spaceAbove = rect.top;
+    setDropUp(spaceBelow < listHeight && spaceAbove > spaceBelow);
+  }, [isOpen, options.length]);
   const rootClassName = ["select", className ?? ""].filter(Boolean).join(" ");
   const controlClassName = [
     "select_control",
@@ -439,6 +449,7 @@ var Select = ({
         /* @__PURE__ */ jsxs(
           "button",
           {
+            ref: controlRef,
             id: selectId,
             type: "button",
             className: controlClassName,
@@ -466,7 +477,7 @@ var Select = ({
           {
             id: `${selectId}_listbox`,
             role: "listbox",
-            className: "select_list",
+            className: `select_list${dropUp ? " select_list_up" : ""}`,
             children: options.map((opt, i) => {
               const selected = currentValue === opt.value;
               const active = i === activeIndex;

package/dist/styles/scss/_colors.scss

@@ -9,6 +9,11 @@ $color_background_neutral: #F3F3F3;
 $color_background_muted: #f0f0f0;
 $color_background_primary: #47555E;
 
+/* Background - Dark Palette (for modern/tech sections) */
+$color_background_dark: #1E293B;
+$color_background_darker: #0F172A;
+$color_background_darkest: #020617;
+
 /* Text */
 $color_text_primary: #1a1a1a;
 $color_text_secondary: #666666;
@@ -30,5 +35,17 @@ $color_error: #ef4444;
 $color_warning: #f59e0b;
 $color_info: #3b82f6;
 
+/* Accent - Tech Blue */
+$color_accent: #3B82F6;
+$color_accent_light: #60A5FA;
+$color_accent_dark: #2563EB;
+
 /* Overlay */
-$color_overlay: rgba(0, 0, 0, 0.5);
+$color_overlay: rgba(0, 0, 0, 0.5);
+$color_overlay_light: rgba(0, 0, 0, 0.3);
+$color_overlay_strong: rgba(0, 0, 0, 0.7);
+
+/* Glass Effect */
+$color_glass_light: rgba(255, 255, 255, 0.08);
+$color_glass_border: rgba(255, 255, 255, 0.12);
+$color_glass_dark: rgba(0, 0, 0, 0.4);

package/dist/styles/scss/_layout.scss

@@ -1,3 +1,4 @@
+/* Flex Utilities */
 @mixin flex_center { display: flex; align-items: center; justify-content: center; }
 @mixin flex_left { display: flex; align-items: center; justify-content: flex-start; }
 @mixin flex_right { display: flex; align-items: center; justify-content: flex-end; }
@@ -5,4 +6,47 @@
 
 @mixin flex_column { display: flex; flex-direction: column; }
 @mixin flex_column_center { display: flex; flex-direction: column; align-items: center; justify-content: center; }
-@mixin flex_column_start { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; }
+@mixin flex_column_start { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; }
+
+/* Glass Effect Mixins */
+@mixin glass_light {
+  background: rgba(255, 255, 255, 0.08);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+}
+
+@mixin glass_dark {
+  background: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+@mixin glass_card {
+  background: rgba(255, 255, 255, 0.05);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
+}
+
+/* Hover Lift Effect */
+@mixin hover_lift($y: -4px, $shadow: 0 12px 24px rgba(0, 0, 0, 0.15)) {
+  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
+              box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+
+  &:hover {
+    transform: translateY($y);
+    box-shadow: $shadow;
+  }
+}
+
+/* Glow on Hover */
+@mixin hover_glow($color: rgba(59, 130, 246, 0.4)) {
+  transition: box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+
+  &:hover {
+    box-shadow: 0 0 30px $color;
+  }
+}

package/dist/styles/scss/_motion.scss

@@ -1,12 +1,28 @@
+/* Base Transitions */
 $transition_fast: 0.1s ease-in-out;   // hover, icon
 $transition_base: 0.2s ease-in-out;   // 메뉴 열림
 $transition_slow: 0.3s ease-in-out;   // 레이아웃 변화
 
-$transition_emphasized: 0.25s cubic-bezier(0.4, 0, 0.2, 1); // Material 계열
-$transition_bounce: 0.3s cubic-bezier(0.16, 1, 0.3, 1);    // accordion, toast
+/* Easing Curves */
+$ease_out_expo: cubic-bezier(0.16, 1, 0.3, 1);
+$ease_out_quart: cubic-bezier(0.25, 1, 0.5, 1);
+$ease_in_out_cubic: cubic-bezier(0.65, 0, 0.35, 1);
+$ease_spring: cubic-bezier(0.34, 1.56, 0.64, 1);
 
-$transition_fade: 0.15s ease-in-out;      // opacity
-$transition_slide: 0.25s ease-in-out;     // translate
+/* Material / Emphasized */
+$transition_emphasized: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+$transition_bounce: 0.3s $ease_out_expo;
+
+/* Specific Transitions */
+$transition_fade: 0.15s ease-in-out;
+$transition_slide: 0.25s $ease_out_expo;
 $transition_scale: 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
+$transition_state: 0.18s ease-in-out;
+
+/* Modern/Tech Transitions */
+$transition_smooth: 0.4s $ease_out_expo;
+$transition_spring: 0.5s $ease_spring;
+$transition_dramatic: 0.6s $ease_out_quart;
 
-$transition_state: 0.18s ease-in-out;     // disabled → enabled
+/* Hover Lift */
+$transition_lift: transform 0.25s $ease_out_expo, box-shadow 0.25s $ease_out_expo;

package/dist/styles/scss/_shadows.scss

@@ -1,4 +1,20 @@
+/* Standard Shadows */
 $shadow_sm: 0 2px 4px rgba(0, 0, 0, 0.04);
 $shadow_md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
 $shadow_lg: 0 8px 20px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);
-$shadow_xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+$shadow_xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+$shadow_2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+
+/* Elevated Shadows (for floating elements) */
+$shadow_elevated: 0 12px 40px -8px rgba(0, 0, 0, 0.2), 0 4px 12px -2px rgba(0, 0, 0, 0.08);
+$shadow_float: 0 20px 60px -15px rgba(0, 0, 0, 0.3);
+
+/* Glow Effects (for tech/accent elements) */
+$glow_accent: 0 0 20px rgba(59, 130, 246, 0.35);
+$glow_accent_strong: 0 0 40px rgba(59, 130, 246, 0.5), 0 0 80px rgba(59, 130, 246, 0.25);
+$glow_white: 0 0 20px rgba(255, 255, 255, 0.15);
+$glow_white_strong: 0 0 40px rgba(255, 255, 255, 0.25);
+
+/* Inner Shadows */
+$shadow_inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
+$shadow_inner_lg: inset 0 4px 8px rgba(0, 0, 0, 0.1);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigtablet/design-system",
-  "version": "1.14.3",
+  "version": "1.16.0",
   "description": "Bigtablet Design System UI Components",
   "type": "module",
   "types": "dist/index.d.ts",
@@ -94,7 +94,6 @@
   },
   "publishConfig": {
     "access": "public",
-    "provenance": true,
     "registry": "https://registry.npmjs.org/"
   }
 }

package/src/styles/scss/_colors.scss

@@ -9,6 +9,11 @@ $color_background_neutral: #F3F3F3;
 $color_background_muted: #f0f0f0;
 $color_background_primary: #47555E;
 
+/* Background - Dark Palette (for modern/tech sections) */
+$color_background_dark: #1E293B;
+$color_background_darker: #0F172A;
+$color_background_darkest: #020617;
+
 /* Text */
 $color_text_primary: #1a1a1a;
 $color_text_secondary: #666666;
@@ -30,5 +35,17 @@ $color_error: #ef4444;
 $color_warning: #f59e0b;
 $color_info: #3b82f6;
 
+/* Accent - Tech Blue */
+$color_accent: #3B82F6;
+$color_accent_light: #60A5FA;
+$color_accent_dark: #2563EB;
+
 /* Overlay */
-$color_overlay: rgba(0, 0, 0, 0.5);
+$color_overlay: rgba(0, 0, 0, 0.5);
+$color_overlay_light: rgba(0, 0, 0, 0.3);
+$color_overlay_strong: rgba(0, 0, 0, 0.7);
+
+/* Glass Effect */
+$color_glass_light: rgba(255, 255, 255, 0.08);
+$color_glass_border: rgba(255, 255, 255, 0.12);
+$color_glass_dark: rgba(0, 0, 0, 0.4);

package/src/styles/scss/_layout.scss

@@ -1,3 +1,4 @@
+/* Flex Utilities */
 @mixin flex_center { display: flex; align-items: center; justify-content: center; }
 @mixin flex_left { display: flex; align-items: center; justify-content: flex-start; }
 @mixin flex_right { display: flex; align-items: center; justify-content: flex-end; }
@@ -5,4 +6,47 @@
 
 @mixin flex_column { display: flex; flex-direction: column; }
 @mixin flex_column_center { display: flex; flex-direction: column; align-items: center; justify-content: center; }
-@mixin flex_column_start { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; }
+@mixin flex_column_start { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; }
+
+/* Glass Effect Mixins */
+@mixin glass_light {
+  background: rgba(255, 255, 255, 0.08);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+}
+
+@mixin glass_dark {
+  background: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+@mixin glass_card {
+  background: rgba(255, 255, 255, 0.05);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
+}
+
+/* Hover Lift Effect */
+@mixin hover_lift($y: -4px, $shadow: 0 12px 24px rgba(0, 0, 0, 0.15)) {
+  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
+              box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+
+  &:hover {
+    transform: translateY($y);
+    box-shadow: $shadow;
+  }
+}
+
+/* Glow on Hover */
+@mixin hover_glow($color: rgba(59, 130, 246, 0.4)) {
+  transition: box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+
+  &:hover {
+    box-shadow: 0 0 30px $color;
+  }
+}

package/src/styles/scss/_motion.scss

@@ -1,12 +1,28 @@
+/* Base Transitions */
 $transition_fast: 0.1s ease-in-out;   // hover, icon
 $transition_base: 0.2s ease-in-out;   // 메뉴 열림
 $transition_slow: 0.3s ease-in-out;   // 레이아웃 변화
 
-$transition_emphasized: 0.25s cubic-bezier(0.4, 0, 0.2, 1); // Material 계열
-$transition_bounce: 0.3s cubic-bezier(0.16, 1, 0.3, 1);    // accordion, toast
+/* Easing Curves */
+$ease_out_expo: cubic-bezier(0.16, 1, 0.3, 1);
+$ease_out_quart: cubic-bezier(0.25, 1, 0.5, 1);
+$ease_in_out_cubic: cubic-bezier(0.65, 0, 0.35, 1);
+$ease_spring: cubic-bezier(0.34, 1.56, 0.64, 1);
 
-$transition_fade: 0.15s ease-in-out;      // opacity
-$transition_slide: 0.25s ease-in-out;     // translate
+/* Material / Emphasized */
+$transition_emphasized: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+$transition_bounce: 0.3s $ease_out_expo;
+
+/* Specific Transitions */
+$transition_fade: 0.15s ease-in-out;
+$transition_slide: 0.25s $ease_out_expo;
 $transition_scale: 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
+$transition_state: 0.18s ease-in-out;
+
+/* Modern/Tech Transitions */
+$transition_smooth: 0.4s $ease_out_expo;
+$transition_spring: 0.5s $ease_spring;
+$transition_dramatic: 0.6s $ease_out_quart;
 
-$transition_state: 0.18s ease-in-out;     // disabled → enabled
+/* Hover Lift */
+$transition_lift: transform 0.25s $ease_out_expo, box-shadow 0.25s $ease_out_expo;

package/src/styles/scss/_shadows.scss

@@ -1,4 +1,20 @@
+/* Standard Shadows */
 $shadow_sm: 0 2px 4px rgba(0, 0, 0, 0.04);
 $shadow_md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
 $shadow_lg: 0 8px 20px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);
-$shadow_xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+$shadow_xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+$shadow_2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+
+/* Elevated Shadows (for floating elements) */
+$shadow_elevated: 0 12px 40px -8px rgba(0, 0, 0, 0.2), 0 4px 12px -2px rgba(0, 0, 0, 0.08);
+$shadow_float: 0 20px 60px -15px rgba(0, 0, 0, 0.3);
+
+/* Glow Effects (for tech/accent elements) */
+$glow_accent: 0 0 20px rgba(59, 130, 246, 0.35);
+$glow_accent_strong: 0 0 40px rgba(59, 130, 246, 0.5), 0 0 80px rgba(59, 130, 246, 0.25);
+$glow_white: 0 0 20px rgba(255, 255, 255, 0.15);
+$glow_white_strong: 0 0 40px rgba(255, 255, 255, 0.25);
+
+/* Inner Shadows */
+$shadow_inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
+$shadow_inner_lg: inset 0 4px 8px rgba(0, 0, 0, 0.1);