@bigtablet/design-system 2.2.3 → 2.3.0

package/dist/index.css

@@ -379,6 +379,7 @@
   font-weight: 400;
   line-height: 28px;
   letter-spacing: 0px;
+  margin-top: 0;
   margin-bottom: 12px;
   color: #121212;
 }
@@ -624,7 +625,7 @@
   cursor: not-allowed;
 }
 
-/* src/ui/date-picker/style.scss */
+/* src/ui/select/style.scss */
 @keyframes skeleton_loading {
   0% {
     background-position: 100% 0;
@@ -633,67 +634,234 @@
     background-position: 0 0;
   }
 }
-.date_picker {
-  display: flex;
+.select {
+  position: relative;
+  display: inline-flex;
   flex-direction: column;
-  gap: 4px;
-}
-.date_picker select {
-  min-width: 88px;
-  height: 44px;
-  padding: 0 12px;
+  width: 100%;
   font-family: "Pretendard", sans-serif;
-  font-size: 15px;
-  font-weight: 400;
-  line-height: 22.5px;
-  letter-spacing: 0px;
-  color: #121212;
+}
+.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;
-  border-radius: 6px;
-  cursor: pointer;
-  transition:
-    border-color 0.1s ease-in-out,
-    box-shadow 0.1s ease-in-out,
-    background-color 0.1s ease-in-out;
-  appearance: none;
-  background-image:
-    linear-gradient(
-      45deg,
-      transparent 50%,
-      #666666 50%),
-    linear-gradient(
-      135deg,
-      #666666 50%,
-      transparent 50%);
-  background-position: calc(100% - 16px) calc(50% - 3px), calc(100% - 11px) calc(50% - 3px);
-  background-size: 5px 5px;
-  background-repeat: no-repeat;
-}
-.date_picker select:hover:not(:disabled) {
+}
+.select_variant_outline:hover:not(.is_disabled) {
+  border-color: #B3B3B3;
+}
+.select_variant_outline.is_open {
+  border-color: #121212;
+}
+.select_variant_filled {
+  background: #F4F4F4;
+  border: 1px solid transparent;
+}
+.select_variant_filled:hover:not(.is_disabled) {
+  background: rgb(251.7, 251.7, 251.7);
+}
+.select_variant_filled.is_open {
+  background: #FFFFFF;
+  border-color: #121212;
+}
+.select_variant_ghost {
+  background: transparent;
+  border: 1px solid transparent;
+}
+.select_variant_ghost:hover:not(.is_disabled) {
+  background: rgba(0, 0, 0, 0.05);
+}
+.select_variant_ghost.is_open {
+  background: #FFFFFF;
   border-color: #121212;
+}
+.select_fieldset.is_disabled {
   background-color: #F4F4F4;
 }
-.date_picker select:focus-visible {
+.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;
+  padding: 0 4px;
+  color: #121212;
+  transition: color 0.2s ease-in-out;
+}
+.select_label > label {
+  display: block;
+  font-family: "Pretendard", sans-serif;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  letter-spacing: 0.32px;
+  color: inherit;
+  pointer-events: none;
+  cursor: default;
+}
+.select_fieldset.is_disabled .select_label {
+  color: rgba(26, 26, 26, 0.38);
+}
+.select_control {
+  flex: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  cursor: pointer;
+  background: transparent;
+  border: none;
   outline: none;
-  border-color: #121212;
+  color: #121212;
+  border-radius: 12px;
+}
+.select_control:focus-visible {
   box-shadow: 0 0 0 3px rgba(18, 18, 18, 0.15);
-  background-color: #FFFFFF;
 }
-.date_picker select:disabled {
+.select_control:disabled,
+.select_control.is_disabled {
   cursor: not-allowed;
-  color: rgba(26, 26, 26, 0.38);
-  background-color: #F4F4F4;
-  border-color: rgba(0, 0, 0, 0.08);
+  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 {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: start;
+  font-size: 15px;
+  font-weight: 400;
+  line-height: 22.5px;
+  letter-spacing: 0px;
+}
+.select_placeholder {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: start;
+  font-size: 15px;
+  font-weight: 400;
+  line-height: 22.5px;
+  letter-spacing: 0px;
+  color: #888888;
+}
+.select_icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: #666666;
 }
-.date_picker select option {
+.select_list {
+  position: absolute;
+  z-index: 1000;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  min-width: 100%;
+  box-sizing: border-box;
+  margin-top: 4px;
+  background: #FFFFFF;
+  border: 1px solid #E5E5E5;
+  border-radius: 8px;
+  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 {
+  top: auto;
+  bottom: 100%;
+  margin-top: 0;
+  margin-bottom: 4px;
+}
+.select_option {
+  width: 100%;
+  box-sizing: border-box;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  cursor: pointer;
   color: #121212;
+  background: transparent;
+  font-size: 15px;
+  font-weight: 400;
+  line-height: 22.5px;
+  letter-spacing: 0px;
 }
-@media (max-width: 599px) {
-  .date_picker select {
-    flex: 1;
-    min-width: 0;
+.select_option > span:first-child {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.select_option:hover,
+.select_option.is_active {
+  background: #F4F4F4;
+}
+.select_option.is_selected {
+  font-weight: 500;
+}
+.select_option.is_disabled {
+  cursor: not-allowed;
+  color: #888888;
+}
+
+/* src/ui/date-picker/style.scss */
+@keyframes skeleton_loading {
+  0% {
+    background-position: 100% 0;
   }
+  100% {
+    background-position: 0 0;
+  }
+}
+.date_picker {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
 }
 .date_picker_label {
   color: #121212;
@@ -709,6 +877,7 @@
 .date_picker_fields {
   display: flex;
   gap: 8px;
+  align-items: flex-end;
 }
 @media (max-width: 599px) {
   .date_picker_fields {
@@ -721,7 +890,7 @@
 .date_picker_full_width .date_picker_fields {
   width: 100%;
 }
-.date_picker_full_width select {
+.date_picker_full_width .date_picker_fields > * {
   flex: 1;
   min-width: 0;
 }
@@ -1509,224 +1678,6 @@
   height: 10px;
 }
 
-/* src/ui/select/style.scss */
-@keyframes skeleton_loading {
-  0% {
-    background-position: 100% 0;
-  }
-  100% {
-    background-position: 0 0;
-  }
-}
-.select {
-  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: rgba(0, 0, 0, 0.08);
-}
-.select_variant_outline.is_open {
-  border-color: #121212;
-  box-shadow: 0 0 0 3px rgba(18, 18, 18, 0.15);
-}
-.select_variant_filled {
-  background: #F4F4F4;
-  border: 1px solid transparent;
-}
-.select_variant_filled:hover:not(.is_disabled) {
-  background: rgb(251.7, 251.7, 251.7);
-}
-.select_variant_filled.is_open {
-  background: #FFFFFF;
-  border-color: #121212;
-  box-shadow: 0 0 0 3px rgba(18, 18, 18, 0.15);
-}
-.select_variant_ghost {
-  background: transparent;
-  border: 1px solid transparent;
-}
-.select_variant_ghost:hover:not(.is_disabled) {
-  background: rgba(0, 0, 0, 0.05);
-}
-.select_variant_ghost.is_open {
-  background: #FFFFFF;
-  border-color: #121212;
-  box-shadow: 0 0 0 3px rgba(18, 18, 18, 0.15);
-}
-.select_fieldset.is_disabled {
-  background-color: #F4F4F4;
-}
-.select_size_sm {
-  min-height: 40px;
-}
-.select_size_md {
-  min-height: 52px;
-}
-.select_size_lg {
-  min-height: 52px;
-}
-.select_label {
-  margin-inline-start: 12px;
-  padding: 0 4px;
-  color: #121212;
-  transition: color 0.2s ease-in-out;
-}
-.select_label > label {
-  display: block;
-  font-family: "Pretendard", sans-serif;
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 16px;
-  letter-spacing: 0.32px;
-  color: inherit;
-  pointer-events: none;
-  cursor: default;
-}
-.select_fieldset.is_disabled .select_label {
-  color: rgba(26, 26, 26, 0.38);
-}
-.select_control {
-  width: 100%;
-  min-height: inherit;
-  display: inline-flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  cursor: pointer;
-  background: transparent;
-  border: none;
-  color: #121212;
-}
-.select_control:disabled,
-.select_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 {
-  flex: 1 1 auto;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  text-align: start;
-  font-size: 15px;
-  font-weight: 400;
-  line-height: 22.5px;
-  letter-spacing: 0px;
-}
-.select_placeholder {
-  flex: 1 1 auto;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  text-align: start;
-  font-size: 15px;
-  font-weight: 400;
-  line-height: 22.5px;
-  letter-spacing: 0px;
-  color: #888888;
-}
-.select_icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: #666666;
-}
-.select_list {
-  position: absolute;
-  z-index: 1000;
-  top: 100%;
-  left: 0;
-  width: 100%;
-  min-width: 100%;
-  box-sizing: border-box;
-  margin-top: 4px;
-  background: #FFFFFF;
-  border: 1px solid #E5E5E5;
-  border-radius: 8px;
-  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 {
-  top: auto;
-  bottom: 100%;
-  margin-top: 0;
-  margin-bottom: 4px;
-}
-.select_option {
-  width: 100%;
-  box-sizing: border-box;
-  display: grid;
-  grid-template-columns: 1fr auto;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 16px;
-  cursor: pointer;
-  color: #121212;
-  background: transparent;
-  font-size: 15px;
-  font-weight: 400;
-  line-height: 22.5px;
-  letter-spacing: 0px;
-}
-.select_option > span:first-child {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.select_option:hover,
-.select_option.is_active {
-  background: #F4F4F4;
-}
-.select_option.is_selected {
-  font-weight: 500;
-}
-.select_option.is_disabled {
-  cursor: not-allowed;
-  color: #888888;
-}
-
 /* src/ui/spinner/style.scss */
 @keyframes skeleton_loading {
   0% {

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)";
@@ -586,11 +588,11 @@ interface DatePickerProps {
      * @deprecated `fullWidth` 사용 또는 CSS로 처리
      */
     width?: number | string;
-    /** 연도 select의 aria-label 및 빈 옵션 텍스트 (기본값: "Year") */
+    /** 연도 select의 라벨/플레이스홀더 (기본값: "Year") */
     yearLabel?: string;
-    /** 월 select의 aria-label 및 빈 옵션 텍스트 (기본값: "Month") */
+    /** 월 select의 라벨/플레이스홀더 (기본값: "Month") */
     monthLabel?: string;
-    /** 일 select의 aria-label 및 빈 옵션 텍스트 (기본값: "Day") */
+    /** 일 select의 라벨/플레이스홀더 (기본값: "Day") */
     dayLabel?: string;
     /**
      * minDate 설정 시 스크린리더에 전달할 안내 문구 포맷.
@@ -605,7 +607,7 @@ interface DatePickerProps {
 }
 /**
  * 연/월/일 선택형 데이트 피커를 렌더링한다.
- * 입력 값과 선택 범위를 기준으로 옵션을 계산하고, 선택 변경을 상위로 전달한다.
+ * 내부적으로 DS Select 3개를 조합해 드롭다운 UX 일관성을 유지한다.
  */
 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;
 

package/dist/index.js

@@ -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,6 +805,217 @@ var Chip = ({
     )
   ] });
 };
+var Select = ({
+  id,
+  label,
+  placeholder = "Select\u2026",
+  options,
+  value,
+  onChange,
+  defaultValue = null,
+  disabled,
+  size = "md",
+  variant = "outline",
+  fullWidth,
+  className,
+  textAlign = "left"
+}) => {
+  const internalId = React5.useId();
+  const selectId = id ?? internalId;
+  const isControlled = value !== void 0;
+  const [internalValue, setInternalValue] = React5.useState(defaultValue);
+  const currentValue = isControlled ? value ?? null : internalValue;
+  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 = React5.useCallback(
+    (next) => {
+      const option = options.find((o) => o.value === next) ?? null;
+      if (!isControlled) setInternalValue(next);
+      onChange?.(next, option);
+    },
+    [isControlled, onChange, options]
+  );
+  const handleOutsideClick = React5.useEffectEvent((e) => {
+    if (!wrapperRef.current?.contains(e.target)) {
+      setIsOpen(false);
+    }
+  });
+  React5.useEffect(() => {
+    document.addEventListener("mousedown", handleOutsideClick);
+    return () => document.removeEventListener("mousedown", handleOutsideClick);
+  }, []);
+  const moveActive = (dir) => {
+    if (!isOpen) {
+      setIsOpen(true);
+      return;
+    }
+    let i = activeIndex;
+    const len = options.length;
+    for (let step = 0; step < len; step++) {
+      i = (i + dir + len) % len;
+      if (!options[i].disabled) {
+        setActiveIndex(i);
+        break;
+      }
+    }
+  };
+  const commitActive = () => {
+    if (activeIndex < 0 || activeIndex >= options.length) return;
+    const opt = options[activeIndex];
+    if (!opt.disabled) {
+      setValue(opt.value);
+      setIsOpen(false);
+    }
+  };
+  const onKeyDown = (e) => {
+    if (disabled) return;
+    switch (e.key) {
+      case " ":
+      case "Enter":
+        e.preventDefault();
+        if (!isOpen) setIsOpen(true);
+        else commitActive();
+        break;
+      case "ArrowDown":
+        e.preventDefault();
+        moveActive(1);
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        moveActive(-1);
+        break;
+      case "Home":
+        e.preventDefault();
+        setIsOpen(true);
+        setActiveIndex(options.findIndex((o) => !o.disabled));
+        break;
+      case "End":
+        e.preventDefault();
+        setIsOpen(true);
+        for (let i = options.length - 1; i >= 0; i--) {
+          if (!options[i].disabled) {
+            setActiveIndex(i);
+            break;
+          }
+        }
+        break;
+      case "Escape":
+        e.preventDefault();
+        setIsOpen(false);
+        break;
+    }
+  };
+  React5.useEffect(() => {
+    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)
+      )
+    );
+  }, [isOpen, options, currentValue]);
+  React5.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 = 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 });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: wrapperRef,
+      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(
+            "button",
+            {
+              ref: controlRef,
+              id: selectId,
+              type: "button",
+              className: cn("select_control", { is_disabled: disabled }),
+              "aria-haspopup": "listbox",
+              "aria-expanded": isOpen,
+              "aria-controls": `${selectId}_listbox`,
+              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 }) })
+              ]
+            }
+          ) })
+        ] }),
+        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
+          );
+        }) })
+      ]
+    }
+  );
+};
 var pad = (n) => String(n).padStart(2, "0");
 var getDaysInMonth = (year, month) => new Date(year, month, 0).getDate();
 var normalizeWidth = (v) => typeof v === "number" ? `${v}px` : v;
