@olundot/ui 0.20.0-next.1 → 0.20.0-next.3

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @olundot/ui
 
+## 0.20.0-next.3
+
+### Minor Changes
+
+- b7176ad: `OlunLogo`가 `@olundot/tokens/brand`의 정본 데이터만 그린다. 모양이 바뀐다.
+
+  - 워드마크: Pretendard 800 글자(`<span>`) 대신 Montserrat 700 윤곽 SVG(자간 +0.03em). 접근 가능한 이름은 `role="img"` + `aria-label`(`OLUN`, 워드마크만이면 `OLUN.`)이다.
+  - MASTER(기본형): SVG 하나로 그리고 `symbolSize` 하나로 통째로 확대·축소한다. 간격 12px(`--space-3`) 대신 대문자 높이 H 기준 고정 비율(링 바깥 지름 1.24H, 궤도 점 끝 → O 0.55H)을 쓴다. 높이는 잉크에 맞춰 예전 심볼 상자보다 낮다(기본 `symbolSize` 28에서 약 17px).
+  - `fontSize`: 워드마크만 쓸 때(`showSymbol={false}`)의 글자 크기로만 쓴다. MASTER에서는 무시한다.
+  - 워드마크만 쓸 때 마침표 색이 `--accent`에서 `--accent-pop`으로 바뀐다(궤도 점과 같은 색 표식 `olun-accent`).
+  - `OlunSymbol`: 모양과 크기는 그대로다.
+
+### Patch Changes
+
+- 15f638e: 겹친 오버레이를 한 동작으로 함께 닫아도 포커스가 `<body>`로 떨어지지 않고 바깥 오버레이를 연 요소로 돌아간다. 바깥 오버레이가 먼저 사라지는 동안 안쪽 오버레이가 닫히는 애니메이션 중이어도 해당한다. Trigger가 있는 경우와 닫히는 동안 포커스가 다른 요소로 옮겨 간 경우는 그대로다.
+- Updated dependencies [b7176ad]
+  - @olundot/tokens@0.18.0-next.1
+
+## 0.20.0-next.2
+
+### Patch Changes
+
+- 48c5a4d: `Tabs` `line`의 선택 표시가 다른 탭을 고를 때 그 탭으로 미끄러진다(`--dur-base`, `--ease-standard`). 처음 그릴 때와 크기가 바뀔 때는 바로 놓이고, 동작 줄이기 설정에서는 움직이지 않는다. 가로와 세로 모두 해당하며 `contained`는 그대로다.
+  - 목록 안에 `data-slot="tabs-indicator"` 요소(`aria-hidden`) 하나가 생긴다. 하이드레이션 전에는 기존 `::after` 밑줄이 보이고, 강조선이 자리를 잡으면 숨는다.
+  - 선택된 탭 라벨이 굵어져도 탭 폭이 바뀌지 않는다. 라벨에 굵기별 숨은 사본을 두어 폭을 미리 잡는다. 탭을 바꿔도 다른 탭이 밀리지 않는다.
+
 ## 0.20.0-next.1
 
 ### Minor Changes

package/dist/index.d.ts

