@bigtablet/design-system 1.14.0 → 1.14.1

package/dist/index.js

@@ -8,8 +8,7 @@ import { ToastContainer, Slide, toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import { ChevronDown, Check } from 'lucide-react';
 
-// src/ui/display/card/style.module.scss
-var style_module_default = {};
+// src/ui/display/card/index.tsx
 var Card = ({
   heading,
   shadow = "sm",
@@ -20,20 +19,17 @@ var Card = ({
   ...props
 }) => {
   const cls = [
-    style_module_default.card,
-    style_module_default[`shadow_${shadow}`],
-    style_module_default[`p_${padding}`],
-    bordered && style_module_default.bordered,
+    "card",
+    `card_shadow_${shadow}`,
+    `card_p_${padding}`,
+    bordered && "card_bordered",
     className ?? ""
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs("div", { className: cls, ...props, children: [
-    heading ? /* @__PURE__ */ jsx("div", { className: style_module_default.title, children: heading }) : null,
-    /* @__PURE__ */ jsx("div", { className: style_module_default.body, children })
+    heading ? /* @__PURE__ */ jsx("div", { className: "card_title", children: heading }) : null,
+    /* @__PURE__ */ jsx("div", { className: "card_body", children })
   ] });
 };
-
-// src/ui/feedback/alert/style.module.scss
-var style_module_default2 = {};
 var AlertContext = createContext(null);
 var useAlert = () => {
   const context = useContext(AlertContext);
@@ -94,14 +90,14 @@ var AlertModal = ({
   onClose
 }) => {
   const modalClassName = [
-    style_module_default2.modal,
-    style_module_default2[`variant_${variant}`]
+    "alert_modal",
+    `alert_variant_${variant}`
   ].filter(Boolean).join(" ");
   const actionsClassName = [
-    style_module_default2.actions,
-    style_module_default2[`actions_${actionsAlign}`]
+    "alert_actions",
+    `alert_actions_${actionsAlign}`
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx("div", { className: style_module_default2.overlay, onClick: onClose, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx("div", { className: "alert_overlay", onClick: onClose, children: /* @__PURE__ */ jsxs(
     "div",
     {
       className: modalClassName,
@@ -111,14 +107,14 @@ var AlertModal = ({
       "aria-labelledby": "alert_title",
       "aria-describedby": "alert_message",
       children: [
-        title && /* @__PURE__ */ jsx("div", { className: style_module_default2.title, id: "alert_title", children: title }),
-        message && /* @__PURE__ */ jsx("div", { className: style_module_default2.message, id: "alert_message", children: message }),
+        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: `${style_module_default2.button} ${style_module_default2.button_cancel}`,
+              className: "alert_button alert_button_cancel",
               onClick: onCancel,
               children: cancelText
             }
@@ -127,7 +123,7 @@ var AlertModal = ({
             "button",
             {
               type: "button",
-              className: `${style_module_default2.button} ${style_module_default2.button_confirm}`,
+              className: "alert_button alert_button_confirm",
               onClick: onConfirm,
               children: confirmText
             }
@@ -137,23 +133,17 @@ var AlertModal = ({
     }
   ) });
 };
-
-// src/ui/feedback/spinner/style.module.scss
-var style_module_default3 = {};
 var Spinner = ({ size = 24 }) => {
   return /* @__PURE__ */ jsx(
     "span",
     {
-      className: style_module_default3.spinner,
+      className: "spinner",
       style: { width: size, height: size },
       role: "status",
       "aria-label": "\uB85C\uB529 \uC911"
     }
   );
 };
-
-// src/ui/feedback/top-loading/style.module.scss
-var style_module_default4 = {};
 var TopLoading = ({
   progress,
   color,
@@ -165,7 +155,7 @@ var TopLoading = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: style_module_default4.top_loading,
+      className: "top_loading",
       style: { height },
       role: "progressbar",
       "aria-valuemin": 0,
@@ -176,8 +166,8 @@ var TopLoading = ({
         "div",
         {
           className: [
-            style_module_default4.bar,
-            isIndeterminate && style_module_default4.indeterminate
+            "top_loading_bar",
+            isIndeterminate && "top_loading_indeterminate"
           ].filter(Boolean).join(" "),
           style: {
             width: isIndeterminate ? void 0 : `${progress}%`,
@@ -217,9 +207,6 @@ var useToast = (containerId = "default") => {
     message: (msg) => toast(msg, base)
   };
 };
-
-// src/ui/general/button/style.module.scss
-var style_module_default5 = {};
 var Button = ({
   variant = "primary",
   size = "md",
@@ -228,16 +215,13 @@ var Button = ({
   ...props
 }) => {
   const buttonClassName = [
-    style_module_default5.button,
-    style_module_default5[`size_${size}`],
-    style_module_default5[`variant_${variant}`],
+    "button",
+    `button_variant_${variant}`,
+    `button_size_${size}`,
     className ?? ""
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsx("button", { className: buttonClassName, style: { width }, ...props });
 };
-
-// src/ui/form/checkbox/style.module.scss
-var style_module_default6 = {};
 var Checkbox = ({
   label,
   size = "md",
@@ -251,8 +235,8 @@ var Checkbox = ({
     inputRef.current.indeterminate = Boolean(indeterminate);
   }, [indeterminate]);
   const rootClassName = [
-    style_module_default6.checkbox,
-    style_module_default6[`size_${size}`],
+    "checkbox",
+    `checkbox_size_${size}`,
     className ?? ""
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs("label", { className: rootClassName, children: [
@@ -261,17 +245,14 @@ var Checkbox = ({
       {
         ref: inputRef,
         type: "checkbox",
-        className: style_module_default6.input,
+        className: "checkbox_input",
         ...props
       }
     ),
-    /* @__PURE__ */ jsx("span", { className: style_module_default6.box, "aria-hidden": "true" }),
-    label ? /* @__PURE__ */ jsx("span", { className: style_module_default6.label, children: label }) : null
+    /* @__PURE__ */ jsx("span", { className: "checkbox_box", "aria-hidden": "true" }),
+    label ? /* @__PURE__ */ jsx("span", { className: "checkbox_label", children: label }) : null
   ] });
 };
-
-// src/ui/form/file/style.module.scss
-var style_module_default7 = {};
 var FileInput = ({
   label = "\uD30C\uC77C \uC120\uD0DD",
   onFiles,
@@ -281,8 +262,8 @@ var FileInput = ({
 }) => {
   const inputId = React3.useId();
   const rootClassName = [
-    style_module_default7.file_input,
-    disabled && style_module_default7.disabled,
+    "file_input",
+    disabled && "file_input_disabled",
     className ?? ""
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs("div", { className: rootClassName, children: [
@@ -291,33 +272,27 @@ var FileInput = ({
       {
         id: inputId,
         type: "file",
-        className: style_module_default7.control,
+        className: "file_input_control",
         disabled,
         onChange: (e) => onFiles?.(e.currentTarget.files),
         ...props
       }
     ),
-    /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: style_module_default7.label, children: label })
+    /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: "file_input_label", children: label })
   ] });
 };
-
-// src/ui/form/radio/style.module.scss
-var style_module_default8 = {};
 var Radio = ({ label, size = "md", className, ...props }) => {
   const rootClassName = [
-    style_module_default8.radio,
-    style_module_default8[`size_${size}`],
+    "radio",
+    `radio_size_${size}`,
     className ?? ""
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs("label", { className: rootClassName, children: [
-    /* @__PURE__ */ jsx("input", { type: "radio", className: style_module_default8.input, ...props }),
-    /* @__PURE__ */ jsx("span", { className: style_module_default8.dot, "aria-hidden": "true" }),
-    label ? /* @__PURE__ */ jsx("span", { className: style_module_default8.label, children: label }) : null
+    /* @__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
   ] });
 };
-
-// src/ui/general/select/style.module.scss
-var style_module_default9 = {};
 var Select = ({
   id,
   label,
@@ -438,13 +413,13 @@ var Select = ({
       )
     );
   }, [isOpen, options, currentValue]);
-  const rootClassName = [style_module_default9.select, className ?? ""].filter(Boolean).join(" ");
+  const rootClassName = ["select", className ?? ""].filter(Boolean).join(" ");
   const controlClassName = [
-    style_module_default9.control,
-    style_module_default9[`variant_${variant}`],
-    style_module_default9[`size_${size}`],
-    isOpen && style_module_default9.is_open,
-    disabled && style_module_default9.is_disabled
+    "select_control",
+    `select_variant_${variant}`,
+    `select_size_${size}`,
+    isOpen && "is_open",
+    disabled && "is_disabled"
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs(
     "div",
@@ -457,7 +432,7 @@ var Select = ({
           "label",
           {
             htmlFor: selectId,
-            className: style_module_default9.label,
+            className: "select_label",
             children: label
           }
         ),
@@ -477,12 +452,12 @@ var Select = ({
               /* @__PURE__ */ jsx(
                 "span",
                 {
-                  className: currentOption ? style_module_default9.value : style_module_default9.placeholder,
+                  className: currentOption ? "select_value" : "select_placeholder",
                   style: textAlign === "left" ? { textAlign: "start" } : void 0,
                   children: currentOption ? currentOption.label : placeholder
                 }
               ),
-              /* @__PURE__ */ jsx("span", { className: style_module_default9.icon, "aria-hidden": "true", children: /* @__PURE__ */ jsx(ChevronDown, { size: 16 }) })
+              /* @__PURE__ */ jsx("span", { className: "select_icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(ChevronDown, { size: 16 }) })
             ]
           }
         ),
@@ -491,15 +466,15 @@ var Select = ({
           {
             id: `${selectId}_listbox`,
             role: "listbox",
-            className: style_module_default9.list,
+            className: "select_list",
             children: options.map((opt, i) => {
               const selected = currentValue === opt.value;
               const active = i === activeIndex;
               const optionClassName = [
-                style_module_default9.option,
-                selected && style_module_default9.is_selected,
-                active && style_module_default9.is_active,
-                opt.disabled && style_module_default9.is_disabled
+                "select_option",
+                selected && "is_selected",
+                active && "is_active",
+                opt.disabled && "is_disabled"
               ].filter(Boolean).join(" ");
               return /* @__PURE__ */ jsxs(
                 "li",
@@ -533,9 +508,6 @@ var Select = ({
     }
   );
 };
-
-// src/ui/form/switch/style.module.scss
-var style_module_default10 = {};
 var Switch = ({
   checked,
   defaultChecked,
@@ -555,10 +527,10 @@ var Switch = ({
     onChange?.(next);
   };
   const rootClassName = [
-    style_module_default10.switch,
-    style_module_default10[`size_${size}`],
-    isOn && style_module_default10.on,
-    disabled && style_module_default10.disabled,
+    "switch",
+    `switch_size_${size}`,
+    isOn && "switch_on",
+    disabled && "switch_disabled",
     className ?? ""
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsx(
@@ -571,13 +543,10 @@ var Switch = ({
       onClick: handleToggle,
       className: rootClassName,
       ...props,
-      children: /* @__PURE__ */ jsx("span", { className: style_module_default10.thumb })
+      children: /* @__PURE__ */ jsx("span", { className: "switch_thumb" })
     }
   );
 };
-
-// src/ui/form/textfield/style.module.scss
-var style_module_default11 = {};
 var TextField = React3.forwardRef(
   ({
     id,
@@ -610,28 +579,28 @@ var TextField = React3.forwardRef(
       setInnerValue(applyTransform(value ?? ""));
     }, [isControlled, value, transformValue]);
     const rootClassName = [
-      style_module_default11.text_field,
-      fullWidth && style_module_default11.full_width,
+      "text_field",
+      fullWidth && "text_field_full_width",
       className ?? ""
     ].filter(Boolean).join(" ");
     const inputClassName = [
-      style_module_default11.input,
-      style_module_default11[`variant_${variant}`],
-      style_module_default11[`size_${size}`],
-      leftIcon && style_module_default11.with_left,
-      rightIcon && style_module_default11.with_right,
-      error && style_module_default11.error,
-      success && style_module_default11.success
+      "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 = [
-      style_module_default11.helper,
-      error && style_module_default11.helper_error,
-      success && style_module_default11.helper_success
+      "text_field_helper",
+      error && "text_field_helper_error",
+      success && "text_field_helper_success"
     ].filter(Boolean).join(" ");
     return /* @__PURE__ */ jsxs("div", { className: rootClassName, children: [
-      label ? /* @__PURE__ */ jsx("label", { className: style_module_default11.label, htmlFor: inputId, children: label }) : null,
-      /* @__PURE__ */ jsxs("div", { className: style_module_default11.wrap, children: [
-        leftIcon ? /* @__PURE__ */ jsx("span", { className: `${style_module_default11.icon} ${style_module_default11.icon_left}`, children: leftIcon }) : null,
+      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,
         /* @__PURE__ */ jsx(
           "input",
           {
@@ -664,16 +633,13 @@ var TextField = React3.forwardRef(
             }
           }
         ),
-        rightIcon ? /* @__PURE__ */ jsx("span", { className: `${style_module_default11.icon} ${style_module_default11.icon_right}`, children: rightIcon }) : null
+        rightIcon ? /* @__PURE__ */ jsx("span", { className: "text_field_icon text_field_icon_right", children: rightIcon }) : null
       ] }),
       helperText ? /* @__PURE__ */ jsx("div", { id: helperId, className: helperClassName, children: helperText }) : null
     ] });
   }
 );
 TextField.displayName = "TextField";
-
-// src/ui/form/date-picker/style.module.scss
-var style_module_default12 = {};
 var pad = (n) => String(n).padStart(2, "0");
 var getDaysInMonth = (year, month) => new Date(year, month, 0).getDate();
 var normalizeWidth = (v) => typeof v === "number" ? `${v}px` : v;
@@ -713,9 +679,9 @@ var DatePicker = ({
     const safeDay = clampDay(yy, mm, dd ?? 1);
     onChange(`${yy}-${pad(mm)}-${pad(safeDay)}`);
   };
-  return /* @__PURE__ */ jsxs("div", { className: style_module_default12.date_picker, style: { width: normalizeWidth(width?.container) }, children: [
-    label && /* @__PURE__ */ jsx("label", { className: style_module_default12.label, children: label }),
-    /* @__PURE__ */ jsxs("div", { className: style_module_default12.fields, children: [
+  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("div", { className: "date_picker_fields", children: [
       /* @__PURE__ */ jsxs(
         "select",
         {
@@ -766,9 +732,6 @@ var DatePicker = ({
     ] })
   ] });
 };
-
-// src/ui/navigation/pagination/style.module.scss
-var style_module_default13 = {};
 var range = (start, end) => {
   const out = [];
   for (let i = start; i <= end; i += 1) out.push(i);
@@ -794,25 +757,25 @@ var Pagination = ({ page, totalPages, onChange }) => {
     () => getPaginationItems(page, totalPages),
     [page, totalPages]
   );
-  return /* @__PURE__ */ jsxs("nav", { className: style_module_default13.pagination, "aria-label": "Pagination", children: [
+  return /* @__PURE__ */ jsxs("nav", { className: "pagination", "aria-label": "Pagination", children: [
     /* @__PURE__ */ jsx(
       "button",
       {
-        className: style_module_default13.item,
+        className: "pagination_item",
         onClick: () => onChange(page - 1),
         disabled: prevDisabled,
         "aria-label": "Previous page",
         children: "\u2039"
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: style_module_default13.pages, role: "list", children: items.map((it, idx) => {
+    /* @__PURE__ */ jsx("div", { className: "pagination_pages", role: "list", children: items.map((it, idx) => {
       if (it === "ellipsis") {
-        return /* @__PURE__ */ jsx("span", { className: style_module_default13.ellipsis, "aria-hidden": "true", children: "\u2026" }, `e-${idx}`);
+        return /* @__PURE__ */ jsx("span", { className: "pagination_ellipsis", "aria-hidden": "true", children: "\u2026" }, `e-${idx}`);
       }
       const isActive = it === page;
       const buttonClassName = [
-        style_module_default13.pageButton,
-        isActive && style_module_default13.active
+        "pagination_page_button",
+        isActive && "pagination_active"
       ].filter(Boolean).join(" ");
       return /* @__PURE__ */ jsx(
         "button",
@@ -829,7 +792,7 @@ var Pagination = ({ page, totalPages, onChange }) => {
     /* @__PURE__ */ jsx(
       "button",
       {
-        className: style_module_default13.item,
+        className: "pagination_item",
         onClick: () => onChange(page + 1),
         disabled: nextDisabled,
         "aria-label": "Next page",
@@ -838,9 +801,6 @@ var Pagination = ({ page, totalPages, onChange }) => {
     )
   ] });
 };
-
-// src/ui/overlay/modal/style.module.scss
-var style_module_default14 = {};
 var Modal = ({
   open,
   onClose,
@@ -860,11 +820,11 @@ var Modal = ({
     return () => document.removeEventListener("keydown", onKeyDown);
   }, [open, onClose]);
   if (!open) return null;
-  const panelClassName = [style_module_default14.panel, className].filter(Boolean).join(" ");
+  const panelClassName = ["modal_panel", className].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: style_module_default14.modal,
+      className: "modal",
       role: "dialog",
       "aria-modal": "true",
       onClick: () => closeOnOverlay && onClose?.(),
@@ -876,8 +836,8 @@ var Modal = ({
           onClick: (e) => e.stopPropagation(),
           ...props,
           children: [
-            title && /* @__PURE__ */ jsx("div", { className: style_module_default14.header, children: title }),
-            /* @__PURE__ */ jsx("div", { className: style_module_default14.body, children })
+            title && /* @__PURE__ */ jsx("div", { className: "modal_header", children: title }),
+            /* @__PURE__ */ jsx("div", { className: "modal_body", children })
           ]
         }
       )

package/dist/next.css

@@ -1,4 +1,4 @@
-/* src/ui/navigation/sidebar/style.module.scss */
+/* src/ui/navigation/sidebar/style.scss */
 .sidebar {
   display: flex;
   flex-direction: column;
@@ -11,29 +11,29 @@
   overflow: hidden;
   transition: width 0.3s ease-in-out;
 }
-.is_closed {
+.sidebar_is_closed {
   width: 56px;
 }
-.brand {
+.sidebar_brand {
   padding: 0.5rem;
   margin-bottom: 0.5rem;
   border-bottom: 1px solid #e5e5e5;
 }
-.brand_link {
+.sidebar_brand_link {
   display: flex;
   align-items: center;
   justify-content: space-between;
   align-items: center;
 }
-.nav {
+.sidebar_nav {
   display: grid;
   gap: 0.25rem;
 }
-.group {
+.sidebar_group {
   display: grid;
   gap: 0.25rem;
 }
-.item {
+.sidebar_item {
   border: none;
   display: flex;
   align-items: center;
@@ -45,39 +45,39 @@
   background: transparent;
   transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
 }
-.item:hover {
+.sidebar_item:hover {
   background: #fafafa;
   color: #1f2937;
 }
-.item_active {
+.sidebar_item_active {
   background: #ffffff;
   color: #1f2937;
   box-shadow: inset 0 0 0 1px #e5e5e5;
 }
-.item_left {
+.sidebar_item_left {
   display: flex;
   align-items: center;
   gap: 0.5rem;
 }
-.item_right {
+.sidebar_item_right {
   display: flex;
   align-items: center;
 }
-.icon {
+.sidebar_icon {
   display: grid;
   place-items: center;
 }
-.chevron {
+.sidebar_chevron {
   transition: transform 0.2s ease-in-out;
 }
-.chevron_open {
+.sidebar_chevron_open {
   transform: rotate(180deg);
 }
-.label {
+.sidebar_label {
   font-size: 1rem;
   white-space: nowrap;
 }
-.sub {
+.sidebar_sub {
   display: grid;
   gap: 0.25rem;
   padding-left: 0.75rem;
@@ -90,12 +90,12 @@
     opacity 0.2s ease-in-out,
     transform 0.2s ease-in-out;
 }
-.sub_open {
+.sidebar_sub_open {
   max-height: 500px;
   opacity: 1;
   transform: translateY(0);
 }
-.sub_item {
+.sidebar_sub_item {
   display: flex;
   align-items: center;
   gap: 0.75rem;
@@ -106,20 +106,20 @@
   background: transparent;
   transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
 }
-.sub_item:hover {
+.sidebar_sub_item:hover {
   background: #fafafa;
   color: #1f2937;
 }
-.sub_item_active {
+.sidebar_sub_item_active {
   color: #000000;
   font-weight: 500;
 }
-.sub_icon {
+.sidebar_sub_icon {
   display: grid;
   place-items: center;
   color: #6b7280;
 }
-.sub_label {
+.sidebar_sub_label {
   font-size: 0.875rem;
   white-space: nowrap;
 }