@seed-design/react 2.4.0 → 2.4.2

package/lib/utils/withScaleFeedback.js

@@ -0,0 +1,22 @@
+"use client";
+import clsx$1 from "clsx";
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import { useScaleFeedback } from "@seed-design/react-scale-feedback";
+//#region src/utils/withScaleFeedback.tsx
+function withScaleFeedback(Component) {
+	const Pressable = React$1.forwardRef((props, ref) => {
+		const { scaleFeedbackRef, scaleFeedbackClassName } = useScaleFeedback();
+		const composedRef = useComposedRefs(scaleFeedbackRef, ref);
+		return /* @__PURE__ */ jsx(Component, {
+			...props,
+			ref: composedRef,
+			className: clsx$1(scaleFeedbackClassName, props.className)
+		});
+	});
+	Pressable.displayName = Component.displayName;
+	return Pressable;
+}
+//#endregion
+export { withScaleFeedback };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/react",
-  "version": "2.4.0",
+  "version": "2.4.2",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -66,6 +66,7 @@
     "@seed-design/react-pull-to-refresh": "^2.1.0",
     "@seed-design/react-quantity-picker": "^1.0.0",
     "@seed-design/react-radio-group": "^2.0.1",
+    "@seed-design/react-scale-feedback": "^1.0.0",
     "@seed-design/react-segmented-control": "^2.0.2",
     "@seed-design/react-select": "^1.0.1",
     "@seed-design/react-side-navigation": "^1.0.1",
@@ -82,7 +83,7 @@
     "unicode-segmenter": "^0.17.3"
   },
   "peerDependencies": {
-    "@seed-design/css": "^2.5.0",
+    "@seed-design/css": "^2.8.0",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },

package/src/components/AGENTS.md

@@ -6,9 +6,9 @@
 
 ## 파일 작성 컨벤션
 
-- 컴포넌트별 디렉토리는 `PascalCase`를 사용하고, 기본 파일은 `{ComponentName}.tsx`, `{ComponentName}.namespace.ts`, `index.ts` 조합을 따른다.
-- 실제 구현은 `{ComponentName}.tsx`에 두고, namespace 단축 이름은 `{ComponentName}.namespace.ts`, 공개 re-export는 `index.ts`에 둔다.
-- helper slot이 내부 구현에만 필요하면 별도 파일 분리보다 같은 구현 파일 안에 두고 export surface에서 숨기는 쪽을 우선 검토한다.
+- 컴포넌트별 디렉토리는 `PascalCase`를 사용한다. 단일 컴포넌트는 `{ComponentName}.tsx`와 `index.ts`를 기본으로 둔다.
+- compound component에서 public namespace 단축 이름이 필요할 때만 `{ComponentName}.namespace.ts`를 추가한다.
+- 실제 구현은 `{ComponentName}.tsx` 또는 역할별 구현 파일에 두고, 공개 re-export는 `index.ts`와 필요한 namespace 파일에서 관리한다.
 
 ## 코드 작성 컨벤션
 

package/src/components/ActionButton/ActionButton.tsx

@@ -6,7 +6,7 @@ import { useComposedRefs } from "@radix-ui/react-compose-refs";
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import clsx from "clsx";
 import * as React from "react";
