@bigtablet/design-system 1.11.6 → 1.12.1

package/README.md

@@ -1,3 +1,9 @@
+<div align="center">
+
+<img width="1800" height="300" alt="Image" src="https://github.com/user-attachments/assets/420a15cc-5be3-447f-9c64-068e946cb118" /> <br>
+
+</div>
+
 # Bigtablet Design System
 
 [![npm version](https://img.shields.io/npm/v/@bigtablet/design-system.svg)](https://www.npmjs.com/package/@bigtablet/design-system)
@@ -5,7 +11,7 @@
 
 Bigtablet의 공식 디자인 시스템으로, Foundation(디자인 토큰)과 Components(UI 컴포넌트)로 구성된 통합 UI 라이브러리입니다.
 
-> **현재 버전**: v1.10.0 | **최근 업데이트**: 2025년 1월 7일
+> **현재 버전**: v1.12.0 | **최근 업데이트**: 2025년 1월 15일
 
 [깃허브 링크](https://github.com/Bigtablet/bigtablet-design-system) | [📦 NPM 패키지](https://www.npmjs.com/package/@bigtablet/design-system)
 
@@ -771,16 +777,3 @@ pnpm changeset
 - [이슈 트래커](https://github.com/Bigtablet/bigtablet-design-system/issues)
 - [토론](https://github.com/Bigtablet/bigtablet-design-system/discussions)
 
----
-
-## 팀
-
-이 프로젝트는 5명의 기여자들에 의해 관리되고 있습니다.
-
----
-
-<div align="center">
-
-Made with by Bigtablet, Icn.
-
-</div>

package/dist/index.css

@@ -606,6 +606,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  text-align: start;
   font-size: 0.9375rem;
   font-weight: 400;
   line-height: 1.5;

package/dist/index.d.ts

@@ -96,8 +96,9 @@ interface SelectProps {
     variant?: SelectVariant;
     fullWidth?: boolean;
     className?: string;
+    textAlign?: "left" | "center";
 }
-declare const Select: ({ id, label, placeholder, options, value, onChange, defaultValue, disabled, size, variant, fullWidth, className, }: SelectProps) => react_jsx_runtime.JSX.Element;
+declare const Select: ({ id, label, placeholder, options, value, onChange, defaultValue, disabled, size, variant, fullWidth, className, textAlign }: SelectProps) => react_jsx_runtime.JSX.Element;
 
 interface SwitchProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> {
     checked?: boolean;
@@ -128,6 +129,7 @@ interface TextFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement
 declare const TextField: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLInputElement>>;
 
 type DatePickerMode = "year-month" | "year-month-day";
+type SelectableRange = "all" | "until-today";
 interface DatePickerProps {
     label?: string;
     value?: string;
@@ -136,6 +138,7 @@ interface DatePickerProps {
     startYear?: number;
     endYear?: number;
     minDate?: string;
+    selectableRange?: SelectableRange;
     disabled?: boolean;
     width?: {
         container?: number | string;
@@ -144,7 +147,7 @@ interface DatePickerProps {
         day?: number | string;
     };
 }
-declare const DatePicker: ({ label, value, onChange, mode, startYear, endYear, minDate, disabled, width, }: DatePickerProps) => react_jsx_runtime.JSX.Element;
+declare const DatePicker: ({ label, value, onChange, mode, startYear, endYear, minDate, selectableRange, disabled, width, }: DatePickerProps) => react_jsx_runtime.JSX.Element;
 
 interface PaginationProps {
     page: number;

package/dist/index.js

@@ -255,7 +255,8 @@ var Select = ({
   size = "md",
   variant = "outline",
   fullWidth,
-  className
+  className,
+  textAlign = "left"
 }) => {
   const internalId = React3.useId();
   const selectId = id ?? internalId;
@@ -402,6 +403,7 @@ var Select = ({
                 "span",
                 {
                   className: currentOption ? "select_value" : "select_placeholder",
+                  style: textAlign === "left" ? { textAlign: "start" } : void 0,
                   children: currentOption ? currentOption.label : placeholder
                 }
               ),
@@ -599,21 +601,26 @@ var DatePicker = ({
   startYear = 1950,
   endYear = (/* @__PURE__ */ new Date()).getFullYear() + 10,
   minDate,
+  selectableRange = "all",
   disabled,
   width
 }) => {
+  const today = /* @__PURE__ */ new Date();
+  const todayYear = today.getFullYear();
+  const todayMonth = today.getMonth() + 1;
+  const todayDay = today.getDate();
   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 maxYear = selectableRange === "until-today" ? todayYear : endYear;
   const minMonth = minY && year === minY ? minM : 1;
+  const maxMonth = selectableRange === "until-today" && year === todayYear ? todayMonth : 12;
   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 maxDay = selectableRange === "until-today" && year === todayYear && month === todayMonth ? todayDay : getDaysInMonth(year || todayYear, month || 1);
+  const days = year && month ? Math.min(getDaysInMonth(year, month), maxDay) : 31;
+  const clampDay = (year2, month2, day2) => Math.min(day2, getDaysInMonth(year2, month2));
   const emit = (yy, mm, dd) => {
     if (mode === "year-month") {
       onChange(`${yy}-${pad(mm)}`);
@@ -634,7 +641,7 @@ var DatePicker = ({
         children: [
           /* @__PURE__ */ jsx("option", { value: "", disabled: true }),
           Array.from(
-            { length: endYear - startYear + 1 },
+            { length: maxYear - startYear + 1 },
             (_, i) => startYear + i
           ).map((y2) => /* @__PURE__ */ jsx("option", { value: y2, children: y2 }, y2))
         ]
@@ -649,7 +656,7 @@ var DatePicker = ({
         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(
+          Array.from({ length: maxMonth - minMonth + 1 }, (_, i) => minMonth + i).map(
             (m2) => /* @__PURE__ */ jsx("option", { value: m2, children: pad(m2) }, m2)
           )
         ]

package/dist/styles/scss/_radius.scss

@@ -2,4 +2,5 @@ $radius_sm: 6px;
 $radius_md: 8px;
 $radius_lg: 12px;
 $radius_xl: 16px;
-$radius_full: 9999px;
+$radius_full: 9999px;
+$radius_pill: 50%;

package/dist/styles/scss/token.scss

@@ -8,3 +8,4 @@
 @forward "spacing";
 @forward "typography";
 @forward "z-index";
+@forward "src/animation/skeleton/skeleton";

package/package.json

@@ -1,10 +1,14 @@
 {
   "name": "@bigtablet/design-system",
-  "version": "1.11.6",
+  "version": "1.12.1",
   "description": "Bigtablet Design System UI Components",
   "type": "module",
   "types": "dist/index.d.ts",
   "style": "dist/index.css",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Bigtablet/bigtablet-design-system.git"
+  },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -34,7 +38,6 @@
     "dev": "tsup --watch",
     "storybook": "storybook dev -p 6006",
     "build:sb": "storybook build",
-    "prepublishOnly": "pnpm run build",
     "test": "echo \"no tests yet\"",
     "chromatic": "npx chromatic --project-token=chpt_2f758912f0dde5c --build-script-name=build:sb"
   },
@@ -63,9 +66,8 @@
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/github": "^12.0.1",
     "@semantic-release/npm": "^13.1.1",
-    "@storybook/addon-essentials": "8.6.14",
-    "@storybook/react": "8.6.14",
-    "@storybook/react-vite": "8.6.14",
+    "@storybook/react": "10.1.10",
+    "@storybook/react-vite": "10.1.10",
     "@types/node": "^24",
     "@types/react": "^19",
     "@types/react-dom": "^19",
@@ -79,12 +81,14 @@
     "react-toastify": "^11.0.5",
     "sass-embedded": "^1.93.3",
     "semantic-release": "^25.0.1",
-    "storybook": "8.6.14",
+    "storybook": "10.1.10",
     "tsup": "^8.5.0",
     "typescript": "^5",
     "vite": "^5"
   },
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "provenance": true,
+    "registry": "https://registry.npmjs.org/"
   }
 }

package/src/styles/scss/_radius.scss

@@ -2,4 +2,5 @@ $radius_sm: 6px;
 $radius_md: 8px;
 $radius_lg: 12px;
 $radius_xl: 16px;
-$radius_full: 9999px;
+$radius_full: 9999px;
+$radius_pill: 50%;

package/src/styles/scss/token.scss

@@ -8,3 +8,4 @@
 @forward "spacing";
 @forward "typography";
 @forward "z-index";
+@forward "src/animation/skeleton/skeleton";