@geomak/ui 7.7.3 → 7.7.4

package/dist/index.d.cts

@@ -2084,22 +2084,22 @@ interface ListProps {
 declare function List({ items, onItemClick, activeKey, density, className, style, }: ListProps): react_jsx_runtime.JSX.Element;
 
 interface ScalableContainerProps {
-    /** Resting width. Any CSS length / percent. Default `'100%'`. */
+    /**
+     * Resting width. Optional — when omitted, the resting size is left to your
+     * own `className` / parent layout (so the container can sit in a fluid grid
+     * sized by `w-[…]` classes). Only set this if you want an inline width.
+     */
     width?: react__default.CSSProperties['width'];
-    /** Resting height. Any CSS length / percent. Default `'auto'`. */
+    /** Resting height. Optional — see {@link ScalableContainerProps.width}. */
     height?: react__default.CSSProperties['height'];
     /**
-     * Width when expanded. A concrete value (e.g. `900` or `'60rem'`) makes the
-     * container grow even when its resting width is `'100%'` inside a flex/grid
-     * cell. Falls back to {@link ScalableContainerProps.expandedWidth}, then
-     * `'100%'`.
+     * Width when expanded. Default `'100%'`. Use `'100%'` to span the full row
+     * of a flex/grid so the container pushes its neighbours onto the next
+     * row(s); a concrete value (e.g. `900`) grows it to that exact width.
      */
     targetWidth?: react__default.CSSProperties['width'];
-    /**
-     * Height when expanded. A concrete value (e.g. `600`) lets the container
-     * grow taller and push whatever sits below it further down. Falls back to
-     * {@link ScalableContainerProps.expandedHeight}, then `'100%'`.
-     */
+    /** Height when expanded. Default `'100%'`. A concrete value (e.g. `580`)
+     *  grows the container taller and pushes whatever follows further down. */
     targetHeight?: react__default.CSSProperties['height'];
     /** @deprecated Use `targetWidth`. */
     expandedWidth?: react__default.CSSProperties['width'];
@@ -2130,24 +2130,31 @@ interface ScalableContainerProps {
     className?: string;
 }
 /**
- * Container that smoothly grows to a target size on click and collapses back.
- * Reads like an OS window resize — subtle elevation lift, smooth scale, no
- * colour change.
- *
- * Expansion grows the container's OWN box to `targetWidth` × `targetHeight` and
- * makes it `flex-none` while expanded, so it holds that size and simply pushes
- * its neighbours along the flow — they keep their own dimensions and reflow
- * (e.g. wrap onto the next row / move down) rather than being squeezed. Nothing
- * on sibling elements is mutated, so layouts restore exactly on collapse. For
- * neighbours to reflow *below*, give the parent room to wrap (e.g. a
- * `flex flex-wrap` row, or block/auto-rows-grid flow).
+ * Container that grows to a target size on click and collapses back. Reads like
+ * an OS window resize — subtle elevation lift, smooth size transition.
+ *
+ * **Resting size comes from your layout, not from props.** Leave `width`/`height`
+ * unset and size the container with your own `className` (e.g. a fluid grid:
+ * `w-full lg:w-[calc(50%-6px)]`). Only when expanded does the container write an
+ * inline `width`/`height` (= `targetWidth`/`targetHeight`) and go `flex: none`,
+ * so it grows to that size and simply **pushes its neighbours along the flow** —
+ * they keep their own dimensions and reflow (wrap / move down). On collapse the
+ * inline sizing is removed and your className layout takes back over. No sibling
+ * styles are ever touched.
+ *
+ * For neighbours to reflow *below* the expanded one, the parent must be able to
+ * wrap — a `flex flex-wrap` row is the simplest; with `targetWidth="100%"` the
+ * expanded item takes a full row and everything after it moves down.
  *
  * @example
  * ```tsx
- * // In a flex-wrap chart grid — expands to a concrete size and pushes the rest down.
- * <div className="flex flex-wrap gap-2">
- *   <ScalableContainer width="100%" height={240} targetWidth="100%" targetHeight={520}>
- *     <Chart data={metrics} />
+ * <div className="flex flex-wrap gap-3">
+ *   <ScalableContainer
+ *     className="w-full lg:w-[calc(50%-6px)]"   // resting size — your grid
+ *     height={300}                              // resting height
+ *     targetWidth="100%" targetHeight={580}     // expanded size
+ *   >
+ *     <Chart … />
  *   </ScalableContainer>
  *   …
  * </div>

package/dist/index.d.ts

@@ -2084,22 +2084,22 @@ interface ListProps {
 declare function List({ items, onItemClick, activeKey, density, className, style, }: ListProps): react_jsx_runtime.JSX.Element;
 
 interface ScalableContainerProps {
-    /** Resting width. Any CSS length / percent. Default `'100%'`. */
+    /**
+     * Resting width. Optional — when omitted, the resting size is left to your
+     * own `className` / parent layout (so the container can sit in a fluid grid
+     * sized by `w-[…]` classes). Only set this if you want an inline width.
+     */
     width?: react__default.CSSProperties['width'];
-    /** Resting height. Any CSS length / percent. Default `'auto'`. */
+    /** Resting height. Optional — see {@link ScalableContainerProps.width}. */
     height?: react__default.CSSProperties['height'];
     /**
-     * Width when expanded. A concrete value (e.g. `900` or `'60rem'`) makes the
-     * container grow even when its resting width is `'100%'` inside a flex/grid
-     * cell. Falls back to {@link ScalableContainerProps.expandedWidth}, then
-     * `'100%'`.
+     * Width when expanded. Default `'100%'`. Use `'100%'` to span the full row
+     * of a flex/grid so the container pushes its neighbours onto the next
+     * row(s); a concrete value (e.g. `900`) grows it to that exact width.
      */
     targetWidth?: react__default.CSSProperties['width'];
-    /**
-     * Height when expanded. A concrete value (e.g. `600`) lets the container
-     * grow taller and push whatever sits below it further down. Falls back to
-     * {@link ScalableContainerProps.expandedHeight}, then `'100%'`.
-     */
+    /** Height when expanded. Default `'100%'`. A concrete value (e.g. `580`)
+     *  grows the container taller and pushes whatever follows further down. */
     targetHeight?: react__default.CSSProperties['height'];
     /** @deprecated Use `targetWidth`. */
     expandedWidth?: react__default.CSSProperties['width'];
@@ -2130,24 +2130,31 @@ interface ScalableContainerProps {
     className?: string;
 }
 /**
- * Container that smoothly grows to a target size on click and collapses back.
- * Reads like an OS window resize — subtle elevation lift, smooth scale, no
- * colour change.
- *
- * Expansion grows the container's OWN box to `targetWidth` × `targetHeight` and
- * makes it `flex-none` while expanded, so it holds that size and simply pushes
- * its neighbours along the flow — they keep their own dimensions and reflow
- * (e.g. wrap onto the next row / move down) rather than being squeezed. Nothing
- * on sibling elements is mutated, so layouts restore exactly on collapse. For
- * neighbours to reflow *below*, give the parent room to wrap (e.g. a
- * `flex flex-wrap` row, or block/auto-rows-grid flow).
+ * Container that grows to a target size on click and collapses back. Reads like
+ * an OS window resize — subtle elevation lift, smooth size transition.
+ *
+ * **Resting size comes from your layout, not from props.** Leave `width`/`height`
+ * unset and size the container with your own `className` (e.g. a fluid grid:
+ * `w-full lg:w-[calc(50%-6px)]`). Only when expanded does the container write an
+ * inline `width`/`height` (= `targetWidth`/`targetHeight`) and go `flex: none`,
+ * so it grows to that size and simply **pushes its neighbours along the flow** —
+ * they keep their own dimensions and reflow (wrap / move down). On collapse the
+ * inline sizing is removed and your className layout takes back over. No sibling
+ * styles are ever touched.
+ *
+ * For neighbours to reflow *below* the expanded one, the parent must be able to
+ * wrap — a `flex flex-wrap` row is the simplest; with `targetWidth="100%"` the
+ * expanded item takes a full row and everything after it moves down.
  *
  * @example
  * ```tsx
- * // In a flex-wrap chart grid — expands to a concrete size and pushes the rest down.
- * <div className="flex flex-wrap gap-2">
- *   <ScalableContainer width="100%" height={240} targetWidth="100%" targetHeight={520}>
- *     <Chart data={metrics} />
+ * <div className="flex flex-wrap gap-3">
+ *   <ScalableContainer
+ *     className="w-full lg:w-[calc(50%-6px)]"   // resting size — your grid
+ *     height={300}                              // resting height
+ *     targetWidth="100%" targetHeight={580}     // expanded size
+ *   >
+ *     <Chart … />
  *   </ScalableContainer>
  *   …
  * </div>

package/dist/index.js

@@ -4655,8 +4655,8 @@ var TOGGLE_POSITION_CLASS = {
   "bottom-right": "bottom-2 right-2"
 };
 function ScalableContainer({
-  width = "100%",
-  height = "auto",
+  width,
+  height,
   targetWidth,
   targetHeight,
   expandedWidth = "100%",
@@ -4705,25 +4705,20 @@ function ScalableContainer({
   };
   const wrapperClass = isScaled ? assignClassOnClick : void 0;
   return /* @__PURE__ */ jsxs(
-    motion.div,
+    "div",
     {
       ref: containerRef,
       style: {
         width: isScaled ? expandW : width,
         height: isScaled ? expandH : height,
-        flex: isScaled ? "none" : void 0
-      },
-      animate: { width: isScaled ? expandW : width, height: isScaled ? expandH : height },
-      transition: reduced ? { duration: 0 } : {
-        width: { type: "tween", duration: 0.32, ease: [0.16, 1, 0.3, 1] },
-        height: { type: "tween", duration: 0.32, ease: [0.16, 1, 0.3, 1] }
+        ...isScaled ? { flex: "none" } : null
       },
       className: cx(
         "relative rounded-lg overflow-hidden",
+        "transition-[width,height,box-shadow] duration-[320ms] ease-[cubic-bezier(0.16,1,0.3,1)] motion-reduce:transition-none",
         // OS-window aesthetic: subtle elevation at rest, lifted shadow +
         // raised stacking when expanded so it sits above neighbours.
         isScaled ? "z-raised shadow-2xl" : "shadow-md",
-        "transition-shadow duration-300",
         className
       ),
       children: [