@seed-design/react 2.4.0 → 2.4.2

package/lib/utils/scaleFeedback.cjs

@@ -1,99 +0,0 @@
-"use client";
-const require_runtime = require("../_virtual/_rolldown/runtime.cjs");
-const require_elementSizeVars = require("./elementSizeVars.cjs");
-let clsx = require("clsx");
-clsx = require_runtime.__toESM(clsx);
-let react = require("react");
-react = require_runtime.__toESM(react);
-let react_jsx_runtime = require("react/jsx-runtime");
-let _radix_ui_react_compose_refs = require("@radix-ui/react-compose-refs");
-let _seed_design_css_scale_feedback = require("@seed-design/css/scale-feedback");
-let _radix_ui_react_slot = require("@radix-ui/react-slot");
-//#region src/utils/scaleFeedback.tsx
-/**
-* Opts an element into scale feedback: put `scaleFeedbackRef` and
-* `scaleFeedbackClassName` on the same element, and it publishes
-* `--seed-feedback-scale`, a ratio that shrinks it by a fixed 2px when consumed.
-* `ScaleFeedback` pairs them up for an element you render; reach for the hook when
-* you can't wrap one, such as inside a component already assembling its own
-* `ref` and `className`.
-*
-* The two halves belong together — the size vars `useElementSizeVars` publishes,
-* and the class that derives the ratio from them — so the hook hands them back
-* as a pair. If one goes missing the derivation stays guaranteed-invalid and
-* `--seed-feedback-scale` resolves to 1: a mistake costs the effect rather than
-* producing a wrong scale.
-*
-* Applying the ratio is yours, because the selector that scales the element is
-* usually the same one that changes its background, and splitting them across
-* two rules lets them fire under different conditions:
-*
-*   .my-button {
-*     transition: background-color 0.2s, var(--seed-feedback-scale-transition);
-*   }
-*   .my-button:active {
-*     background-color: ...;
-*     scale: var(--seed-feedback-scale);
-*   }
-*
-* The resting `scale: 1` comes with the class rather than with the rule above:
-* it keeps the element a stacking context throughout, instead of becoming one
-* mid-press and dragging `position: fixed` descendants with it.
-*/
-function useScaleFeedback() {
-	const { sizeVarsRef } = require_elementSizeVars.useElementSizeVars();
-	return {
-		scaleFeedbackRef: sizeVarsRef,
-		scaleFeedbackClassName: _seed_design_css_scale_feedback.SCALE_FEEDBACK_CLASS_NAME
-	};
-}
-var ScaleFeedbackSlot = (0, _radix_ui_react_slot.createSlot)("ScaleFeedback");
-/**
-* Opts its child into scale feedback, so the ref and the class can no longer
-* land on different elements or go missing one at a time. The child keeps its own
-* `ref` and `className`, and applying the ratio is still yours — see
-* `useScaleFeedback` for the rule this expects you to write.
-*
-* There is no `asChild` prop because rendering an element of our own is never the
-* right answer: that element would be the one measured, and a block wrapper around
-* an inline-block button reports the container's width, so the ratio would come
-* out wrong rather than absent. The resting `scale: 1` would settle on the wrapper
-* too, leaving the child to become a stacking context mid-press.
-*/
-var ScaleFeedback = react.forwardRef(({ children }, ref) => {
-	const { scaleFeedbackRef, scaleFeedbackClassName } = useScaleFeedback();
-	const childRef = react.useRef(null);
-	const composedRef = (0, _radix_ui_react_compose_refs.useComposedRefs)(scaleFeedbackRef, childRef, ref);
-	react.useEffect(() => {
-		if (process.env.NODE_ENV === "production") return;
-		const node = childRef.current;
-		if (!node) {
-			console.warn("ScaleFeedback: the child never forwarded `ref` to a DOM element, so its size is never measured. A Fragment cannot receive one.");
-			return;
-		}
-		if (!node.classList.contains(_seed_design_css_scale_feedback.SCALE_FEEDBACK_CLASS_NAME)) console.warn("ScaleFeedback: the child dropped the `className` it was handed, so no ratio is derived. Forward `className` to the element that takes `ref`.");
-	}, []);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ScaleFeedbackSlot, {
-		ref: composedRef,
-		className: scaleFeedbackClassName,
-		children
-	});
-});
-ScaleFeedback.displayName = "ScaleFeedback";
-function withScaleFeedback(Component) {
-	const Pressable = react.forwardRef((props, ref) => {
-		const { scaleFeedbackRef, scaleFeedbackClassName } = useScaleFeedback();
-		const composedRef = (0, _radix_ui_react_compose_refs.useComposedRefs)(scaleFeedbackRef, ref);
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
-			...props,
-			ref: composedRef,
-			className: (0, clsx.default)(scaleFeedbackClassName, props.className)
-		});
-	});
-	Pressable.displayName = Component.displayName;
-	return Pressable;
-}
-//#endregion
-exports.ScaleFeedback = ScaleFeedback;
-exports.useScaleFeedback = useScaleFeedback;
-exports.withScaleFeedback = withScaleFeedback;