@@ -2055,11 +2055,11 @@ declare function TreeView<T extends TreeNode>({ nodes, selectedId, selectionAria
 /**
  * OLUN 브랜드 로고.
  *
- * - symbol: O 원형 테두리 + 우하단 accent-pop 작은 circle (32px 초과/이하 두 비율)
- * - wordmark: "OLUN" + 마지막 "." 은 accent 색상
- * - 조합: symbol과 함께 쓰면 wordmark의 "."를 뺀다. 궤도 점은 symbol이 맡는다(점 두 개 경쟁 방지).
+ * - symbol: O 링 + 우하단 accent-pop 궤도 점 (32px 초과/이하 두 광학 비율)
+ * - wordmark: Montserrat 700 윤곽 `OLUN` + 단독일 때 accent-pop 마침표
+ * - MASTER: symbol과 함께 쓰면 wordmark의 "."를 뺀다. 궤도 점이 마침표를 맡는다(점 두 개 경쟁 방지).
  *
- * 레퍼런스: apps/web/docs/wireframes/ref/shell-wireframe.html Topbar 브랜드 영역.
+ * 기하는 `@olundot/tokens/brand`의 정본 데이터(scripts/brand/build-brand-svg.mjs가 생성)에서만 온다.
  */
 interface OlunSymbolProps {
     /** 심볼 크기 px (기본 28) */
@@ -2068,9 +2068,15 @@ interface OlunSymbolProps {
 }
 declare function OlunSymbol({ size, className }: OlunSymbolProps): react_jsx_runtime.JSX.Element;
 interface OlunLogoProps {
-    /** 심볼 크기 px (기본 28) */
+    /**
+     * MASTER 크기. 심볼 240 상자 기준 px (기본 28).
+     * 워드마크와 간격은 고정 비율로 함께 커진다. 32px 이하는 아이콘 비율 심볼을 쓴다.
+     */
     symbolSize?: number;
-    /** wordmark font-size px (기본 18) */
+    /**
+     * 워드마크만 쓸 때(`showSymbol={false}`) 글자 크기 px (기본 18).
+     * MASTER에서는 쓰지 않는다. MASTER 크기는 `symbolSize` 하나로 정한다.
+     */
     fontSize?: number;
     /** 심볼 표시 여부 (기본 true) */
     showSymbol?: boolean;

package/dist/index.js

@@ -3020,12 +3020,12 @@ var tabsListVariants = cva8(
       {
         variant: "line",
         orientation: "horizontal",
-        className: "border-b border-[var(--border-subtle)] gap-[var(--space-6)] overflow-x-auto overflow-y-hidden"
+        className: "group/tabs-list relative border-b border-[var(--border-subtle)] gap-[var(--space-6)] overflow-x-auto overflow-y-hidden"
       },
       {
         variant: "line",
         orientation: "vertical",
-        className: "border-r border-[var(--border-subtle)] gap-[var(--space-2)] pr-[var(--space-4)] max-sm:flex-row max-sm:gap-[var(--space-6)] max-sm:overflow-x-auto max-sm:overflow-y-hidden max-sm:border-r-0 max-sm:border-b max-sm:pr-0"
+        className: "group/tabs-list relative border-r border-[var(--border-subtle)] gap-[var(--space-2)] pr-[var(--space-4)] max-sm:flex-row max-sm:gap-[var(--space-6)] max-sm:overflow-x-auto max-sm:overflow-y-hidden max-sm:border-r-0 max-sm:border-b max-sm:pr-0"
       },
       {
         variant: "contained",
@@ -3080,6 +3080,12 @@ var tabsTriggerVariants = cva8(
         orientation: "horizontal",
         className: "mx-[-2px] px-[2px] first:ml-0 last:mr-0 focus-visible:ring-0 focus-visible:inset-ring-2 focus-visible:inset-ring-[var(--focus-ring)]"
       },
+      // Once the list's indicator has measured the active trigger, it replaces the static ::after
+      // underline. Before hydration (or without the indicator) the ::after stays.
+      {
+        variant: "line",
+        className: "group-data-[indicator=ready]/tabs-list:after:hidden"
+      },
       {
         variant: "line",
         orientation: "vertical",
@@ -3092,6 +3098,35 @@ var tabsTriggerVariants = cva8(
     }
   }
 );
+var tabsIndicatorVariants = cva8(
+  [
+    "pointer-events-none absolute invisible bg-[var(--text-primary)]",
+    // transition-property stays none (duration alone would animate every property, visibility included)
+    // until data-motion turns on the per-orientation transition below.
+    "transition-none duration-[var(--dur-base)] ease-[var(--ease-standard)]",
+    "group-data-[indicator=ready]/tabs-list:visible"
+  ].join(" "),
+  {
+    variants: {
+      orientation: {
+        horizontal: "bottom-[-1px] left-0 h-[2px] w-[var(--tabs-indicator-width)] [transform:translateX(var(--tabs-indicator-left))] motion-safe:data-[motion=on]:transition-[transform,width]",
+        // Below `sm` the vertical list becomes a horizontal row, so the indicator follows the horizontal rule.
+        vertical: [
+          "max-sm:bottom-[-1px] max-sm:left-0 max-sm:h-[2px] max-sm:w-[var(--tabs-indicator-width)] max-sm:[transform:translateX(var(--tabs-indicator-left))] max-sm:motion-safe:data-[motion=on]:transition-[transform,width]",
+          "sm:top-0 sm:right-[-1px] sm:h-[var(--tabs-indicator-height)] sm:w-[2px] sm:[transform:translateY(var(--tabs-indicator-top))] sm:motion-safe:data-[motion=on]:transition-[transform,height]"
+        ].join(" ")
+      }
+    },
+    defaultVariants: {
+      orientation: "horizontal"
+    }
+  }
+);
+var tabsLabelReserveClassName = [
+  "inline-flex flex-col",
+  "before:invisible before:h-0 before:overflow-hidden before:font-medium before:content-[attr(data-label)]",
+  "after:invisible after:h-0 after:overflow-hidden after:font-bold after:content-[attr(data-label)]"
+].join(" ");
 var tabsBadgeVariants = cva8(
   [
     "inline-flex h-[18px] min-w-[18px] items-center justify-center",
@@ -3106,6 +3141,62 @@ var tabsBadgeVariants = cva8(
     "group-data-[state=active]:border-[var(--border-strong)]"
   ].join(" ")
 );
+function useTabsIndicator(enabled, activeKey, tabsKey, listRef, indicatorRef) {
+  const placedRef = React17.useRef(null);
+  const previousKeyRef = React17.useRef(null);
+  const place = React17.useCallback(
+    (animate) => {
+      const list = listRef.current;
+      const indicator = indicatorRef.current;
+      if (!list || !indicator) return;
+      const trigger = list.querySelector(':scope > [data-slot="tabs-trigger"][data-state="active"]');
+      if (!trigger) {
+        delete list.dataset.indicator;
+        placedRef.current = null;
+        return;
+      }
+      const { offsetLeft, offsetWidth, offsetTop, offsetHeight } = trigger;
+      const placed = `${offsetLeft} ${offsetWidth} ${offsetTop} ${offsetHeight}`;
+      if (placed === placedRef.current) return;
+      placedRef.current = placed;
+      if (animate && list.dataset.indicator === "ready") indicator.dataset.motion = "on";
+      else delete indicator.dataset.motion;
+      indicator.style.setProperty("--tabs-indicator-left", `${offsetLeft}px`);
+      indicator.style.setProperty("--tabs-indicator-width", `${offsetWidth}px`);
+      indicator.style.setProperty("--tabs-indicator-top", `${offsetTop}px`);
+      indicator.style.setProperty("--tabs-indicator-height", `${offsetHeight}px`);
+      list.dataset.indicator = "ready";
+    },
+    [listRef, indicatorRef]
+  );
+  React17.useLayoutEffect(() => {
+    if (!enabled) {
+      placedRef.current = null;
+      previousKeyRef.current = null;
+      return;
+    }
+    const previousKey = previousKeyRef.current;
+    previousKeyRef.current = activeKey;
+    place(previousKey !== null && previousKey !== activeKey);
+  }, [enabled, activeKey, tabsKey, place]);
+  React17.useEffect(() => {
+    const list = listRef.current;
+    if (!enabled || !list) return;
+    let cancelled = false;
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(() => place(false));
+    if (observer) {
+      observer.observe(list);
+      list.querySelectorAll(':scope > [data-slot="tabs-trigger"]').forEach((trigger) => observer.observe(trigger));
+    }
+    document.fonts?.ready.then(() => {
+      if (!cancelled) place(false);
+    });
+    return () => {
+      cancelled = true;
+      observer?.disconnect();
+    };
+  }, [enabled, tabsKey, place, listRef]);
+}
 function formatTabBadge(value) {
   return value > 99 ? "99+" : String(value);
 }
@@ -3128,55 +3219,77 @@ var Tabs = React17.forwardRef(
     orientation = "horizontal",
     variant = "line",
     ...props
-  }, ref) => /* @__PURE__ */ jsxs17(
-    TabsPrimitive.Root,
-    {
-      ref,
-      "data-slot": "tabs",
-      value: activeKey,
-      onValueChange: onChange,
-      orientation,
-      className: cn(tabsRootVariants({ orientation }), className),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx18(
-          TabsPrimitive.List,
-          {
-            "data-slot": "tabs-list",
-            "data-variant": variant,
-            className: cn(tabsListVariants({ variant, orientation }), listClassName),
-            children: tabs.map((tab) => /* @__PURE__ */ jsxs17(
-              TabsPrimitive.Trigger,
-              {
-                id: getTabId(baseId, tab.key),
-                value: tab.key,
-                disabled: tab.disabled,
-                "aria-controls": getPanelId(baseId, tab.key),
-                "data-slot": "tabs-trigger",
-                "data-variant": variant,
-                className: cn("group", tabsTriggerVariants({ variant, orientation }), triggerClassName),
-                children: [
-                  /* @__PURE__ */ jsx18("span", { children: tab.label }),
-                  tab.badge !== void 0 && tab.badge > 0 ? /* @__PURE__ */ jsx18("span", { "aria-hidden": "true", "data-slot": "tabs-badge", className: tabsBadgeVariants(), children: formatTabBadge(tab.badge) }) : null,
-                  tab.disabled ? /* @__PURE__ */ jsx18(
-                    Lock,
-                    {
-                      "aria-hidden": "true",
-                      "data-slot": "tabs-disabled-icon",
-                      className: "size-[14px] shrink-0 text-text-disabled",
-                      strokeWidth: 2
+  }, ref) => {
+    const listRef = React17.useRef(null);
+    const indicatorRef = React17.useRef(null);
+    const isLine = variant === "line";
+    const tabsKey = tabs.map((tab) => tab.key).join("\0");
+    useTabsIndicator(isLine, activeKey, tabsKey, listRef, indicatorRef);
+    return /* @__PURE__ */ jsxs17(
+      TabsPrimitive.Root,
+      {
+        ref,
+        "data-slot": "tabs",
+        value: activeKey,
+        onValueChange: onChange,
+        orientation,
+        className: cn(tabsRootVariants({ orientation }), className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs17(
+            TabsPrimitive.List,
+            {
+              ref: listRef,
+              "data-slot": "tabs-list",
+              "data-variant": variant,
+              className: cn(tabsListVariants({ variant, orientation }), listClassName),
+              children: [
+                tabs.map((tab) => /* @__PURE__ */ jsxs17(
+                  TabsPrimitive.Trigger,
+                  {
+                    id: getTabId(baseId, tab.key),
+                    value: tab.key,
+                    disabled: tab.disabled,
+                    "aria-controls": getPanelId(baseId, tab.key),
+                    "data-slot": "tabs-trigger",
+                    "data-variant": variant,
+                    className: cn("group", tabsTriggerVariants({ variant, orientation }), triggerClassName),
+                    children: [
+                      isLine ? /* @__PURE__ */ jsx18("span", { "data-label": tab.label, className: tabsLabelReserveClassName, children: tab.label }) : /* @__PURE__ */ jsx18("span", { children: tab.label }),
+                      tab.badge !== void 0 && tab.badge > 0 ? /* @__PURE__ */ jsx18("span", { "aria-hidden": "true", "data-slot": "tabs-badge", className: tabsBadgeVariants(), children: formatTabBadge(tab.badge) }) : null,
+                      tab.disabled ? /* @__PURE__ */ jsx18(
+                        Lock,
+                        {
+                          "aria-hidden": "true",
+                          "data-slot": "tabs-disabled-icon",
+                          className: "size-[14px] shrink-0 text-text-disabled",
+                          strokeWidth: 2
+                        }
+                      ) : null
+                    ]
+                  },
+                  tab.key
+                )),
+                isLine ? /* @__PURE__ */ jsx18(
+                  "span",
+                  {
+                    ref: indicatorRef,
+                    "aria-hidden": "true",
+                    "data-slot": "tabs-indicator",
+                    className: tabsIndicatorVariants({ orientation }),
+                    onTransitionEnd: (event) => {
+                      if (event.target === event.currentTarget) delete event.currentTarget.dataset.motion;
                     }
-                  ) : null
-                ]
-              },
-              tab.key
-            ))
-          }
-        ),
-        children
-      ]
-    }
-  )
+                  }
+                ) : null
+              ]
+            }
+          ),
+          children
+        ]
+      }
+    );
+  }
 );
 Tabs.displayName = "Tabs";
 var TabsContent = React17.forwardRef(({ className, tabKey, baseId, ...props }, ref) => /* @__PURE__ */ jsx18(
@@ -3559,6 +3672,7 @@ function useOverlayAction({
 
 // src/lib/use-return-focus.ts
 import * as React21 from "react";
+var closingOverlay = '[role="dialog"][data-state="closed"], [role="alertdialog"][data-state="closed"]';
 function useReturnFocus() {
   const returnTo = React21.useRef(null);
   const onOpenAutoFocus = React21.useCallback((event) => {
@@ -3574,7 +3688,9 @@ function useReturnFocus() {
     returnTo.current = null;
     if (!target?.isConnected) return;
     const active = document.activeElement;
-    if (active instanceof HTMLElement && active !== document.body && active !== target) return;
+    if (active instanceof HTMLElement && active !== document.body && active !== target && !active.closest(closingOverlay)) {
+      return;
+    }
     event.preventDefault();
     target.focus();
   }, []);
@@ -10456,36 +10572,46 @@ function TreeView({
 }
 
 // src/components/branding/olun-logo.tsx
-import { jsx as jsx64, jsxs as jsxs50 } from "react/jsx-runtime";
-var SYMBOL_LARGE = { stroke: 24, dotX: 184, dotY: 180, dotR: 13 };
-var SYMBOL_SMALL = { stroke: 18, dotX: 185, dotY: 175, dotR: 22 };
+import { OLUN_MASTER, OLUN_SYMBOL, OLUN_WORDMARK } from "@olundot/tokens/brand";
+import { Fragment as Fragment13, jsx as jsx64, jsxs as jsxs50 } from "react/jsx-runtime";
+var ACCENT_FILL = "var(--accent-pop)";
+var INK = { color: "var(--text-primary)" };
+var INK_TIGHT = { ...INK, display: "block", overflow: "visible" };
+function symbolGeometry(size) {
+  return size > OLUN_SYMBOL.smallMax ? OLUN_SYMBOL.large : OLUN_SYMBOL.small;
+}
+function SymbolCircles({ size }) {
+  const { ring } = OLUN_SYMBOL;
+  const g = symbolGeometry(size);
+  return /* @__PURE__ */ jsxs50(Fragment13, { children: [
+    /* @__PURE__ */ jsx64(
+      "circle",
+      {
+        className: "olun-logo__ring",
+        cx: ring.cx,
+        cy: ring.cy,
+        r: ring.r,
+        stroke: "currentColor",
+        strokeWidth: g.stroke,
+        fill: "none"
+      }
+    ),
+    /* @__PURE__ */ jsx64("circle", { className: "olun-accent olun-logo__dot", cx: g.dot.cx, cy: g.dot.cy, r: g.dot.r, fill: ACCENT_FILL })
+  ] });
+}
 function OlunSymbol({ size = 28, className }) {
-  const g = size > 32 ? SYMBOL_LARGE : SYMBOL_SMALL;
-  return /* @__PURE__ */ jsxs50(
+  return /* @__PURE__ */ jsx64(
     "svg",
     {
       width: size,
       height: size,
-      viewBox: "0 0 240 240",
+      viewBox: `0 0 ${OLUN_SYMBOL.box} ${OLUN_SYMBOL.box}`,
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       className,
+      style: INK,
       "aria-hidden": "true",
-      children: [
-        /* @__PURE__ */ jsx64(
-          "circle",
-          {
-            cx: "108",
-            cy: "120",
-            r: "60",
-            stroke: "currentColor",
-            strokeWidth: g.stroke,
-            fill: "none",
-            style: { color: "var(--text-primary)" }
-          }
-        ),
-        /* @__PURE__ */ jsx64("circle", { cx: g.dotX, cy: g.dotY, r: g.dotR, fill: "var(--accent-pop)" })
-      ]
+      children: /* @__PURE__ */ jsx64(SymbolCircles, { size })
     }
   );
 }
@@ -10495,33 +10621,61 @@ function OlunLogo({
   showSymbol = true,
   className
 }) {
+  if (!showSymbol) {
+    const { full } = OLUN_WORDMARK;
+    const height2 = fontSize * full.height / OLUN_WORDMARK.unitsPerEm;
+    return /* @__PURE__ */ jsxs50(
+      "svg",
+      {
+        width: height2 * full.width / full.height,
+        height: height2,
+        viewBox: full.viewBox,
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        className,
+        style: INK_TIGHT,
+        role: "img",
+        "aria-label": "OLUN.",
+        children: [
+          /* @__PURE__ */ jsx64("path", { className: "olun-logo__wordmark", fill: "currentColor", d: full.letters }),
+          /* @__PURE__ */ jsx64(
+            "circle",
+            {
+              className: "olun-accent olun-logo__period",
+              cx: full.period.cx,
+              cy: full.period.cy,
+              r: full.period.r,
+              fill: ACCENT_FILL
+            }
+          )
+        ]
+      }
+    );
+  }
+  const layout = symbolSize > OLUN_SYMBOL.smallMax ? OLUN_MASTER.large : OLUN_MASTER.small;
+  const height = symbolSize * layout.height / (OLUN_SYMBOL.box * layout.symbol.scale);
   return /* @__PURE__ */ jsxs50(
-    "div",
+    "svg",
     {
+      width: height * layout.width / layout.height,
+      height,
+      viewBox: layout.viewBox,
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
       className,
-      style: {
-        display: "flex",
-        alignItems: "center",
-        gap: "var(--space-3)"
-      },
+      style: INK_TIGHT,
+      role: "img",
+      "aria-label": "OLUN",
       children: [
-        showSymbol && /* @__PURE__ */ jsx64(OlunSymbol, { size: symbolSize }),
-        /* @__PURE__ */ jsxs50(
-          "span",
+        /* @__PURE__ */ jsx64(
+          "g",
           {
-            style: {
-              fontFamily: "var(--font-display)",
-              fontWeight: 800,
-              fontSize: `${fontSize}px`,
-              letterSpacing: "-0.02em",
-              color: "var(--text-primary)"
-            },
-            children: [
-              "OLUN",
-              !showSymbol && /* @__PURE__ */ jsx64("span", { style: { color: "var(--accent)" }, children: "." })
-            ]
+            className: "olun-logo__symbol",
+            transform: `translate(${layout.symbol.x} ${layout.symbol.y}) scale(${layout.symbol.scale})`,
+            children: /* @__PURE__ */ jsx64(SymbolCircles, { size: symbolSize })
           }
-        )
+        ),
+        /* @__PURE__ */ jsx64("path", { className: "olun-logo__wordmark", fill: "currentColor", d: layout.letters })
       ]
     }
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olundot/ui",
-  "version": "0.20.0-next.1",
+  "version": "0.20.0-next.3",
   "description": "OLUN. shared React UI components built on OLUN design tokens",
   "license": "MIT",
   "keywords": [
@@ -44,7 +44,7 @@
     "lucide-react": "^1.8.0",
     "radix-ui": "^1.4.3",
     "tailwind-merge": "^3.5.0",
-    "@olundot/tokens": "^0.18.0-next.0"
+    "@olundot/tokens": "^0.18.0-next.1"
   },
   "peerDependencies": {
     "react": ">=18",
@@ -62,6 +62,7 @@
     "@types/node": "^24.10.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
+    "esbuild": "^0.27.7",
     "jsdom": "^30.1.1",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",