@@ -856,9 +1069,12 @@ var DatePicker = ({
   }, [minDate]);
   const { year, month, day } = parsed;
   const maxYear = selectableRange === "until-today" ? todayYear : endYear;
-  const minMonth = min.year > 0 && year === min.year ? min.month : 1;
+  const minMonth = min.year > 0 && year === min.year ? Math.min(12, Math.max(1, 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 minDay = Math.min(31, Math.max(
+    1,
+    min.year > 0 && min.month > 0 && year === min.year && month === min.month ? min.day : 1
+  ));
   const maxDay = React5.useMemo(() => {
     if (!year || !month) return 31;
     const daysInMonth = getDaysInMonth(year, month);
@@ -868,15 +1084,24 @@ var DatePicker = ({
     return daysInMonth;
   }, [year, month, selectableRange, todayYear, todayMonth, todayDay]);
   const yearOptions = React5.useMemo(
-    () => range(startYear, maxYear),
+    () => range(startYear, maxYear).map((y) => ({
+      value: String(y),
+      label: String(y)
+    })),
     [startYear, maxYear]
   );
   const monthOptions = React5.useMemo(
-    () => range(minMonth, Math.max(minMonth, maxMonth)),
+    () => range(minMonth, Math.max(minMonth, maxMonth)).map((m) => ({
+      value: String(m),
+      label: pad(m)
+    })),
     [minMonth, maxMonth]
   );
   const dayOptions = React5.useMemo(
-    () => range(minDay, Math.max(minDay, maxDay)),
+    () => range(minDay, Math.max(minDay, maxDay)).map((d) => ({
+      value: String(d),
+      label: pad(d)
+    })),
     [minDay, maxDay]
   );
   const emit = React5.useCallback(
@@ -891,7 +1116,9 @@ var DatePicker = ({
     [mode, onChange]
   );
   const handleYearChange = React5.useCallback(
-    (newYear) => {
+    (raw) => {
+      if (!raw) return;
+      const newYear = Number(raw);
       let newMonth = month;
       const newMinMonth = min.year > 0 && newYear === min.year ? min.month : 1;
       const newMaxMonth = selectableRange === "until-today" && newYear === todayYear ? todayMonth : 12;
@@ -906,22 +1133,23 @@ var DatePicker = ({
     [month, day, min.year, min.month, selectableRange, todayYear, todayMonth, emit]
   );
   const handleMonthChange = React5.useCallback(
-    (newMonth) => {
-      if (!year) return;
-      emit(year, newMonth, day || void 0);
+    (raw) => {
+      if (!raw || !year) return;
+      emit(year, Number(raw), day || void 0);
     },
     [year, day, emit]
   );
   const handleDayChange = React5.useCallback(
-    (newDay) => {
-      if (!year || !month) return;
-      emit(year, month, newDay);
+    (raw) => {
+      if (!raw || !year || !month) return;
+      emit(year, month, Number(raw));
     },
     [year, month, emit]
   );
   const containerStyle = width ? { width: normalizeWidth(width) } : void 0;
   const rootClassName = cn("date_picker", {
-    date_picker_full_width: fullWidth && !width
+    date_picker_full_width: fullWidth && !width,
+    date_picker_disabled: disabled
   });
   const constraintParts = [];
   if (minDate) constraintParts.push(minDateSrFormat.replace("{date}", minDate));
@@ -939,43 +1167,43 @@ var DatePicker = ({
         "aria-labelledby": label ? groupId : void 0,
         "aria-describedby": constraintDesc ? constraintId : void 0,
         children: [
-          /* @__PURE__ */ jsxs(
-            "select",
+          /* @__PURE__ */ jsx(
+            Select,
             {
-              "aria-label": yearLabel,
-              value: year || "",
-              disabled,
-              onChange: (e) => handleYearChange(Number(e.target.value)),
-              children: [
-                /* @__PURE__ */ jsx("option", { value: "", children: yearLabel }),
-                yearOptions.map((y) => /* @__PURE__ */ jsx("option", { value: y, children: y }, y))
-              ]
+              size: "sm",
+              fullWidth: true,
+              label: yearLabel,
+              placeholder: yearLabel,
+              options: yearOptions,
+              value: year ? String(year) : null,
+              onChange: handleYearChange,
+              disabled
             }
           ),
-          /* @__PURE__ */ jsxs(
-            "select",
+          /* @__PURE__ */ jsx(
+            Select,
             {
-              "aria-label": monthLabel,
-              value: month || "",
-              disabled: disabled || !year,
-              onChange: (e) => handleMonthChange(Number(e.target.value)),
-              children: [
-                /* @__PURE__ */ jsx("option", { value: "", children: monthLabel }),
-                monthOptions.map((m) => /* @__PURE__ */ jsx("option", { value: m, children: pad(m) }, m))
-              ]
+              size: "sm",
+              fullWidth: true,
+              label: monthLabel,
+              placeholder: monthLabel,
+              options: monthOptions,
+              value: month ? String(month) : null,
+              onChange: handleMonthChange,
+              disabled: disabled || !year
             }
           ),
-          mode === "year-month-day" && /* @__PURE__ */ jsxs(
-            "select",
+          mode === "year-month-day" && /* @__PURE__ */ jsx(
+            Select,
             {
-              "aria-label": dayLabel,
-              value: day || "",
-              disabled: disabled || !month,
-              onChange: (e) => handleDayChange(Number(e.target.value)),
-              children: [
-                /* @__PURE__ */ jsx("option", { value: "", children: dayLabel }),
-                dayOptions.map((d) => /* @__PURE__ */ jsx("option", { value: d, children: pad(d) }, d))
-              ]
+              size: "sm",
+              fullWidth: true,
+              label: dayLabel,
+              placeholder: dayLabel,
+              options: dayOptions,
+              value: day ? String(day) : null,
+              onChange: handleDayChange,
+              disabled: disabled || !month
             }
           )
         ]
@@ -2031,217 +2259,6 @@ var Radio = ({ label, size = "md", className, ref, ...props }) => {
   ] });
 };
 Radio.displayName = "Radio";
-var Select = ({
-  id,
-  label,
-  placeholder = "Select\u2026",
-  options,
-  value,
-  onChange,
-  defaultValue = null,
-  disabled,
-  size = "md",
-  variant = "outline",
-  fullWidth,
-  className,
-  textAlign = "left"
-}) => {
-  const internalId = React5.useId();
-  const selectId = id ?? internalId;
-  const isControlled = value !== void 0;
-  const [internalValue, setInternalValue] = React5.useState(defaultValue);
-  const currentValue = isControlled ? value ?? null : internalValue;
-  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 = React5.useCallback(
-    (next) => {
-      const option = options.find((o) => o.value === next) ?? null;
-      if (!isControlled) setInternalValue(next);
-      onChange?.(next, option);
-    },
-    [isControlled, onChange, options]
-  );
-  const handleOutsideClick = React5.useEffectEvent((e) => {
-    if (!wrapperRef.current?.contains(e.target)) {
-      setIsOpen(false);
-    }
-  });
-  React5.useEffect(() => {
-    document.addEventListener("mousedown", handleOutsideClick);
-    return () => document.removeEventListener("mousedown", handleOutsideClick);
-  }, []);
-  const moveActive = (dir) => {
-    if (!isOpen) {
-      setIsOpen(true);
-      return;
-    }
-    let i = activeIndex;
-    const len = options.length;
-    for (let step = 0; step < len; step++) {
-      i = (i + dir + len) % len;
-      if (!options[i].disabled) {
-        setActiveIndex(i);
-        break;
-      }
-    }
-  };
-  const commitActive = () => {
-    if (activeIndex < 0 || activeIndex >= options.length) return;
-    const opt = options[activeIndex];
-    if (!opt.disabled) {
-      setValue(opt.value);
-      setIsOpen(false);
-    }
-  };
-  const onKeyDown = (e) => {
-    if (disabled) return;
-    switch (e.key) {
-      case " ":
-      case "Enter":
-        e.preventDefault();
-        if (!isOpen) setIsOpen(true);
-        else commitActive();
-        break;
-      case "ArrowDown":
-        e.preventDefault();
-        moveActive(1);
-        break;
-      case "ArrowUp":
-        e.preventDefault();
-        moveActive(-1);
-        break;
-      case "Home":
-        e.preventDefault();
-        setIsOpen(true);
-        setActiveIndex(options.findIndex((o) => !o.disabled));
-        break;
-      case "End":
-        e.preventDefault();
-        setIsOpen(true);
-        for (let i = options.length - 1; i >= 0; i--) {
-          if (!options[i].disabled) {
-            setActiveIndex(i);
-            break;
-          }
-        }
-        break;
-      case "Escape":
-        e.preventDefault();
-        setIsOpen(false);
-        break;
-    }
-  };
-  React5.useEffect(() => {
-    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)
-      )
-    );
-  }, [isOpen, options, currentValue]);
-  React5.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 = 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 });
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref: wrapperRef,
-      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__ */ jsxs(
-            "button",
-            {
-              ref: controlRef,
-              id: selectId,
-              type: "button",
-              className: cn("select_control", { is_disabled: disabled }),
-              "aria-haspopup": "listbox",
-              "aria-expanded": isOpen,
-              "aria-controls": `${selectId}_listbox`,
-              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 }) })
-              ]
-            }
-          )
-        ] }),
-        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
-          );
-        }) })
-      ]
-    }
-  );
-};
 var Spinner = ({ size = 24, ariaLabel = "Loading" }) => {
   return /* @__PURE__ */ jsx(
     "span",

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.3",
+	"version": "2.3.0",
 	"description": "Bigtablet Design System UI Components",
 	"type": "module",
 	"types": "dist/index.d.ts",