package/lib/utils/scaleFeedback.d.ts

@@ -1,58 +0,0 @@
-import * as React from "react";
-/**
- * Opts an element into scale feedback: put `scaleFeedbackRef` and
- * `scaleFeedbackClassName` on the same element, and it publishes
- * `--seed-feedback-scale`, a ratio that shrinks it by a fixed 2px when consumed.
- * `ScaleFeedback` pairs them up for an element you render; reach for the hook when
- * you can't wrap one, such as inside a component already assembling its own
- * `ref` and `className`.
- *
- * The two halves belong together — the size vars `useElementSizeVars` publishes,
- * and the class that derives the ratio from them — so the hook hands them back
- * as a pair. If one goes missing the derivation stays guaranteed-invalid and
- * `--seed-feedback-scale` resolves to 1: a mistake costs the effect rather than
- * producing a wrong scale.
- *
- * Applying the ratio is yours, because the selector that scales the element is
- * usually the same one that changes its background, and splitting them across
- * two rules lets them fire under different conditions:
- *
- *   .my-button {
- *     transition: background-color 0.2s, var(--seed-feedback-scale-transition);
- *   }
- *   .my-button:active {
- *     background-color: ...;
- *     scale: var(--seed-feedback-scale);
- *   }
- *
- * The resting `scale: 1` comes with the class rather than with the rule above:
- * it keeps the element a stacking context throughout, instead of becoming one
- * mid-press and dragging `position: fixed` descendants with it.
- */
-export declare function useScaleFeedback(): {
-    scaleFeedbackRef: (node: HTMLElement | null) => void;
-    scaleFeedbackClassName: "seed-scale-feedback";
-};
-export interface ScaleFeedbackProps {
-    children: React.ReactElement;
-}
-/**
- * Opts its child into scale feedback, so the ref and the class can no longer
- * land on different elements or go missing one at a time. The child keeps its own
- * `ref` and `className`, and applying the ratio is still yours — see
- * `useScaleFeedback` for the rule this expects you to write.
- *
- * There is no `asChild` prop because rendering an element of our own is never the
- * right answer: that element would be the one measured, and a block wrapper around
- * an inline-block button reports the container's width, so the ratio would come
- * out wrong rather than absent. The resting `scale: 1` would settle on the wrapper
- * too, leaving the child to become a stacking context mid-press.
- */
-export declare const ScaleFeedback: React.ForwardRefExoticComponent<ScaleFeedbackProps & React.RefAttributes<HTMLElement>>;
-/**
- * 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 declare function withScaleFeedback<P>(Component: React.ForwardRefExoticComponent<P>): React.ForwardRefExoticComponent<P>;
-//# sourceMappingURL=scaleFeedback.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"scaleFeedback.d.ts","sourceRoot":"","sources":["../../src/utils/scaleFeedback.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,gBAAgB;;;EAI/B;AAID,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC;CAC9B;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,aAAa,wFAkCzB,CAAC;AAIF;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,EACjC,SAAS,EAAE,KAAK,CAAC,yBAAyB,CAAC,CAAC,CAAC,GAC5C,KAAK,CAAC,yBAAyB,CAAC,CAAC,CAAC,CAAC"}

package/lib/utils/scaleFeedback.js

@@ -1,94 +0,0 @@
-"use client";
-import { useElementSizeVars } from "./elementSizeVars.js";
-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 { SCALE_FEEDBACK_CLASS_NAME } from "@seed-design/css/scale-feedback";
-import { createSlot } from "@radix-ui/react-slot";
-//#region src/utils/scaleFeedback.tsx
-/**
-* Opts an element into scale feedback: put `scaleFeedbackRef` and
-* `scaleFeedbackClassName` on the same element, and it publishes
-* `--seed-feedback-scale`, a ratio that shrinks it by a fixed 2px when consumed.
-* `ScaleFeedback` pairs them up for an element you render; reach for the hook when
-* you can't wrap one, such as inside a component already assembling its own
-* `ref` and `className`.
-*
-* The two halves belong together — the size vars `useElementSizeVars` publishes,
-* and the class that derives the ratio from them — so the hook hands them back
-* as a pair. If one goes missing the derivation stays guaranteed-invalid and
-* `--seed-feedback-scale` resolves to 1: a mistake costs the effect rather than
-* producing a wrong scale.
-*
-* Applying the ratio is yours, because the selector that scales the element is
-* usually the same one that changes its background, and splitting them across
-* two rules lets them fire under different conditions:
-*
-*   .my-button {
-*     transition: background-color 0.2s, var(--seed-feedback-scale-transition);
-*   }
-*   .my-button:active {
-*     background-color: ...;
-*     scale: var(--seed-feedback-scale);
-*   }
-*
-* The resting `scale: 1` comes with the class rather than with the rule above:
-* it keeps the element a stacking context throughout, instead of becoming one
-* mid-press and dragging `position: fixed` descendants with it.
-*/
-function useScaleFeedback() {
-	const { sizeVarsRef } = useElementSizeVars();
-	return {
-		scaleFeedbackRef: sizeVarsRef,
-		scaleFeedbackClassName: SCALE_FEEDBACK_CLASS_NAME
-	};
-}
-var ScaleFeedbackSlot = createSlot("ScaleFeedback");
-/**
-* Opts its child into scale feedback, so the ref and the class can no longer
-* land on different elements or go missing one at a time. The child keeps its own
-* `ref` and `className`, and applying the ratio is still yours — see
-* `useScaleFeedback` for the rule this expects you to write.
-*
-* There is no `asChild` prop because rendering an element of our own is never the
-* right answer: that element would be the one measured, and a block wrapper around
-* an inline-block button reports the container's width, so the ratio would come
-* out wrong rather than absent. The resting `scale: 1` would settle on the wrapper
-* too, leaving the child to become a stacking context mid-press.
-*/
-var ScaleFeedback = React$1.forwardRef(({ children }, ref) => {
-	const { scaleFeedbackRef, scaleFeedbackClassName } = useScaleFeedback();
-	const childRef = React$1.useRef(null);
-	const composedRef = useComposedRefs(scaleFeedbackRef, childRef, ref);
-	React$1.useEffect(() => {
-		if (process.env.NODE_ENV === "production") return;
-		const node = childRef.current;
-		if (!node) {
-			console.warn("ScaleFeedback: the child never forwarded `ref` to a DOM element, so its size is never measured. A Fragment cannot receive one.");
-			return;
-		}
-		if (!node.classList.contains(SCALE_FEEDBACK_CLASS_NAME)) console.warn("ScaleFeedback: the child dropped the `className` it was handed, so no ratio is derived. Forward `className` to the element that takes `ref`.");
-	}, []);
-	return /* @__PURE__ */ jsx(ScaleFeedbackSlot, {
-		ref: composedRef,
-		className: scaleFeedbackClassName,
-		children
-	});
-});
-ScaleFeedback.displayName = "ScaleFeedback";
-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 { ScaleFeedback, useScaleFeedback, withScaleFeedback };

