concertina 0.13.0 → 0.13.1

package/dist/accordion.cjs

@@ -1351,6 +1351,7 @@ function injectStyles() {
   document.head.appendChild(style);
   injected = true;
 }
+injectStyles();
 
 // src/accordion/content.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");

package/dist/accordion.js

@@ -8,7 +8,7 @@ import {
   Trigger2,
   useConcertina,
   useExpanded
-} from "./chunk-OGJMPKZX.js";
+} from "./chunk-6UMIJ4S7.js";
 export {
   ConcertinaContext,
   ConcertinaStore,

package/dist/{chunk-OGJMPKZX.js → chunk-6UMIJ4S7.js}

@@ -1312,6 +1312,7 @@ function injectStyles() {
   document.head.appendChild(style);
   injected = true;
 }
+injectStyles();
 
 // src/accordion/content.tsx
 import { jsx as jsx10 } from "react/jsx-runtime";

package/dist/index.cjs

@@ -1373,6 +1373,7 @@ function injectStyles() {
   document.head.appendChild(style);
   injected = true;
 }
+injectStyles();
 
 // src/accordion/content.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
@@ -1438,9 +1439,6 @@ var Slot = (0, import_react12.forwardRef)(
   }
 );
 
-// src/components/hum.tsx
-var import_react14 = require("react");
-
 // src/components/vamp.tsx
 var import_react13 = require("react");
 var import_jsx_runtime14 = require("react/jsx-runtime");
@@ -1454,34 +1452,31 @@ function Vamp({ loading, children }) {
 
 // src/components/hum.tsx
 var import_jsx_runtime15 = require("react/jsx-runtime");
-var Hum = (0, import_react14.forwardRef)(
-  function Hum2({ loading, as: Tag = "span", className, children, ...props }, ref) {
-    (0, import_react14.useInsertionEffect)(injectStyles, []);
-    const vampLoading = useVamp();
-    const isLoading = loading ?? vampLoading;
-    if (isLoading) {
-      const merged = className ? `concertina-warmup-line ${className}` : "concertina-warmup-line";
-      return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Tag, { ref, className: merged, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Tag, { inert: true, children }) });
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Tag, { ref, className, ...props, children });
+function Hum({ loading, as: Tag = "span", className, children, ...props }) {
+  const vampLoading = useVamp();
+  const isLoading = loading ?? vampLoading;
+  if (isLoading) {
+    const merged = className ? `concertina-warmup-line ${className}` : "concertina-warmup-line";
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Tag, { className: merged, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Tag, { inert: true, children }) });
   }
-);
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Tag, { className, ...props, children });
+}
 
 // src/components/overture.tsx
-var import_react18 = require("react");
+var import_react17 = require("react");
 
 // src/components/gigbag.tsx
-var import_react16 = require("react");
+var import_react15 = require("react");
 
 // src/primitives/use-stable-slot.ts
