@bigtablet/design-system 1.9.0 → 1.9.1

package/dist/index.css

@@ -868,6 +868,21 @@
 
 /* src/ui/form/date-picker/style.scss */
 .date_picker {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+.date_picker_label {
+  font-family: "Pretendard", sans-serif;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  color: #666666;
+}
+.date_picker_required {
+  margin-left: 0.25rem;
+  color: #ef4444;
+}
+.date_picker_fields {
   display: flex;
   gap: 0.5rem;
 }
@@ -920,20 +935,26 @@
 .date_picker select option {
   color: #1a1a1a;
 }
-.date_picker select:nth-child(1) {
-  min-width: 96px;
+.date_picker_full {
+  width: 100%;
 }
-.date_picker select:nth-child(2),
-.date_picker select:nth-child(3) {
-  min-width: 72px;
+.date_picker_full .date_picker_fields {
+  width: 100%;
+}
+.date_picker_full select {
+  flex: 1;
+  min-width: 0;
+}
+.date_picker_disabled .date_picker_label {
+  color: #9ca3af;
 }
 @media (max-width: 480px) {
-  .date_picker {
+  .date_picker_fields {
     gap: 0.25rem;
   }
   .date_picker select {
-    min-width: 0;
     flex: 1;
+    min-width: 0;
   }
 }
 

package/dist/index.d.ts

@@ -125,6 +125,8 @@ 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;
@@ -132,7 +134,7 @@ interface DatePickerProps {
     endYear?: number;
     disabled?: boolean;
 }
-declare const DatePicker: ({ value, onChange, mode, startYear, endYear, disabled, }: DatePickerProps) => react_jsx_runtime.JSX.Element;
+declare const DatePicker: ({ label, required, value, onChange, mode, startYear, endYear, disabled, }: DatePickerProps) => react_jsx_runtime.JSX.Element;
 
 interface PaginationProps {
     page: number;

package/dist/index.js

@@ -527,6 +527,8 @@ TextField.displayName = "TextField";
 var pad = (n) => String(n).padStart(2, "0");
 var getDaysInMonth = (year, month) => new Date(year, month, 0).getDate();
 var DatePicker = ({
+  label,
+  required,
   value,
   onChange,
   mode = "year-month-day",
@@ -543,49 +545,64 @@ var DatePicker = ({
     const result = mode === "year-month" ? `${yy}-${pad(mm)}-01` : `${yy}-${pad(mm)}-${pad(dd ?? 1)}`;
     onChange(result);
   };
-  return /* @__PURE__ */ jsxs("div", { className: "date_picker", 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",
+        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)
+                )
+              ]
+            }
           )
-        ]
-      }
-    )
-  ] });
+        ] })
+      ]
+    }
+  );
 };
 var range = (start, end) => {
   const out = [];

package/package.json

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