@bigtablet/design-system 1.8.0 → 1.9.1

package/dist/index.css

@@ -866,6 +866,98 @@
   box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important;
 }
 
+/* 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;
+}
+.date_picker select {
+  min-width: 88px;
+  height: 44px;
+  padding: 0 0.75rem;
+  font-family: "Pretendard", sans-serif;
+  font-size: 0.9375rem;
+  line-height: 1.5;
+  color: #1a1a1a;
+  background-color: #ffffff;
+  border: 1px solid #e5e5e5;
+  border-radius: 6px;
+  cursor: pointer;
+  transition:
+    border-color 0.1s ease-out,
+    box-shadow 0.1s ease-out,
+    background-color 0.1s ease-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) {
+  border-color: #000000;
+  background-color: #fafafa;
+}
+.date_picker select:focus-visible {
+  outline: none;
+  border-color: #000000;
+  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
+  background-color: #ffffff;
+}
+.date_picker select:disabled {
+  cursor: not-allowed;
+  color: #9ca3af;
+  background-color: #fafafa;
+  border-color: rgba(0, 0, 0, 0.08);
+}
+.date_picker select option {
+  color: #1a1a1a;
+}
+.date_picker_full {
+  width: 100%;
+}
+.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_fields {
+    gap: 0.25rem;
+  }
+  .date_picker select {
+    flex: 1;
+    min-width: 0;
+  }
+}
+
 /* src/ui/navigation/pagination/style.scss */
 .pagination {
   display: flex;

package/dist/index.d.ts

@@ -123,6 +123,19 @@ interface TextFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement
 }
 declare const TextField: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLInputElement>>;
 
+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;
+    disabled?: boolean;
+}
+declare const DatePicker: ({ label, required, value, onChange, mode, startYear, endYear, disabled, }: DatePickerProps) => react_jsx_runtime.JSX.Element;
+
 interface PaginationProps {
     page: number;
     totalPages: number;
@@ -139,4 +152,4 @@ interface ModalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">
 }
 declare const Modal: ({ open, onClose, closeOnOverlay, width, title, children, className, ...props }: ModalProps) => react_jsx_runtime.JSX.Element | null;
 
-export { AlertProvider, Button, Card, Checkbox, FileInput, Loading, Modal, Pagination, Radio, Select, type SelectOption, Switch, TextField, ToastProvider, useAlert, useToast };
+export { AlertProvider, Button, Card, Checkbox, DatePicker, FileInput, Loading, Modal, Pagination, Radio, Select, type SelectOption, Switch, TextField, ToastProvider, useAlert, useToast };

package/dist/index.js

@@ -524,6 +524,86 @@ 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 DatePicker = ({
+  label,
+  required,
+  value,
+  onChange,
+  mode = "year-month-day",
+  startYear = 1950,
+  endYear = (/* @__PURE__ */ new Date()).getFullYear() + 10,
+  disabled
+}) => {
+  const [y, m, d] = value?.split("-").map(Number) ?? [];
+  const year = y ?? "";
+  const month = m ?? "";
+  const day = d ?? "";
+  const days = year && month ? getDaysInMonth(year, month) : 31;
+  const emit = (yy, mm, dd) => {
+    const result = mode === "year-month" ? `${yy}-${pad(mm)}-01` : `${yy}-${pad(mm)}-${pad(dd ?? 1)}`;
+    onChange(result);
+  };
+  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 = [];
   for (let i = start; i <= end; i += 1) out.push(i);
@@ -632,4 +712,4 @@ var Modal = ({
   );
 };
 
-export { AlertProvider, Button, Card, Checkbox, FileInput, Loading, Modal, Pagination, Radio, Select, Switch, TextField, ToastProvider, useAlert, useToast };
+export { AlertProvider, Button, Card, Checkbox, DatePicker, FileInput, Loading, Modal, Pagination, Radio, Select, Switch, TextField, ToastProvider, useAlert, useToast };

package/package.json

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