package/src/utils/elementSizeVars.tsx

@@ -1,112 +0,0 @@
-import * as React from "react";
-
-/**
- * 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.
- */
-
-// One observer for every measured element; created lazily so the module stays
-// importable during SSR.
-let sharedObserver: ResizeObserver | null = null;
-
-function getSharedObserver() {
-  sharedObserver ??= new ResizeObserver((entries) => {
-    // `borderBoxSize` is absent before Safari 15.4, inside the range SEED
-    // supports, so the `offsetWidth` / `offsetHeight` fallback is a live path
-    // rather than a formality. Reading every entry before writing any property
-    // is what keeps it free: layout is already clean when observations are
-    // broadcast, so the reads force nothing, while a write interleaved between
-    // them would dirty layout and make every later read reflow.
-    const measurements = entries.map((entry) => {
-      const element = entry.target as HTMLElement;
-      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.
- */
-export function useElementSizeVars() {
-  // What React last handed the ref, against what the observer is watching. The
-  // two disagree for exactly one commit whenever a ref identity changes, because
-  // React detaches with `null` before re-attaching the very same element.
-  const attachedRef = React.useRef<HTMLElement | null>(null);
-  const observedRef = React.useRef<HTMLElement | null>(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");
-  }, []);
-
-  const sizeVarsRef = React.useCallback(
-    (node: HTMLElement | null) => {
-      attachedRef.current = node;
-
-      if (!node) {
-        // A commit runs to completion synchronously, so this cannot land before
-        // the re-attach that an identity change performs within the same commit.
-        // By the time it runs, the two refs tell a detached element apart from
-        // one that never actually left.
-        queueMicrotask(() => {
-          if (attachedRef.current === observedRef.current) return;
-
-          release();
-        });
-        return;
-      }
-
-      if (observedRef.current === node) return;
-
-      release();
-      observedRef.current = node;
-      // `box` selects which box change marks the element active — it does not
-      // decide which sizes the entry carries (all of them are always present).
-      // Observing the content box would miss a border-box change that leaves the
-      // content box untouched, e.g. a variant that only alters padding.
-      //
-      // Before Safari 15.4 `observe` declares no options at all, so this argument
-      // is dropped and that miss is exactly what happens there. Bounded: the ratio
-      // stays valid, only derived from the last size whose content box moved.
-      getSharedObserver().observe(node, { box: "border-box" });
-    },
-    [release],
-  );
-
-  return { sizeVarsRef };
-}

package/src/utils/scaleFeedback.tsx

@@ -1,128 +0,0 @@
-import { SCALE_FEEDBACK_CLASS_NAME } from "@seed-design/css/scale-feedback";
-import { useComposedRefs } from "@radix-ui/react-compose-refs";
-import { createSlot } from "@radix-ui/react-slot";
-import clsx from "clsx";
-import * as React from "react";
-import { useElementSizeVars } from "./elementSizeVars";
-
-/**
- * Opts an element into scale feedback: put `scaleFeedbackRef` and
- * `scaleFeedbackClassName` on the same element, and it publishes
- * `--seed-feedback-scale`, a ratio that shrinks it by a fixed 2px when consumed.
- * `ScaleFeedback` pairs them up for an element you render; reach for the hook when
- * you can't wrap one, such as inside a component already assembling its own
- * `ref` and `className`.
- *
- * The two halves belong together — the size vars `useElementSizeVars` publishes,
- * and the class that derives the ratio from them — so the hook hands them back
- * as a pair. If one goes missing the derivation stays guaranteed-invalid and
- * `--seed-feedback-scale` resolves to 1: a mistake costs the effect rather than
- * producing a wrong scale.
- *
- * Applying the ratio is yours, because the selector that scales the element is
- * usually the same one that changes its background, and splitting them across
- * two rules lets them fire under different conditions:
- *
- *   .my-button {
- *     transition: background-color 0.2s, var(--seed-feedback-scale-transition);
- *   }
- *   .my-button:active {
- *     background-color: ...;
- *     scale: var(--seed-feedback-scale);
- *   }
- *
- * The resting `scale: 1` comes with the class rather than with the rule above:
- * it keeps the element a stacking context throughout, instead of becoming one
- * mid-press and dragging `position: fixed` descendants with it.
- */
-export function useScaleFeedback() {
-  const { sizeVarsRef } = useElementSizeVars();
-
-  return { scaleFeedbackRef: sizeVarsRef, scaleFeedbackClassName: SCALE_FEEDBACK_CLASS_NAME };
-}
-
-const ScaleFeedbackSlot = createSlot("ScaleFeedback");
-
-export interface ScaleFeedbackProps {
-  children: React.ReactElement;
-}
-
-/**
- * Opts its child into scale feedback, so the ref and the class can no longer
- * land on different elements or go missing one at a time. The child keeps its own
- * `ref` and `className`, and applying the ratio is still yours — see
- * `useScaleFeedback` for the rule this expects you to write.
- *
- * There is no `asChild` prop because rendering an element of our own is never the
- * right answer: that element would be the one measured, and a block wrapper around
- * an inline-block button reports the container's width, so the ratio would come
- * out wrong rather than absent. The resting `scale: 1` would settle on the wrapper
- * too, leaving the child to become a stacking context mid-press.
- */
-export const ScaleFeedback = React.forwardRef<HTMLElement, ScaleFeedbackProps>(
-  ({ children }, ref) => {
-    const { scaleFeedbackRef, scaleFeedbackClassName } = useScaleFeedback();
-
-    const childRef = React.useRef<HTMLElement | null>(null);
-    const composedRef = useComposedRefs(scaleFeedbackRef, childRef, ref);
-
-    React.useEffect(() => {
-      if (process.env.NODE_ENV === "production") return;
-
-      // Slot throws on children it can't slot onto, but a Fragment child is a valid
-      // element it silently declines to hand a ref to, and a component child is free
-      // to drop what it is handed. Both leave a ratio of 1 and no other trace.
-      const node = childRef.current;
-      if (!node) {
-        console.warn(
-          "ScaleFeedback: the child never forwarded `ref` to a DOM element, so its size is never measured. A Fragment cannot receive one.",
-        );
-        return;
-      }
-
-      if (!node.classList.contains(SCALE_FEEDBACK_CLASS_NAME)) {
-        console.warn(
-          "ScaleFeedback: the child dropped the `className` it was handed, so no ratio is derived. Forward `className` to the element that takes `ref`.",
-        );
-      }
-    }, []);
-
-    return (
-      <ScaleFeedbackSlot ref={composedRef} className={scaleFeedbackClassName}>
-        {children}
-      </ScaleFeedbackSlot>
-    );
-  },
-);
-
-ScaleFeedback.displayName = "ScaleFeedback";
-
-/**
- * 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;
-}