@bigtablet/design-system 1.7.2 → 1.9.0

package/dist/index.css

@@ -866,6 +866,77 @@
   box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important;
 }
 
+/* src/ui/form/date-picker/style.scss */
+.date_picker {
+  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 select:nth-child(1) {
+  min-width: 96px;
+}
+.date_picker select:nth-child(2),
+.date_picker select:nth-child(3) {
+  min-width: 72px;
+}
+@media (max-width: 480px) {
+  .date_picker {
+    gap: 0.25rem;
+  }
+  .date_picker select {
+    min-width: 0;
+    flex: 1;
+  }
+}
+
 /* src/ui/navigation/pagination/style.scss */
 .pagination {
   display: flex;

package/dist/index.d.ts

@@ -123,6 +123,17 @@ 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 {
+    value?: string;
+    onChange: (value: string) => void;
+    mode?: DatePickerMode;
+    startYear?: number;
+    endYear?: number;
+    disabled?: boolean;
+}
+declare const DatePicker: ({ value, onChange, mode, startYear, endYear, disabled, }: DatePickerProps) => react_jsx_runtime.JSX.Element;
+
 interface PaginationProps {
     page: number;
     totalPages: number;
@@ -139,4 +150,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,69 @@ 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 = ({
+  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", 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 +695,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/dist/next.css

@@ -15,13 +15,13 @@
   border-bottom: 1px solid #e5e5e5;
 }
 .sidebar_brand_link {
-  display: block;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  align-items: center;
   width: 100%;
 }
 .sidebar_brand_img {
-  display: block;
-  width: 100%;
-  height: auto;
   object-fit: contain;
 }
 .sidebar_nav {

package/dist/next.js

@@ -4,7 +4,7 @@ import * as React from 'react';
 import Link from 'next/link';
 import Image from 'next/image';
 import { ChevronDown } from 'lucide-react';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // src/ui/navigation/sidebar/index.tsx
 var Sidebar = ({
@@ -22,6 +22,11 @@ var Sidebar = ({
     return match === "exact" ? activePath === href : activePath.startsWith(href);
   };
   const [openGroups, setOpenGroups] = React.useState([]);
+  const [isOpen, setIsOpen] = React.useState(true);
+  const handleToggleSidebar = (value) => {
+    setIsOpen(value);
+    localStorage.setItem("isOpen", JSON.stringify(value));
+  };
   React.useEffect(() => {
     if (!activePath) return;
     const autoOpenIds = items.filter(
@@ -37,35 +42,47 @@ var Sidebar = ({
     );
   };
   const rootClassName = ["sidebar", className ?? ""].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     "aside",
     {
       className: rootClassName,
-      style: { width, ...style },
+      style: { width: isOpen ? `${width}px` : "56px", ...style },
       "aria-label": "\uC0AC\uC774\uB4DC \uB0B4\uBE44\uAC8C\uC774\uC158",
-      children: [
-        /* @__PURE__ */ jsx("div", { className: "sidebar_brand", children: /* @__PURE__ */ jsx(
+      children: isOpen ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("div", { className: "sidebar_brand", children: /* @__PURE__ */ jsxs(
           Link,
           {
             href: brandHref,
             className: "sidebar_brand_link",
             "aria-label": "Bigtablet \uD648\uC73C\uB85C",
-            children: /* @__PURE__ */ jsx(
-              Image,
-              {
-                src: "/images/logo/bigtablet.png",
-                alt: "Bigtablet",
-                width: 200,
-                height: 44,
-                priority: true,
-                className: "sidebar_brand_img"
-              }
-            )
+            children: [
+              /* @__PURE__ */ jsx(
+                Image,
+                {
+                  src: "/images/logo/bigtablet.png",
+                  alt: "Bigtablet",
+                  width: 96,
+                  height: 30,
+                  priority: true,
+                  className: "sidebar_brand_img"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Image,
+                {
+                  src: "/images/sidebar/arrow-close.svg",
+                  alt: "ArrowClose",
+                  width: 24,
+                  height: 24,
+                  onClick: () => handleToggleSidebar(false)
+                }
+              )
+            ]
           }
         ) }),
         /* @__PURE__ */ jsx("nav", { className: "sidebar_nav", children: items.map((item) => {
           if (item.type === "group") {
-            const isOpen = openGroups.includes(item.id);
+            const isOpen2 = openGroups.includes(item.id);
             return /* @__PURE__ */ jsxs("div", { className: "sidebar_group", children: [
               /* @__PURE__ */ jsxs(
                 "button",
@@ -73,7 +90,7 @@ var Sidebar = ({
                   type: "button",
                   className: [
                     "sidebar_item",
-                    isOpen && "is_open"
+                    isOpen2 && "is_open"
                   ].filter(Boolean).join(" "),
                   onClick: () => toggleGroup(item.id),
                   children: [
@@ -84,7 +101,7 @@ var Sidebar = ({
                       {
                         className: [
                           "sidebar_chevron",
-                          isOpen && "is_open"
+                          isOpen2 && "is_open"
                         ].filter(Boolean).join(" "),
                         children: /* @__PURE__ */ jsx(ChevronDown, { size: 16 })
                       }
@@ -92,7 +109,7 @@ var Sidebar = ({
                   ]
                 }
               ),
-              isOpen && /* @__PURE__ */ jsx("div", { className: "sidebar_sub", children: item.children.map((child) => {
+              isOpen2 && /* @__PURE__ */ jsx("div", { className: "sidebar_sub", children: item.children.map((child) => {
                 const active2 = isActive(child.href);
                 return /* @__PURE__ */ jsx(
                   Link,
@@ -137,7 +154,16 @@ var Sidebar = ({
             item.href
           );
         }) })
-      ]
+      ] }) : /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+        Image,
+        {
+          src: "/images/sidebar/menu.svg",
+          alt: "menu",
+          width: 24,
+          height: 24,
+          onClick: () => handleToggleSidebar(true)
+        }
+      ) })
     }
   );
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigtablet/design-system",
-  "version": "1.7.2",
+  "version": "1.9.0",
   "description": "Bigtablet Design System UI Components",
   "type": "module",
   "types": "dist/index.d.ts",
@@ -73,7 +73,7 @@
     "conventional-changelog-conventionalcommits": "^9.1.0",
     "esbuild-sass-plugin": "^3",
     "lucide-react": "^0.552.0",
-    "next": "16.0.9",
+    "next": "16.0.10",
     "react": "19.2.0",
     "react-dom": "19.2.0",
     "react-toastify": "^11.0.5",