@bigtablet/design-system 1.16.1 → 1.17.0

package/README.md

@@ -20,6 +20,7 @@ Bigtablet의 공식 디자인 시스템으로, Foundation(디자인 토큰)과 C
 - [주요 특징](#주요-특징)
 - [설치](#설치)
 - [빠른 시작](#빠른-시작)
+- [Vanilla JS (HTML/CSS/JS)](#vanilla-js-htmlcssjs)
 - [컴포넌트](#컴포넌트)
 - [Foundation (디자인 토큰)](#foundation-디자인-토큰)
 - [개발 가이드](#개발-가이드)
@@ -32,6 +33,7 @@ Bigtablet의 공식 디자인 시스템으로, Foundation(디자인 토큰)과 C
 - **React 19 지원** - 최신 React 버전 완벽 지원
 - **TypeScript** - 완전한 타입 안정성
 - **Pure React / Next.js** - 프레임워크별 최적화된 번들 제공
+- **Vanilla JS** - Thymeleaf, JSP 등 서버 템플릿 지원
 - **디자인 토큰** - 일관된 색상, 타이포그래피, 간격 시스템
 - **접근성(a11y)** - 키보드 네비게이션, 스크린 리더 호환
 - **Storybook** - 인터랙티브 문서화
@@ -100,6 +102,33 @@ export default function Layout({ children }) {
 
 ---
 
+## Vanilla JS (HTML/CSS/JS)
+
+React 없이 **Thymeleaf, JSP, PHP** 등 서버 템플릿 환경에서 사용할 수 있습니다.
+
+```html
+<!-- CSS -->
+<link rel="stylesheet" href="https://unpkg.com/@bigtablet/design-system/dist/vanilla/bigtablet.min.css">
+
+<!-- JS (선택) -->
+<script src="https://unpkg.com/@bigtablet/design-system/dist/vanilla/bigtablet.min.js"></script>
+```
+
+```html
+<button class="bt-button bt-button--md bt-button--primary">버튼</button>
+
+<div class="bt-text-field">
+  <label class="bt-text-field__label">이메일</label>
+  <div class="bt-text-field__wrap">
+    <input type="text" class="bt-text-field__input bt-text-field__input--outline bt-text-field__input--md">
+  </div>
+</div>
+```
+
+👉 **[Vanilla JS 전체 문서 보기](./docs/VANILLA.md)**
+
+---
+
 ## 컴포넌트
 
 ### General

package/dist/index.css

@@ -689,11 +689,6 @@
   margin-top: 0;
   margin-bottom: 0.25rem;
 }
-.select_list_portal {
-  position: fixed;
-  margin-top: 0;
-  margin-bottom: 0;
-}
 .select_option {
   width: 100%;
   box-sizing: border-box;

package/dist/index.js

@@ -316,10 +316,8 @@ var Select = ({
   const [isOpen, setIsOpen] = React3.useState(false);
   const [activeIndex, setActiveIndex] = React3.useState(-1);
   const [dropUp, setDropUp] = React3.useState(false);
-  const [listPosition, setListPosition] = React3.useState({ top: 0, left: 0, width: 0 });
   const wrapperRef = React3.useRef(null);
   const controlRef = React3.useRef(null);
-  const listRef = React3.useRef(null);
   const currentOption = React3.useMemo(
     () => options.find((o) => o.value === currentValue) ?? null,
     [options, currentValue]
@@ -334,10 +332,10 @@ var Select = ({
   );
   React3.useEffect(() => {
     const onDocClick = (e) => {
-      const target = e.target;
-      if (wrapperRef.current?.contains(target)) return;
-      if (listRef.current?.contains(target)) return;
-      setIsOpen(false);
+      if (!wrapperRef.current) return;
+      if (!wrapperRef.current.contains(e.target)) {
+        setIsOpen(false);
+      }
     };
     document.addEventListener("mousedown", onDocClick);
     return () => document.removeEventListener("mousedown", onDocClick);
@@ -408,33 +406,14 @@ var Select = ({
     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]);
-  const updatePosition = React3.useCallback(() => {
-    if (!controlRef.current) return;
+  React3.useLayoutEffect(() => {
+    if (!isOpen || !controlRef.current) return;
     const rect = controlRef.current.getBoundingClientRect();
     const listHeight = Math.min(options.length * 40, 288);
     const spaceBelow = window.innerHeight - rect.bottom;
     const spaceAbove = rect.top;
-    const shouldDropUp = spaceBelow < listHeight && spaceAbove > spaceBelow;
-    setDropUp(shouldDropUp);
-    setListPosition({
-      top: shouldDropUp ? rect.top - listHeight - 4 : rect.bottom + 4,
-      left: rect.left,
-      width: rect.width
-    });
-  }, [options.length]);
-  React3.useLayoutEffect(() => {
-    if (!isOpen) return;
-    updatePosition();
-  }, [isOpen, updatePosition]);
-  React3.useEffect(() => {
-    if (!isOpen) return;
-    window.addEventListener("scroll", updatePosition, true);
-    window.addEventListener("resize", updatePosition);
-    return () => {
-      window.removeEventListener("scroll", updatePosition, true);
-      window.removeEventListener("resize", updatePosition);
-    };
-  }, [isOpen, updatePosition]);
+    setDropUp(spaceBelow < listHeight && spaceAbove > spaceBelow);
+  }, [isOpen, options.length]);
   const rootClassName = ["select", className ?? ""].filter(Boolean).join(" ");
   const controlClassName = [
     "select_control",
@@ -443,50 +422,10 @@ var Select = ({
     isOpen && "is_open",
     disabled && "is_disabled"
   ].filter(Boolean).join(" ");
-  const renderList = () => /* @__PURE__ */ jsx(
-    "ul",
-    {
-      ref: listRef,
-      id: `${selectId}_listbox`,
-      role: "listbox",
-      className: `select_list select_list_portal${dropUp ? " select_list_up" : ""}`,
-      style: {
-        position: "fixed",
-        top: listPosition.top,
-        left: listPosition.left,
-        width: listPosition.width
-      },
-      children: options.map((opt, i) => {
-        const selected = currentValue === opt.value;
-        const active = i === activeIndex;
-        const optionClassName = [
-          "select_option",
-          selected && "is_selected",
-          active && "is_active",
-          opt.disabled && "is_disabled"
-        ].filter(Boolean).join(" ");
-        return /* @__PURE__ */ jsxs(
-          "li",
-          {
-            role: "option",
-            "aria-selected": selected,
-            className: optionClassName,
-            onMouseEnter: () => !opt.disabled && setActiveIndex(i),
-            onClick: () => {
-              if (opt.disabled) return;
-              setValue(opt.value);
-              setIsOpen(false);
-            },
-            children: [
-              /* @__PURE__ */ jsx("span", { children: opt.label }),
-              selected && /* @__PURE__ */ jsx(Check, { size: 16, "aria-hidden": "true" })
-            ]
-          },
-          opt.value
-        );
-      })
-    }
-  );
+  const listClassName = [
+    "select_list",
+    dropUp && "select_list_up"
+  ].filter(Boolean).join(" ");
   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(
@@ -515,7 +454,43 @@ var Select = ({
         ]
       }
     ),
-    isOpen && typeof document !== "undefined" && createPortal(renderList(), document.body)
+    isOpen && /* @__PURE__ */ jsx(
+      "ul",
+      {
+        id: `${selectId}_listbox`,
+        role: "listbox",
+        className: listClassName,
+        children: options.map((opt, i) => {
+          const selected = currentValue === opt.value;
+          const active = i === activeIndex;
+          const optionClassName = [
+            "select_option",
+            selected && "is_selected",
+            active && "is_active",
+            opt.disabled && "is_disabled"
+          ].filter(Boolean).join(" ");
+          return /* @__PURE__ */ jsxs(
+            "li",
+            {
+              role: "option",
+              "aria-selected": selected,
+              className: optionClassName,
+              onMouseEnter: () => !opt.disabled && setActiveIndex(i),
+              onClick: () => {
+                if (opt.disabled) return;
+                setValue(opt.value);
+                setIsOpen(false);
+              },
+              children: [
+                /* @__PURE__ */ jsx("span", { children: opt.label }),
+                selected && /* @__PURE__ */ jsx(Check, { size: 16, "aria-hidden": "true" })
+              ]
+            },
+            opt.value
+          );
+        })
+      }
+    )
   ] });
 };
 var Switch = ({