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

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @olundot/ui
 
+## 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

@@ -52,10 +52,10 @@ type GhostDefaultActionStyle = {
 };
 
 declare const buttonCva: (props?: ({
-    size?: "default" | "md" | "xs" | "sm" | "lg" | "xl" | "icon" | "icon-xs" | null | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | "default" | "icon" | "icon-xs" | null | undefined;
     appearance?: "filled" | "outline" | "ghost" | null | undefined;
     tone?: "primary" | "neutral" | "danger" | null | undefined;
-    variant?: "default" | "outline" | "ghost" | "primary" | "danger" | "emergency" | "subtle" | "destructive" | "secondary" | "link" | null | undefined;
+    variant?: "primary" | "secondary" | "destructive" | "default" | "outline" | "ghost" | "danger" | "emergency" | "subtle" | "link" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type ButtonVariantsOptions = Parameters<typeof buttonCva>[0];
 declare function buttonVariants(options?: ButtonVariantsOptions): string;
@@ -96,7 +96,7 @@ type CopyButtonProps = Omit<ButtonProps, 'children' | 'leadingIcon' | 'loading'
     variant?: ButtonVariant;
     duration?: number;
 };
-declare const CopyButton: React.ForwardRefExoticComponent<Omit<ButtonProps, "size" | "variant" | "children" | "leadingIcon" | "trailingIcon" | "loading"> & {
+declare const CopyButton: React.ForwardRefExoticComponent<Omit<ButtonProps, "variant" | "size" | "children" | "leadingIcon" | "trailingIcon" | "loading"> & {
     value: string;
     label?: React.ReactNode;
     copiedLabel?: React.ReactNode;
@@ -107,13 +107,13 @@ declare const CopyButton: React.ForwardRefExoticComponent<Omit<ButtonProps, "siz
 } & React.RefAttributes<HTMLButtonElement>>;
 
 declare const inputVariants: (props?: ({
-    size?: "md" | "sm" | "lg" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
     fullWidth?: boolean | null | undefined;
     surface?: SurfaceLevel | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const inputMessageVariants: (props?: ({
-    state?: "default" | "error" | "success" | null | undefined;
-    size?: "md" | "sm" | "lg" | null | undefined;
+    state?: "error" | "success" | "default" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type InputState = NonNullable<VariantProps<typeof inputMessageVariants>["state"]>;
 /** Canonical size type (0.2.0+). Use `size` prop with these values. */
@@ -161,11 +161,11 @@ interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
 
 declare const fileUploadZoneVariants: (props?: ({
-    size?: "default" | "compact" | null | undefined;
+    size?: "compact" | "default" | null | undefined;
     surface?: SurfaceLevel | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const fileUploadIconVariants: (props?: ({
-    size?: "default" | "compact" | null | undefined;
+    size?: "compact" | "default" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface FileUploadZoneProps extends Omit<React.LabelHTMLAttributes<HTMLLabelElement>, "onChange">, VariantProps<typeof fileUploadZoneVariants> {
     accept?: string;
@@ -203,12 +203,12 @@ interface InlineAlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'childre
 declare const InlineAlert: React.ForwardRefExoticComponent<InlineAlertProps & React.RefAttributes<HTMLDivElement>>;
 
 declare const textareaVariants: (props?: ({
-    size?: "md" | "sm" | "lg" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
     fullWidth?: boolean | null | undefined;
     surface?: SurfaceLevel | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const textareaMessageVariants: (props?: ({
-    state?: "default" | "error" | "success" | null | undefined;
+    state?: "error" | "success" | "default" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type TextareaState = NonNullable<VariantProps<typeof textareaMessageVariants>["state"]>;
 /** Canonical size type (0.2.0+). Use `size` prop with these values. */
@@ -257,14 +257,14 @@ interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaEl
 declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
 
 declare const selectVariants: (props?: ({
-    size?: "md" | "sm" | "lg" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
     fullWidth?: boolean | null | undefined;
     appearance?: "inline" | "field" | null | undefined;
     surface?: SurfaceLevel | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const selectMessageVariants: (props?: ({
-    state?: "default" | "error" | "success" | null | undefined;
-    size?: "md" | "sm" | "lg" | null | undefined;
+    state?: "error" | "success" | "default" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type SelectState = NonNullable<VariantProps<typeof selectMessageVariants>["state"]>;
 /** Canonical size type (0.2.0+). Use `size` prop with these values. */
@@ -1475,7 +1475,7 @@ interface StatusDotProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'ch
 declare const StatusDot: React.ForwardRefExoticComponent<StatusDotProps & React.RefAttributes<HTMLSpanElement>>;
 
 declare const notificationBadgeVariants: (props?: ({
-    size?: "md" | "sm" | null | undefined;
+    size?: "sm" | "md" | null | undefined;
     placement?: "none" | "inline" | "corner" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type NotificationBadgeSize = NonNullable<VariantProps<typeof notificationBadgeVariants>['size']>;
@@ -1488,13 +1488,13 @@ declare const NotificationBadge: React.ForwardRefExoticComponent<NotificationBad
 
 declare const chipVariants: (props?: ({
     variant?: "filter" | "choice" | "removable" | "status-filter" | null | undefined;
-    tone?: "accent" | "neutral" | "danger" | "success" | "warning" | "muted" | null | undefined;
-    size?: "md" | "sm" | "lg" | null | undefined;
+    tone?: "muted" | "accent" | "warning" | "success" | "neutral" | "danger" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
     pressed?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const chipCountVariants: (props?: ({
-    tone?: "accent" | "neutral" | "danger" | "success" | "warning" | "muted" | null | undefined;
-    size?: "md" | "sm" | "lg" | null | undefined;
+    tone?: "muted" | "accent" | "warning" | "success" | "neutral" | "danger" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type ChipVariant = NonNullable<VariantProps<typeof chipVariants>["variant"]>;
 type ChipTone = NonNullable<VariantProps<typeof chipVariants>["tone"]>;
@@ -1508,7 +1508,7 @@ interface ChipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,
 declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLButtonElement>>;
 
 declare const emptyStateBaseVariants: (props?: ({
-    size?: "md" | "sm" | "lg" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
     bordered?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type EmptyStateTone = "neutral" | "muted" | "raised";
@@ -1519,7 +1519,7 @@ interface EmptyStateVariantOptions extends VariantProps<typeof emptyStateBaseVar
 }
 declare function emptyStateVariants({ size, tone, surface, bordered, className, }?: EmptyStateVariantOptions): string;
 declare const emptyStateIconVariants: (props?: ({
-    size?: "md" | "sm" | "lg" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type EmptyStateSize = NonNullable<VariantProps<typeof emptyStateBaseVariants>["size"]>;
 interface EmptyStateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">, VariantProps<typeof emptyStateBaseVariants> {
@@ -1538,7 +1538,7 @@ interface EmptyStateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "ti
 declare const EmptyState: React.ForwardRefExoticComponent<EmptyStateProps & React.RefAttributes<HTMLDivElement>>;
 
 declare const errorStateVariants: (props?: ({
-    size?: "md" | "sm" | "lg" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
     surface?: SurfaceLevel | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ErrorStateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">, VariantProps<typeof errorStateVariants> {
@@ -1558,7 +1558,7 @@ declare const skeletonVariants: (props?: ({
     shape?: "text" | "block" | "circle" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const spinnerVariants: (props?: ({
-    size?: "md" | "sm" | "lg" | 16 | 24 | 32 | null | undefined;
+    size?: "sm" | "md" | "lg" | 16 | 24 | 32 | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof skeletonVariants> {
 }
@@ -1591,7 +1591,7 @@ interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement> {
 declare const Spinner: React.ForwardRefExoticComponent<SpinnerProps & React.RefAttributes<HTMLSpanElement>>;
 
 declare const iconButtonCva: (props?: ({
-    size?: "md" | "sm" | "lg" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
     pressed?: boolean | null | undefined;
     appearance?: "filled" | "outline" | "ghost" | null | undefined;
     tone?: "primary" | "neutral" | "danger" | null | undefined;
@@ -1781,7 +1781,7 @@ interface ActionFooterProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
 declare const ActionFooter: React.ForwardRefExoticComponent<ActionFooterProps & React.RefAttributes<HTMLDivElement>>;
 
 declare const toastVariants: (props?: ({
-    variant?: "default" | "error" | "success" | "info" | "warning" | null | undefined;
+    variant?: "error" | "warning" | "info" | "success" | "default" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const toastViewportVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
 type ToastVariant = NonNullable<VariantProps<typeof toastVariants>['variant']>;
@@ -1835,19 +1835,19 @@ interface ToastProviderProps extends React.HTMLAttributes<HTMLDivElement> {
 declare function ToastProvider({ children, maxToasts, className, ...props }: ToastProviderProps): react_jsx_runtime.JSX.Element;
 
 declare const otpFieldVariants: (props?: ({
-    size?: "default" | "compact" | null | undefined;
+    size?: "compact" | "default" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const otpFieldGroupVariants: (props?: ({
-    size?: "default" | "compact" | null | undefined;
+    size?: "compact" | "default" | null | undefined;
     fluid?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const otpCellVariants: (props?: ({
-    size?: "default" | "compact" | null | undefined;
+    size?: "compact" | "default" | null | undefined;
     fluid?: boolean | null | undefined;
     surface?: SurfaceLevel | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const otpFieldMessageVariants: (props?: ({
-    state?: "default" | "error" | null | undefined;
+    state?: "error" | "default" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type OTPFieldSize = NonNullable<VariantProps<typeof otpCellVariants>["size"]>;
 interface OTPFieldProps extends Omit<React.FieldsetHTMLAttributes<HTMLFieldSetElement>, "onChange" | "children" | "defaultValue" | "value">, VariantProps<typeof otpFieldVariants> {
@@ -1874,10 +1874,10 @@ interface OTPFieldProps extends Omit<React.FieldsetHTMLAttributes<HTMLFieldSetEl
 declare const OTPField: React.ForwardRefExoticComponent<OTPFieldProps & React.RefAttributes<HTMLFieldSetElement>>;
 
 declare const searchFieldVariants: (props?: ({
-    size?: "md" | "sm" | "lg" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const searchFieldInputVariants: (props?: ({
-    size?: "md" | "sm" | "lg" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
     hasClear?: boolean | null | undefined;
     surface?: SurfaceLevel | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
@@ -1901,14 +1901,14 @@ declare const checkboxVariants: (props?: ({
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const checkboxRootVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
 declare const checkboxBoxVariants: (props?: ({
-    size?: "md" | "sm" | null | undefined;
+    size?: "sm" | "md" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const checkboxGroupItemVariants: (props?: ({
-    appearance?: "plain" | "card" | null | undefined;
+    appearance?: "card" | "plain" | null | undefined;
     density?: "compact" | "comfortable" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const checkboxGroupBoxVariants: (props?: ({
-    appearance?: "plain" | "card" | null | undefined;
+    appearance?: "card" | "plain" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type CheckboxSize = NonNullable<VariantProps<typeof checkboxBoxVariants>["size"]>;
 type CheckboxCheckedState = React.ComponentProps<typeof Checkbox$1.Root>["checked"];
@@ -1933,7 +1933,7 @@ interface CheckboxProps extends Omit<React.ComponentPropsWithoutRef<typeof Check
 declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLButtonElement>>;
 
 declare const checkboxGroupVariants: (props?: ({
-    appearance?: "plain" | "card" | null | undefined;
+    appearance?: "card" | "plain" | null | undefined;
     orientation?: "horizontal" | "vertical" | null | undefined;
     columns?: "one" | "two" | "three" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
@@ -1954,16 +1954,16 @@ interface CheckboxGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
 declare const CheckboxGroup: React.ForwardRefExoticComponent<CheckboxGroupProps & React.RefAttributes<HTMLDivElement>>;
 
 declare const radioGroupVariants: (props?: ({
-    appearance?: "plain" | "card" | null | undefined;
+    appearance?: "card" | "plain" | null | undefined;
     orientation?: "horizontal" | "vertical" | null | undefined;
     columns?: "one" | "two" | "three" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const radioVariants: (props?: ({
-    appearance?: "plain" | "card" | null | undefined;
+    appearance?: "card" | "plain" | null | undefined;
     density?: "compact" | "comfortable" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const radioControlVariants: (props?: ({
-    appearance?: "plain" | "card" | null | undefined;
+    appearance?: "card" | "plain" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type RadioGroupAppearance = NonNullable<VariantProps<typeof radioGroupVariants>["appearance"]>;
 type RadioGroupColumns = NonNullable<VariantProps<typeof radioGroupVariants>["columns"]>;

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(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olundot/ui",
-  "version": "0.20.0-next.1",
+  "version": "0.20.0-next.2",
   "description": "OLUN. shared React UI components built on OLUN design tokens",
   "license": "MIT",
   "keywords": [
@@ -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",