-var import_react15 = require("react");
+var import_react14 = require("react");
 var RATCHET_FLOOR = -Infinity;
 function useStableSlot(options = {}) {
   const { axis = "both" } = options;
-  const [style, setStyle] = (0, import_react15.useState)({});
-  const maxRef = (0, import_react15.useRef)({ w: RATCHET_FLOOR, h: RATCHET_FLOOR });
-  const observerRef = (0, import_react15.useRef)(null);
-  const ref = (0, import_react15.useCallback)(
+  const [style, setStyle] = (0, import_react14.useState)({});
+  const maxRef = (0, import_react14.useRef)({ w: RATCHET_FLOOR, h: RATCHET_FLOOR });
+  const observerRef = (0, import_react14.useRef)(null);
+  const ref = (0, import_react14.useCallback)(
     (el) => {
       if (observerRef.current) {
         observerRef.current.disconnect();
@@ -1529,9 +1524,9 @@ function useStableSlot(options = {}) {
 
 // src/components/gigbag.tsx
 var import_jsx_runtime16 = require("react/jsx-runtime");
-var Gigbag = (0, import_react16.forwardRef)(
+var Gigbag = (0, import_react15.forwardRef)(
   function Gigbag2({ axis = "height", as: Tag = "div", className, style, children, ...props }, fwdRef) {
-    (0, import_react16.useInsertionEffect)(injectStyles, []);
+    (0, import_react15.useInsertionEffect)(injectStyles, []);
     const { ref: ratchetRef, style: ratchetStyle } = useStableSlot({ axis });
     const merged = className ? `concertina-gigbag ${className}` : "concertina-gigbag";
     return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
@@ -1548,11 +1543,11 @@ var Gigbag = (0, import_react16.forwardRef)(
 );
 
 // src/primitives/use-warmup-exit.ts
-var import_react17 = require("react");
+var import_react16 = require("react");
 function useWarmupExit(loading, duration) {
-  const [exiting, setExiting] = (0, import_react17.useState)(false);
-  const prevLoading = (0, import_react17.useRef)(loading);
-  (0, import_react17.useEffect)(() => {
+  const [exiting, setExiting] = (0, import_react16.useState)(false);
+  const prevLoading = (0, import_react16.useRef)(loading);
+  (0, import_react16.useEffect)(() => {
     if (prevLoading.current && !loading) {
       setExiting(true);
       const id = setTimeout(() => setExiting(false), duration);
@@ -1571,9 +1566,9 @@ function useWarmupExit(loading, duration) {
 
 // src/components/overture.tsx
 var import_jsx_runtime17 = require("react/jsx-runtime");
-var Overture = (0, import_react18.forwardRef)(
+var Overture = (0, import_react17.forwardRef)(
   function Overture2({ loading, exitDuration, as: Tag = "div", className, children, ...props }, ref) {
-    (0, import_react18.useInsertionEffect)(injectStyles, []);
+    (0, import_react17.useInsertionEffect)(injectStyles, []);
     const { showWarmup, exiting } = useWarmupExit(loading, exitDuration);
     const merged = exiting ? className ? `concertina-warmup-exiting ${className}` : "concertina-warmup-exiting" : className;
     return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Gigbag, { ref, axis: "height", as: Tag, className: merged, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Vamp, { loading: showWarmup, children }) });
@@ -1581,14 +1576,14 @@ var Overture = (0, import_react18.forwardRef)(
 );
 
 // src/components/ensemble.tsx
-var import_react20 = require("react");
+var import_react19 = require("react");
 
 // src/components/warmup.tsx
-var import_react19 = require("react");
+var import_react18 = require("react");
 var import_jsx_runtime18 = require("react/jsx-runtime");
-var Warmup = (0, import_react19.forwardRef)(
+var Warmup = (0, import_react18.forwardRef)(
   function Warmup2({ rows, columns, as: Tag = "div", className, children, ...props }, ref) {
-    (0, import_react19.useInsertionEffect)(injectStyles, []);
+    (0, import_react18.useInsertionEffect)(injectStyles, []);
     const merged = className ? `concertina-warmup ${className}` : "concertina-warmup";
     const count2 = columns ? rows * columns : rows;
     const cells = Array.from({ length: count2 }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "concertina-warmup-bone", children: [
@@ -1621,33 +1616,33 @@ function EnsembleInner({
   className,
   ...props
 }, ref) {
-  (0, import_react20.useInsertionEffect)(injectStyles, []);
+  (0, import_react19.useInsertionEffect)(injectStyles, []);
   const { showWarmup, exiting } = useWarmupExit(loading, exitDuration);
   const warmupClass = exiting ? className ? `concertina-warmup-exiting ${className}` : "concertina-warmup-exiting" : className;
   return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Gigbag, { ref, axis: "height", as: Tag, ...props, children: showWarmup ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Warmup, { rows: stubCount, className: warmupClass }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Tag, { className, children: items.map(renderItem) }) });
 }
-var Ensemble = (0, import_react20.forwardRef)(EnsembleInner);
+var Ensemble = (0, import_react19.forwardRef)(EnsembleInner);
 
 // src/components/warmup-line.tsx
-var import_react21 = require("react");
+var import_react20 = require("react");
 var import_jsx_runtime20 = require("react/jsx-runtime");
-var WarmupLine = (0, import_react21.forwardRef)(
+var WarmupLine = (0, import_react20.forwardRef)(
   function WarmupLine2({ as: Tag = "div", className, ...props }, ref) {
-    (0, import_react21.useInsertionEffect)(injectStyles, []);
+    (0, import_react20.useInsertionEffect)(injectStyles, []);
     const merged = className ? `concertina-warmup-line ${className}` : "concertina-warmup-line";
     return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Tag, { ref, className: merged, ...props });
   }
 );
 
 // src/components/glide.tsx
-var import_react23 = require("react");
+var import_react22 = require("react");
 
 // src/primitives/use-presence.ts
-var import_react22 = require("react");
+var import_react21 = require("react");
 function usePresence2(show) {
-  const [mounted, setMounted] = (0, import_react22.useState)(show);
-  const [phase, setPhase] = (0, import_react22.useState)(show ? "entered" : "exiting");
-  (0, import_react22.useEffect)(() => {
+  const [mounted, setMounted] = (0, import_react21.useState)(show);
+  const [phase, setPhase] = (0, import_react21.useState)(show ? "entered" : "exiting");
+  (0, import_react21.useEffect)(() => {
     if (show) {
       setMounted(true);
       setPhase("entering");
@@ -1655,7 +1650,7 @@ function usePresence2(show) {
       setPhase("exiting");
     }
   }, [show]);
-  const onAnimationEnd = (0, import_react22.useCallback)(
+  const onAnimationEnd = (0, import_react21.useCallback)(
     (e) => {
       if (e.target !== e.currentTarget) return;
       if (phase === "entering") setPhase("entered");
@@ -1668,9 +1663,9 @@ function usePresence2(show) {
 
 // src/components/glide.tsx
 var import_jsx_runtime21 = require("react/jsx-runtime");
-var Glide = (0, import_react23.forwardRef)(
+var Glide = (0, import_react22.forwardRef)(
   function Glide2({ show, as: Tag = "div", className, children, ...props }, ref) {
-    (0, import_react23.useInsertionEffect)(injectStyles, []);
+    (0, import_react22.useInsertionEffect)(injectStyles, []);
     const { mounted, phase, onAnimationEnd } = usePresence2(show);
     if (!mounted) return null;
     const phaseClass = phase === "entering" ? "concertina-glide-entering" : phase === "exiting" ? "concertina-glide-exiting" : "";
@@ -1689,12 +1684,12 @@ var Glide = (0, import_react23.forwardRef)(
 );
 
 // src/primitives/use-size.ts
-var import_react24 = require("react");
+var import_react23 = require("react");
 var NO_OBSERVATION = { width: Number.NaN, height: Number.NaN };
 function useSize() {
-  const [size, setSize] = (0, import_react24.useState)(NO_OBSERVATION);
-  const observerRef = (0, import_react24.useRef)(null);
-  const ref = (0, import_react24.useCallback)((el) => {
+  const [size, setSize] = (0, import_react23.useState)(NO_OBSERVATION);
+  const observerRef = (0, import_react23.useRef)(null);
+  const ref = (0, import_react23.useCallback)((el) => {
     if (observerRef.current) {
       observerRef.current.disconnect();
       observerRef.current = null;
@@ -1723,12 +1718,12 @@ function useSize() {
 }
 
 // src/accordion/use-concertina.ts
-var import_react25 = require("react");
+var import_react24 = require("react");
 function useConcertina() {
-  const [value, setValue] = (0, import_react25.useState)("");
-  const [switching, setSwitching] = (0, import_react25.useState)(false);
-  const itemRefs = (0, import_react25.useRef)({});
-  const onValueChange = (0, import_react25.useCallback)(
+  const [value, setValue] = (0, import_react24.useState)("");
+  const [switching, setSwitching] = (0, import_react24.useState)(false);
+  const itemRefs = (0, import_react24.useRef)({});
+  const onValueChange = (0, import_react24.useCallback)(
     (newValue) => {
       if (!newValue) {
         setSwitching(false);
@@ -1740,14 +1735,14 @@ function useConcertina() {
     },
     [value]
   );
-  (0, import_react25.useLayoutEffect)(() => {
+  (0, import_react24.useLayoutEffect)(() => {
     if (!value) return;
     pinToScrollTop(itemRefs.current[value]);
   }, [value]);
-  (0, import_react25.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (switching) setSwitching(false);
   }, [switching]);
-  const getItemRef = (0, import_react25.useCallback)(
+  const getItemRef = (0, import_react24.useCallback)(
     (id) => (el) => {
       itemRefs.current[id] = el;
     },

package/dist/index.d.cts

@@ -65,7 +65,7 @@ interface HumProps extends HTMLAttributes<HTMLElement> {
  * nearest `<Vamp>` ancestor. This lets a single provider control
  * shimmer state for an entire subtree.
  */
-declare const Hum: react.ForwardRefExoticComponent<HumProps & react.RefAttributes<HTMLElement>>;
+declare function Hum({ loading, as: Tag, className, children, ...props }: HumProps): react_jsx_runtime.JSX.Element;
 
 /** Context carrying the ambient loading state set by Vamp. */
 declare const VampContext: react.Context<boolean>;

package/dist/index.d.ts

@@ -65,7 +65,7 @@ interface HumProps extends HTMLAttributes<HTMLElement> {
  * nearest `<Vamp>` ancestor. This lets a single provider control
  * shimmer state for an entire subtree.
  */
-declare const Hum: react.ForwardRefExoticComponent<HumProps & react.RefAttributes<HTMLElement>>;
+declare function Hum({ loading, as: Tag, className, children, ...props }: HumProps): react_jsx_runtime.JSX.Element;
 
 /** Context carrying the ambient loading state set by Vamp. */
 declare const VampContext: react.Context<boolean>;

package/dist/index.js

@@ -13,7 +13,7 @@ import {
   useExpanded,
   useScrollPin,
   useTransitionLock
-} from "./chunk-OGJMPKZX.js";
+} from "./chunk-6UMIJ4S7.js";
 
 // src/components/bellows.tsx
 import {
@@ -60,12 +60,6 @@ var Slot = forwardRef2(
   }
 );
 
-// src/components/hum.tsx
-import {
-  forwardRef as forwardRef3,
-  useInsertionEffect as useInsertionEffect3
-} from "react";
-
 // src/components/vamp.tsx
 import { createContext as createContext2, useContext as useContext2 } from "react";
 import { jsx as jsx3 } from "react/jsx-runtime";
@@ -79,27 +73,24 @@ function Vamp({ loading, children }) {
 
 // src/components/hum.tsx
 import { jsx as jsx4 } from "react/jsx-runtime";
-var Hum = forwardRef3(
-  function Hum2({ loading, as: Tag = "span", className, children, ...props }, ref) {
-    useInsertionEffect3(injectStyles, []);
-    const vampLoading = useVamp();
-    const isLoading = loading ?? vampLoading;
-    if (isLoading) {
-      const merged = className ? `concertina-warmup-line ${className}` : "concertina-warmup-line";
-      return /* @__PURE__ */ jsx4(Tag, { ref, className: merged, ...props, children: /* @__PURE__ */ jsx4(Tag, { inert: true, children }) });
-    }
-    return /* @__PURE__ */ jsx4(Tag, { ref, className, ...props, children });
+function Hum({ loading, as: Tag = "span", className, children, ...props }) {
+  const vampLoading = useVamp();
+  const isLoading = loading ?? vampLoading;
+  if (isLoading) {
+    const merged = className ? `concertina-warmup-line ${className}` : "concertina-warmup-line";
+    return /* @__PURE__ */ jsx4(Tag, { className: merged, ...props, children: /* @__PURE__ */ jsx4(Tag, { inert: true, children }) });
   }
-);
+  return /* @__PURE__ */ jsx4(Tag, { className, ...props, children });
+}
 
 // src/components/overture.tsx
 import {
-  forwardRef as forwardRef5,
-  useInsertionEffect as useInsertionEffect5
+  forwardRef as forwardRef4,
+  useInsertionEffect as useInsertionEffect4
 } from "react";
 
 // src/components/gigbag.tsx
-import { forwardRef as forwardRef4, useInsertionEffect as useInsertionEffect4 } from "react";
+import { forwardRef as forwardRef3, useInsertionEffect as useInsertionEffect3 } from "react";
 
 // src/primitives/use-stable-slot.ts
 import { useState, useCallback, useRef } from "react";
@@ -157,9 +148,9 @@ function useStableSlot(options = {}) {
 
 // src/components/gigbag.tsx
 import { jsx as jsx5 } from "react/jsx-runtime";
-var Gigbag = forwardRef4(
+var Gigbag = forwardRef3(
   function Gigbag2({ axis = "height", as: Tag = "div", className, style, children, ...props }, fwdRef) {
-    useInsertionEffect4(injectStyles, []);
+    useInsertionEffect3(injectStyles, []);
     const { ref: ratchetRef, style: ratchetStyle } = useStableSlot({ axis });
     const merged = className ? `concertina-gigbag ${className}` : "concertina-gigbag";
     return /* @__PURE__ */ jsx5(
@@ -199,9 +190,9 @@ function useWarmupExit(loading, duration) {
 
 // src/components/overture.tsx
 import { jsx as jsx6 } from "react/jsx-runtime";
-var Overture = forwardRef5(
+var Overture = forwardRef4(
   function Overture2({ loading, exitDuration, as: Tag = "div", className, children, ...props }, ref) {
-    useInsertionEffect5(injectStyles, []);
+    useInsertionEffect4(injectStyles, []);
     const { showWarmup, exiting } = useWarmupExit(loading, exitDuration);
     const merged = exiting ? className ? `concertina-warmup-exiting ${className}` : "concertina-warmup-exiting" : className;
     return /* @__PURE__ */ jsx6(Gigbag, { ref, axis: "height", as: Tag, className: merged, ...props, children: /* @__PURE__ */ jsx6(Vamp, { loading: showWarmup, children }) });
@@ -210,16 +201,16 @@ var Overture = forwardRef5(
 
 // src/components/ensemble.tsx
 import {
-  forwardRef as forwardRef7,
-  useInsertionEffect as useInsertionEffect7
+  forwardRef as forwardRef6,
+  useInsertionEffect as useInsertionEffect6
 } from "react";
 
 // src/components/warmup.tsx
-import { forwardRef as forwardRef6, useInsertionEffect as useInsertionEffect6 } from "react";
+import { forwardRef as forwardRef5, useInsertionEffect as useInsertionEffect5 } from "react";
 import { jsx as jsx7, jsxs } from "react/jsx-runtime";
-var Warmup = forwardRef6(
+var Warmup = forwardRef5(
   function Warmup2({ rows, columns, as: Tag = "div", className, children, ...props }, ref) {
-    useInsertionEffect6(injectStyles, []);
+    useInsertionEffect5(injectStyles, []);
     const merged = className ? `concertina-warmup ${className}` : "concertina-warmup";
     const count = columns ? rows * columns : rows;
     const cells = Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsxs("div", { className: "concertina-warmup-bone", children: [
@@ -252,19 +243,19 @@ function EnsembleInner({
   className,
   ...props
 }, ref) {
-  useInsertionEffect7(injectStyles, []);
+  useInsertionEffect6(injectStyles, []);
   const { showWarmup, exiting } = useWarmupExit(loading, exitDuration);
   const warmupClass = exiting ? className ? `concertina-warmup-exiting ${className}` : "concertina-warmup-exiting" : className;
   return /* @__PURE__ */ jsx8(Gigbag, { ref, axis: "height", as: Tag, ...props, children: showWarmup ? /* @__PURE__ */ jsx8(Warmup, { rows: stubCount, className: warmupClass }) : /* @__PURE__ */ jsx8(Tag, { className, children: items.map(renderItem) }) });
 }
-var Ensemble = forwardRef7(EnsembleInner);
+var Ensemble = forwardRef6(EnsembleInner);
 
 // src/components/warmup-line.tsx
-import { forwardRef as forwardRef8, useInsertionEffect as useInsertionEffect8 } from "react";
+import { forwardRef as forwardRef7, useInsertionEffect as useInsertionEffect7 } from "react";
 import { jsx as jsx9 } from "react/jsx-runtime";
-var WarmupLine = forwardRef8(
+var WarmupLine = forwardRef7(
   function WarmupLine2({ as: Tag = "div", className, ...props }, ref) {
-    useInsertionEffect8(injectStyles, []);
+    useInsertionEffect7(injectStyles, []);
     const merged = className ? `concertina-warmup-line ${className}` : "concertina-warmup-line";
     return /* @__PURE__ */ jsx9(Tag, { ref, className: merged, ...props });
   }
@@ -272,8 +263,8 @@ var WarmupLine = forwardRef8(
 
 // src/components/glide.tsx
 import {
-  forwardRef as forwardRef9,
-  useInsertionEffect as useInsertionEffect9
+  forwardRef as forwardRef8,
+  useInsertionEffect as useInsertionEffect8
 } from "react";
 
 // src/primitives/use-presence.ts
@@ -306,9 +297,9 @@ function usePresence(show) {
 
 // src/components/glide.tsx
 import { jsx as jsx10 } from "react/jsx-runtime";
-var Glide = forwardRef9(
+var Glide = forwardRef8(
   function Glide2({ show, as: Tag = "div", className, children, ...props }, ref) {
-    useInsertionEffect9(injectStyles, []);
+    useInsertionEffect8(injectStyles, []);
     const { mounted, phase, onAnimationEnd } = usePresence(show);
     if (!mounted) return null;
     const phaseClass = phase === "entering" ? "concertina-glide-entering" : phase === "exiting" ? "concertina-glide-exiting" : "";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "concertina",
-  "version": "0.13.0",
+  "version": "0.13.1",
   "description": "React toolkit for layout stability.",
   "type": "module",
   "main": "./dist/index.cjs",