@bigtablet/design-system 1.11.3 → 1.11.5

package/dist/index.css

@@ -873,10 +873,11 @@
   gap: 0.25rem;
 }
 .date_picker_label {
-  font-family: "Pretendard", sans-serif;
+  color: #1a1a1a;
+  margin-bottom: 0.25rem;
+  font-weight: 500;
   font-size: 0.875rem;
   line-height: 1.5;
-  color: #666666;
 }
 .date_picker_required {
   margin-left: 0.25rem;

package/dist/index.d.ts

@@ -130,15 +130,21 @@ declare const TextField: React.ForwardRefExoticComponent<TextFieldProps & React.
 type DatePickerMode = "year-month" | "year-month-day";
 interface DatePickerProps {
     label?: string;
-    required?: boolean;
     value?: string;
     onChange: (value: string) => void;
     mode?: DatePickerMode;
     startYear?: number;
     endYear?: number;
+    minDate?: string;
     disabled?: boolean;
-}
-declare const DatePicker: ({ label, required, value, onChange, mode, startYear, endYear, disabled, }: DatePickerProps) => react_jsx_runtime.JSX.Element;
+    width?: {
+        container?: number | string;
+        year?: number | string;
+        month?: number | string;
+        day?: number | string;
+    };
+}
+declare const DatePicker: ({ label, value, onChange, mode, startYear, endYear, minDate, disabled, width, }: DatePickerProps) => react_jsx_runtime.JSX.Element;
 
 interface PaginationProps {
     page: number;

package/dist/index.js

@@ -590,83 +590,88 @@ var TextField = React3.forwardRef(
 TextField.displayName = "TextField";
 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;
 var DatePicker = ({
   label,
-  required,
   value,
   onChange,
   mode = "year-month-day",
   startYear = 1950,
   endYear = (/* @__PURE__ */ new Date()).getFullYear() + 10,
-  disabled
+  minDate,
+  disabled,
+  width
 }) => {
   const [y, m, d] = value?.split("-").map(Number) ?? [];
+  const [minY, minM, minD] = minDate?.split("-").map(Number) ?? [];
   const year = y ?? "";
   const month = m ?? "";
   const day = d ?? "";
+  const minMonth = minY && year === minY ? minM : 1;
+  const minDay = minY && minM && year === minY && month === minM ? minD : 1;
   const days = year && month ? getDaysInMonth(year, month) : 31;
+  const clampDay = (year2, month2, day2) => {
+    const maxDay = getDaysInMonth(year2, month2);
+    return Math.min(day2, maxDay);
+  };
   const emit = (yy, mm, dd) => {
-    const result = mode === "year-month" ? `${yy}-${pad(mm)}-01` : `${yy}-${pad(mm)}-${pad(dd ?? 1)}`;
-    onChange(result);
+    if (mode === "year-month") {
+      onChange(`${yy}-${pad(mm)}`);
+      return;
+    }
+    const safeDay = clampDay(yy, mm, dd ?? 1);
+    onChange(`${yy}-${pad(mm)}-${pad(safeDay)}`);
   };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: [
-        "date_picker",
-        disabled && "date_picker_disabled"
-      ].filter(Boolean).join(" "),
-      children: [
-        label && /* @__PURE__ */ jsxs("label", { className: "date_picker_label", children: [
-          label,
-          required && /* @__PURE__ */ jsx("span", { className: "date_picker_required", children: "*" })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "date_picker_fields", children: [
-          /* @__PURE__ */ jsxs(
-            "select",
-            {
-              value: year,
-              disabled,
-              onChange: (e) => emit(Number(e.target.value), month || 1, day || 1),
-              children: [
-                /* @__PURE__ */ jsx("option", { value: "", disabled: true }),
-                Array.from(
-                  { length: endYear - startYear + 1 },
-                  (_, i) => startYear + i
-                ).map((y2) => /* @__PURE__ */ jsx("option", { value: y2, children: y2 }, y2))
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "select",
-            {
-              value: month,
-              disabled: disabled || !year,
-              onChange: (e) => emit(year, Number(e.target.value), day || 1),
-              children: [
-                /* @__PURE__ */ jsx("option", { value: "", disabled: true }),
-                Array.from({ length: 12 }, (_, i) => i + 1).map((m2) => /* @__PURE__ */ jsx("option", { value: m2, children: pad(m2) }, m2))
-              ]
-            }
-          ),
-          mode === "year-month-day" && /* @__PURE__ */ jsxs(
-            "select",
-            {
-              value: day,
-              disabled: disabled || !month,
-              onChange: (e) => emit(year, month, Number(e.target.value)),
-              children: [
-                /* @__PURE__ */ jsx("option", { value: "", disabled: true }),
-                Array.from({ length: days }, (_, i) => i + 1).map(
-                  (d2) => /* @__PURE__ */ jsx("option", { value: d2, children: pad(d2) }, d2)
-                )
-              ]
-            }
+  return /* @__PURE__ */ jsxs("div", { className: "date_picker", style: { width: normalizeWidth(width?.container) }, children: [
+    label && /* @__PURE__ */ jsx("label", { className: "date_picker_label", children: label }),
+    /* @__PURE__ */ jsxs(
+      "select",
+      {
+        style: { width: normalizeWidth(width?.year) },
+        value: year,
+        disabled,
+        onChange: (e) => emit(Number(e.target.value), month || minMonth, day || minDay),
+        children: [
+          /* @__PURE__ */ jsx("option", { value: "", disabled: true }),
+          Array.from(
+            { length: endYear - startYear + 1 },
+            (_, i) => startYear + i
+          ).map((y2) => /* @__PURE__ */ jsx("option", { value: y2, children: y2 }, y2))
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "select",
+      {
+        style: { width: normalizeWidth(width?.month) },
+        value: month,
+        disabled: disabled || !year,
+        onChange: (e) => emit(year, Number(e.target.value), day || minDay),
+        children: [
+          /* @__PURE__ */ jsx("option", { value: "", disabled: true }),
+          Array.from({ length: 12 - minMonth + 1 }, (_, i) => minMonth + i).map(
+            (m2) => /* @__PURE__ */ jsx("option", { value: m2, children: pad(m2) }, m2)
           )
-        ] })
-      ]
-    }
-  );
+        ]
+      }
+    ),
+    mode === "year-month-day" && /* @__PURE__ */ jsxs(
+      "select",
+      {
+        style: { width: normalizeWidth(width?.day) },
+        value: day,
+        disabled: disabled || !month,
+        onChange: (e) => emit(year, month, Number(e.target.value)),
+        children: [
+          /* @__PURE__ */ jsx("option", { value: "", disabled: true }),
+          Array.from(
+            { length: days - minDay + 1 },
+            (_, i) => minDay + i
+          ).map((d2) => /* @__PURE__ */ jsx("option", { value: d2, children: pad(d2) }, d2))
+        ]
+      }
+    )
+  ] });
 };
 var range = (start, end) => {
   const out = [];

package/package.json

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