npm - @bigtablet/design-system - Versions diffs - 1.18.9 → 1.19.1 - Mend

@bigtablet/design-system 1.18.9 → 1.19.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/README.md CHANGED Viewed

@@ -49,7 +49,7 @@ pnpm add @bigtablet/design-system
 **Peer Dependencies**
 ```bash
-npm install react react-dom lucide-react react-toastify
+npm install react react-dom lucide-react
 ```
 > Recommended for use with **React 18+** and **Next.js 13+**.
@@ -129,8 +129,9 @@ export default function RootLayout({ children }) {
     <html>
       <body>
         <AlertProvider>
-          <ToastProvider />
-          {children}
+          <ToastProvider>
+            {children}
+          </ToastProvider>
         </AlertProvider>
       </body>
     </html>
@@ -138,8 +139,9 @@ export default function RootLayout({ children }) {
 }
 ```
+**Alert usage**
 ```tsx
-// Usage example
 import { useAlert } from '@bigtablet/design-system';
 function MyComponent() {
@@ -162,6 +164,27 @@ function MyComponent() {
 }
 ```
+**Toast usage**
+```tsx
+import { useToast } from '@bigtablet/design-system';
+function MyComponent() {
+  const toast = useToast();
+  return (
+    <div>
+      <Button onClick={() => toast.success('Saved successfully!')}>Save</Button>
+      <Button onClick={() => toast.error('An error occurred.')}>Error</Button>
+      <Button onClick={() => toast.warning('Session expiring soon.')}>Warning</Button>
+      <Button onClick={() => toast.info('New version available.')}>Info</Button>
+      {/* Custom duration (ms) as second argument */}
+      <Button onClick={() => toast.success('Saved!', 5000)}>Save (5s)</Button>
+    </div>
+  );
+}
+```
 ### Vanilla JS (HTML/CSS/JS)
 For non-React environments (Thymeleaf, JSP, PHP, etc.), use directly via CDN.

package/dist/index.css CHANGED Viewed

@@ -234,6 +234,141 @@
   }
 }
+/* src/ui/feedback/toast/style.scss */
+@keyframes toast_slide_in {
+  from {
+    opacity: 0;
+    transform: translateX(calc(100% + 16px));
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes toast_slide_out {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(calc(100% + 16px));
+  }
+}
+@keyframes toast_progress {
+  from {
+    width: 100%;
+  }
+  to {
+    width: 0%;
+  }
+}
+.toast_container {
+  position: fixed;
+  top: 1rem;
+  right: 1rem;
+  z-index: 10001;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  pointer-events: none;
+  width: 360px;
+  max-width: calc(100vw - 32px);
+}
+.toast_item {
+  pointer-events: auto;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  padding: 0.75rem 0.75rem 1rem;
+  background: #ffffff;
+  border: 1px solid #e5e5e5;
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
+  font-family: "Pretendard", sans-serif;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #1a1a1a;
+  line-height: 1.5;
+  animation: toast_slide_in 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+.toast_item_exiting {
+  animation: toast_slide_out 0.26s ease-in forwards;
+}
+.toast_icon {
+  flex-shrink: 0;
+  margin-top: 1px;
+  display: flex;
+}
+.toast_icon_success {
+  color: #10b981;
+}
+.toast_icon_error {
+  color: #ef4444;
+}
+.toast_icon_warning {
+  color: #f59e0b;
+}
+.toast_icon_info {
+  color: #3b82f6;
+}
+.toast_icon_default {
+  color: #666666;
+}
+.toast_message {
+  flex: 1;
+  word-break: break-word;
+}
+.toast_close {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  margin-top: 1px;
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+  color: #999999;
+  border-radius: 6px;
+  transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out;
+}
+.toast_close:hover {
+  color: #1a1a1a;
+  background-color: #fafafa;
+}
+.toast_close:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
+}
+.toast_progress {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 3px;
+  border-radius: 0 0 0 12px;
+  animation: toast_progress var(--toast-duration, 3000ms) linear forwards;
+}
+.toast_progress_success {
+  background: #10b981;
+}
+.toast_progress_error {
+  background: #ef4444;
+}
+.toast_progress_warning {
+  background: #f59e0b;
+}
+.toast_progress_info {
+  background: #3b82f6;
+}
+.toast_progress_default {
+  background: #666666;
+}
 /* src/ui/general/button/style.scss */
 .button {
   display: inline-flex;

package/dist/index.d.ts CHANGED Viewed

@@ -1,6 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import * as react_toastify from 'react-toastify';
 interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
     /** 카드 상단에 표시할 제목 */
@@ -96,23 +95,35 @@ interface TopLoadingProps {
 declare const TopLoading: ({ progress, color, height, isLoading, ariaLabel, }: TopLoadingProps) => react_jsx_runtime.JSX.Element | null;
 interface ToastProviderProps {
-    /** 토스트 컨테이너 식별자 (기본값: "default") */
-    containerId?: string;
+    /** 앱 루트에서 감싸는 자식 요소 */
+    children: React.ReactNode;
+    /** 최대 동시 표시 토스트 수 (기본값: 5) */
+    maxCount?: number;
 }
 /**
- * 토스트 컨테이너를 렌더링한다.
- * 기본 옵션을 설정하고 전역 토스트 표시 영역을 제공한다.
- * @param props 토스트 컨테이너 속성
- * @returns 렌더링된 토스트 컨테이너
+ * 토스트 컨텍스트를 제공하는 Provider를 렌더링한다.
+ * 앱 최상단에서 children을 감싸야 useToast 훅을 사용할 수 있다.
+ * @param props Provider 속성
+ * @returns 렌더링된 Provider와 토스트 컨테이너
  */
-declare const ToastProvider: ({ containerId }: ToastProviderProps) => react_jsx_runtime.JSX.Element;
+declare const ToastProvider: ({ children, maxCount }: ToastProviderProps) => react_jsx_runtime.JSX.Element;
-declare const useToast: (containerId?: string) => {
-    success: (msg: string) => react_toastify.Id;
-    error: (msg: string) => react_toastify.Id;
-    warning: (msg: string) => react_toastify.Id;
-    info: (msg: string) => react_toastify.Id;
-    message: (msg: string) => react_toastify.Id;
+/**
+ * 토스트 메시지를 표시하는 훅.
+ * ToastProvider 내부에서만 사용할 수 있다.
+ * @returns 토스트 메시지 표시 함수 객체
+ */
+declare const useToast: () => {
+    /** 성공 메시지를 표시한다 */
+    success: (message: string, duration?: number) => void;
+    /** 오류 메시지를 표시한다 */
+    error: (message: string, duration?: number) => void;
+    /** 경고 메시지를 표시한다 */
+    warning: (message: string, duration?: number) => void;
+    /** 정보 메시지를 표시한다 */
+    info: (message: string, duration?: number) => void;
+    /** 기본 메시지를 표시한다 */
+    message: (message: string, duration?: number) => void;
 };
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {

package/dist/index.js CHANGED Viewed

@@ -1,12 +1,10 @@
 "use client";
 import './index.css';
-import * as React5 from 'react';
+import * as React6 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';
+import { ChevronDown, Check, X, Bell, Info, AlertTriangle, XCircle, CheckCircle2 } from 'lucide-react';
 // src/utils/cn.ts
 var cn = (...classes) => {
@@ -39,8 +37,8 @@ var FOCUSABLE_SELECTORS = [
   '[tabindex]:not([tabindex="-1"])'
 ].join(", ");
 function useFocusTrap(containerRef, isActive) {
-  const previousActiveElement = React5.useRef(null);
-  React5.useEffect(() => {
+  const previousActiveElement = React6.useRef(null);
+  React6.useEffect(() => {
     if (!isActive) return;
     const container = containerRef.current;
     if (!container) return;
@@ -260,33 +258,105 @@ var TopLoading = ({
     }
   );
 };
-var ToastProvider = ({ containerId = "default" }) => {
-  return /* @__PURE__ */ jsx(
-    ToastContainer,
+var ToastContext = React6.createContext(null);
+var VARIANT_ICONS = {
+  success: /* @__PURE__ */ jsx(CheckCircle2, { size: 18 }),
+  error: /* @__PURE__ */ jsx(XCircle, { size: 18 }),
+  warning: /* @__PURE__ */ jsx(AlertTriangle, { size: 18 }),
+  info: /* @__PURE__ */ jsx(Info, { size: 18 }),
+  default: /* @__PURE__ */ jsx(Bell, { size: 18 })
+};
+var ToastItemComponent = ({ item, onRemove }) => {
+  const [exiting, setExiting] = React6.useState(false);
+  const closingRef = React6.useRef(false);
+  const close = React6.useCallback(() => {
+    if (closingRef.current) return;
+    closingRef.current = true;
+    setExiting(true);
+    setTimeout(() => onRemove(item.id), 260);
+  }, [item.id, onRemove]);
+  const itemClassName = [
+    "toast_item",
+    exiting && "toast_item_exiting"
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs(
+    "div",
     {
-      containerId,
-      position: "top-right",
-      autoClose: 2e3,
-      hideProgressBar: false,
-      newestOnTop: false,
-      closeOnClick: true,
-      rtl: false,
-      pauseOnFocusLoss: true,
-      draggable: true,
-      pauseOnHover: true,
-      theme: "light",
-      transition: Slide
+      className: itemClassName,
+      role: "alert",
+      children: [
+        /* @__PURE__ */ jsx("span", { className: `toast_icon toast_icon_${item.variant}`, "aria-hidden": "true", children: VARIANT_ICONS[item.variant] }),
+        /* @__PURE__ */ jsx("span", { className: "toast_message", children: item.message }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "toast_close",
+            onClick: close,
+            "aria-label": "\uB2EB\uAE30",
+            children: /* @__PURE__ */ jsx(X, { size: 14 })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `toast_progress toast_progress_${item.variant}`,
+            style: { "--toast-duration": `${item.duration}ms` },
+            onAnimationEnd: close,
+            "aria-hidden": "true"
+          }
+        )
+      ]
     }
   );
 };
-var useToast = (containerId = "default") => {
-  const base = { containerId };
+var ToastProvider = ({ children, maxCount = 5 }) => {
+  const [toasts, setToasts] = React6.useState([]);
+  const [isMounted, setIsMounted] = React6.useState(false);
+  React6.useEffect(() => {
+    setIsMounted(true);
+  }, []);
+  const addToast = React6.useCallback(
+    (message, variant, duration = 3e3) => {
+      const id = crypto.randomUUID();
+      setToasts((prev) => [{ id, message, variant, duration }, ...prev].slice(0, maxCount));
+    },
+    [maxCount]
+  );
+  const removeToast = React6.useCallback((id) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+  return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: { addToast }, children: [
+    children,
+    isMounted && createPortal(
+      /* @__PURE__ */ jsx("div", { className: "toast_container", children: toasts.map((item) => /* @__PURE__ */ jsx(
+        ToastItemComponent,
+        {
+          item,
+          onRemove: removeToast
+        },
+        item.id
+      )) }),
+      document.body
+    )
+  ] });
+};
+var useToast = () => {
+  const ctx = useContext(ToastContext);
+  if (!ctx) {
+    throw new Error("useToast must be used within ToastProvider");
+  }
   return {
-    success: (msg) => toast.success(msg, base),
-    error: (msg) => toast.error(msg, base),
-    warning: (msg) => toast.warning(msg, base),
-    info: (msg) => toast.info(msg, base),
-    message: (msg) => toast(msg, base)
+    /** 성공 메시지를 표시한다 */
+    success: (message, duration) => ctx.addToast(message, "success", duration),
+    /** 오류 메시지를 표시한다 */
+    error: (message, duration) => ctx.addToast(message, "error", duration),
+    /** 경고 메시지를 표시한다 */
+    warning: (message, duration) => ctx.addToast(message, "warning", duration),
+    /** 정보 메시지를 표시한다 */
+    info: (message, duration) => ctx.addToast(message, "info", duration),
+    /** 기본 메시지를 표시한다 */
+    message: (message, duration) => ctx.addToast(message, "default", duration)
   };
 };
 var Button = ({
@@ -308,11 +378,11 @@ var Button = ({
   const buttonStyle = width ? { ...style, width } : style;
   return /* @__PURE__ */ jsx("button", { className: buttonClassName, style: buttonStyle, ...props });
 };
-var Checkbox = React5.forwardRef(
+var Checkbox = React6.forwardRef(
   ({ label, size = "md", indeterminate, className, ...props }, ref) => {
-    const inputRef = React5.useRef(null);
-    React5.useImperativeHandle(ref, () => inputRef.current);
-    React5.useEffect(() => {
+    const inputRef = React6.useRef(null);
+    React6.useImperativeHandle(ref, () => inputRef.current);
+    React6.useEffect(() => {
       if (!inputRef.current) return;
       inputRef.current.indeterminate = Boolean(indeterminate);
     }, [indeterminate]);
@@ -344,7 +414,7 @@ var FileInput = ({
   disabled,
   ...props
 }) => {
-  const inputId = React5.useId();
+  const inputId = React6.useId();
   const rootClassName = [
     "file_input",
     disabled && "file_input_disabled",
@@ -365,7 +435,7 @@ var FileInput = ({
     /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: "file_input_label", children: label })
   ] });
 };
-var Radio = React5.forwardRef(
+var Radio = React6.forwardRef(
   ({ label, size = "md", className, ...props }, ref) => {
     const rootClassName = cn(
       "radio",
@@ -395,21 +465,21 @@ var Select = ({
   className,
   textAlign = "left"
 }) => {
-  const internalId = React5.useId();
+  const internalId = React6.useId();
   const selectId = id ?? internalId;
   const isControlled = value !== void 0;
-  const [internalValue, setInternalValue] = React5.useState(defaultValue);
+  const [internalValue, setInternalValue] = React6.useState(defaultValue);
   const currentValue = isControlled ? value ?? null : internalValue;
-  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(
+  const [isOpen, setIsOpen] = React6.useState(false);
+  const [activeIndex, setActiveIndex] = React6.useState(-1);
+  const [dropUp, setDropUp] = React6.useState(false);
+  const wrapperRef = React6.useRef(null);
+  const controlRef = React6.useRef(null);
+  const currentOption = React6.useMemo(
     () => options.find((o) => o.value === currentValue) ?? null,
     [options, currentValue]
   );
-  const setValue = React5.useCallback(
+  const setValue = React6.useCallback(
     (next) => {
       const option = options.find((o) => o.value === next) ?? null;
       if (!isControlled) setInternalValue(next);
@@ -417,12 +487,12 @@ var Select = ({
     },
     [isControlled, onChange, options]
   );
-  const handleOutsideClick = React5.useEffectEvent((e) => {
+  const handleOutsideClick = React6.useEffectEvent((e) => {
     if (!wrapperRef.current?.contains(e.target)) {
       setIsOpen(false);
     }
   });
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     document.addEventListener("mousedown", handleOutsideClick);
     return () => document.removeEventListener("mousedown", handleOutsideClick);
   }, []);
@@ -487,12 +557,12 @@ var Select = ({
         break;
     }
   };
-  React5.useEffect(() => {
+  React6.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]);
-  React5.useLayoutEffect(() => {
+  React6.useLayoutEffect(() => {
     if (!isOpen || !controlRef.current) return;
     const rect = controlRef.current.getBoundingClientRect();
     const listHeight = Math.min(options.length * 40, 288);
@@ -554,6 +624,7 @@ var Select = ({
             {
               role: "option",
               "aria-selected": selected,
+              "aria-disabled": opt.disabled ? true : void 0,
               className: optionClassName,
               onMouseEnter: () => !opt.disabled && setActiveIndex(i),
               onClick: () => {
@@ -573,7 +644,7 @@ var Select = ({
     )
   ] });
 };
-var Switch = React5.forwardRef(
+var Switch = React6.forwardRef(
   ({
     checked,
     defaultChecked,
@@ -585,7 +656,7 @@ var Switch = React5.forwardRef(
     ...props
   }, ref) => {
     const isControlled = checked !== void 0;
-    const [innerChecked, setInnerChecked] = React5.useState(!!defaultChecked);
+    const [innerChecked, setInnerChecked] = React6.useState(!!defaultChecked);
     const isOn = isControlled ? !!checked : innerChecked;
     const handleToggle = () => {
       if (disabled) return;
@@ -617,7 +688,7 @@ var Switch = React5.forwardRef(
   }
 );
 Switch.displayName = "Switch";
-var TextField = React5.forwardRef(
+var TextField = React6.forwardRef(
   ({
     id,
     label,
@@ -636,15 +707,15 @@ var TextField = React5.forwardRef(
     transformValue,
     ...props
   }, ref) => {
-    const inputId = id ?? React5.useId();
+    const inputId = id ?? React6.useId();
     const helperId = helperText ? `${inputId}-help` : void 0;
     const isControlled = value !== void 0;
     const applyTransform = (nextValue) => transformValue ? transformValue(nextValue) : nextValue;
-    const [innerValue, setInnerValue] = React5.useState(
+    const [innerValue, setInnerValue] = React6.useState(
       () => applyTransform(value ?? defaultValue ?? "")
     );
-    const isComposingRef = React5.useRef(false);
-    React5.useEffect(() => {
+    const isComposingRef = React6.useRef(false);
+    React6.useEffect(() => {
       if (!isControlled) return;
       setInnerValue(applyTransform(value ?? ""));
     }, [isControlled, value, transformValue]);
@@ -674,7 +745,7 @@ var TextField = React5.forwardRef(
     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: [
-        leftIcon ? /* @__PURE__ */ jsx("span", { className: "text_field_icon text_field_icon_left", children: leftIcon }) : null,
+        leftIcon ? /* @__PURE__ */ jsx("span", { className: "text_field_icon text_field_icon_left", "aria-hidden": "true", children: leftIcon }) : null,
         /* @__PURE__ */ jsx(
           "input",
           {
@@ -707,7 +778,7 @@ var TextField = React5.forwardRef(
             }
           }
         ),
-        rightIcon ? /* @__PURE__ */ jsx("span", { className: "text_field_icon text_field_icon_right", children: rightIcon }) : null
+        rightIcon ? /* @__PURE__ */ jsx("span", { className: "text_field_icon text_field_icon_right", "aria-hidden": "true", children: rightIcon }) : null
       ] }),
       helperText ? /* @__PURE__ */ jsx("div", { id: helperId, className: helperClassName, children: helperText }) : null
     ] });
@@ -762,6 +833,7 @@ var DatePicker = ({
       /* @__PURE__ */ jsxs(
         "select",
         {
+          "aria-label": "\uC5F0\uB3C4",
           value: year,
           disabled,
           onChange: (e) => emit(Number(e.target.value), month || minMonth, day || minDay),
@@ -777,6 +849,7 @@ var DatePicker = ({
       /* @__PURE__ */ jsxs(
         "select",
         {
+          "aria-label": "\uC6D4",
           value: month,
           disabled: disabled || !year,
           onChange: (e) => emit(year, Number(e.target.value), day || minDay),
@@ -791,6 +864,7 @@ var DatePicker = ({
       mode === "year-month-day" && /* @__PURE__ */ jsxs(
         "select",
         {
+          "aria-label": "\uC77C",
           value: day,
           disabled: disabled || !month,
           onChange: (e) => emit(year, month, Number(e.target.value)),
@@ -838,7 +912,7 @@ var getPaginationItems = (page, totalPages) => {
 var Pagination = ({ page, totalPages, onChange }) => {
   const prevDisabled = page <= 1;
   const nextDisabled = page >= totalPages;
-  const items = React5.useMemo(
+  const items = React6.useMemo(
     () => getPaginationItems(page, totalPages),
     [page, totalPages]
   );
@@ -862,7 +936,7 @@ var Pagination = ({ page, totalPages, onChange }) => {
         "pagination_page_button",
         { pagination_active: isActive }
       );
-      return /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsx("span", { role: "listitem", children: /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
@@ -870,9 +944,8 @@ var Pagination = ({ page, totalPages, onChange }) => {
           onClick: () => onChange(it),
           "aria-current": isActive ? "page" : void 0,
           children: it
-        },
-        it
-      );
+        }
+      ) }, it);
     }) }),
     /* @__PURE__ */ jsx(
       "button",
@@ -897,17 +970,18 @@ var Modal = ({
   ariaLabel,
   ...props
 }) => {
-  const panelRef = React5.useRef(null);
+  const panelRef = React6.useRef(null);
+  const titleId = React6.useId();
   useFocusTrap(panelRef, open);
-  const handleEscape = React5.useEffectEvent((e) => {
+  const handleEscape = React6.useEffectEvent((e) => {
     if (e.key === "Escape") onClose?.();
   });
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     if (!open) return;
     document.addEventListener("keydown", handleEscape);
     return () => document.removeEventListener("keydown", handleEscape);
   }, [open]);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     if (!open) return;
     const body = document.body;
     const openModals = parseInt(body.dataset.openModals || "0", 10);
@@ -930,14 +1004,15 @@ var Modal = ({
   }, [open]);
   if (!open) return null;
   const panelClassName = cn("modal_panel", className);
-  const modalAriaLabel = ariaLabel ?? (typeof title === "string" ? title : "Dialog");
+  const hasTitle = !!title;
   return /* @__PURE__ */ jsx(
     "div",
     {
       className: "modal",
       role: "dialog",
       "aria-modal": "true",
-      "aria-label": modalAriaLabel,
+      "aria-labelledby": hasTitle && !ariaLabel ? titleId : void 0,
+      "aria-label": !hasTitle ? ariaLabel ?? "Dialog" : ariaLabel,
       onClick: () => closeOnOverlay && onClose?.(),
       children: /* @__PURE__ */ jsxs(
         "div",
@@ -948,7 +1023,7 @@ var Modal = ({
           onClick: (e) => e.stopPropagation(),
           ...props,
           children: [
-            title && /* @__PURE__ */ jsx("div", { className: "modal_header", children: title }),
+            title && /* @__PURE__ */ jsx("div", { id: titleId, className: "modal_header", children: title }),
             /* @__PURE__ */ jsx("div", { className: "modal_body", children })
           ]
         }

package/dist/next.js CHANGED Viewed

@@ -51,29 +51,38 @@ var Sidebar = ({
       className: sidebarClassName,
       style,
       children: isOpen ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("div", { className: "sidebar_brand", children: /* @__PURE__ */ jsxs(Link, { href: brandHref, className: "sidebar_brand_link", children: [
-          /* @__PURE__ */ jsx("div", {}),
+        /* @__PURE__ */ jsxs("div", { className: "sidebar_brand", children: [
+          /* @__PURE__ */ jsxs(Link, { href: brandHref, className: "sidebar_brand_link", children: [
+            /* @__PURE__ */ jsx("div", {}),
+            /* @__PURE__ */ jsx(
+              Image,
+              {
+                src: "/images/logo/bigtablet.png",
+                alt: "Bigtablet",
+                width: 96,
+                height: 30,
+                priority: true
+              }
+            )
+          ] }),
           /* @__PURE__ */ jsx(
-            Image,
+            "button",
             {
-              src: "/images/logo/bigtablet.png",
-              alt: "Bigtablet",
-              width: 96,
-              height: 30,
-              priority: true
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Image,
-            {
-              src: "/images/sidebar/arrow-close.svg",
-              alt: "Close",
-              width: 24,
-              height: 24,
-              onClick: () => toggleSidebar(false)
+              type: "button",
+              className: "sidebar_close_btn",
+              onClick: () => toggleSidebar(false),
+              children: /* @__PURE__ */ jsx(
+                Image,
+                {
+                  src: "/images/sidebar/arrow-close.svg",
+                  alt: "Close",
+                  width: 24,
+                  height: 24
+                }
+              )
             }
           )
-        ] }) }),
+        ] }),
         /* @__PURE__ */ jsx("nav", { className: "sidebar_nav", children: items.map((item) => {
           if (item.type === "group") {
             const open = openGroups.includes(item.id);
@@ -91,13 +100,14 @@ var Sidebar = ({
                 {
                   type: "button",
                   className: "sidebar_item",
+                  "aria-expanded": open,
                   onClick: () => toggleGroup(item.id),
                   children: [
                     /* @__PURE__ */ jsxs("div", { className: "sidebar_item_left", children: [
-                      item.icon && /* @__PURE__ */ jsx("span", { className: "sidebar_icon", children: /* @__PURE__ */ jsx(item.icon, { size: 16 }) }),
+                      item.icon && /* @__PURE__ */ jsx("span", { className: "sidebar_icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(item.icon, { size: 16 }) }),
                       /* @__PURE__ */ jsx("span", { className: "sidebar_label", children: item.label })
                     ] }),
-                    /* @__PURE__ */ jsx("span", { className: "sidebar_item_right", children: /* @__PURE__ */ jsx(
+                    /* @__PURE__ */ jsx("span", { className: "sidebar_item_right", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
                       ChevronDown,
                       {
                         size: 16,
@@ -124,7 +134,7 @@ var Sidebar = ({
                       child.href
                     ),
                     children: [
-                      /* @__PURE__ */ jsx("span", { className: "sidebar_sub_icon", children: /* @__PURE__ */ jsx(
+                      /* @__PURE__ */ jsx("span", { className: "sidebar_sub_icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
                         CornerDownRight,
                         {
                           size: 14
@@ -150,7 +160,7 @@ var Sidebar = ({
               className: itemClassName,
               onClick: () => onItemSelect?.(item.href),
               children: /* @__PURE__ */ jsxs("div", { className: "sidebar_item_left", children: [
-                item.icon && /* @__PURE__ */ jsx("span", { className: "sidebar_icon", children: /* @__PURE__ */ jsx(item.icon, { size: 16 }) }),
+                item.icon && /* @__PURE__ */ jsx("span", { className: "sidebar_icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(item.icon, { size: 16 }) }),
                 /* @__PURE__ */ jsx("span", { className: "sidebar_label", children: item.label })
               ] })
             },
@@ -158,13 +168,20 @@ var Sidebar = ({
           );
         }) })
       ] }) : /* @__PURE__ */ jsx(
-        Image,
+        "button",
         {
-          src: "/images/sidebar/menu.svg",
-          alt: "Open",
-          width: 24,
-          height: 24,
-          onClick: () => toggleSidebar(true)
+          type: "button",
+          className: "sidebar_open_btn",
+          onClick: () => toggleSidebar(true),
+          children: /* @__PURE__ */ jsx(
+            Image,
+            {
+              src: "/images/sidebar/menu.svg",
+              alt: "Open",
+              width: 24,
+              height: 24
+            }
+          )
         }
       )
     }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@bigtablet/design-system",
-  "version": "1.18.9",
+  "version": "1.19.1",
   "description": "Bigtablet Design System UI Components",
   "type": "module",
   "types": "dist/index.d.ts",
@@ -68,8 +68,7 @@
   "peerDependencies": {
     "lucide-react": ">=0.552.0",
     "react": "^19",
-    "react-dom": "^19",
-    "react-toastify": ">=11.0.5"
+    "react-dom": "^19"
   },
   "peerDependenciesMeta": {
     "next": {
@@ -102,10 +101,9 @@
     "playwright": "^1.57.0",
     "react": "19.2.0",
     "react-dom": "19.2.0",
-    "react-toastify": "^11.0.5",
     "sass-embedded": "^1.93.3",
     "semantic-release": "^25.0.1",
-    "storybook": "10.1.11",
+    "storybook": "10.2.10",
     "tsup": "^8.5.0",
     "typescript": "^5",
     "vite": "^5",