@bigtablet/design-system 1.20.1 → 1.21.1

package/README.md

@@ -8,7 +8,6 @@
 [![License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
 [![Test Coverage](https://img.shields.io/badge/coverage-86%25-brightgreen.svg)](https://github.com/Bigtablet/bigtablet-design-system/actions)
 [![CI](https://github.com/Bigtablet/bigtablet-design-system/actions/workflows/ci.yml/badge.svg)](https://github.com/Bigtablet/bigtablet-design-system/actions/workflows/ci.yml)
-[![Storybook](https://img.shields.io/badge/Storybook-FF4785?logo=storybook&logoColor=white)](https://bigtablet.github.io/bigtablet-design-system)
 
 [🇰🇷 한국어](./README_KR.md) · 🇺🇸 English
 
@@ -17,7 +16,7 @@ The official design system of Bigtablet — a unified UI library composed of Fou
 > **Note**: This is Bigtablet's in-house design system, open-sourced for community reference.
 > External use is welcome, but minor versions may include breaking changes without prior notice.
 
-[GitHub](https://github.com/Bigtablet/bigtablet-design-system) · [NPM](https://www.npmjs.com/package/@bigtablet/design-system) · [Storybook](https://bigtablet.github.io/bigtablet-design-system)
+[GitHub](https://github.com/Bigtablet/bigtablet-design-system) · [NPM](https://www.npmjs.com/package/@bigtablet/design-system)
 
 </div>
 
@@ -34,7 +33,7 @@ The official design system of Bigtablet — a unified UI library composed of Fou
 | 🎨 **Design Tokens** | Consistent token-based system for colors, typography, spacing |
 | ♿ **Accessibility** | Keyboard navigation, screen reader support, full ARIA attributes |
 | 🧪 **86% Coverage** | Stable test coverage powered by Vitest |
-| 🎭 **Storybook** | Interactive documentation for all components |
+| 🎭 **Storybook** | Interactive component documentation (run locally via `pnpm storybook`) |
 | 🎯 **Zero Dependencies** | No bundled runtime dependencies — peer deps only |
 
 ---
@@ -315,6 +314,6 @@ pnpm test:coverage # Coverage report
 
 <div align="center">
 
-[GitHub](https://github.com/Bigtablet/bigtablet-design-system) · [NPM](https://www.npmjs.com/package/@bigtablet/design-system) · [Storybook](https://bigtablet.github.io/bigtablet-design-system) · [Issues](https://github.com/Bigtablet/bigtablet-design-system/issues)
+[GitHub](https://github.com/Bigtablet/bigtablet-design-system) · [NPM](https://www.npmjs.com/package/@bigtablet/design-system) · [Issues](https://github.com/Bigtablet/bigtablet-design-system/issues)
 
 </div>

package/dist/index.css

@@ -565,7 +565,8 @@
 .file_input {
   position: relative;
   display: inline-flex;
-  align-items: center;
+  flex-direction: column;
+  align-items: flex-start;
   cursor: pointer;
 }
 .file_input:hover .file_input_label {
@@ -595,6 +596,13 @@
   box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
   border-color: #000000;
 }
+.file_input_helper {
+  display: block;
+  margin-top: 0.25rem;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  color: #666666;
+}
 .file_input_disabled {
   cursor: not-allowed;
 }
@@ -1152,6 +1160,17 @@
 .date_picker_disabled .date_picker_label {
   color: #9ca3af;
 }
+.date_picker_sr_only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
 
 /* src/ui/navigation/pagination/style.scss */
 .pagination {

package/dist/index.d.ts

@@ -4,6 +4,8 @@ import * as React from 'react';
 interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
     /** 카드 상단에 표시할 제목 */
     heading?: React.ReactNode;
+    /** 제목에 사용할 시맨틱 헤딩 태그 (기본값: "h3"). 스크린리더 outline에 반영됩니다. */
+    headingAs?: "h2" | "h3" | "h4" | "h5" | "h6";
     /** 카드 그림자 크기 (기본값: "sm") */
     shadow?: "none" | "sm" | "md" | "lg";
     /** 카드 내부 여백 (기본값: "md") */
@@ -17,7 +19,7 @@ interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
  * @param props 카드 속성
  * @returns 렌더링된 카드 UI
  */
-declare const Card: ({ heading, shadow, padding, bordered, className, children, ...props }: CardProps) => react_jsx_runtime.JSX.Element;
+declare const Card: ({ heading, headingAs: HeadingTag, shadow, padding, bordered, className, children, ...props }: CardProps) => react_jsx_runtime.JSX.Element;
 
 type AlertVariant = "info" | "success" | "warning" | "error";
 type AlertActionsAlign = "left" | "center" | "right";
@@ -167,10 +169,12 @@ interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>
 declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
 
 interface FileInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
-    /** 파일 선택 버튼 라벨 텍스트 (기본값: "파일 선택") */
+    /** 파일 선택 버튼 라벨 텍스트 (기본값: "Choose file") */
     label?: string;
     /** 파일 선택 시 호출되는 콜백 */
     onFiles?: (files: FileList | null) => void;
+    /** 허용 파일 형식 안내 텍스트. 스크린리더에게 전달됩니다. (예: "PDF, DOC 파일만 업로드 가능합니다") */
+    helperText?: string;
 }
 /**
  * 파일 입력 컴포넌트를 렌더링한다.
@@ -178,7 +182,7 @@ interface FileInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  * @param props 파일 입력 속성
  * @returns 렌더링된 파일 입력 UI
  */
-declare const FileInput: ({ label, onFiles, className, disabled, ...props }: FileInputProps) => react_jsx_runtime.JSX.Element;
+declare const FileInput: ({ label, onFiles, helperText, className, disabled, ...props }: FileInputProps) => react_jsx_runtime.JSX.Element;
 
 interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
     /** 라디오 버튼 옆에 표시할 라벨 */
@@ -334,6 +338,16 @@ interface DatePickerProps {
     monthLabel?: string;
     /** 일 select의 aria-label 및 빈 옵션 텍스트 (기본값: "Day") */
     dayLabel?: string;
+    /**
+     * minDate 설정 시 스크린리더에 전달할 안내 문구 포맷.
+     * `{date}` 자리에 minDate 값이 치환됩니다. (기본값: "Minimum date: {date}")
+     */
+    minDateSrFormat?: string;
+    /**
+     * selectableRange="until-today" 설정 시 스크린리더에 전달할 안내 문구.
+     * (기본값: "Selectable up to today")
+     */
+    selectableRangeUntilTodaySrText?: string;
 }
 /**
  * 연/월/일 선택형 데이트 피커를 렌더링한다.
@@ -341,7 +355,7 @@ interface DatePickerProps {
  * @param props 데이트 피커 속성
  * @returns 렌더링된 데이트 피커 UI
  */
-declare const DatePicker: ({ label, value, onChange, mode, startYear, endYear, minDate, selectableRange, disabled, fullWidth, width, yearLabel, monthLabel, dayLabel, }: DatePickerProps) => react_jsx_runtime.JSX.Element;
+declare const DatePicker: ({ label, value, onChange, mode, startYear, endYear, minDate, selectableRange, disabled, fullWidth, width, yearLabel, monthLabel, dayLabel, minDateSrFormat, selectableRangeUntilTodaySrText, }: DatePickerProps) => react_jsx_runtime.JSX.Element;
 
 interface PaginationProps {
     /** 현재 페이지 번호 (1-based) */

package/dist/index.js

@@ -90,6 +90,7 @@ function useFocusTrap(containerRef, isActive) {
 }
 var Card = ({
   heading,
+  headingAs: HeadingTag = "h3",
   shadow = "sm",
   padding = "md",
   bordered = false,
@@ -105,7 +106,7 @@ var Card = ({
     className
   );
   return /* @__PURE__ */ jsxs("div", { className: cardClassName, ...props, children: [
-    heading ? /* @__PURE__ */ jsx("div", { className: "card_title", children: heading }) : null,
+    heading ? /* @__PURE__ */ jsx(HeadingTag, { className: "card_title", children: heading }) : null,
     /* @__PURE__ */ jsx("div", { className: "card_body", children })
   ] });
 };
@@ -431,11 +432,13 @@ Checkbox.displayName = "Checkbox";
 var FileInput = ({
   label = "Choose file",
   onFiles,
+  helperText,
   className,
   disabled,
   ...props
 }) => {
   const inputId = React7.useId();
+  const helperId = React7.useId();
   const rootClassName = [
     "file_input",
     disabled && "file_input_disabled",
@@ -449,11 +452,13 @@ var FileInput = ({
         type: "file",
         className: "file_input_control",
         disabled,
+        "aria-describedby": helperText ? helperId : void 0,
         onChange: (e) => onFiles?.(e.currentTarget.files),
         ...props
       }
     ),
-    /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: "file_input_label", children: label })
+    /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: "file_input_label", children: label }),
+    helperText && /* @__PURE__ */ jsx("span", { id: helperId, className: "file_input_helper", children: helperText })
   ] });
 };
 var Radio = React7.forwardRef(
@@ -823,9 +828,12 @@ var DatePicker = ({
   width,
   yearLabel = "Year",
   monthLabel = "Month",
-  dayLabel = "Day"
+  dayLabel = "Day",
+  minDateSrFormat = "Minimum date: {date}",
+  selectableRangeUntilTodaySrText = "Selectable up to today"
 }) => {
   const groupId = React7.useId();
+  const constraintId = React7.useId();
   const today = /* @__PURE__ */ new Date();
   const todayYear = today.getFullYear();
   const todayMonth = today.getMonth() + 1;
@@ -852,14 +860,20 @@ var DatePicker = ({
   };
   const containerStyle = width ? { width: normalizeWidth(width) } : void 0;
   const rootClassName = cn("date_picker", { date_picker_full_width: fullWidth && !width });
+  const constraintParts = [];
+  if (minDate) constraintParts.push(minDateSrFormat.replace("{date}", minDate));
+  if (selectableRange === "until-today") constraintParts.push(selectableRangeUntilTodaySrText);
+  const constraintDesc = constraintParts.join(". ");
   return /* @__PURE__ */ jsxs("div", { className: rootClassName, style: containerStyle, children: [
     label && /* @__PURE__ */ jsx("label", { className: "date_picker_label", id: groupId, children: label }),
+    constraintDesc && /* @__PURE__ */ jsx("span", { id: constraintId, className: "date_picker_sr_only", children: constraintDesc }),
     /* @__PURE__ */ jsxs(
       "div",
       {
         className: "date_picker_fields",
         role: "group",
         "aria-labelledby": label ? groupId : void 0,
+        "aria-describedby": constraintDesc ? constraintId : void 0,
         children: [
           /* @__PURE__ */ jsxs(
             "select",
@@ -953,6 +967,7 @@ var Pagination = ({ page, totalPages, onChange, prevLabel = "Previous page", nex
     /* @__PURE__ */ jsx(
       "button",
       {
+        type: "button",
         className: "pagination_item",
         onClick: () => onChange(page - 1),
         disabled: prevDisabled,
@@ -983,6 +998,7 @@ var Pagination = ({ page, totalPages, onChange, prevLabel = "Previous page", nex
     /* @__PURE__ */ jsx(
       "button",
       {
+        type: "button",
         className: "pagination_item",
         onClick: () => onChange(page + 1),
         disabled: nextDisabled,

package/dist/next.js

@@ -94,6 +94,7 @@ var Sidebar = ({
               "sidebar_chevron",
               open && "sidebar_chevron_open"
             ].filter(Boolean).join(" ");
+            const subId = `sidebar_sub_${item.id}`;
             return /* @__PURE__ */ jsxs("div", { className: "sidebar_group", children: [
               /* @__PURE__ */ jsxs(
                 "button",
@@ -101,6 +102,7 @@ var Sidebar = ({
                   type: "button",
                   className: "sidebar_item",
                   "aria-expanded": open,
+                  "aria-controls": subId,
                   onClick: () => toggleGroup(item.id),
                   children: [
                     /* @__PURE__ */ jsxs("div", { className: "sidebar_item_left", children: [
@@ -117,7 +119,7 @@ var Sidebar = ({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx("div", { className: subClassName, children: item.children.map((child) => {
+              /* @__PURE__ */ jsx("div", { id: subId, className: subClassName, children: item.children.map((child) => {
                 const active2 = isActive(
                   child.href
                 );
@@ -131,6 +133,7 @@ var Sidebar = ({
                     href: child.href,
                     className: subItemClassName,
                     "aria-current": active2 ? "page" : void 0,
+                    tabIndex: open ? void 0 : -1,
                     onClick: () => onItemSelect?.(
                       child.href
                     ),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigtablet/design-system",
-  "version": "1.20.1",
+  "version": "1.21.1",
   "description": "Bigtablet Design System UI Components",
   "type": "module",
   "types": "dist/index.d.ts",
@@ -55,7 +55,8 @@
     "figma:snapshot": "node scripts/figma-snapshot.mjs",
     "figma:diff": "node scripts/figma-diff.mjs",
     "figma:apply": "node scripts/figma-apply.mjs",
-    "size": "size-limit"
+    "size": "size-limit",
+    "prepare": "husky"
   },
   "keywords": [
     "design-system",
@@ -81,6 +82,8 @@
     }
   },
   "devDependencies": {
+    "@commitlint/cli": "^20.4.4",
+    "@commitlint/core": "^20.4.4",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/github": "^12.0.1",
@@ -101,9 +104,10 @@
     "chromatic": "^13.3.3",
     "conventional-changelog-conventionalcommits": "^9.1.0",
     "esbuild-sass-plugin": "^3",
+    "husky": "^9.1.7",
     "jsdom": "^28.0.0",
     "lucide-react": "^0.552.0",
-    "next": "16.1.5",
+    "next": "16.1.6",
     "playwright": "^1.57.0",
     "react": "19.2.0",
     "react-dom": "19.2.0",