@bigtablet/design-system 1.13.0 → 1.14.1

package/dist/index.css

@@ -6,8 +6,6 @@
 .card_bordered {
   border: 1px solid #e5e5e5;
 }
-.card {
-}
 .card_shadow_none {
   box-shadow: none;
 }
@@ -20,8 +18,6 @@
 .card_shadow_lg {
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);
 }
-.card {
-}
 .card_p_none {
   padding: 0;
 }
@@ -34,8 +30,6 @@
 .card_p_lg {
   padding: 1.5rem;
 }
-.card {
-}
 .card_title {
   font-size: 1.25rem;
   font-weight: 600;
@@ -43,14 +37,12 @@
   margin-bottom: 0.75rem;
   color: #1f2937;
 }
-.card {
-}
 .card_body {
   width: 100%;
 }
 
 /* src/ui/feedback/alert/style.scss */
-@keyframes fade_in {
+@keyframes alert_fade_in {
   from {
     opacity: 0;
   }
@@ -58,7 +50,7 @@
     opacity: 1;
   }
 }
-@keyframes slide_up {
+@keyframes alert_slide_up {
   from {
     opacity: 0;
     transform: translateY(20px);
@@ -76,7 +68,7 @@
   align-items: center;
   justify-content: center;
   z-index: 10000;
-  animation: fade_in 0.2s ease-in-out;
+  animation: alert_fade_in 0.2s ease-in-out;
 }
 .alert_modal {
   background: #ffffff;
@@ -84,17 +76,17 @@
   min-width: 320px;
   max-width: 480px;
   box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-  animation: slide_up 0.3s ease-in-out;
+  animation: alert_slide_up 0.3s ease-in-out;
   overflow: hidden;
 }
-.alert_modal_title {
+.alert_title {
   font-size: 1.125rem;
   line-height: 1.5;
   font-weight: 600;
   color: #3b82f6;
   padding: 0.75rem 1.25rem 0.25rem;
 }
-.alert_modal_message {
+.alert_message {
   font-size: 0.9375rem;
   font-weight: 400;
   line-height: 1.5;
@@ -102,22 +94,22 @@
   padding: 1.25rem;
   line-height: 1.75;
 }
-.alert_modal_actions {
+.alert_actions {
   display: flex;
   gap: 0.5rem;
   align-items: center;
   padding: 0 1.25rem 1.25rem;
 }
-.alert_modal_actions_left {
+.alert_actions_left {
   justify-content: flex-start;
 }
-.alert_modal_actions_center {
+.alert_actions_center {
   justify-content: center;
 }
-.alert_modal_actions_right {
+.alert_actions_right {
   justify-content: flex-end;
 }
-.alert_modal_button {
+.alert_button {
   min-width: 80px;
   padding: 10px 24px;
   border-radius: 6px;
@@ -131,87 +123,115 @@
     box-shadow 0.2s ease-in-out,
     transform 0.2s ease-in-out;
 }
-.alert_modal_button:focus-visible {
+.alert_button:focus-visible {
   outline: none;
   box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
 }
-.alert_modal_button:active:not(:disabled) {
+.alert_button:active:not(:disabled) {
   transform: scale(0.98);
 }
-.alert_modal_button:disabled {
+.alert_button:disabled {
   cursor: not-allowed;
   opacity: 0.6;
 }
-.alert_modal_button_cancel {
+.alert_button_cancel {
   background: #ffffff;
   border-color: #e5e5e5;
   color: #1a1a1a;
 }
-.alert_modal_button_cancel:hover:not(:disabled) {
+.alert_button_cancel:hover:not(:disabled) {
   background: #fafafa;
   border-color: rgba(0, 0, 0, 0.08);
 }
-.alert_modal_button_confirm {
+.alert_button_confirm {
   color: #ffffff;
 }
-.alert_modal_info .alert_modal_title {
+.alert_variant_info .alert_title {
   color: #3b82f6;
 }
-.alert_modal_info .alert_modal_button_confirm {
+.alert_variant_info .alert_button_confirm {
   background: #3b82f6;
   border-color: #3b82f6;
 }
-.alert_modal_info .alert_modal_button_confirm:hover:not(:disabled) {
+.alert_variant_info .alert_button_confirm:hover:not(:disabled) {
   background: rgb(29.7434146341, 111.3414634146, 244.6565853659);
   border-color: rgb(29.7434146341, 111.3414634146, 244.6565853659);
 }
-.alert_modal_success .alert_modal_title {
+.alert_variant_success .alert_title {
   color: #10b981;
 }
-.alert_modal_success .alert_modal_button_confirm {
+.alert_variant_success .alert_button_confirm {
   background: #10b981;
   border-color: #10b981;
 }
-.alert_modal_success .alert_modal_button_confirm:hover:not(:disabled) {
+.alert_variant_success .alert_button_confirm:hover:not(:disabled) {
   background: rgb(13.5641791045, 156.8358208955, 109.3611940299);
   border-color: rgb(13.5641791045, 156.8358208955, 109.3611940299);
 }
-.alert_modal_warning .alert_modal_title {
+.alert_variant_warning .alert_title {
   color: #f59e0b;
 }
-.alert_modal_warning .alert_modal_button_confirm {
+.alert_variant_warning .alert_button_confirm {
   background: #f59e0b;
   border-color: #f59e0b;
 }
-.alert_modal_warning .alert_modal_button_confirm:hover:not(:disabled) {
+.alert_variant_warning .alert_button_confirm:hover:not(:disabled) {
   background: rgb(216.525984252, 139.3220472441, 8.874015748);
   border-color: rgb(216.525984252, 139.3220472441, 8.874015748);
 }
-.alert_modal_error .alert_modal_title {
+.alert_variant_error .alert_title {
   color: #ef4444;
 }
-.alert_modal_error .alert_modal_button_confirm {
+.alert_variant_error .alert_button_confirm {
   background: #ef4444;
   border-color: #ef4444;
 }
-.alert_modal_error .alert_modal_button_confirm:hover:not(:disabled) {
+.alert_variant_error .alert_button_confirm:hover:not(:disabled) {
   background: rgb(236.5881773399, 39.8118226601, 39.8118226601);
   border-color: rgb(236.5881773399, 39.8118226601, 39.8118226601);
 }
 
-/* src/ui/feedback/loading/style.scss */
-@keyframes loading_spin {
+/* src/ui/feedback/spinner/style.scss */
+@keyframes spinner_spin {
   to {
     transform: rotate(360deg);
   }
 }
-.loading {
+.spinner {
   display: inline-block;
   box-sizing: border-box;
   border-radius: 50%;
   border: 2px solid #e5e5e5;
   border-top-color: #000000;
-  animation: loading_spin 0.8s linear infinite;
+  animation: spinner_spin 0.8s linear infinite;
+}
+
+/* src/ui/feedback/top-loading/style.scss */
+.top_loading {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 10001;
+  overflow: hidden;
+  background-color: transparent;
+}
+.top_loading_bar {
+  height: 100%;
+  background-color: #000000;
+  transition: width 0.2s ease-in-out;
+}
+.top_loading_indeterminate {
+  width: 30%;
+  animation: top_loading_indeterminate 1.5s ease-in-out infinite;
+}
+@keyframes top_loading_indeterminate {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(400%);
+  }
 }
 
 /* src/ui/general/button/style.scss */
@@ -392,6 +412,9 @@
   display: inline-flex;
   align-items: center;
 }
+.file_input:hover .file_input_label {
+  border-color: rgba(0, 0, 0, 0.08);
+}
 .file_input_control {
   position: absolute;
   inset: 0;
@@ -411,9 +434,6 @@
     border-color 0.2s ease-in-out,
     box-shadow 0.2s ease-in-out;
 }
-.file_input:hover .file_input_label {
-  border-color: rgba(0, 0, 0, 0.08);
-}
 .file_input_control:focus-visible + .file_input_label {
   box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
   border-color: #000000;
@@ -550,57 +570,56 @@
   background: #fafafa;
   color: #999999;
 }
-.select_control_variant_outline {
+.select_variant_outline {
   border: 1px solid #e5e5e5;
 }
-.select_control_variant_outline:hover:not(.is_disabled) {
+.select_variant_outline:hover:not(.is_disabled) {
   border-color: rgba(0, 0, 0, 0.08);
 }
-.select_control_variant_outline.is_open {
+.select_variant_outline.is_open {
   border-color: #000000;
   box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
 }
-.select_control_variant_filled {
+.select_variant_filled {
   background: #fafafa;
   border: 1px solid transparent;
 }
-.select_control_variant_filled:hover:not(.is_disabled) {
+.select_variant_filled:hover:not(.is_disabled) {
   background: rgb(253.5, 253.5, 253.5);
 }
-.select_control_variant_filled.is_open {
+.select_variant_filled.is_open {
   background: #ffffff;
   border-color: #000000;
   box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
 }
-.select_control_variant_ghost {
+.select_variant_ghost {
   background: transparent;
   border: 1px solid transparent;
 }
-.select_control_variant_ghost:hover:not(.is_disabled) {
+.select_variant_ghost:hover:not(.is_disabled) {
   background: rgba(0, 0, 0, 0.03);
 }
-.select_control_variant_ghost.is_open {
+.select_variant_ghost.is_open {
   background: #ffffff;
   border-color: #000000;
   box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
 }
-.select_control_size_sm {
+.select_size_sm {
   padding: 0.5rem 1rem;
   font-size: 0.875rem;
   line-height: 1.5;
 }
-.select_control_size_md {
+.select_size_md {
   padding: 0.75rem 1.25rem;
   font-size: 0.9375rem;
   line-height: 1.5;
 }
-.select_control_size_lg {
+.select_size_lg {
   padding: 1rem 1.5rem;
   font-size: 1rem;
   line-height: 1.5;
 }
-.select_value,
-.select_placeholder {
+.select_value {
   flex: 1 1 auto;
   min-width: 0;
   overflow: hidden;
@@ -612,6 +631,15 @@
   line-height: 1.5;
 }
 .select_placeholder {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: start;
+  font-size: 0.9375rem;
+  font-weight: 400;
+  line-height: 1.5;
   color: #999999;
 }
 .select_icon {
@@ -870,23 +898,9 @@
 /* src/ui/form/date-picker/style.scss */
 .date_picker {
   display: flex;
+  flex-direction: column;
   gap: 0.25rem;
 }
-.date_picker_label {
-  color: #1a1a1a;
-  margin-bottom: 0.25rem;
-  font-weight: 500;
-  font-size: 0.875rem;
-  line-height: 1.5;
-}
-.date_picker_required {
-  margin-left: 0.25rem;
-  color: #ef4444;
-}
-.date_picker_fields {
-  display: flex;
-  gap: 0.5rem;
-}
 .date_picker select {
   min-width: 88px;
   height: 44px;
@@ -936,6 +950,32 @@
 .date_picker select option {
   color: #1a1a1a;
 }
+@media (max-width: 480px) {
+  .date_picker select {
+    flex: 1;
+    min-width: 0;
+  }
+}
+.date_picker_label {
+  color: #1a1a1a;
+  margin-bottom: 0.25rem;
+  font-weight: 500;
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+.date_picker_required {
+  margin-left: 0.25rem;
+  color: #ef4444;
+}
+.date_picker_fields {
+  display: flex;
+  gap: 0.5rem;
+}
+@media (max-width: 480px) {
+  .date_picker_fields {
+    gap: 0.25rem;
+  }
+}
 .date_picker_full {
   width: 100%;
 }
@@ -949,15 +989,6 @@
 .date_picker_disabled .date_picker_label {
   color: #9ca3af;
 }
-@media (max-width: 480px) {
-  .date_picker_fields {
-    gap: 0.25rem;
-  }
-  .date_picker select {
-    flex: 1;
-    min-width: 0;
-  }
-}
 
 /* src/ui/navigation/pagination/style.scss */
 .pagination {
@@ -994,7 +1025,7 @@
   align-items: center;
   gap: 6px;
 }
-.pagination_pageButton {
+.pagination_page_button {
   border: 0;
   background: transparent;
   min-width: 36px;
@@ -1005,14 +1036,14 @@
   color: #666666;
   transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
 }
-.pagination_pageButton:hover {
+.pagination_page_button:hover {
   background: #fafafa;
   color: #1a1a1a;
 }
-.pagination_pageButton:focus-visible {
+.pagination_page_button:focus-visible {
   box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
 }
-.pagination_pageButton.is-active {
+.pagination_active {
   color: #1a1a1a;
   font-weight: 600;
 }

package/dist/index.d.ts

@@ -2,7 +2,6 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import * as react_toastify from 'react-toastify';
 
-/** Card UI */
 interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
     heading?: React.ReactNode;
     shadow?: "none" | "sm" | "md" | "lg";
@@ -32,10 +31,22 @@ declare const AlertProvider: React.FC<{
     children: React.ReactNode;
 }>;
 
-interface LoadingProps {
+interface SpinnerProps {
     size?: number;
 }
-declare const Loading: ({ size }: LoadingProps) => react_jsx_runtime.JSX.Element;
+declare const Spinner: ({ size }: SpinnerProps) => react_jsx_runtime.JSX.Element;
+
+interface TopLoadingProps {
+    /** 진행률 (0-100). undefined면 indeterminate 모드 */
+    progress?: number;
+    /** 로딩바 색상 (기본: primary) */
+    color?: string;
+    /** 로딩바 높이 (기본: 3px) */
+    height?: number;
+    /** 표시 여부 */
+    isLoading?: boolean;
+}
+declare const TopLoading: ({ progress, color, height, isLoading, }: TopLoadingProps) => react_jsx_runtime.JSX.Element | null;
 
 interface ToastProviderProps {
     containerId?: string;
@@ -165,4 +176,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, DatePicker, FileInput, Loading, Modal, Pagination, Radio, Select, type SelectOption, Switch, TextField, ToastProvider, useAlert, useToast };
+export { AlertProvider, Button, Card, Checkbox, DatePicker, FileInput, Modal, Pagination, Radio, Select, type SelectOption, Spinner, Switch, TextField, ToastProvider, TopLoading, useAlert, useToast };

package/dist/index.js

@@ -22,7 +22,7 @@ var Card = ({
     "card",
     `card_shadow_${shadow}`,
     `card_p_${padding}`,
-    bordered ? "card_bordered" : "",
+    bordered && "card_bordered",
     className ?? ""
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs("div", { className: cls, ...props, children: [
@@ -89,24 +89,32 @@ var AlertModal = ({
   onCancel,
   onClose
 }) => {
+  const modalClassName = [
+    "alert_modal",
+    `alert_variant_${variant}`
+  ].filter(Boolean).join(" ");
+  const actionsClassName = [
+    "alert_actions",
+    `alert_actions_${actionsAlign}`
+  ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsx("div", { className: "alert_overlay", onClick: onClose, children: /* @__PURE__ */ jsxs(
     "div",
     {
-      className: `alert_modal alert_modal_${variant}`,
+      className: modalClassName,
       onClick: (e) => e.stopPropagation(),
       role: "alertdialog",
       "aria-modal": "true",
       "aria-labelledby": "alert_title",
       "aria-describedby": "alert_message",
       children: [
-        title && /* @__PURE__ */ jsx("div", { className: "alert_modal_title", id: "alert_title", children: title }),
-        message && /* @__PURE__ */ jsx("div", { className: "alert_modal_message", id: "alert_message", children: message }),
-        /* @__PURE__ */ jsxs("div", { className: `alert_modal_actions alert_modal_actions_${actionsAlign}`, children: [
+        title && /* @__PURE__ */ jsx("div", { className: "alert_title", id: "alert_title", children: title }),
+        message && /* @__PURE__ */ jsx("div", { className: "alert_message", id: "alert_message", children: message }),
+        /* @__PURE__ */ jsxs("div", { className: actionsClassName, children: [
           showCancel && /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
-              className: "alert_modal_button alert_modal_button_cancel",
+              className: "alert_button alert_button_cancel",
               onClick: onCancel,
               children: cancelText
             }
@@ -115,7 +123,7 @@ var AlertModal = ({
             "button",
             {
               type: "button",
-              className: "alert_modal_button alert_modal_button_confirm",
+              className: "alert_button alert_button_confirm",
               onClick: onConfirm,
               children: confirmText
             }
@@ -125,17 +133,51 @@ var AlertModal = ({
     }
   ) });
 };
-var Loading = ({ size = 24 }) => {
+var Spinner = ({ size = 24 }) => {
   return /* @__PURE__ */ jsx(
     "span",
     {
-      className: "loading",
+      className: "spinner",
       style: { width: size, height: size },
       role: "status",
       "aria-label": "\uB85C\uB529 \uC911"
     }
   );
 };
+var TopLoading = ({
+  progress,
+  color,
+  height = 3,
+  isLoading = true
+}) => {
+  if (!isLoading) return null;
+  const isIndeterminate = progress === void 0;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "top_loading",
+      style: { height },
+      role: "progressbar",
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-valuenow": isIndeterminate ? void 0 : progress,
+      "aria-label": "\uD398\uC774\uC9C0 \uB85C\uB529 \uC911",
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: [
+            "top_loading_bar",
+            isIndeterminate && "top_loading_indeterminate"
+          ].filter(Boolean).join(" "),
+          style: {
+            width: isIndeterminate ? void 0 : `${progress}%`,
+            backgroundColor: color
+          }
+        }
+      )
+    }
+  );
+};
 var ToastProvider = ({ containerId = "default" }) => {
   return /* @__PURE__ */ jsx(
     ToastContainer,
@@ -219,7 +261,11 @@ var FileInput = ({
   ...props
 }) => {
   const inputId = React3.useId();
-  const rootClassName = ["file_input", disabled ? "file_input_disabled" : "", className ?? ""].filter(Boolean).join(" ");
+  const rootClassName = [
+    "file_input",
+    disabled && "file_input_disabled",
+    className ?? ""
+  ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs("div", { className: rootClassName, children: [
     /* @__PURE__ */ jsx(
       "input",
@@ -236,7 +282,11 @@ var FileInput = ({
   ] });
 };
 var Radio = ({ label, size = "md", className, ...props }) => {
-  const rootClassName = ["radio", `radio_size_${size}`, className ?? ""].filter(Boolean).join(" ");
+  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" }),
@@ -366,8 +416,8 @@ var Select = ({
   const rootClassName = ["select", className ?? ""].filter(Boolean).join(" ");
   const controlClassName = [
     "select_control",
-    `select_control_variant_${variant}`,
-    `select_control_size_${size}`,
+    `select_variant_${variant}`,
+    `select_size_${size}`,
     isOpen && "is_open",
     disabled && "is_disabled"
   ].filter(Boolean).join(" ");
@@ -631,53 +681,55 @@ var DatePicker = ({
   };
   return /* @__PURE__ */ jsxs("div", { className: "date_picker", style: { width: normalizeWidth(width?.container) }, children: [
     label && /* @__PURE__ */ jsx("label", { className: "date_picker_label", children: label }),
-    /* @__PURE__ */ jsxs(
-      "select",
-      {
-        style: { width: normalizeWidth(width?.year) },
-        value: year,
-        disabled,
-        onChange: (e) => emit(Number(e.target.value), month || minMonth, day || minDay),
-        children: [
-          /* @__PURE__ */ jsx("option", { value: "", disabled: true }),
-          Array.from(
-            { length: maxYear - startYear + 1 },
-            (_, i) => startYear + i
-          ).map((y2) => /* @__PURE__ */ jsx("option", { value: y2, children: y2 }, y2))
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxs(
-      "select",
-      {
-        style: { width: normalizeWidth(width?.month) },
-        value: month,
-        disabled: disabled || !year,
-        onChange: (e) => emit(year, Number(e.target.value), day || minDay),
-        children: [
-          /* @__PURE__ */ jsx("option", { value: "", disabled: true }),
-          Array.from({ length: maxMonth - minMonth + 1 }, (_, i) => minMonth + i).map(
-            (m2) => /* @__PURE__ */ jsx("option", { value: m2, children: pad(m2) }, m2)
-          )
-        ]
-      }
-    ),
-    mode === "year-month-day" && /* @__PURE__ */ jsxs(
-      "select",
-      {
-        style: { width: normalizeWidth(width?.day) },
-        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 - minDay + 1 },
-            (_, i) => minDay + i
-          ).map((d2) => /* @__PURE__ */ jsx("option", { value: d2, children: pad(d2) }, d2))
-        ]
-      }
-    )
+    /* @__PURE__ */ jsxs("div", { className: "date_picker_fields", children: [
+      /* @__PURE__ */ jsxs(
+        "select",
+        {
+          style: { width: normalizeWidth(width?.year) },
+          value: year,
+          disabled,
+          onChange: (e) => emit(Number(e.target.value), month || minMonth, day || minDay),
+          children: [
+            /* @__PURE__ */ jsx("option", { value: "", disabled: true }),
+            Array.from(
+              { length: maxYear - startYear + 1 },
+              (_, i) => startYear + i
+            ).map((y2) => /* @__PURE__ */ jsx("option", { value: y2, children: y2 }, y2))
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "select",
+        {
+          style: { width: normalizeWidth(width?.month) },
+          value: month,
+          disabled: disabled || !year,
+          onChange: (e) => emit(year, Number(e.target.value), day || minDay),
+          children: [
+            /* @__PURE__ */ jsx("option", { value: "", disabled: true }),
+            Array.from({ length: maxMonth - minMonth + 1 }, (_, i) => minMonth + i).map(
+              (m2) => /* @__PURE__ */ jsx("option", { value: m2, children: pad(m2) }, m2)
+            )
+          ]
+        }
+      ),
+      mode === "year-month-day" && /* @__PURE__ */ jsxs(
+        "select",
+        {
+          style: { width: normalizeWidth(width?.day) },
+          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 - minDay + 1 },
+              (_, i) => minDay + i
+            ).map((d2) => /* @__PURE__ */ jsx("option", { value: d2, children: pad(d2) }, d2))
+          ]
+        }
+      )
+    ] })
   ] });
 };
 var range = (start, end) => {
@@ -721,11 +773,15 @@ 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 = [
+        "pagination_page_button",
+        isActive && "pagination_active"
+      ].filter(Boolean).join(" ");
       return /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
-          className: `pagination_pageButton ${isActive ? "is-active" : ""}`,
+          className: buttonClassName,
           onClick: () => onChange(it),
           "aria-current": isActive ? "page" : void 0,
           children: it
@@ -764,6 +820,7 @@ var Modal = ({
     return () => document.removeEventListener("keydown", onKeyDown);
   }, [open, onClose]);
   if (!open) return null;
+  const panelClassName = ["modal_panel", className].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -774,7 +831,7 @@ var Modal = ({
       children: /* @__PURE__ */ jsxs(
         "div",
         {
-          className: ["modal_panel", className].filter(Boolean).join(" "),
+          className: panelClassName,
           style: { width },
           onClick: (e) => e.stopPropagation(),
           ...props,
@@ -788,4 +845,4 @@ var Modal = ({
   );
 };
 
-export { AlertProvider, Button, Card, Checkbox, DatePicker, FileInput, Loading, Modal, Pagination, Radio, Select, Switch, TextField, ToastProvider, useAlert, useToast };
+export { AlertProvider, Button, Card, Checkbox, DatePicker, FileInput, Modal, Pagination, Radio, Select, Spinner, Switch, TextField, ToastProvider, TopLoading, useAlert, useToast };

package/dist/next.css

@@ -11,7 +11,7 @@
   overflow: hidden;
   transition: width 0.3s ease-in-out;
 }
-.sidebar.is_closed {
+.sidebar_is_closed {
   width: 56px;
 }
 .sidebar_brand {
@@ -49,7 +49,7 @@
   background: #fafafa;
   color: #1f2937;
 }
-.sidebar_item.is_active {
+.sidebar_item_active {
   background: #ffffff;
   color: #1f2937;
   box-shadow: inset 0 0 0 1px #e5e5e5;
@@ -70,7 +70,7 @@
 .sidebar_chevron {
   transition: transform 0.2s ease-in-out;
 }
-.sidebar_chevron.is_open {
+.sidebar_chevron_open {
   transform: rotate(180deg);
 }
 .sidebar_label {
@@ -90,7 +90,7 @@
     opacity 0.2s ease-in-out,
     transform 0.2s ease-in-out;
 }
-.sidebar_sub.is_open {
+.sidebar_sub_open {
   max-height: 500px;
   opacity: 1;
   transform: translateY(0);
@@ -110,7 +110,7 @@
   background: #fafafa;
   color: #1f2937;
 }
-.sidebar_sub_item.is_active {
+.sidebar_sub_item_active {
   color: #000000;
   font-weight: 500;
 }

package/dist/next.js

@@ -40,14 +40,15 @@ var Sidebar = ({
       (prev) => prev.includes(id) ? prev.filter((v) => v !== id) : [...prev, id]
     );
   };
+  const sidebarClassName = [
+    "sidebar",
+    isOpen ? "sidebar_is_open" : "sidebar_is_closed",
+    className ?? ""
+  ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsx(
     "aside",
     {
-      className: [
-        "sidebar",
-        isOpen ? "is_open" : "is_closed",
-        className ?? ""
-      ].filter(Boolean).join(" "),
+      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: [
@@ -76,6 +77,14 @@ var Sidebar = ({
         /* @__PURE__ */ jsx("nav", { className: "sidebar_nav", children: items.map((item) => {
           if (item.type === "group") {
             const open = openGroups.includes(item.id);
+            const subClassName = [
+              "sidebar_sub",
+              open && "sidebar_sub_open"
+            ].filter(Boolean).join(" ");
+            const chevronClassName = [
+              "sidebar_chevron",
+              open && "sidebar_chevron_open"
+            ].filter(Boolean).join(" ");
             return /* @__PURE__ */ jsxs("div", { className: "sidebar_group", children: [
               /* @__PURE__ */ jsxs(
                 "button",
@@ -92,63 +101,53 @@ var Sidebar = ({
                       ChevronDown,
                       {
                         size: 16,
-                        className: [
-                          "sidebar_chevron",
-                          open && "is_open"
-                        ].filter(Boolean).join(" ")
+                        className: chevronClassName
                       }
                     ) })
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: [
-                    "sidebar_sub",
-                    open && "is_open"
-                  ].filter(Boolean).join(" "),
-                  children: item.children.map((child) => {
-                    const active2 = isActive(
-                      child.href
-                    );
-                    return /* @__PURE__ */ jsxs(
-                      Link,
-                      {
-                        href: child.href,
-                        className: [
-                          "sidebar_sub_item",
-                          active2 && "is_active"
-                        ].filter(Boolean).join(" "),
-                        onClick: () => onItemSelect?.(
-                          child.href
-                        ),
-                        children: [
-                          /* @__PURE__ */ jsx("span", { className: "sidebar_sub_icon", children: /* @__PURE__ */ jsx(
-                            CornerDownRight,
-                            {
-                              size: 14
-                            }
-                          ) }),
-                          /* @__PURE__ */ jsx("span", { className: "sidebar_sub_label", children: child.label })
-                        ]
-                      },
+              /* @__PURE__ */ jsx("div", { className: subClassName, children: item.children.map((child) => {
+                const active2 = isActive(
+                  child.href
+                );
+                const subItemClassName = [
+                  "sidebar_sub_item",
+                  active2 && "sidebar_sub_item_active"
+                ].filter(Boolean).join(" ");
+                return /* @__PURE__ */ jsxs(
+                  Link,
+                  {
+                    href: child.href,
+                    className: subItemClassName,
+                    onClick: () => onItemSelect?.(
                       child.href
-                    );
-                  })
-                }
-              )
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx("span", { className: "sidebar_sub_icon", children: /* @__PURE__ */ jsx(
+                        CornerDownRight,
+                        {
+                          size: 14
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsx("span", { className: "sidebar_sub_label", children: child.label })
+                    ]
+                  },
+                  child.href
+                );
+              }) })
             ] }, item.id);
           }
           const active = isActive(item.href);
+          const itemClassName = [
+            "sidebar_item",
+            active && "sidebar_item_active"
+          ].filter(Boolean).join(" ");
           return /* @__PURE__ */ jsx(
             Link,
             {
               href: item.href,
-              className: [
-                "sidebar_item",
-                active && "is_active"
-              ].filter(Boolean).join(" "),
+              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 }) }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigtablet/design-system",
-  "version": "1.13.0",
+  "version": "1.14.1",
   "description": "Bigtablet Design System UI Components",
   "type": "module",
   "types": "dist/index.d.ts",
@@ -66,25 +66,31 @@
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/github": "^12.0.1",
     "@semantic-release/npm": "^13.1.1",
-    "@storybook/react": "10.1.10",
-    "@storybook/react-vite": "10.1.10",
+    "@storybook/addon-docs": "^10.1.11",
+    "@storybook/addon-vitest": "10.1.11",
+    "@storybook/react": "10.1.11",
+    "@storybook/react-vite": "10.1.11",
     "@types/node": "^24",
     "@types/react": "^19",
     "@types/react-dom": "^19",
+    "@vitest/browser-playwright": "^4.0.17",
+    "@vitest/coverage-v8": "^4.0.17",
     "chromatic": "^13.3.3",
     "conventional-changelog-conventionalcommits": "^9.1.0",
     "esbuild-sass-plugin": "^3",
     "lucide-react": "^0.552.0",
     "next": "16.0.10",
+    "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.10",
+    "storybook": "10.1.11",
     "tsup": "^8.5.0",
     "typescript": "^5",
-    "vite": "^5"
+    "vite": "^5",
+    "vitest": "^4.0.17"
   },
   "publishConfig": {
     "access": "public",