@bigtablet/design-system 1.17.4 → 1.18.0

package/dist/index.css

@@ -310,6 +310,9 @@
 .button_variant_danger:active:not(:disabled) {
   transform: scale(0.98);
 }
+.button_full_width {
+  width: 100%;
+}
 
 /* src/ui/form/checkbox/style.scss */
 .checkbox {
@@ -999,13 +1002,13 @@
     gap: 0.25rem;
   }
 }
-.date_picker_full {
+.date_picker_full_width {
   width: 100%;
 }
-.date_picker_full .date_picker_fields {
+.date_picker_full_width .date_picker_fields {
   width: 100%;
 }
-.date_picker_full select {
+.date_picker_full_width select {
   flex: 1;
   min-width: 0;
 }

package/dist/index.d.ts

@@ -33,8 +33,10 @@ declare const AlertProvider: React.FC<{
 
 interface SpinnerProps {
     size?: number;
+    /** Accessible label for the spinner (default: "Loading") */
+    ariaLabel?: string;
 }
-declare const Spinner: ({ size }: SpinnerProps) => react_jsx_runtime.JSX.Element;
+declare const Spinner: ({ size, ariaLabel }: SpinnerProps) => react_jsx_runtime.JSX.Element;
 
 interface TopLoadingProps {
     /** 진행률 (0-100). undefined면 indeterminate 모드 */
@@ -45,8 +47,10 @@ interface TopLoadingProps {
     height?: number;
     /** 표시 여부 */
     isLoading?: boolean;
+    /** 프로그레스 바의 접근성 레이블 (기본값: "Page loading") */
+    ariaLabel?: string;
 }
-declare const TopLoading: ({ progress, color, height, isLoading, }: TopLoadingProps) => react_jsx_runtime.JSX.Element | null;
+declare const TopLoading: ({ progress, color, height, isLoading, ariaLabel, }: TopLoadingProps) => react_jsx_runtime.JSX.Element | null;
 
 interface ToastProviderProps {
     containerId?: string;
@@ -64,16 +68,22 @@ declare const useToast: (containerId?: string) => {
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: "primary" | "secondary" | "ghost" | "danger";
     size?: "sm" | "md" | "lg";
+    /** Whether the button should take the full width of its container */
+    fullWidth?: boolean;
+    /**
+     * Custom width for the button
+     * @deprecated Use `fullWidth` prop or CSS instead
+     */
     width?: string;
 }
-declare const Button: ({ variant, size, width, className, ...props }: ButtonProps) => react_jsx_runtime.JSX.Element;
+declare const Button: ({ variant, size, fullWidth, width, className, style, ...props }: ButtonProps) => react_jsx_runtime.JSX.Element;
 
 interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
     label?: React.ReactNode;
     size?: "sm" | "md" | "lg";
     indeterminate?: boolean;
 }
-declare const Checkbox: ({ label, size, indeterminate, className, ...props }: CheckboxProps) => react_jsx_runtime.JSX.Element;
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
 
 interface FileInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     label?: string;
@@ -85,7 +95,7 @@ interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "
     label?: React.ReactNode;
     size?: "sm" | "md" | "lg";
 }
-declare const Radio: ({ label, size, className, ...props }: RadioProps) => react_jsx_runtime.JSX.Element;
+declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
 
 type SelectSize = "sm" | "md" | "lg";
 type SelectVariant = "outline" | "filled" | "ghost";
@@ -117,8 +127,10 @@ interface SwitchProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>
     onChange?: (checked: boolean) => void;
     size?: "sm" | "md" | "lg";
     disabled?: boolean;
+    /** Accessible label for the switch (for screen readers) */
+    ariaLabel: string;
 }
-declare const Switch: ({ checked, defaultChecked, onChange, size, disabled, className, ...props }: SwitchProps) => react_jsx_runtime.JSX.Element;
+declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;
 
 type TextFieldVariant = "outline" | "filled" | "ghost";
 type TextFieldSize = "sm" | "md" | "lg";
@@ -151,9 +163,15 @@ interface DatePickerProps {
     minDate?: string;
     selectableRange?: SelectableRange;
     disabled?: boolean;
+    /** Whether the date picker should take the full width of its container */
+    fullWidth?: boolean;
+    /**
+     * Custom width for the date picker
+     * @deprecated Use `fullWidth` prop or CSS instead
+     */
     width?: number | string;
 }
-declare const DatePicker: ({ label, value, onChange, mode, startYear, endYear, minDate, selectableRange, disabled, width, }: DatePickerProps) => react_jsx_runtime.JSX.Element;
+declare const DatePicker: ({ label, value, onChange, mode, startYear, endYear, minDate, selectableRange, disabled, fullWidth, width, }: DatePickerProps) => react_jsx_runtime.JSX.Element;
 
 interface PaginationProps {
     page: number;
@@ -168,7 +186,9 @@ interface ModalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">
     closeOnOverlay?: boolean;
     width?: number | string;
     title?: React.ReactNode;
+    /** Accessible label for the modal (default uses title or "Dialog") */
+    ariaLabel?: string;
 }
-declare const Modal: ({ open, onClose, closeOnOverlay, width, title, children, className, ...props }: ModalProps) => react_jsx_runtime.JSX.Element | null;
+declare const Modal: ({ open, onClose, closeOnOverlay, width, title, children, className, ariaLabel, ...props }: ModalProps) => react_jsx_runtime.JSX.Element | null;
 
 export { AlertProvider, Button, Card, Checkbox, DatePicker, FileInput, Modal, Pagination, Radio, Select, type SelectOption, Spinner, Switch, TextField, ToastProvider, TopLoading, useAlert, useToast };

package/dist/index.js

@@ -1,14 +1,95 @@
 "use client";
 import './index.css';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import * as React3 from 'react';
+import * as React5 from 'react';
 import { createContext, useContext, useState, useCallback } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 import { ToastContainer, Slide, toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import { ChevronDown, Check } from 'lucide-react';
 
-// src/ui/display/card/index.tsx
+// src/utils/cn.ts
+var cn = (...classes) => {
+  const classNames = [];
+  for (const item of classes) {
+    if (!item) continue;
+    if (typeof item === "string" || typeof item === "number") {
+      classNames.push(String(item));
+    } else if (Array.isArray(item)) {
+      const nested = cn(...item);
+      if (nested) {
+        classNames.push(nested);
+      }
+    } else if (typeof item === "object") {
+      for (const key in item) {
+        if (Object.prototype.hasOwnProperty.call(item, key) && item[key]) {
+          classNames.push(key);
+        }
+      }
+    }
+  }
+  return classNames.join(" ");
+};
+var FOCUSABLE_SELECTORS = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])'
+].join(", ");
+function useFocusTrap(containerRef, isActive) {
+  const previousActiveElement = React5.useRef(null);
+  React5.useEffect(() => {
+    if (!isActive) return;
+    const container = containerRef.current;
+    if (!container) return;
+    previousActiveElement.current = document.activeElement;
+    const getFocusableElements = () => {
+      return container.querySelectorAll(FOCUSABLE_SELECTORS);
+    };
+    let wasTabIndexAdded = false;
+    const focusableElements = getFocusableElements();
+    if (focusableElements.length > 0) {
+      focusableElements[0].focus();
+    } else {
+      container.setAttribute("tabindex", "-1");
+      wasTabIndexAdded = true;
+      container.focus();
+    }
+    const handleKeyDown = (e) => {
+      if (e.key !== "Tab") return;
+      const focusableElements2 = getFocusableElements();
+      if (focusableElements2.length === 0) {
+        e.preventDefault();
+        return;
+      }
+      const firstElement = focusableElements2[0];
+      const lastElement = focusableElements2[focusableElements2.length - 1];
+      if (e.shiftKey) {
+        if (document.activeElement === firstElement) {
+          e.preventDefault();
+          lastElement.focus();
+        }
+      } else {
+        if (document.activeElement === lastElement) {
+          e.preventDefault();
+          firstElement.focus();
+        }
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      if (wasTabIndexAdded) {
+        container.removeAttribute("tabindex");
+      }
+      if (previousActiveElement.current && previousActiveElement.current.focus) {
+        previousActiveElement.current.focus();
+      }
+    };
+  }, [isActive, containerRef]);
+}
 var Card = ({
   heading,
   shadow = "sm",
@@ -18,14 +99,14 @@ var Card = ({
   children,
   ...props
 }) => {
-  const cls = [
+  const cardClassName = cn(
     "card",
     `card_shadow_${shadow}`,
     `card_p_${padding}`,
-    bordered && "card_bordered",
-    className ?? ""
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs("div", { className: cls, ...props, children: [
+    { card_bordered: bordered },
+    className
+  );
+  return /* @__PURE__ */ jsxs("div", { className: cardClassName, ...props, children: [
     heading ? /* @__PURE__ */ jsx("div", { className: "card_title", children: heading }) : null,
     /* @__PURE__ */ jsx("div", { className: "card_body", children })
   ] });
@@ -133,14 +214,14 @@ var AlertModal = ({
     }
   ) });
 };
-var Spinner = ({ size = 24 }) => {
+var Spinner = ({ size = 24, ariaLabel = "Loading" }) => {
   return /* @__PURE__ */ jsx(
     "span",
     {
       className: "spinner",
       style: { width: size, height: size },
       role: "status",
-      "aria-label": "\uB85C\uB529 \uC911"
+      "aria-label": ariaLabel
     }
   );
 };
@@ -148,7 +229,8 @@ var TopLoading = ({
   progress,
   color,
   height = 3,
-  isLoading = true
+  isLoading = true,
+  ariaLabel = "Page loading"
 }) => {
   if (!isLoading) return null;
   const isIndeterminate = progress === void 0;
@@ -161,7 +243,7 @@ var TopLoading = ({
       "aria-valuemin": 0,
       "aria-valuemax": 100,
       "aria-valuenow": isIndeterminate ? void 0 : progress,
-      "aria-label": "\uD398\uC774\uC9C0 \uB85C\uB529 \uC911",
+      "aria-label": ariaLabel,
       children: /* @__PURE__ */ jsx(
         "div",
         {
@@ -210,49 +292,51 @@ var useToast = (containerId = "default") => {
 var Button = ({
   variant = "primary",
   size = "md",
-  width = "100%",
+  fullWidth = true,
+  width,
   className,
+  style,
   ...props
 }) => {
-  const buttonClassName = [
+  const buttonClassName = cn(
     "button",
     `button_variant_${variant}`,
     `button_size_${size}`,
-    className ?? ""
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx("button", { className: buttonClassName, style: { width }, ...props });
-};
-var Checkbox = ({
-  label,
-  size = "md",
-  indeterminate,
-  className,
-  ...props
-}) => {
-  const inputRef = React3.useRef(null);
-  React3.useEffect(() => {
-    if (!inputRef.current) return;
-    inputRef.current.indeterminate = Boolean(indeterminate);
-  }, [indeterminate]);
-  const rootClassName = [
-    "checkbox",
-    `checkbox_size_${size}`,
-    className ?? ""
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs("label", { className: rootClassName, children: [
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        ref: inputRef,
-        type: "checkbox",
-        className: "checkbox_input",
-        ...props
-      }
-    ),
-    /* @__PURE__ */ jsx("span", { className: "checkbox_box", "aria-hidden": "true" }),
-    label ? /* @__PURE__ */ jsx("span", { className: "checkbox_label", children: label }) : null
-  ] });
+    fullWidth && !width && "button_full_width",
+    className
+  );
+  const buttonStyle = width ? { ...style, width } : style;
+  return /* @__PURE__ */ jsx("button", { className: buttonClassName, style: buttonStyle, ...props });
 };
+var Checkbox = React5.forwardRef(
+  ({ label, size = "md", indeterminate, className, ...props }, ref) => {
+    const inputRef = React5.useRef(null);
+    React5.useImperativeHandle(ref, () => inputRef.current);
+    React5.useEffect(() => {
+      if (!inputRef.current) return;
+      inputRef.current.indeterminate = Boolean(indeterminate);
+    }, [indeterminate]);
+    const rootClassName = cn(
+      "checkbox",
+      `checkbox_size_${size}`,
+      className
+    );
+    return /* @__PURE__ */ jsxs("label", { className: rootClassName, children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: inputRef,
+          type: "checkbox",
+          className: "checkbox_input",
+          ...props
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "checkbox_box", "aria-hidden": "true" }),
+      label ? /* @__PURE__ */ jsx("span", { className: "checkbox_label", children: label }) : null
+    ] });
+  }
+);
+Checkbox.displayName = "Checkbox";
 var FileInput = ({
   label = "\uD30C\uC77C \uC120\uD0DD",
   onFiles,
@@ -260,7 +344,7 @@ var FileInput = ({
   disabled,
   ...props
 }) => {
-  const inputId = React3.useId();
+  const inputId = React5.useId();
   const rootClassName = [
     "file_input",
     disabled && "file_input_disabled",
@@ -281,18 +365,21 @@ var FileInput = ({
     /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: "file_input_label", children: label })
   ] });
 };
-var Radio = ({ label, size = "md", className, ...props }) => {
-  const rootClassName = [
-    "radio",
-    `radio_size_${size}`,
-    className ?? ""
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs("label", { className: rootClassName, children: [
-    /* @__PURE__ */ jsx("input", { type: "radio", className: "radio_input", ...props }),
-    /* @__PURE__ */ jsx("span", { className: "radio_dot", "aria-hidden": "true" }),
-    label ? /* @__PURE__ */ jsx("span", { className: "radio_label", children: label }) : null
-  ] });
-};
+var Radio = React5.forwardRef(
+  ({ label, size = "md", className, ...props }, ref) => {
+    const rootClassName = cn(
+      "radio",
+      `radio_size_${size}`,
+      className
+    );
+    return /* @__PURE__ */ jsxs("label", { className: rootClassName, children: [
+      /* @__PURE__ */ jsx("input", { ref, type: "radio", className: "radio_input", ...props }),
+      /* @__PURE__ */ jsx("span", { className: "radio_dot", "aria-hidden": "true" }),
+      label ? /* @__PURE__ */ jsx("span", { className: "radio_label", children: label }) : null
+    ] });
+  }
+);
+Radio.displayName = "Radio";
 var Select = ({
   id,
   label,
@@ -308,21 +395,21 @@ var Select = ({
   className,
   textAlign = "left"
 }) => {
-  const internalId = React3.useId();
+  const internalId = React5.useId();
   const selectId = id ?? internalId;
   const isControlled = value !== void 0;
-  const [internalValue, setInternalValue] = React3.useState(defaultValue);
+  const [internalValue, setInternalValue] = React5.useState(defaultValue);
   const currentValue = isControlled ? value ?? null : internalValue;
-  const [isOpen, setIsOpen] = React3.useState(false);
-  const [activeIndex, setActiveIndex] = React3.useState(-1);
-  const [dropUp, setDropUp] = React3.useState(false);
-  const wrapperRef = React3.useRef(null);
-  const controlRef = React3.useRef(null);
-  const currentOption = React3.useMemo(
+  const [isOpen, setIsOpen] = React5.useState(false);
+  const [activeIndex, setActiveIndex] = React5.useState(-1);
+  const [dropUp, setDropUp] = React5.useState(false);
+  const wrapperRef = React5.useRef(null);
+  const controlRef = React5.useRef(null);
+  const currentOption = React5.useMemo(
     () => options.find((o) => o.value === currentValue) ?? null,
     [options, currentValue]
   );
-  const setValue = React3.useCallback(
+  const setValue = React5.useCallback(
     (next) => {
       const option = options.find((o) => o.value === next) ?? null;
       if (!isControlled) setInternalValue(next);
@@ -330,15 +417,14 @@ var Select = ({
     },
     [isControlled, onChange, options]
   );
-  React3.useEffect(() => {
-    const onDocClick = (e) => {
-      if (!wrapperRef.current) return;
-      if (!wrapperRef.current.contains(e.target)) {
-        setIsOpen(false);
-      }
-    };
-    document.addEventListener("mousedown", onDocClick);
-    return () => document.removeEventListener("mousedown", onDocClick);
+  const handleOutsideClick = React5.useEffectEvent((e) => {
+    if (!wrapperRef.current?.contains(e.target)) {
+      setIsOpen(false);
+    }
+  });
+  React5.useEffect(() => {
+    document.addEventListener("mousedown", handleOutsideClick);
+    return () => document.removeEventListener("mousedown", handleOutsideClick);
   }, []);
   const moveActive = (dir) => {
     if (!isOpen) {
@@ -401,12 +487,12 @@ var Select = ({
         break;
     }
   };
-  React3.useEffect(() => {
+  React5.useEffect(() => {
     if (!isOpen) return;
     const idx = options.findIndex((o) => o.value === currentValue && !o.disabled);
     setActiveIndex(idx >= 0 ? idx : Math.max(0, options.findIndex((o) => !o.disabled)));
   }, [isOpen, options, currentValue]);
-  React3.useLayoutEffect(() => {
+  React5.useLayoutEffect(() => {
     if (!isOpen || !controlRef.current) return;
     const rect = controlRef.current.getBoundingClientRect();
     const listHeight = Math.min(options.length * 40, 288);
@@ -414,18 +500,14 @@ var Select = ({
     const spaceAbove = rect.top;
     setDropUp(spaceBelow < listHeight && spaceAbove > spaceBelow);
   }, [isOpen, options.length]);
-  const rootClassName = ["select", className ?? ""].filter(Boolean).join(" ");
-  const controlClassName = [
+  const rootClassName = cn("select", className);
+  const controlClassName = cn(
     "select_control",
     `select_variant_${variant}`,
     `select_size_${size}`,
-    isOpen && "is_open",
-    disabled && "is_disabled"
-  ].filter(Boolean).join(" ");
-  const listClassName = [
-    "select_list",
-    dropUp && "select_list_up"
-  ].filter(Boolean).join(" ");
+    { is_open: isOpen, is_disabled: disabled }
+  );
+  const listClassName = cn("select_list", { select_list_up: dropUp });
   return /* @__PURE__ */ jsxs("div", { ref: wrapperRef, className: rootClassName, style: fullWidth ? { width: "100%" } : void 0, children: [
     label && /* @__PURE__ */ jsx("label", { htmlFor: selectId, className: "select_label", children: label }),
     /* @__PURE__ */ jsxs(
@@ -463,12 +545,10 @@ var Select = ({
         children: options.map((opt, i) => {
           const selected = currentValue === opt.value;
           const active = i === activeIndex;
-          const optionClassName = [
+          const optionClassName = cn(
             "select_option",
-            selected && "is_selected",
-            active && "is_active",
-            opt.disabled && "is_disabled"
-          ].filter(Boolean).join(" ");
+            { is_selected: selected, is_active: active, is_disabled: opt.disabled }
+          );
           return /* @__PURE__ */ jsxs(
             "li",
             {
@@ -493,46 +573,51 @@ var Select = ({
     )
   ] });
 };
-var Switch = ({
-  checked,
-  defaultChecked,
-  onChange,
-  size = "md",
-  disabled,
-  className,
-  ...props
-}) => {
-  const isControlled = checked !== void 0;
-  const [innerChecked, setInnerChecked] = React3.useState(!!defaultChecked);
-  const isOn = isControlled ? !!checked : innerChecked;
-  const handleToggle = () => {
-    if (disabled) return;
-    const next = !isOn;
-    if (!isControlled) setInnerChecked(next);
-    onChange?.(next);
-  };
-  const rootClassName = [
-    "switch",
-    `switch_size_${size}`,
-    isOn && "switch_on",
-    disabled && "switch_disabled",
-    className ?? ""
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      type: "button",
-      role: "switch",
-      "aria-checked": isOn,
-      disabled,
-      onClick: handleToggle,
-      className: rootClassName,
-      ...props,
-      children: /* @__PURE__ */ jsx("span", { className: "switch_thumb" })
-    }
-  );
-};
-var TextField = React3.forwardRef(
+var Switch = React5.forwardRef(
+  ({
+    checked,
+    defaultChecked,
+    onChange,
+    size = "md",
+    disabled,
+    className,
+    ariaLabel,
+    ...props
+  }, ref) => {
+    const isControlled = checked !== void 0;
+    const [innerChecked, setInnerChecked] = React5.useState(!!defaultChecked);
+    const isOn = isControlled ? !!checked : innerChecked;
+    const handleToggle = () => {
+      if (disabled) return;
+      const next = !isOn;
+      if (!isControlled) setInnerChecked(next);
+      onChange?.(next);
+    };
+    const rootClassName = cn(
+      "switch",
+      `switch_size_${size}`,
+      { switch_on: isOn, switch_disabled: disabled },
+      className
+    );
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        role: "switch",
+        "aria-checked": isOn,
+        "aria-label": ariaLabel,
+        disabled,
+        onClick: handleToggle,
+        className: rootClassName,
+        ...props,
+        children: /* @__PURE__ */ jsx("span", { className: "switch_thumb" })
+      }
+    );
+  }
+);
+Switch.displayName = "Switch";
+var TextField = React5.forwardRef(
   ({
     id,
     label,
@@ -551,37 +636,41 @@ var TextField = React3.forwardRef(
     transformValue,
     ...props
   }, ref) => {
-    const inputId = id ?? React3.useId();
+    const inputId = id ?? React5.useId();
     const helperId = helperText ? `${inputId}-help` : void 0;
     const isControlled = value !== void 0;
     const applyTransform = (nextValue) => transformValue ? transformValue(nextValue) : nextValue;
-    const [innerValue, setInnerValue] = React3.useState(
+    const [innerValue, setInnerValue] = React5.useState(
       () => applyTransform(value ?? defaultValue ?? "")
     );
-    const isComposingRef = React3.useRef(false);
-    React3.useEffect(() => {
+    const isComposingRef = React5.useRef(false);
+    React5.useEffect(() => {
       if (!isControlled) return;
       setInnerValue(applyTransform(value ?? ""));
     }, [isControlled, value, transformValue]);
-    const rootClassName = [
+    const rootClassName = cn(
       "text_field",
-      fullWidth && "text_field_full_width",
-      className ?? ""
-    ].filter(Boolean).join(" ");
-    const inputClassName = [
+      { text_field_full_width: fullWidth },
+      className
+    );
+    const inputClassName = cn(
       "text_field_input",
       `text_field_variant_${variant}`,
       `text_field_size_${size}`,
-      leftIcon && "text_field_with_left",
-      rightIcon && "text_field_with_right",
-      error && "text_field_error",
-      success && "text_field_success"
-    ].filter(Boolean).join(" ");
-    const helperClassName = [
+      {
+        text_field_with_left: !!leftIcon,
+        text_field_with_right: !!rightIcon,
+        text_field_error: !!error,
+        text_field_success: !!success
+      }
+    );
+    const helperClassName = cn(
       "text_field_helper",
-      error && "text_field_helper_error",
-      success && "text_field_helper_success"
-    ].filter(Boolean).join(" ");
+      {
+        text_field_helper_error: error,
+        text_field_helper_success: success
+      }
+    );
     return /* @__PURE__ */ jsxs("div", { className: rootClassName, children: [
       label ? /* @__PURE__ */ jsx("label", { className: "text_field_label", htmlFor: inputId, children: label }) : null,
       /* @__PURE__ */ jsxs("div", { className: "text_field_wrap", children: [
@@ -638,6 +727,7 @@ var DatePicker = ({
   minDate,
   selectableRange = "all",
   disabled,
+  fullWidth = true,
   width
 }) => {
   const today = /* @__PURE__ */ new Date();
@@ -665,7 +755,8 @@ var DatePicker = ({
     onChange(`${yy}-${pad(mm)}-${pad(safeDay)}`);
   };
   const containerStyle = width ? { width: normalizeWidth(width) } : void 0;
-  return /* @__PURE__ */ jsxs("div", { className: "date_picker date_picker_full", style: containerStyle, children: [
+  const rootClassName = cn("date_picker", { date_picker_full_width: fullWidth && !width });
+  return /* @__PURE__ */ jsxs("div", { className: rootClassName, style: containerStyle, children: [
     label && /* @__PURE__ */ jsx("label", { className: "date_picker_label", children: label }),
     /* @__PURE__ */ jsxs("div", { className: "date_picker_fields", children: [
       /* @__PURE__ */ jsxs(
@@ -747,7 +838,7 @@ var getPaginationItems = (page, totalPages) => {
 var Pagination = ({ page, totalPages, onChange }) => {
   const prevDisabled = page <= 1;
   const nextDisabled = page >= totalPages;
-  const items = React3.useMemo(
+  const items = React5.useMemo(
     () => getPaginationItems(page, totalPages),
     [page, totalPages]
   );
@@ -767,10 +858,10 @@ var Pagination = ({ page, totalPages, onChange }) => {
         return /* @__PURE__ */ jsx("span", { className: "pagination_ellipsis", "aria-hidden": "true", children: "\u2026" }, `e-${idx}`);
       }
       const isActive = it === page;
-      const buttonClassName = [
+      const buttonClassName = cn(
         "pagination_page_button",
-        isActive && "pagination_active"
-      ].filter(Boolean).join(" ");
+        { pagination_active: isActive }
+      );
       return /* @__PURE__ */ jsx(
         "button",
         {
@@ -803,28 +894,55 @@ var Modal = ({
   title,
   children,
   className,
+  ariaLabel,
   ...props
 }) => {
-  React3.useEffect(() => {
+  const panelRef = React5.useRef(null);
+  useFocusTrap(panelRef, open);
+  const handleEscape = React5.useEffectEvent((e) => {
+    if (e.key === "Escape") onClose?.();
+  });
+  React5.useEffect(() => {
     if (!open) return;
-    const onKeyDown = (e) => {
-      if (e.key === "Escape") onClose?.();
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [open]);
+  React5.useEffect(() => {
+    if (!open) return;
+    const body = document.body;
+    const openModals = parseInt(body.dataset.openModals || "0", 10);
+    if (openModals === 0) {
+      body.dataset.originalOverflow = window.getComputedStyle(body).overflow;
+      body.style.overflow = "hidden";
+    }
+    body.dataset.openModals = String(openModals + 1);
+    return () => {
+      const currentOpenModals = parseInt(body.dataset.openModals || "1", 10);
+      const nextOpenModals = currentOpenModals - 1;
+      if (nextOpenModals === 0) {
+        body.style.overflow = body.dataset.originalOverflow || "";
+        delete body.dataset.openModals;
+        delete body.dataset.originalOverflow;
+      } else {
+        body.dataset.openModals = String(nextOpenModals);
+      }
     };
-    document.addEventListener("keydown", onKeyDown);
-    return () => document.removeEventListener("keydown", onKeyDown);
-  }, [open, onClose]);
+  }, [open]);
   if (!open) return null;
-  const panelClassName = ["modal_panel", className].filter(Boolean).join(" ");
+  const panelClassName = cn("modal_panel", className);
+  const modalAriaLabel = ariaLabel ?? (typeof title === "string" ? title : "Dialog");
   return /* @__PURE__ */ jsx(
     "div",
     {
       className: "modal",
       role: "dialog",
       "aria-modal": "true",
+      "aria-label": modalAriaLabel,
       onClick: () => closeOnOverlay && onClose?.(),
       children: /* @__PURE__ */ jsxs(
         "div",
         {
+          ref: panelRef,
           className: panelClassName,
           style: { width },
           onClick: (e) => e.stopPropagation(),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigtablet/design-system",
-  "version": "1.17.4",
+  "version": "1.18.0",
   "description": "Bigtablet Design System UI Components",
   "type": "module",
   "types": "dist/index.d.ts",
@@ -47,7 +47,9 @@
     "dev": "tsup --watch",
     "storybook": "storybook dev -p 6006",
     "build:sb": "storybook build",
-    "test": "echo \"no tests yet\"",
+    "test": "vitest run --project unit",
+    "test:watch": "vitest --project unit",
+    "test:coverage": "vitest run --project unit --coverage",
     "chromatic": "npx chromatic --project-token=chpt_2f758912f0dde5c --build-script-name=build:sb"
   },
   "keywords": [
@@ -83,6 +85,9 @@
     "@storybook/addon-vitest": "10.1.11",
     "@storybook/react": "10.1.11",
     "@storybook/react-vite": "10.1.11",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
     "@types/node": "^24",
     "@types/react": "^19",
     "@types/react-dom": "^19",
@@ -91,8 +96,9 @@
     "chromatic": "^13.3.3",
     "conventional-changelog-conventionalcommits": "^9.1.0",
     "esbuild-sass-plugin": "^3",
+    "jsdom": "^28.0.0",
     "lucide-react": "^0.552.0",
-    "next": "16.0.10",
+    "next": "16.1.5",
     "playwright": "^1.57.0",
     "react": "19.2.0",
     "react-dom": "19.2.0",