@bigtablet/design-system 2.2.4 → 2.4.0

package/dist/index.css

@@ -625,7 +625,7 @@
   cursor: not-allowed;
 }
 
-/* src/ui/select/style.scss */
+/* src/ui/dropdown/style.scss */
 @keyframes skeleton_loading {
   0% {
     background-position: 100% 0;
@@ -634,164 +634,125 @@
     background-position: 0 0;
   }
 }
-.select {
+.dropdown {
   position: relative;
   display: inline-flex;
   flex-direction: column;
-  width: 100%;
   font-family: "Pretendard", sans-serif;
 }
-.select_fieldset {
-  padding: 0;
-  margin: 0;
-  min-inline-size: 0;
-  border-radius: 12px;
-  background-color: #FFFFFF;
-  transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
-}
-.select_variant_outline {
-  border: 1px solid #E5E5E5;
-}
-.select_variant_outline:hover:not(.is_disabled) {
-  border-color: #B3B3B3;
-}
-.select_variant_outline.is_open {
-  border-color: #121212;
+.dropdown_size_sm .dropdown_fieldset {
+  min-height: 40px;
 }
-.select_variant_filled {
-  background: #F4F4F4;
-  border: 1px solid transparent;
+.dropdown_size_md .dropdown_fieldset,
+.dropdown_size_lg .dropdown_fieldset {
+  min-height: 56px;
 }
-.select_variant_filled:hover:not(.is_disabled) {
-  background: rgb(251.7, 251.7, 251.7);
+.dropdown_size_sm .dropdown_control {
+  padding: 8px 16px;
 }
-.select_variant_filled.is_open {
-  background: #FFFFFF;
-  border-color: #121212;
+.dropdown_size_sm .dropdown_value,
+.dropdown_size_sm .dropdown_placeholder {
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  letter-spacing: 0px;
 }
-.select_variant_ghost {
-  background: transparent;
-  border: 1px solid transparent;
+.dropdown_fieldset {
+  position: relative;
+  border: 1px solid #E5E5E5;
+  border-radius: 12px;
+  background-color: #FFFFFF;
+  transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
 }
-.select_variant_ghost:hover:not(.is_disabled) {
-  background: rgba(0, 0, 0, 0.05);
+.dropdown_fieldset:hover:not(.is_open):not(.is_disabled) {
+  border-color: #B3B3B3;
 }
-.select_variant_ghost.is_open {
-  background: #FFFFFF;
+.dropdown_fieldset.is_open {
   border-color: #121212;
 }
-.select_fieldset.is_disabled {
+.dropdown_fieldset.is_disabled {
   background-color: #F4F4F4;
+  border-color: rgba(26, 26, 26, 0.12);
 }
-.select_inner {
-  display: flex;
-  align-items: stretch;
-  padding: 4px 0;
-}
-.select_size_sm .select_inner {
-  min-height: 40px;
-}
-.select_size_md .select_inner {
-  min-height: 52px;
-}
-.select_size_lg .select_inner {
-  min-height: 52px;
-}
-.select_label {
-  margin-inline-start: 12px;
+.dropdown_label {
+  position: absolute;
+  top: -8px;
+  left: 12px;
   padding: 0 4px;
-  color: #121212;
-  transition: color 0.2s ease-in-out;
-}
-.select_label > label {
-  display: block;
-  font-family: "Pretendard", sans-serif;
+  background: var(--dropdown-surface, #FFFFFF);
   font-size: 12px;
   font-weight: 400;
   line-height: 16px;
+  letter-spacing: 0px;
   letter-spacing: 0.32px;
-  color: inherit;
+  color: #121212;
+  white-space: nowrap;
   pointer-events: none;
-  cursor: default;
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out, color 0.2s ease-in-out;
+}
+.dropdown_label.is_visible {
+  opacity: 1;
 }
-.select_fieldset.is_disabled .select_label {
+.dropdown_fieldset.is_disabled .dropdown_label {
   color: rgba(26, 26, 26, 0.38);
 }
-.select_control {
-  flex: 1;
+.dropdown_control {
+  width: 100%;
   display: inline-flex;
   align-items: center;
-  justify-content: space-between;
-  gap: 8px;
+  gap: 4px;
+  padding: 12px 16px;
   cursor: pointer;
   background: transparent;
   border: none;
   outline: none;
   color: #121212;
   border-radius: 12px;
+  text-align: start;
 }
-.select_control:focus-visible {
+.dropdown_control:focus-visible {
   box-shadow: 0 0 0 3px rgba(18, 18, 18, 0.15);
 }
-.select_control:disabled,
-.select_control.is_disabled {
+.dropdown_control:disabled,
+.dropdown_control.is_disabled {
   cursor: not-allowed;
   opacity: 0.38;
   color: #888888;
 }
-.select_size_sm .select_control {
-  padding: 8px 16px;
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 16px;
-  letter-spacing: 0px;
-}
-.select_size_md .select_control {
-  padding: 12px 20px;
-  font-size: 15px;
-  font-weight: 400;
-  line-height: 22.5px;
-  letter-spacing: 0px;
-}
-.select_size_lg .select_control {
-  padding: 16px 24px;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 24px;
-  letter-spacing: 0px;
-}
-.select_value {
+.dropdown_value {
   flex: 1 1 auto;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   text-align: start;
-  font-size: 15px;
+  font-size: 14px;
   font-weight: 400;
-  line-height: 22.5px;
+  line-height: 20px;
   letter-spacing: 0px;
 }
-.select_placeholder {
+.dropdown_placeholder {
   flex: 1 1 auto;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   text-align: start;
-  font-size: 15px;
+  font-size: 14px;
   font-weight: 400;
-  line-height: 22.5px;
+  line-height: 20px;
   letter-spacing: 0px;
-  color: #888888;
+  color: #666666;
 }
-.select_icon {
+.dropdown_icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  flex-shrink: 0;
   color: #666666;
 }
-.select_list {
+.dropdown_list {
   position: absolute;
   z-index: 1000;
   top: 100%;
@@ -802,51 +763,88 @@
   margin-top: 4px;
   background: #FFFFFF;
   border: 1px solid #E5E5E5;
-  border-radius: 8px;
+  border-radius: 4px;
   box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.2), 0 6px 6px 0px rgba(0, 0, 0, 0.12);
   max-height: 18rem;
   overflow-y: auto;
   overflow-x: hidden;
   padding: 4px 0;
 }
-.select_list_up {
+.dropdown_list_up {
   top: auto;
   bottom: 100%;
   margin-top: 0;
   margin-bottom: 4px;
 }
-.select_option {
+.dropdown_option {
   width: 100%;
   box-sizing: border-box;
-  display: grid;
-  grid-template-columns: 1fr auto;
+  display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 12px;
   padding: 8px 16px;
+  min-height: 56px;
   cursor: pointer;
-  color: #121212;
   background: transparent;
-  font-size: 15px;
-  font-weight: 400;
-  line-height: 22.5px;
-  letter-spacing: 0px;
+  color: #121212;
+}
+.dropdown_option:hover {
+  background: rgba(0, 0, 0, 0.05);
+}
+.dropdown_option.is_active {
+  background: rgba(0, 0, 0, 0.08);
+}
+.dropdown_option.is_disabled {
+  cursor: not-allowed;
+  color: #888888;
 }
-.select_option > span:first-child {
+.dropdown_option_icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: #666666;
+}
+.dropdown_option_content {
+  flex: 1;
   min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+.dropdown_option_label {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+  letter-spacing: 0px;
 }
-.select_option:hover,
-.select_option.is_active {
-  background: #F4F4F4;
-}
-.select_option.is_selected {
+.is_selected .dropdown_option_label {
   font-weight: 500;
 }
-.select_option.is_disabled {
-  cursor: not-allowed;
-  color: #888888;
+.dropdown_option_supporting {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  letter-spacing: 0px;
+  color: #666666;
+}
+.dropdown_option_trailing {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: #666666;
+}
+.dropdown_option_divider {
+  height: 1px;
+  background: #E5E5E5;
+  border: none;
+  margin: 0;
 }
 
 /* src/ui/date-picker/style.scss */

package/dist/index.d.ts

@@ -36,8 +36,9 @@ declare const baseColors: {
     readonly neutral300: "#999999";
     readonly neutral400: "#B3B3B3";
     readonly neutral500: "#888888";
-    readonly neutral600: "#6B6B6B";
+    readonly neutral600: "#777777";
     readonly neutral700: "#666666";
+    readonly neutral800: "#333333";
     readonly neutral900: "#121212";
     readonly statusError: "#EF4444";
     readonly statusSuccess: "#10B981";
@@ -71,6 +72,7 @@ declare const colors: {
         readonly additive: "rgba(0, 0, 0, 0.05)";
         readonly disabled: "rgba(26, 26, 26, 0.12)";
         readonly overlay: "rgba(0, 0, 0, 0.50)";
+        readonly inverseSurface: "#333333";
     };
     readonly state: {
         readonly hoverOnLight: "rgba(0, 0, 0, 0.05)";
@@ -609,6 +611,60 @@ interface DatePickerProps {
  */
 declare const DatePicker: ({ label, value, onChange, mode, startYear, endYear: endYearProp, minDate, selectableRange, disabled, fullWidth, width, yearLabel, monthLabel, dayLabel, minDateSrFormat, selectableRangeUntilTodaySrText, }: DatePickerProps) => react_jsx_runtime.JSX.Element;
 
+type DropdownSize = "sm" | "md" | "lg";
+interface DropdownOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    /** 옵션 아래에 표시할 보조 텍스트 */
+    supportingText?: string;
+    /** 옵션 왼쪽 아이콘 */
+    leadingIcon?: React$1.ReactNode;
+    /** 옵션 오른쪽 아이콘 (미지정 시 선택 상태에 체크 아이콘 자동 표시) */
+    trailingIcon?: React$1.ReactNode;
+    /** 아이템 아래 구분선 표시 여부 */
+    showDivider?: boolean;
+}
+interface DropdownProps {
+    /** 드롭다운 요소의 id (미입력 시 자동 생성) */
+    id?: string;
+    /** 드롭다운 위에 표시할 플로팅 라벨 텍스트 */
+    label?: string;
+    /** 선택 전 표시할 플레이스홀더 (기본값: "Select…") */
+    placeholder?: string;
+    /** 표시할 옵션 목록 */
+    options: DropdownOption[];
+    /** 제어형 선택 값 */
+    value?: string | null;
+    /** 값 변경 시 호출되는 콜백. 선택된 값과 전체 옵션 객체를 인자로 전달합니다. */
+    onChange?: (value: string | null, option?: DropdownOption | null) => void;
+    /** 비제어형 초기 선택 값 */
+    defaultValue?: string | null;
+    /** 비활성화 여부 */
+    disabled?: boolean;
+    /** 드롭다운 크기 (기본값: "md") */
+    size?: DropdownSize;
+    /** 컨테이너 전체 너비 차지 여부 */
+    fullWidth?: boolean;
+    /** 루트 요소에 추가할 className */
+    className?: string;
+    /**
+     * @deprecated variant는 더 이상 지원되지 않습니다. Dropdown은 outline 스타일만 사용합니다.
+     */
+    variant?: "outline" | "filled" | "ghost";
+    /**
+     * @deprecated textAlign은 더 이상 지원되지 않습니다.
+     */
+    textAlign?: "left" | "center";
+}
+/**
+ * 드롭다운 컴포넌트를 렌더링한다.
+ * 제어형/비제어형 상태를 지원하며, 키보드/마우스 상호작용과 플로팅 라벨을 관리한다.
+ * @param props 드롭다운 속성
+ * @returns 렌더링된 드롭다운 UI
+ */
+declare const Dropdown: ({ id, label, placeholder, options, value, onChange, defaultValue, disabled, size, fullWidth, className, }: DropdownProps) => react_jsx_runtime.JSX.Element;
+
 interface DividerProps extends React$1.HTMLAttributes<HTMLHRElement> {
     /** 구분선 두께 (기본값: "standard") */
     weight?: "standard" | "heavy";
@@ -840,49 +896,6 @@ declare const Radio: {
     displayName: string;
 };
 
-type SelectSize = "sm" | "md" | "lg";
-type SelectVariant = "outline" | "filled" | "ghost";
-interface SelectOption {
-    value: string;
-    label: string;
-    disabled?: boolean;
-}
-interface SelectProps {
-    /** 셀렉트 요소의 id (미입력 시 자동 생성) */
-    id?: string;
-    /** 셀렉트 위에 표시할 라벨 텍스트 */
-    label?: string;
-    /** 선택 전 표시할 플레이스홀더 (기본값: "Select…") */
-    placeholder?: string;
-    /** 표시할 옵션 목록 */
-    options: SelectOption[];
-    /** 제어형 선택 값 */
-    value?: string | null;
-    /** 값 변경 시 호출되는 콜백. 선택된 값과 전체 옵션 객체를 인자로 전달합니다. */
-    onChange?: (value: string | null, option?: SelectOption | null) => void;
-    /** 비제어형 초기 선택 값 */
-    defaultValue?: string | null;
-    /** 비활성화 여부 */
-    disabled?: boolean;
-    /** 셀렉트 크기 (기본값: "md") */
-    size?: SelectSize;
-    /** 셀렉트 스타일 변형 (기본값: "outline") */
-    variant?: SelectVariant;
-    /** 컨테이너 전체 너비 차지 여부 */
-    fullWidth?: boolean;
-    /** 루트 요소에 추가할 className */
-    className?: string;
-    /** 선택된 값 텍스트 정렬 (기본값: "left") */
-    textAlign?: "left" | "center";
-}
-/**
- * 셀렉트 컴포넌트를 렌더링한다.
- * 제어형/비제어형 상태를 정리하고, 키보드/마우스 상호작용과 드롭다운 표시를 관리한다.
- * @param props 셀렉트 속성
- * @returns 렌더링된 셀렉트 UI
- */
-declare const Select: ({ id, label, placeholder, options, value, onChange, defaultValue, disabled, size, variant, fullWidth, className, textAlign, }: SelectProps) => react_jsx_runtime.JSX.Element;
-
 interface SpinnerProps {
     /** 스피너 크기(px) (기본값: 24) */
     size?: number;
@@ -1021,4 +1034,4 @@ interface TopLoadingProps {
  */
 declare const TopLoading: ({ progress, color, height, isLoading, ariaLabel, }: TopLoadingProps) => react_jsx_runtime.JSX.Element | null;
 
-export { AlertProvider, Button, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, Chip, type ChipProps, type ChipType, DatePicker, type DatePickerProps, Divider, type DividerProps, FAB, type FABProps, type FABVariant, FileInput, type FileInputProps, Icon, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, type IconName, type IconProps, type IconWeight, LinearProgress, type LinearProgressProps, ListItem, type ListItemProps, Modal, type ModalProps, OtpInput, type OtpInputProps, Pagination, type PaginationProps, Radio, type RadioProps, Select, type SelectOption, type SelectProps, Spinner, type SpinnerProps, TextField, type TextFieldProps, ToastProvider, Toggle, type ToggleProps, TopLoading, type TopLoadingProps, a11y, baseBorderWidth, baseColors, baseTypography, borderWidth, breakpoints, colors, elevation, motion, opacity, radius, skeleton, spacing, typography, useAlert, useToast, zIndex };
+export { AlertProvider, Button, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, Chip, type ChipProps, type ChipType, DatePicker, type DatePickerProps, Divider, type DividerProps, Dropdown, type DropdownOption, type DropdownProps, type DropdownSize, FAB, type FABProps, type FABVariant, FileInput, type FileInputProps, Icon, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, type IconName, type IconProps, type IconWeight, LinearProgress, type LinearProgressProps, ListItem, type ListItemProps, Modal, type ModalProps, OtpInput, type OtpInputProps, Pagination, type PaginationProps, Radio, type RadioProps, Dropdown as Select, type DropdownOption as SelectOption, type DropdownProps as SelectProps, Spinner, type SpinnerProps, TextField, type TextFieldProps, ToastProvider, Toggle, type ToggleProps, TopLoading, type TopLoadingProps, a11y, baseBorderWidth, baseColors, baseTypography, borderWidth, breakpoints, colors, elevation, motion, opacity, radius, skeleton, spacing, typography, useAlert, useToast, zIndex };

package/dist/index.js

@@ -4,7 +4,7 @@ import * as React5 from 'react';
 import { createContext, useContext, useState, useCallback } from 'react';
 import { createPortal } from 'react-dom';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { ChevronDown, Check, X, Bell, Info, AlertTriangle, XCircle, CheckCircle2 } from 'lucide-react';
+import { X, ChevronDown, Check, Bell, Info, AlertTriangle, XCircle, CheckCircle2 } from 'lucide-react';
 
 // src/styles/a11y/index.ts
 var a11y = {
@@ -48,8 +48,9 @@ var baseColors = {
   neutral300: "#999999",
   neutral400: "#B3B3B3",
   neutral500: "#888888",
-  neutral600: "#6B6B6B",
+  neutral600: "#777777",
   neutral700: "#666666",
+  neutral800: "#333333",
   neutral900: "#121212",
   statusError: "#EF4444",
   statusSuccess: "#10B981",
@@ -82,7 +83,8 @@ var colors = {
     solidDim: baseColors.neutral50,
     additive: baseColors.alphaBlack5,
     disabled: baseColors.alphaBlack12,
-    overlay: baseColors.alphaBlack50
+    overlay: baseColors.alphaBlack50,
+    inverseSurface: baseColors.neutral800
   },
   state: {
     hoverOnLight: baseColors.alphaBlack5,
@@ -803,7 +805,7 @@ var Chip = ({
     )
   ] });
 };
-var Select = ({
+var Dropdown = ({
   id,
   label,
   placeholder = "Select\u2026",
@@ -813,13 +815,11 @@ var Select = ({
   defaultValue = null,
   disabled,
   size = "md",
-  variant = "outline",
   fullWidth,
-  className,
-  textAlign = "left"
+  className
 }) => {
   const internalId = React5.useId();
-  const selectId = id ?? internalId;
+  const dropdownId = id ?? internalId;
   const isControlled = value !== void 0;
   const [internalValue, setInternalValue] = React5.useState(defaultValue);
   const currentValue = isControlled ? value ?? null : internalValue;
@@ -832,6 +832,7 @@ var Select = ({
     () => options.find((o) => o.value === currentValue) ?? null,
     [options, currentValue]
   );
+  const isLabelVisible = isOpen || !!currentOption;
   const setValue = React5.useCallback(
     (next) => {
       const option = options.find((o) => o.value === next) ?? null;
@@ -840,16 +841,17 @@ var Select = ({
     },
     [isControlled, onChange, options]
   );
-  const handleOutsideClick = React5.useEffectEvent((e) => {
-    if (!wrapperRef.current?.contains(e.target)) {
-      setIsOpen(false);
-    }
-  });
   React5.useEffect(() => {
+    const handleOutsideClick = (e) => {
+      if (!wrapperRef.current?.contains(e.target)) {
+        setIsOpen(false);
+      }
+    };
     document.addEventListener("mousedown", handleOutsideClick);
     return () => document.removeEventListener("mousedown", handleOutsideClick);
   }, []);
   const moveActive = (dir) => {
+    if (options.length === 0) return;
     if (!isOpen) {
       setIsOpen(true);
       return;
@@ -914,28 +916,20 @@ var Select = ({
     if (!isOpen) return;
     const idx = options.findIndex((o) => o.value === currentValue && !o.disabled);
     setActiveIndex(
-      idx >= 0 ? idx : Math.max(
-        0,
-        options.findIndex((o) => !o.disabled)
-      )
+      idx >= 0 ? idx : Math.max(0, options.findIndex((o) => !o.disabled))
     );
   }, [isOpen, options, currentValue]);
   React5.useLayoutEffect(() => {
     if (!isOpen || !controlRef.current) return;
     const rect = controlRef.current.getBoundingClientRect();
-    const listHeight = Math.min(options.length * 40, 288);
+    const listHeight = Math.min(options.length * 56, 288);
     const spaceBelow = window.innerHeight - rect.bottom;
     const spaceAbove = rect.top;
     setDropUp(spaceBelow < listHeight && spaceAbove > spaceBelow);
   }, [isOpen, options.length]);
-  const rootClassName = cn("select", { select_has_label: !!label }, className);
-  const fieldsetClassName = cn(
-    "select_fieldset",
-    `select_variant_${variant}`,
-    `select_size_${size}`,
-    { is_open: isOpen, is_disabled: disabled }
-  );
-  const listClassName = cn("select_list", { select_list_up: dropUp });
+  const rootClassName = cn("dropdown", `dropdown_size_${size}`, className);
+  const fieldsetClassName = cn("dropdown_fieldset", { is_open: isOpen, is_disabled: disabled });
+  const listClassName = cn("dropdown_list", { dropdown_list_up: dropUp });
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -943,73 +937,79 @@ var Select = ({
       className: rootClassName,
       style: fullWidth ? { width: "100%" } : void 0,
       children: [
-        /* @__PURE__ */ jsxs("fieldset", { className: fieldsetClassName, children: [
-          label && /* @__PURE__ */ jsx("legend", { className: "select_label", children: /* @__PURE__ */ jsx("label", { htmlFor: selectId, children: label }) }),
-          /* @__PURE__ */ jsx("div", { className: "select_inner", children: /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsxs("div", { className: fieldsetClassName, children: [
+          label && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn("dropdown_label", { is_visible: isLabelVisible }),
+              "aria-hidden": "true",
+              children: label
+            }
+          ),
+          /* @__PURE__ */ jsxs(
             "button",
             {
               ref: controlRef,
-              id: selectId,
+              id: dropdownId,
               type: "button",
-              className: cn("select_control", { is_disabled: disabled }),
+              className: cn("dropdown_control", { is_disabled: disabled }),
               "aria-haspopup": "listbox",
               "aria-expanded": isOpen,
-              "aria-controls": `${selectId}_listbox`,
+              "aria-controls": `${dropdownId}_listbox`,
+              "aria-label": label,
               onClick: () => !disabled && setIsOpen((o) => !o),
               onKeyDown,
               disabled,
               children: [
-                /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    className: currentOption ? "select_value" : "select_placeholder",
-                    style: textAlign === "left" ? { textAlign: "start" } : void 0,
-                    children: currentOption ? currentOption.label : placeholder
-                  }
-                ),
-                /* @__PURE__ */ jsx("span", { className: "select_icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(ChevronDown, { size: 16 }) })
+                /* @__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 }) })
               ]
             }
-          ) })
+          )
         ] }),
-        isOpen && /* @__PURE__ */ jsx("div", { id: `${selectId}_listbox`, role: "listbox", className: listClassName, children: options.map((opt, i) => {
-          const selected = currentValue === opt.value;
-          const active = i === activeIndex;
-          const optionClassName = cn("select_option", {
-            is_selected: selected,
-            is_active: active,
-            is_disabled: opt.disabled
-          });
-          return /* @__PURE__ */ jsxs(
-            "div",
-            {
-              role: "option",
-              tabIndex: -1,
-              "aria-selected": selected,
-              "aria-disabled": opt.disabled ? true : void 0,
-              className: optionClassName,
-              onMouseEnter: () => !opt.disabled && setActiveIndex(i),
-              onClick: () => {
-                if (opt.disabled) return;
-                setValue(opt.value);
-                setIsOpen(false);
-              },
-              onKeyDown: (e) => {
-                if (opt.disabled) return;
-                if (e.key === "Enter" || e.key === " ") {
-                  e.preventDefault();
-                  setValue(opt.value);
-                  setIsOpen(false);
-                }
-              },
-              children: [
-                /* @__PURE__ */ jsx("span", { children: opt.label }),
-                selected && /* @__PURE__ */ jsx(Check, { size: 16, "aria-hidden": "true" })
-              ]
-            },
-            opt.value
-          );
-        }) })
+        isOpen && /* @__PURE__ */ jsx(
+          "div",
+          {
+            id: `${dropdownId}_listbox`,
+            role: "listbox",
+            className: listClassName,
+            children: options.map((opt, i) => {
+              const selected = currentValue === opt.value;
+              const active = i === activeIndex;
+              return /* @__PURE__ */ jsxs(React5.Fragment, { children: [
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    role: "option",
+                    tabIndex: -1,
+                    "aria-selected": selected,
+                    "aria-disabled": opt.disabled ? true : void 0,
+                    className: cn("dropdown_option", {
+                      is_selected: selected,
+                      is_active: active,
+                      is_disabled: opt.disabled
+                    }),
+                    onMouseEnter: () => !opt.disabled && setActiveIndex(i),
+                    onClick: () => {
+                      if (opt.disabled) return;
+                      setValue(opt.value);
+                      setIsOpen(false);
+                    },
+                    children: [
+                      opt.leadingIcon && /* @__PURE__ */ jsx("span", { className: "dropdown_option_icon", children: opt.leadingIcon }),
+                      /* @__PURE__ */ jsxs("span", { className: "dropdown_option_content", children: [
+                        /* @__PURE__ */ jsx("span", { className: "dropdown_option_label", children: opt.label }),
+                        opt.supportingText && /* @__PURE__ */ jsx("span", { className: "dropdown_option_supporting", children: opt.supportingText })
+                      ] }),
+                      (selected || opt.trailingIcon) && /* @__PURE__ */ jsx("span", { className: "dropdown_option_trailing", children: opt.trailingIcon ?? /* @__PURE__ */ jsx(Check, { size: 16, "aria-hidden": "true" }) })
+                    ]
+                  }
+                ),
+                opt.showDivider && /* @__PURE__ */ jsx("div", { className: "dropdown_option_divider", role: "separator" })
+              ] }, opt.value);
+            })
+          }
+        )
       ]
     }
   );
@@ -1166,7 +1166,7 @@ var DatePicker = ({
         "aria-describedby": constraintDesc ? constraintId : void 0,
         children: [
           /* @__PURE__ */ jsx(
-            Select,
+            Dropdown,
             {
               size: "sm",
               fullWidth: true,
@@ -1179,7 +1179,7 @@ var DatePicker = ({
             }
           ),
           /* @__PURE__ */ jsx(
-            Select,
+            Dropdown,
             {
               size: "sm",
               fullWidth: true,
@@ -1192,7 +1192,7 @@ var DatePicker = ({
             }
           ),
           mode === "year-month-day" && /* @__PURE__ */ jsx(
-            Select,
+            Dropdown,
             {
               size: "sm",
               fullWidth: true,
@@ -2542,4 +2542,4 @@ var TopLoading = ({
   );
 };
 
-export { AlertProvider, Button, Card, Checkbox, Chip, DatePicker, Divider, FAB, FileInput, Icon, IconButton, LinearProgress, ListItem, Modal, OtpInput, Pagination, Radio, Select, Spinner, TextField, ToastProvider, Toggle, TopLoading, a11y, baseBorderWidth, baseColors, baseTypography, borderWidth, breakpoints, colors, elevation, motion, opacity, radius, skeleton, spacing, typography, useAlert, useToast, zIndex };
+export { AlertProvider, Button, Card, Checkbox, Chip, DatePicker, Divider, Dropdown, FAB, FileInput, Icon, IconButton, LinearProgress, ListItem, Modal, OtpInput, Pagination, Radio, Dropdown as Select, Spinner, TextField, ToastProvider, Toggle, TopLoading, a11y, baseBorderWidth, baseColors, baseTypography, borderWidth, breakpoints, colors, elevation, motion, opacity, radius, skeleton, spacing, typography, useAlert, useToast, zIndex };

package/dist/styles/colors/_index.scss

@@ -8,8 +8,9 @@ $color_base_neutral_200:      #E5E5E5;
 $color_base_neutral_300:      #999999;
 $color_base_neutral_400:      #B3B3B3;
 $color_base_neutral_500:      #888888;
-$color_base_neutral_600:      #6B6B6B;
+$color_base_neutral_600:      #777777;
 $color_base_neutral_700:      #666666;
+$color_base_neutral_800:      #333333;
 $color_base_neutral_900:      #121212;
 $color_base_status_error:     #EF4444;
 $color_base_status_success:   #10B981;
@@ -45,6 +46,7 @@ $color_bg_solid_dim:          $color_base_neutral_50;
 $color_bg_additive:           $color_base_alpha_black_5;
 $color_bg_disabled:           $color_base_alpha_black_12;
 $color_bg_overlay:            $color_base_alpha_black_50;
+$color_bg_inverse_surface:    $color_base_neutral_800;
 
 // ── Semantic: State ───────────────────────────────────────────────────────────
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bigtablet/design-system",
-	"version": "2.2.4",
+	"version": "2.4.0",
 	"description": "Bigtablet Design System UI Components",
 	"type": "module",
 	"types": "dist/index.d.ts",
@@ -116,7 +116,7 @@
 		"storybook": "^10.3.3",
 		"tsup": "^8.5.0",
 		"tsx": "^4.21.0",
-		"typescript": "^6.0.2",
+		"typescript": "^6.0.3",
 		"vite": "^6.4.2",
 		"vitest": "^4.1.2"
 	},