@geomak/ui 7.6.3 → 7.7.1

package/dist/index.d.cts

@@ -503,6 +503,10 @@ interface ModalProps {
     onCancel?: () => void;
     okText?: string;
     cancelText?: string;
+    /** Visual variant of the Ok button. Default `'primary'`. */
+    okVariant?: ButtonProps['variant'];
+    /** Visual variant of the Cancel button. Default `'ghost'`. */
+    cancelVariant?: ButtonProps['variant'];
     hasFooter?: boolean;
     title?: react__default.ReactNode;
     children?: react__default.ReactNode;
@@ -521,7 +525,7 @@ interface ModalProps {
  *   Are you sure you want to delete this item?
  * </Modal>
  */
-declare function Modal({ width, size, open, onClose, onOk, onCancel, okText, cancelText, hasFooter, title, children, className, }: ModalProps): react_jsx_runtime.JSX.Element;
+declare function Modal({ width, size, open, onClose, onOk, onCancel, okText, cancelText, okVariant, cancelVariant, hasFooter, title, children, className, }: ModalProps): react_jsx_runtime.JSX.Element;
 
 type DrawerSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
 interface DrawerProps {
@@ -542,6 +546,10 @@ interface DrawerProps {
     width?: number | string;
     okText?: string;
     cancelText?: string;
+    /** Visual variant of the Ok button. Default `'primary'`. */
+    okVariant?: ButtonProps['variant'];
+    /** Visual variant of the Cancel button. Default `'ghost'`. */
+    cancelVariant?: ButtonProps['variant'];
     onOk?: () => void;
     onCancel?: () => void;
     title?: react__default.ReactNode;
@@ -561,7 +569,7 @@ interface DrawerProps {
  *   <FilterForm />
  * </Drawer>
  */
-declare function Drawer({ open, onClose, hasFooter, placement, size, width, okText, cancelText, onOk, onCancel, title, children, className, }: DrawerProps): react_jsx_runtime.JSX.Element;
+declare function Drawer({ open, onClose, hasFooter, placement, size, width, okText, cancelText, okVariant, cancelVariant, onOk, onCancel, title, children, className, }: DrawerProps): react_jsx_runtime.JSX.Element;
 
 interface TooltipProps {
     children: react__default.ReactNode;
@@ -697,6 +705,9 @@ interface TreeNode {
     nodeData?: any;
     parentLabel?: string;
     children?: TreeNode[];
+    /** Leading icon. On leaves it replaces the default bullet; on parents it
+     *  renders between the chevron and the label. */
+    icon?: react__default.ReactNode;
 }
 interface TreeItemClickPayload {
     isParent: boolean;
@@ -710,6 +721,9 @@ interface TreeProps {
     onNodeClick: (payload: TreeItemClickPayload) => void;
     defaultExpandAll?: boolean;
     defaultExpandedKeys?: string[];
+    /** Default leading icon for every leaf (instead of the bullet dot). A
+     *  node's own `icon` takes precedence. */
+    leafIcon?: react__default.ReactNode;
     /** Extra classes merged onto the tree root. */
     className?: string;
     /** Inline style on the tree root. */
@@ -730,7 +744,7 @@ interface TreeProps {
  *   defaultExpandAll
  * />
  */
-declare function Tree({ nodes, onNodeClick, defaultExpandAll, defaultExpandedKeys, className, style, }: TreeProps): react_jsx_runtime.JSX.Element;
+declare function Tree({ nodes, onNodeClick, defaultExpandAll, defaultExpandedKeys, leafIcon, className, style, }: TreeProps): react_jsx_runtime.JSX.Element;
 
 type AccordionVariant = 'separated' | 'contained';
 interface AccordionProps {
@@ -2074,10 +2088,22 @@ interface ScalableContainerProps {
     width?: react__default.CSSProperties['width'];
     /** Resting height. Any CSS length / percent. Default `'auto'`. */
     height?: react__default.CSSProperties['height'];
-    /** Width when expanded. Default `'100%'` (fills parent). */
+    /**
+     * 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%'`.
+     */
+    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%'`.
+     */
+    targetHeight?: react__default.CSSProperties['height'];
+    /** @deprecated Use `targetWidth`. */
     expandedWidth?: react__default.CSSProperties['width'];
-    /** Height when expanded. Default `'100%'`. Set a concrete value (e.g. 420)
-     *  when the container lives in normal flow and should push siblings down. */
+    /** @deprecated Use `targetHeight`. */
     expandedHeight?: react__default.CSSProperties['height'];
     /** Controlled expanded state. */
     expanded?: boolean;
@@ -2096,60 +2122,38 @@ interface ScalableContainerProps {
      * Default `'top-right'` — matches the OS-window convention.
      */
     togglePosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
-    /**
-     * Bounding element the expansion is allowed to grow within. When the
-     * container sits in size-constrained flex-item wrappers (where width /
-     * height 100% makes expand-in-place a no-op), providing this ref switches
-     * to PUSH expansion: the container's row becomes `flex-wrap: wrap` and the
-     * container takes the FULL parent width (`flex-basis: 100%`), so sibling
-     * charts reflow below it at full width — pushed, visible, and intact.
-     * Column levels between the container and this element get `flex-grow`
-     * raised so the expanded row dominates vertically too. Collapsing
-     * restores the wrappers' original sizing exactly. Omit for the classic
-     * expand-in-place behaviour.
-     */
+    /** @deprecated No longer used — set `targetWidth`/`targetHeight` instead. */
     expandContainerRef?: react__default.RefObject<HTMLElement | null>;
-    /**
-     * Vertical dominance of the pushed expansion (push mode only). Default
-     * `3` — the expanded chart keeps expandRatio/(expandRatio+1) of its row's
-     * height (and its row takes expandRatio parts per sibling row), leaving
-     * the reflowed siblings the remainder. Raise for a more fullscreen feel,
-     * lower for a gentler split.
-     */
+    /** @deprecated No longer used — set `targetWidth`/`targetHeight` instead. */
     expandRatio?: number;
     /** Extra classes merged onto the container root. */
     className?: string;
 }
 /**
- * Container that smoothly expands on click and collapses back to its
- * resting size. Reads like a macOS / Windows window resizing — subtle
- * elevation shift, smooth scale, no flash of colour or harsh background
- * change.
- *
- * Two expansion modes:
- * - **In place** (default): animates the container's own width/height to
- *   `expandedWidth`/`expandedHeight`.
- * - **Push** (`expandContainerRef` set): for containers whose resting size is
- *   owned by flex-item wrappers. Expanding makes the container span the FULL
- *   parent width (its row becomes `flex-wrap: wrap` and the wrapper takes
- *   `flex-basis: 100%`), with sibling charts reflowing below it at full
- *   width — visible and intact, not squeezed. Column levels raise `flex-grow`
- *   so the expanded row also dominates vertically. Collapsing restores the
- *   original layout exactly.
+ * 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).
  *
  * @example
  * ```tsx
- * <ScalableContainer width={480} height={300}>
- *   <Chart data={metrics} />
- * </ScalableContainer>
- *
- * // Push mode inside a flex grid:
- * const sectionRef = useRef<HTMLDivElement>(null)
- * <div ref={sectionRef} className="flex flex-col flex-1 min-h-0 gap-2">…
- *   <ScalableContainer width="100%" height="100%" expandContainerRef={sectionRef}>
+ * // 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} />
+ *   </ScalableContainer>
+ *   …
+ * </div>
  * ```
  */
-declare function ScalableContainer({ width, height, expandedWidth, expandedHeight, expanded, onExpandedChange, children, assignClassOnClick, expandIcon, collapseIcon, togglePosition, expandContainerRef, expandRatio, className, }: ScalableContainerProps): react_jsx_runtime.JSX.Element;
+declare function ScalableContainer({ width, height, targetWidth, targetHeight, expandedWidth, expandedHeight, expanded, onExpandedChange, children, assignClassOnClick, expandIcon, collapseIcon, togglePosition, className, }: ScalableContainerProps): react_jsx_runtime.JSX.Element;
 
 interface GridCardItem {
     key: string | number;

package/dist/index.d.ts

@@ -503,6 +503,10 @@ interface ModalProps {
     onCancel?: () => void;
     okText?: string;
     cancelText?: string;
+    /** Visual variant of the Ok button. Default `'primary'`. */
+    okVariant?: ButtonProps['variant'];
+    /** Visual variant of the Cancel button. Default `'ghost'`. */
+    cancelVariant?: ButtonProps['variant'];
     hasFooter?: boolean;
     title?: react__default.ReactNode;
     children?: react__default.ReactNode;
@@ -521,7 +525,7 @@ interface ModalProps {
  *   Are you sure you want to delete this item?
  * </Modal>
  */
-declare function Modal({ width, size, open, onClose, onOk, onCancel, okText, cancelText, hasFooter, title, children, className, }: ModalProps): react_jsx_runtime.JSX.Element;
+declare function Modal({ width, size, open, onClose, onOk, onCancel, okText, cancelText, okVariant, cancelVariant, hasFooter, title, children, className, }: ModalProps): react_jsx_runtime.JSX.Element;
 
 type DrawerSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
 interface DrawerProps {
@@ -542,6 +546,10 @@ interface DrawerProps {
     width?: number | string;
     okText?: string;
     cancelText?: string;
+    /** Visual variant of the Ok button. Default `'primary'`. */
+    okVariant?: ButtonProps['variant'];
+    /** Visual variant of the Cancel button. Default `'ghost'`. */
+    cancelVariant?: ButtonProps['variant'];
     onOk?: () => void;
     onCancel?: () => void;
     title?: react__default.ReactNode;
@@ -561,7 +569,7 @@ interface DrawerProps {
  *   <FilterForm />
  * </Drawer>
  */
-declare function Drawer({ open, onClose, hasFooter, placement, size, width, okText, cancelText, onOk, onCancel, title, children, className, }: DrawerProps): react_jsx_runtime.JSX.Element;
+declare function Drawer({ open, onClose, hasFooter, placement, size, width, okText, cancelText, okVariant, cancelVariant, onOk, onCancel, title, children, className, }: DrawerProps): react_jsx_runtime.JSX.Element;
 
 interface TooltipProps {
     children: react__default.ReactNode;
@@ -697,6 +705,9 @@ interface TreeNode {
     nodeData?: any;
     parentLabel?: string;
     children?: TreeNode[];
+    /** Leading icon. On leaves it replaces the default bullet; on parents it
+     *  renders between the chevron and the label. */
+    icon?: react__default.ReactNode;
 }
 interface TreeItemClickPayload {
     isParent: boolean;
@@ -710,6 +721,9 @@ interface TreeProps {
     onNodeClick: (payload: TreeItemClickPayload) => void;
     defaultExpandAll?: boolean;
     defaultExpandedKeys?: string[];
+    /** Default leading icon for every leaf (instead of the bullet dot). A
+     *  node's own `icon` takes precedence. */
+    leafIcon?: react__default.ReactNode;
     /** Extra classes merged onto the tree root. */
     className?: string;
     /** Inline style on the tree root. */
@@ -730,7 +744,7 @@ interface TreeProps {
  *   defaultExpandAll
  * />
  */
-declare function Tree({ nodes, onNodeClick, defaultExpandAll, defaultExpandedKeys, className, style, }: TreeProps): react_jsx_runtime.JSX.Element;
+declare function Tree({ nodes, onNodeClick, defaultExpandAll, defaultExpandedKeys, leafIcon, className, style, }: TreeProps): react_jsx_runtime.JSX.Element;
 
 type AccordionVariant = 'separated' | 'contained';
 interface AccordionProps {
@@ -2074,10 +2088,22 @@ interface ScalableContainerProps {
     width?: react__default.CSSProperties['width'];
     /** Resting height. Any CSS length / percent. Default `'auto'`. */
     height?: react__default.CSSProperties['height'];
-    /** Width when expanded. Default `'100%'` (fills parent). */
+    /**
+     * 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%'`.
+     */
+    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%'`.
+     */
+    targetHeight?: react__default.CSSProperties['height'];
+    /** @deprecated Use `targetWidth`. */
     expandedWidth?: react__default.CSSProperties['width'];
-    /** Height when expanded. Default `'100%'`. Set a concrete value (e.g. 420)
-     *  when the container lives in normal flow and should push siblings down. */
+    /** @deprecated Use `targetHeight`. */
     expandedHeight?: react__default.CSSProperties['height'];
     /** Controlled expanded state. */
     expanded?: boolean;
@@ -2096,60 +2122,38 @@ interface ScalableContainerProps {
      * Default `'top-right'` — matches the OS-window convention.
      */
     togglePosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
-    /**
-     * Bounding element the expansion is allowed to grow within. When the
-     * container sits in size-constrained flex-item wrappers (where width /
-     * height 100% makes expand-in-place a no-op), providing this ref switches
-     * to PUSH expansion: the container's row becomes `flex-wrap: wrap` and the
-     * container takes the FULL parent width (`flex-basis: 100%`), so sibling
-     * charts reflow below it at full width — pushed, visible, and intact.
-     * Column levels between the container and this element get `flex-grow`
-     * raised so the expanded row dominates vertically too. Collapsing
-     * restores the wrappers' original sizing exactly. Omit for the classic
-     * expand-in-place behaviour.
-     */
+    /** @deprecated No longer used — set `targetWidth`/`targetHeight` instead. */
     expandContainerRef?: react__default.RefObject<HTMLElement | null>;
-    /**
-     * Vertical dominance of the pushed expansion (push mode only). Default
-     * `3` — the expanded chart keeps expandRatio/(expandRatio+1) of its row's
-     * height (and its row takes expandRatio parts per sibling row), leaving
-     * the reflowed siblings the remainder. Raise for a more fullscreen feel,
-     * lower for a gentler split.
-     */
+    /** @deprecated No longer used — set `targetWidth`/`targetHeight` instead. */
     expandRatio?: number;
     /** Extra classes merged onto the container root. */
     className?: string;
 }
 /**
- * Container that smoothly expands on click and collapses back to its
- * resting size. Reads like a macOS / Windows window resizing — subtle
- * elevation shift, smooth scale, no flash of colour or harsh background
- * change.
- *
- * Two expansion modes:
- * - **In place** (default): animates the container's own width/height to
- *   `expandedWidth`/`expandedHeight`.
- * - **Push** (`expandContainerRef` set): for containers whose resting size is
- *   owned by flex-item wrappers. Expanding makes the container span the FULL
- *   parent width (its row becomes `flex-wrap: wrap` and the wrapper takes
- *   `flex-basis: 100%`), with sibling charts reflowing below it at full
- *   width — visible and intact, not squeezed. Column levels raise `flex-grow`
- *   so the expanded row also dominates vertically. Collapsing restores the
- *   original layout exactly.
+ * 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).
  *
  * @example
  * ```tsx
- * <ScalableContainer width={480} height={300}>
- *   <Chart data={metrics} />
- * </ScalableContainer>
- *
- * // Push mode inside a flex grid:
- * const sectionRef = useRef<HTMLDivElement>(null)
- * <div ref={sectionRef} className="flex flex-col flex-1 min-h-0 gap-2">…
- *   <ScalableContainer width="100%" height="100%" expandContainerRef={sectionRef}>
+ * // 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} />
+ *   </ScalableContainer>
+ *   …
+ * </div>
  * ```
  */
-declare function ScalableContainer({ width, height, expandedWidth, expandedHeight, expanded, onExpandedChange, children, assignClassOnClick, expandIcon, collapseIcon, togglePosition, expandContainerRef, expandRatio, className, }: ScalableContainerProps): react_jsx_runtime.JSX.Element;
+declare function ScalableContainer({ width, height, targetWidth, targetHeight, expandedWidth, expandedHeight, expanded, onExpandedChange, children, assignClassOnClick, expandIcon, collapseIcon, togglePosition, className, }: ScalableContainerProps): react_jsx_runtime.JSX.Element;
 
 interface GridCardItem {
     key: string | number;