-import { useScaleFeedback } from "../../utils/scaleFeedback";
+import { useScaleFeedback } from "@seed-design/react-scale-feedback";
 import { handleColor, useStyleProps, type StyleProps } from "../../utils/styled";
 import { IconRequired } from "../Icon/Icon";
 import {

package/src/components/AttachmentDisplay/AttachmentDisplayItem.tsx

@@ -18,7 +18,8 @@ import clsx from "clsx";
 import * as React from "react";
 import { createRenderTrackingContext } from "../../utils/createRenderTrackingContext";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
-import { useScaleFeedback, withScaleFeedback } from "../../utils/scaleFeedback";
+import { useScaleFeedback } from "@seed-design/react-scale-feedback";
+import { withScaleFeedback } from "../../utils/withScaleFeedback";
 
 const { useClassNames, ClassNamesProvider, withContext } =
   createSlotRecipeContext(attachmentInputItem);

package/src/components/AttachmentDisplay/AttachmentDisplayTrigger.tsx

@@ -14,7 +14,7 @@ import clsx from "clsx";
 import * as React from "react";
 import { InternalIcon } from "../private/Icon";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
-import { withScaleFeedback } from "../../utils/scaleFeedback";
+import { withScaleFeedback } from "../../utils/withScaleFeedback";
 
 const { withProvider, useClassNames } = createSlotRecipeContext(attachmentInputTrigger);
 

package/src/components/AttachmentInput/AttachmentInputItem.tsx

@@ -21,7 +21,8 @@ import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import clsx from "clsx";
 import { createRenderTrackingContext } from "../../utils/createRenderTrackingContext";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
-import { useScaleFeedback, withScaleFeedback } from "../../utils/scaleFeedback";
+import { useScaleFeedback } from "@seed-design/react-scale-feedback";
+import { withScaleFeedback } from "../../utils/withScaleFeedback";
 
 const { useClassNames, ClassNamesProvider, withContext } =
   createSlotRecipeContext(attachmentInputItem);

package/src/components/AttachmentInput/AttachmentInputTrigger.tsx

@@ -16,7 +16,7 @@ import { mergeProps } from "@seed-design/dom-utils";
 import clsx from "clsx";
 import { InternalIcon } from "../private/Icon";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
-import { withScaleFeedback } from "../../utils/scaleFeedback";
+import { withScaleFeedback } from "../../utils/withScaleFeedback";
 
 const { withProvider, useClassNames } = createSlotRecipeContext(attachmentInputTrigger);
 

package/src/components/BottomSheet/BottomSheet.tsx

@@ -5,7 +5,7 @@ import { Drawer } from "@seed-design/react-drawer";
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import clsx from "clsx";
 import { forwardRef } from "react";
-import { useScaleFeedback } from "../../utils/scaleFeedback";
+import { useScaleFeedback } from "@seed-design/react-scale-feedback";
 import { createRenderTrackingContext } from "../../utils/createRenderTrackingContext";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
 import { withStyleProps, type StyleProps } from "../../utils/styled";

package/src/components/Callout/Callout.tsx

@@ -3,7 +3,7 @@ import type * as React from "react";
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import { callout, type CalloutVariantProps } from "@seed-design/css/recipes/callout";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
-import { withScaleFeedback } from "../../utils/scaleFeedback";
+import { withScaleFeedback } from "../../utils/withScaleFeedback";
 import {
   DismissibleCloseButton,
   DismissibleRoot,

package/src/components/Checkbox/Checkbox.tsx

@@ -8,7 +8,7 @@ import clsx from "clsx";
 import { forwardRef } from "react";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
 import { createWithStateProps } from "../../utils/createWithStateProps";
-import { withScaleFeedback } from "../../utils/scaleFeedback";
+import { withScaleFeedback } from "../../utils/withScaleFeedback";
 import { InternalIcon } from "../private/Icon";
 import { createRecipeContext } from "../../utils/createRecipeContext";
 import {

package/src/components/Chip/Chip.tsx

@@ -2,7 +2,7 @@ import { chip, type ChipVariantProps } from "@seed-design/css/recipes/chip";
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import type * as React from "react";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
-import { withScaleFeedback } from "../../utils/scaleFeedback";
+import { withScaleFeedback } from "../../utils/withScaleFeedback";
 import { withIconRequired } from "../Icon/Icon";
 import { createWithStateProps } from "../../utils/createWithStateProps";
 import { useCheckboxContext } from "@seed-design/react-checkbox";

package/src/components/ChipTabs/ChipTabs.tsx

@@ -1,7 +1,7 @@
 import { chipTabs, type ChipTabsVariantProps } from "@seed-design/css/recipes/chip-tabs";
 import { Tabs as TabsPrimitive } from "@seed-design/react-tabs";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
-import { withScaleFeedback } from "../../utils/scaleFeedback";
+import { withScaleFeedback } from "../../utils/withScaleFeedback";
 import { forwardRef } from "react";
 import clsx from "clsx";
 

package/src/components/ContentDialog/ContentDialog.tsx

@@ -10,7 +10,7 @@ import clsx from "clsx";
 import * as React from "react";
 import { createRenderTrackingContext } from "../../utils/createRenderTrackingContext";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
-import { useScaleFeedback } from "../../utils/scaleFeedback";
+import { useScaleFeedback } from "@seed-design/react-scale-feedback";
 import { useStyleProps, withStyleProps, type StyleProps } from "../../utils/styled";
 
 const { withContext, useClassNames, ClassNamesProvider } = createSlotRecipeContext(contentDialog);

package/src/components/ContextualFloatingButton/ContextualFloatingButton.tsx

@@ -6,7 +6,7 @@ import { useComposedRefs } from "@radix-ui/react-compose-refs";
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import clsx from "clsx";
 import * as React from "react";
-import { useScaleFeedback } from "../../utils/scaleFeedback";
+import { useScaleFeedback } from "@seed-design/react-scale-feedback";
 import { IconRequired } from "../Icon/Icon";
 import {
   PendingButtonProvider,

package/src/components/FieldButton/FieldButton.tsx

@@ -4,7 +4,7 @@ import * as React from "react";
 import { forwardRef } from "react";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
 import { createWithStateProps } from "../../utils/createWithStateProps";
-import { withScaleFeedback } from "../../utils/scaleFeedback";
+import { withScaleFeedback } from "../../utils/withScaleFeedback";
 import { splitMultipleVariantsProps } from "../../utils/splitMultipleVariantsProps";
 import { field, type FieldVariantProps } from "@seed-design/css/recipes/field";
 import { fieldLabel, type FieldLabelVariantProps } from "@seed-design/css/recipes/field-label";

package/src/components/FloatingActionButton/FloatingActionButton.tsx

@@ -5,7 +5,7 @@ import {
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import type * as React from "react";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
-import { withScaleFeedback } from "../../utils/scaleFeedback";
+import { withScaleFeedback } from "../../utils/withScaleFeedback";
 import { InternalIcon, type InternalIconProps } from "../private/Icon";
 
 const { withProvider, withContext } = createSlotRecipeContext(floatingActionButton);

package/src/components/HelpBubble/HelpBubble.tsx

@@ -3,7 +3,7 @@ import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import { helpBubble, type HelpBubbleVariantProps } from "@seed-design/css/recipes/help-bubble";
 import { forwardRef } from "react";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
-import { withScaleFeedback } from "../../utils/scaleFeedback";
+import { withScaleFeedback } from "../../utils/withScaleFeedback";
 import { createWithStateProps } from "../../utils/createWithStateProps";
 import { withStyleProps, type StyleProps } from "../../utils/styled";
 import { getHelpBubbleArrowTipPath } from "../../utils/getHelpBubbleArrowTipPath";

package/src/components/ImageFrame/ImageFrame.tsx

@@ -17,7 +17,7 @@ import { Toggle as TogglePrimitive, useToggleContext } from "@seed-design/react-
 import { useComposedRefs } from "@radix-ui/react-compose-refs";
 import clsx from "clsx";
 import * as React from "react";
-import { useScaleFeedback } from "../../utils/scaleFeedback";
+import { useScaleFeedback } from "@seed-design/react-scale-feedback";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
 import type { DistributiveOmit } from "../../utils/styled";
 import { AspectRatio, type AspectRatioProps } from "../AspectRatio/AspectRatio";

package/src/components/MenuSheet/MenuSheet.tsx

@@ -7,7 +7,7 @@ import {
 } from "@seed-design/css/recipes/menu-sheet-item";
 import * as React from "react";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
-import { withScaleFeedback } from "../../utils/scaleFeedback";
+import { withScaleFeedback } from "../../utils/withScaleFeedback";
 import { createWithStateProps } from "../../utils/createWithStateProps";
 import clsx from "clsx";
 

package/src/components/PageBanner/PageBanner.tsx

@@ -4,7 +4,7 @@ import { forwardRef } from "react";
 import { pageBanner, type PageBannerVariantProps } from "@seed-design/css/recipes/page-banner";
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
-import { withScaleFeedback } from "../../utils/scaleFeedback";
+import { withScaleFeedback } from "../../utils/withScaleFeedback";
 import {
   DismissibleCloseButton,
   DismissibleRoot,

package/src/components/QuantityPicker/QuantityPicker.tsx

@@ -15,7 +15,7 @@ import * as React from "react";
 import { useComposedRefs } from "@radix-ui/react-compose-refs";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
 import { createWithStateProps } from "../../utils/createWithStateProps";
-import { useScaleFeedback } from "../../utils/scaleFeedback";
+import { useScaleFeedback } from "@seed-design/react-scale-feedback";
 
 const { ClassNamesProvider, useClassNames } = createSlotRecipeContext(quantityPicker);
 const withStateProps = createWithStateProps([useQuantityPickerContext]);

package/src/components/RadioGroup/RadioGroup.tsx

@@ -11,7 +11,7 @@ import clsx from "clsx";
 import { forwardRef } from "react";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
 import { createWithStateProps } from "../../utils/createWithStateProps";
-import { withScaleFeedback } from "../../utils/scaleFeedback";
+import { withScaleFeedback } from "../../utils/withScaleFeedback";
 import { InternalIcon } from "../private/Icon";
 import { splitMultipleVariantsProps } from "../../utils/splitMultipleVariantsProps";
 import { createRecipeContext } from "../../utils/createRecipeContext";

package/src/components/ReactionButton/ReactionButton.tsx

@@ -6,7 +6,7 @@ import { useComposedRefs } from "@radix-ui/react-compose-refs";
 import { Toggle as TogglePrimitive } from "@seed-design/react-toggle";
 import clsx from "clsx";
 import * as React from "react";
-import { useScaleFeedback } from "../../utils/scaleFeedback";
+import { useScaleFeedback } from "@seed-design/react-scale-feedback";
 import {
   PendingButtonProvider,
   usePendingButton,

package/src/components/SidePanel/SidePanel.tsx

@@ -7,7 +7,7 @@ import clsx from "clsx";
 import * as React from "react";
 import { createRenderTrackingContext } from "../../utils/createRenderTrackingContext";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
-import { useScaleFeedback } from "../../utils/scaleFeedback";
+import { useScaleFeedback } from "@seed-design/react-scale-feedback";
 import { useStyleProps, withStyleProps, type StyleProps } from "../../utils/styled";
 
 const { withContext, useClassNames, ClassNamesProvider } = createSlotRecipeContext(sidePanel);
@@ -137,11 +137,23 @@ SidePanelDescription.displayName = "SidePanelDescription";
 
 export interface SidePanelBodyProps
   extends PrimitiveProps,
-    Pick<
-      StyleProps,
-      "paddingX" | "height" | "maxHeight" | "minHeight" | "justifyContent" | "alignItems"
-    >,
-    React.HTMLAttributes<HTMLDivElement> {}
+    Pick<StyleProps, "paddingX" | "justifyContent" | "alignItems">,
+    React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * @deprecated SEED React 3.0.0에서 제거됩니다. Side Panel 본문은 항상 헤더와 푸터를 제외한 남은 높이를 채우므로 이 prop은 효과가 없습니다. 콘텐츠의 높이를 지정하려면 본문 안에 `Box`를 두고 `height`를 지정하세요.
+   */
+  height?: StyleProps["height"];
+
+  /**
+   * @deprecated SEED React 3.0.0에서 제거됩니다. Side Panel 본문은 항상 헤더와 푸터를 제외한 남은 높이를 채우므로, 남은 높이보다 큰 값을 주면 푸터가 패널 밖으로 밀려납니다. 콘텐츠의 최소 높이를 지정하려면 본문 안에 `Box`를 두고 `minHeight`를 지정하세요.
+   */
+  minHeight?: StyleProps["minHeight"];
+
+  /**
+   * @deprecated SEED React 3.0.0에서 제거됩니다. Side Panel 본문은 항상 헤더와 푸터를 제외한 남은 높이를 채우므로, 남은 높이보다 작은 값을 주면 푸터가 패널 중간에 뜹니다. 콘텐츠의 최대 높이를 지정하려면 본문 안에 `Box`를 두고 `maxHeight`를 지정하세요.
+   */
+  maxHeight?: StyleProps["maxHeight"];
+}
 
 export const SidePanelBody = React.forwardRef<HTMLDivElement, SidePanelBodyProps>(
   (props, forwardedRef) => {

package/src/components/Snackbar/Snackbar.tsx

@@ -6,7 +6,7 @@ import { Snackbar as SnackbarPrimitive } from "@seed-design/react-snackbar";
 import { forwardRef } from "react";
 import { createRecipeContext } from "../../utils/createRecipeContext";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
-import { withScaleFeedback } from "../../utils/scaleFeedback";
+import { withScaleFeedback } from "../../utils/withScaleFeedback";
 import { InternalIcon, type InternalIconProps } from "../private/Icon";
 
 const { withContext: withRegionContext } = createRecipeContext(snackbarRegion);

package/src/components/SwipeableMenuSheet/SwipeableMenuSheet.tsx

@@ -9,7 +9,7 @@ import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import clsx from "clsx";
 import * as React from "react";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
-import { withScaleFeedback } from "../../utils/scaleFeedback";
+import { withScaleFeedback } from "../../utils/withScaleFeedback";
 
 const { withContext, useClassNames, ClassNamesProvider } = createSlotRecipeContext(menuSheet);
 const {

package/src/components/Switch/Switch.tsx

@@ -4,7 +4,7 @@ import { switchmark, type SwitchmarkVariantProps } from "@seed-design/css/recipe
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import { createWithStateProps } from "../../utils/createWithStateProps";
-import { withScaleFeedback } from "../../utils/scaleFeedback";
+import { withScaleFeedback } from "../../utils/withScaleFeedback";
 import React from "react";
 import clsx from "clsx";
 import { splitMultipleVariantsProps } from "../../utils/splitMultipleVariantsProps";

package/src/components/Tabs/Tabs.tsx

@@ -1,7 +1,7 @@
 import { tabs, type TabsVariantProps } from "@seed-design/css/recipes/tabs";
 import { Tabs as TabsPrimitive } from "@seed-design/react-tabs";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
-import { withScaleFeedback } from "../../utils/scaleFeedback";
+import { withScaleFeedback } from "../../utils/withScaleFeedback";
 
 const { withProvider, withContext } = createSlotRecipeContext(tabs);
 

package/src/components/ToggleButton/ToggleButton.tsx

@@ -6,7 +6,7 @@ import { useComposedRefs } from "@radix-ui/react-compose-refs";
 import { Toggle as TogglePrimitive } from "@seed-design/react-toggle";
 import clsx from "clsx";
 import * as React from "react";
-import { useScaleFeedback } from "../../utils/scaleFeedback";
+import { useScaleFeedback } from "@seed-design/react-scale-feedback";
 import {
   PendingButtonProvider,
   usePendingButton,

package/src/index.ts

@@ -5,8 +5,8 @@ export type { ResponsiveValue, UnwrapResponsive, BreakpointThreshold } from "./t
 export { useBreakpoint } from "./hooks/useBreakpoint";
 export type { UseBreakpointOptions } from "./hooks/useBreakpoint";
 export { useBreakpointValue } from "./hooks/useBreakpointValue";
-export { useScaleFeedback, ScaleFeedback } from "./utils/scaleFeedback";
-export type { ScaleFeedbackProps } from "./utils/scaleFeedback";
+export { useScaleFeedback, ScaleFeedback } from "@seed-design/react-scale-feedback";
+export type { ScaleFeedbackProps } from "@seed-design/react-scale-feedback";
 export { BreakpointProvider } from "./providers/BreakpointProvider";
 export type { BreakpointProviderProps } from "./providers/BreakpointProvider";
 

package/src/utils/withScaleFeedback.tsx

@@ -0,0 +1,34 @@
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
+import { useScaleFeedback } from "@seed-design/react-scale-feedback";
+import clsx from "clsx";
+import * as React from "react";
+
+/**
+ * Wraps a component so its element opts into scale feedback — for one-liner
+ * factory components (`withContext`/`withProvider` results). Hand-written
+ * forwardRef components call `useScaleFeedback` directly instead.
+ */
+export function withScaleFeedback<P>(
+  Component: React.ForwardRefExoticComponent<P>,
+): React.ForwardRefExoticComponent<P>;
+export function withScaleFeedback(
+  Component: React.ForwardRefExoticComponent<
+    React.RefAttributes<HTMLElement> & { className?: string }
+  >,
+): React.ForwardRefExoticComponent<React.RefAttributes<HTMLElement> & { className?: string }> {
+  const Pressable = React.forwardRef<HTMLElement, { className?: string }>((props, ref) => {
+    const { scaleFeedbackRef, scaleFeedbackClassName } = useScaleFeedback();
+    const composedRef = useComposedRefs(scaleFeedbackRef, ref);
+
+    return (
+      <Component
+        {...props}
+        ref={composedRef}
+        className={clsx(scaleFeedbackClassName, props.className)}
+      />
+    );
+  });
+
+  Pressable.displayName = Component.displayName;
+  return Pressable;
+}

package/lib/utils/elementSizeVars.cjs

@@ -1,76 +0,0 @@
-"use client";
-const require_runtime = require("../_virtual/_rolldown/runtime.cjs");
-let react = require("react");
-react = require_runtime.__toESM(react);
-//#region src/utils/elementSizeVars.tsx
-/**
-* Publishes an element's rendered size as CSS custom properties.
-*
-* The size is a plain fact about the element rather than a feature, so this
-* util keeps unitless `--seed-element-width` / `--seed-element-height` in sync
-* on the element and stops there. Whatever needs the size derives its own
-* values from those vars in CSS.
-*
-* The names must stay in sync with `@seed-design/qvism-preset`
-* (utils/scale-feedback.ts), which owns the formula that consumes them. Press
-* detection stays in CSS (`:active` gates), so nothing here tracks interaction;
-* without JS the vars are simply never set and consumers fall back to scale 1.
-*/
-var sharedObserver = null;
-function getSharedObserver() {
-	sharedObserver ??= new ResizeObserver((entries) => {
-		const measurements = entries.map((entry) => {
-			const element = entry.target;
-			const size = entry.borderBoxSize?.[0];
-			return {
-				element,
-				width: size ? size.inlineSize : element.offsetWidth,
-				height: size ? size.blockSize : element.offsetHeight
-			};
-		});
-		for (const { element, width, height } of measurements) {
-			element.style.setProperty("--seed-element-width", String(width));
-			element.style.setProperty("--seed-element-height", String(height));
-		}
-	});
-	return sharedObserver;
-}
-/**
-* Returns a callback ref that keeps the size vars in sync on the element it is
-* attached to. Compose it with the element's other refs however you like: being
-* handed an element it already watches is a no-op, so the observation survives a
-* ref whose identity changes every render and the vars are republished on resize
-* rather than on render.
-*
-* Teardown still runs when the ref genuinely leaves an element — it is unobserved
-* and its vars removed — so an element that keeps the class but loses the ref
-* falls back to a ratio of 1 instead of holding a stale one.
-*/
-function useElementSizeVars() {
-	const attachedRef = react.useRef(null);
-	const observedRef = react.useRef(null);
-	const release = react.useCallback(() => {
-		const observed = observedRef.current;
-		if (!observed) return;
-		observedRef.current = null;
-		getSharedObserver().unobserve(observed);
-		observed.style.removeProperty("--seed-element-width");
-		observed.style.removeProperty("--seed-element-height");
-	}, []);
-	return { sizeVarsRef: react.useCallback((node) => {
-		attachedRef.current = node;
-		if (!node) {
-			queueMicrotask(() => {
-				if (attachedRef.current === observedRef.current) return;
-				release();
-			});
-			return;
-		}
-		if (observedRef.current === node) return;
-		release();
-		observedRef.current = node;
-		getSharedObserver().observe(node, { box: "border-box" });
-	}, [release]) };
-}
-//#endregion
-exports.useElementSizeVars = useElementSizeVars;

package/lib/utils/elementSizeVars.d.ts

@@ -1,15 +0,0 @@
-/**
- * Returns a callback ref that keeps the size vars in sync on the element it is
- * attached to. Compose it with the element's other refs however you like: being
- * handed an element it already watches is a no-op, so the observation survives a
- * ref whose identity changes every render and the vars are republished on resize
- * rather than on render.
- *
- * Teardown still runs when the ref genuinely leaves an element — it is unobserved
- * and its vars removed — so an element that keeps the class but loses the ref
- * falls back to a ratio of 1 instead of holding a stale one.
- */
-export declare function useElementSizeVars(): {
-    sizeVarsRef: (node: HTMLElement | null) => void;
-};
-//# sourceMappingURL=elementSizeVars.d.ts.map

package/lib/utils/elementSizeVars.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"elementSizeVars.d.ts","sourceRoot":"","sources":["../../src/utils/elementSizeVars.tsx"],"names":[],"mappings":"AAgDA;;;;;;;;;;GAUG;AACH,wBAAgB,kBAAkB;wBAkBvB,WAAW,GAAG,IAAI;EAkC5B"}

package/lib/utils/elementSizeVars.js

@@ -1,74 +0,0 @@
-"use client";
-import * as React$1 from "react";
-//#region src/utils/elementSizeVars.tsx
-/**
-* Publishes an element's rendered size as CSS custom properties.
-*
-* The size is a plain fact about the element rather than a feature, so this
-* util keeps unitless `--seed-element-width` / `--seed-element-height` in sync
-* on the element and stops there. Whatever needs the size derives its own
-* values from those vars in CSS.
-*
-* The names must stay in sync with `@seed-design/qvism-preset`
-* (utils/scale-feedback.ts), which owns the formula that consumes them. Press
-* detection stays in CSS (`:active` gates), so nothing here tracks interaction;
-* without JS the vars are simply never set and consumers fall back to scale 1.
-*/
-var sharedObserver = null;
-function getSharedObserver() {
-	sharedObserver ??= new ResizeObserver((entries) => {
-		const measurements = entries.map((entry) => {
-			const element = entry.target;
-			const size = entry.borderBoxSize?.[0];
-			return {
-				element,
-				width: size ? size.inlineSize : element.offsetWidth,
-				height: size ? size.blockSize : element.offsetHeight
-			};
-		});
-		for (const { element, width, height } of measurements) {
-			element.style.setProperty("--seed-element-width", String(width));
-			element.style.setProperty("--seed-element-height", String(height));
-		}
-	});
-	return sharedObserver;
-}
-/**
-* Returns a callback ref that keeps the size vars in sync on the element it is
-* attached to. Compose it with the element's other refs however you like: being
-* handed an element it already watches is a no-op, so the observation survives a
-* ref whose identity changes every render and the vars are republished on resize
-* rather than on render.
-*
-* Teardown still runs when the ref genuinely leaves an element — it is unobserved
-* and its vars removed — so an element that keeps the class but loses the ref
-* falls back to a ratio of 1 instead of holding a stale one.
-*/
-function useElementSizeVars() {
-	const attachedRef = React$1.useRef(null);
-	const observedRef = React$1.useRef(null);
-	const release = React$1.useCallback(() => {
-		const observed = observedRef.current;
-		if (!observed) return;
-		observedRef.current = null;
-		getSharedObserver().unobserve(observed);
-		observed.style.removeProperty("--seed-element-width");
-		observed.style.removeProperty("--seed-element-height");
-	}, []);
-	return { sizeVarsRef: React$1.useCallback((node) => {
-		attachedRef.current = node;
-		if (!node) {
-			queueMicrotask(() => {
-				if (attachedRef.current === observedRef.current) return;
-				release();
-			});
-			return;
-		}
-		if (observedRef.current === node) return;
-		release();
-		observedRef.current = node;
-		getSharedObserver().observe(node, { box: "border-box" });
-	}, [release]) };
-}
-//#endregion
-export { useElementSizeVars };