@geomak/ui 1.6.2 → 1.7.1

package/dist/index.d.cts

@@ -250,18 +250,107 @@ declare const Icon: {
     }) => react_jsx_runtime.JSX.Element;
 };
 
+interface PortalProps {
+    /** Content to render at the target node. */
+    children: React$1.ReactNode;
+    /**
+     * Where to mount the portal.
+     * - omitted / `undefined` → `document.body` (the safe default for viewport-anchored UI)
+     * - `HTMLElement` → that exact node
+     * - `() => HTMLElement | null` → resolved at mount time (lets you query the DOM after layout)
+     * - `null` → portal is disabled; nothing renders
+     */
+    target?: HTMLElement | (() => HTMLElement | null) | null;
+}
+/**
+ * SSR-safe DOM relocator. Renders `children` at a detached DOM node — by
+ * default `document.body` — so that any `position: fixed` descendant resolves
+ * against the real viewport, never against a transformed, filtered, or
+ * contained ancestor.
+ *
+ * ## Why this exists
+ *
+ * Per the CSS spec, **any ancestor with `transform`, `filter`, `perspective`,
+ * `will-change`, or `contain: layout|paint|strict` creates a new containing
+ * block for `position: fixed` descendants**. The fixed element then resolves
+ * its coordinates against that ancestor, not the viewport — silently breaking
+ * full-screen overlays, toast viewports, mobile drawers, and loading screens
+ * whenever a consumer wraps the component in:
+ *
+ * - a page-transition library (Framer Motion, view transitions)
+ * - a modal or drawer (Storybook's centered-layout wrapper hits this too)
+ * - a card with `contain: layout` or `will-change: transform`
+ * - a CSS filter (`backdrop-blur`, `drop-shadow`)
+ *
+ * Portaling to `document.body` makes the element **immune** to any styling
+ * its consumer applies to ancestor nodes. This is the same pattern Radix UI
+ * uses internally for every overlay primitive (`Dialog.Portal`,
+ * `Tooltip.Portal`, `Popover.Portal`, etc.).
+ *
+ * ## When to use it
+ *
+ * Wrap any element that uses `position: fixed` to anchor itself to the
+ * viewport — full-screen overlays, toast viewports, drawers, loading screens,
+ * command palettes, lightboxes.
+ *
+ * If you're already using a Radix primitive, prefer its built-in `*.Portal`
+ * component (they're equivalent but lifecycle-aware for that primitive).
+ *
+ * ## When NOT to use it
+ *
+ * - For inline elements that already flow naturally with the document — Portal
+ *   is for **fixed/absolute escape**, not general layout.
+ * - For SSR-critical content that must appear before hydration — Portal renders
+ *   `null` on the server and the first client render.
+ * - For accessibility-critical content that depends on DOM proximity (form
+ *   labels, ARIA `aria-controls` targets) — escaping the tree can break focus
+ *   order and assistive-tech navigation.
+ *
+ * ## SSR / hydration
+ *
+ * `document.body` isn't available during SSR or the first client render.
+ * `Portal` renders `null` until `useEffect` resolves the target post-mount,
+ * then re-renders with the portal in place. Content that needs to appear
+ * immediately on mount paints one frame later — acceptable for overlays
+ * (the trigger interaction is what kicks them off anyway).
+ *
+ * @example Full-screen loading overlay
+ * ```tsx
+ * <Portal>
+ *   <div className="fixed inset-0 bg-black/40 z-overlay flex items-center justify-center">
+ *     <Spinner />
+ *   </div>
+ * </Portal>
+ * ```
+ *
+ * @example Mount to a specific element
+ * ```tsx
+ * <Portal target={() => document.getElementById('app-root')}>
+ *   <Drawer />
+ * </Portal>
+ * ```
+ *
+ * @example Conditionally disable (render inline)
+ * ```tsx
+ * <Portal target={shouldPortal ? undefined : null}>
+ *   <Banner />
+ * </Portal>
+ * ```
+ */
+declare function Portal({ children, target }: PortalProps): React$1.ReactPortal;
+
+type IconButtonVariant = 'primary' | 'bordered';
 interface IconButtonProps {
     icon?: React.ReactNode;
     onClick?: React.MouseEventHandler<HTMLButtonElement>;
-    /** 'primary' | 'bordered' */
-    type?: string;
+    /** Visual style. Defaults to `'primary'`. */
+    type?: IconButtonVariant;
     buttonType?: 'button' | 'submit' | 'reset';
     disabled?: boolean;
     size?: 'sm' | 'lg';
     loading?: boolean;
     loadingIcon?: React.ReactNode;
     title?: string;
-    [key: string]: any;
 }
 /**
  * Square icon-only button.
@@ -276,8 +365,13 @@ interface ModalProps {
     /**
      * Max width of the modal panel in pixels (default 600).
      * On narrow viewports the panel fills the screen minus 1 rem on each side.
-     * Height is always content-driven — `size[1]` is accepted for backwards
-     * compatibility but is no longer used; remove it when convenient.
+     * Height is always content-driven (max 90 dvh).
+     */
+    width?: number;
+    /**
+     * @deprecated Use `width` instead. The second tuple value (height) was
+     * never honoured and is silently ignored. Kept for backwards
+     * compatibility — will be removed in a future major version.
      */
     size?: [number, number] | [number];
     isOpen?: boolean;
@@ -302,7 +396,7 @@ interface ModalProps {
  *   Are you sure you want to delete this item?
  * </Modal>
  */
-declare function Modal({ size, isOpen, onClose, onOk, onCancel, okText, cancelText, hasFooter, title, children, }: ModalProps): react_jsx_runtime.JSX.Element;
+declare function Modal({ width, size, isOpen, onClose, onOk, onCancel, okText, cancelText, hasFooter, title, children, }: ModalProps): react_jsx_runtime.JSX.Element;
 
 interface DrawerProps {
     isOpen?: boolean;
@@ -1596,4 +1690,4 @@ declare const Temporal: {
     TemporalPicker: typeof TemporalPickerBase;
 };
 
-export { AppShell, type AppShellProps, AutoComplete, type AutoCompleteProps, Button, type ButtonProps, Catalog, CatalogCarousel, type CatalogCarouselProps, CatalogGrid, type CatalogGridProps, type CatalogProps, Checkbox, type CheckboxProps, ContextMenu, type ContextMenuActionItem, type ContextMenuPosition, type ContextMenuProps, type DatePickerProps, Drawer, type DrawerProps, Dropdown, type DropdownItem, DropdownPill, type DropdownPillProps, type DropdownProps, type ExpandRowOptions, FadingBase, type FadingBaseProps, FileInput, type FileInputProps, GridCard, type GridCardItem, type GridCardProps, Icon, IconButton, type IconButtonProps, List, type ListItem, type ListProps, LoadingSpinner, type LoadingSpinnerProps, MenuBar, MenuBarItem, type MenuBarItemConfig, type MenuBarItemProps, type MenuBarProps, Modal, type ModalProps, type NotificationPayload, NotificationProvider, NumberInput, type NumberInputProps, OpaqueGridCard, type OpaqueGridCardProps, type PaginationOptions, Password, type PasswordProps, ScalableContainer, type ScalableContainerProps, SearchInput, type SearchInputProps, Sidebar, type SidebarItem, type SidebarProps, type SidebarSection, SkeletonBox, type SkeletonBoxProps, SkeletonCard, type SkeletonCardProps, SkeletonCircle, type SkeletonCircleProps, SkeletonText, type SkeletonTextProps, Switch, type SwitchInputProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, Temporal, type TemporalPickerProps, TextInput, type TextInputProps, type ThemeColors, type ThemeConfig, type ThemeDensity, type ThemeMotion, ThemeProvider, type ThemeProviderProps, type ThemeRadius, type ThemeShadows, ThemeSwitch, type ThemeSwitchProps, type ThemeTypography, ToggleButton, type ToggleButtonProps, type ToggleItem, Tooltip, type TooltipProps, TooltipProvider, TopBar, type TopBarProps, Tree, type TreeItemClickPayload, type TreeNode, type TreeProps, TreeSelect, type TreeSelectProps, Wizard, type WizardProps, type WizardStep, useNotification };
+export { AppShell, type AppShellProps, AutoComplete, type AutoCompleteProps, Button, type ButtonProps, Catalog, CatalogCarousel, type CatalogCarouselProps, CatalogGrid, type CatalogGridProps, type CatalogProps, Checkbox, type CheckboxProps, ContextMenu, type ContextMenuActionItem, type ContextMenuPosition, type ContextMenuProps, type DatePickerProps, Drawer, type DrawerProps, Dropdown, type DropdownItem, DropdownPill, type DropdownPillProps, type DropdownProps, type ExpandRowOptions, FadingBase, type FadingBaseProps, FileInput, type FileInputProps, GridCard, type GridCardItem, type GridCardProps, Icon, IconButton, type IconButtonProps, List, type ListItem, type ListProps, LoadingSpinner, type LoadingSpinnerProps, MenuBar, MenuBarItem, type MenuBarItemConfig, type MenuBarItemProps, type MenuBarProps, Modal, type ModalProps, type NotificationPayload, NotificationProvider, NumberInput, type NumberInputProps, OpaqueGridCard, type OpaqueGridCardProps, type PaginationOptions, Password, type PasswordProps, Portal, type PortalProps, ScalableContainer, type ScalableContainerProps, SearchInput, type SearchInputProps, Sidebar, type SidebarItem, type SidebarProps, type SidebarSection, SkeletonBox, type SkeletonBoxProps, SkeletonCard, type SkeletonCardProps, SkeletonCircle, type SkeletonCircleProps, SkeletonText, type SkeletonTextProps, Switch, type SwitchInputProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, Temporal, type TemporalPickerProps, TextInput, type TextInputProps, type ThemeColors, type ThemeConfig, type ThemeDensity, type ThemeMotion, ThemeProvider, type ThemeProviderProps, type ThemeRadius, type ThemeShadows, ThemeSwitch, type ThemeSwitchProps, type ThemeTypography, ToggleButton, type ToggleButtonProps, type ToggleItem, Tooltip, type TooltipProps, TooltipProvider, TopBar, type TopBarProps, Tree, type TreeItemClickPayload, type TreeNode, type TreeProps, TreeSelect, type TreeSelectProps, Wizard, type WizardProps, type WizardStep, useNotification };

package/dist/index.d.ts

@@ -250,18 +250,107 @@ declare const Icon: {
     }) => react_jsx_runtime.JSX.Element;
 };
 
+interface PortalProps {
+    /** Content to render at the target node. */
+    children: React$1.ReactNode;
+    /**
+     * Where to mount the portal.
+     * - omitted / `undefined` → `document.body` (the safe default for viewport-anchored UI)
+     * - `HTMLElement` → that exact node
+     * - `() => HTMLElement | null` → resolved at mount time (lets you query the DOM after layout)
+     * - `null` → portal is disabled; nothing renders
+     */
+    target?: HTMLElement | (() => HTMLElement | null) | null;
+}
+/**
+ * SSR-safe DOM relocator. Renders `children` at a detached DOM node — by
+ * default `document.body` — so that any `position: fixed` descendant resolves
+ * against the real viewport, never against a transformed, filtered, or
+ * contained ancestor.
+ *
+ * ## Why this exists
+ *
+ * Per the CSS spec, **any ancestor with `transform`, `filter`, `perspective`,
+ * `will-change`, or `contain: layout|paint|strict` creates a new containing
+ * block for `position: fixed` descendants**. The fixed element then resolves
+ * its coordinates against that ancestor, not the viewport — silently breaking
+ * full-screen overlays, toast viewports, mobile drawers, and loading screens
+ * whenever a consumer wraps the component in:
+ *
+ * - a page-transition library (Framer Motion, view transitions)
+ * - a modal or drawer (Storybook's centered-layout wrapper hits this too)
+ * - a card with `contain: layout` or `will-change: transform`
+ * - a CSS filter (`backdrop-blur`, `drop-shadow`)
+ *
+ * Portaling to `document.body` makes the element **immune** to any styling
+ * its consumer applies to ancestor nodes. This is the same pattern Radix UI
+ * uses internally for every overlay primitive (`Dialog.Portal`,
+ * `Tooltip.Portal`, `Popover.Portal`, etc.).
+ *
+ * ## When to use it
+ *
+ * Wrap any element that uses `position: fixed` to anchor itself to the
+ * viewport — full-screen overlays, toast viewports, drawers, loading screens,
+ * command palettes, lightboxes.
+ *
+ * If you're already using a Radix primitive, prefer its built-in `*.Portal`
+ * component (they're equivalent but lifecycle-aware for that primitive).
+ *
+ * ## When NOT to use it
+ *
+ * - For inline elements that already flow naturally with the document — Portal
+ *   is for **fixed/absolute escape**, not general layout.
+ * - For SSR-critical content that must appear before hydration — Portal renders
+ *   `null` on the server and the first client render.
+ * - For accessibility-critical content that depends on DOM proximity (form
+ *   labels, ARIA `aria-controls` targets) — escaping the tree can break focus
+ *   order and assistive-tech navigation.
+ *
+ * ## SSR / hydration
+ *
+ * `document.body` isn't available during SSR or the first client render.
+ * `Portal` renders `null` until `useEffect` resolves the target post-mount,
+ * then re-renders with the portal in place. Content that needs to appear
+ * immediately on mount paints one frame later — acceptable for overlays
+ * (the trigger interaction is what kicks them off anyway).
+ *
+ * @example Full-screen loading overlay
+ * ```tsx
+ * <Portal>
+ *   <div className="fixed inset-0 bg-black/40 z-overlay flex items-center justify-center">
+ *     <Spinner />
+ *   </div>
+ * </Portal>
+ * ```
+ *
+ * @example Mount to a specific element
+ * ```tsx
+ * <Portal target={() => document.getElementById('app-root')}>
+ *   <Drawer />
+ * </Portal>
+ * ```
+ *
+ * @example Conditionally disable (render inline)
+ * ```tsx
+ * <Portal target={shouldPortal ? undefined : null}>
+ *   <Banner />
+ * </Portal>
+ * ```
+ */
+declare function Portal({ children, target }: PortalProps): React$1.ReactPortal;
+
+type IconButtonVariant = 'primary' | 'bordered';
 interface IconButtonProps {
     icon?: React.ReactNode;
     onClick?: React.MouseEventHandler<HTMLButtonElement>;
-    /** 'primary' | 'bordered' */
-    type?: string;
+    /** Visual style. Defaults to `'primary'`. */
+    type?: IconButtonVariant;
     buttonType?: 'button' | 'submit' | 'reset';
     disabled?: boolean;
     size?: 'sm' | 'lg';
     loading?: boolean;
     loadingIcon?: React.ReactNode;
     title?: string;
-    [key: string]: any;
 }
 /**
  * Square icon-only button.
@@ -276,8 +365,13 @@ interface ModalProps {
     /**
      * Max width of the modal panel in pixels (default 600).
      * On narrow viewports the panel fills the screen minus 1 rem on each side.
-     * Height is always content-driven — `size[1]` is accepted for backwards
-     * compatibility but is no longer used; remove it when convenient.
+     * Height is always content-driven (max 90 dvh).
+     */
+    width?: number;
+    /**
+     * @deprecated Use `width` instead. The second tuple value (height) was
+     * never honoured and is silently ignored. Kept for backwards
+     * compatibility — will be removed in a future major version.
      */
     size?: [number, number] | [number];
     isOpen?: boolean;
@@ -302,7 +396,7 @@ interface ModalProps {
  *   Are you sure you want to delete this item?
  * </Modal>
  */
-declare function Modal({ size, isOpen, onClose, onOk, onCancel, okText, cancelText, hasFooter, title, children, }: ModalProps): react_jsx_runtime.JSX.Element;
+declare function Modal({ width, size, isOpen, onClose, onOk, onCancel, okText, cancelText, hasFooter, title, children, }: ModalProps): react_jsx_runtime.JSX.Element;
 
 interface DrawerProps {
     isOpen?: boolean;
@@ -1596,4 +1690,4 @@ declare const Temporal: {
     TemporalPicker: typeof TemporalPickerBase;
 };
 
-export { AppShell, type AppShellProps, AutoComplete, type AutoCompleteProps, Button, type ButtonProps, Catalog, CatalogCarousel, type CatalogCarouselProps, CatalogGrid, type CatalogGridProps, type CatalogProps, Checkbox, type CheckboxProps, ContextMenu, type ContextMenuActionItem, type ContextMenuPosition, type ContextMenuProps, type DatePickerProps, Drawer, type DrawerProps, Dropdown, type DropdownItem, DropdownPill, type DropdownPillProps, type DropdownProps, type ExpandRowOptions, FadingBase, type FadingBaseProps, FileInput, type FileInputProps, GridCard, type GridCardItem, type GridCardProps, Icon, IconButton, type IconButtonProps, List, type ListItem, type ListProps, LoadingSpinner, type LoadingSpinnerProps, MenuBar, MenuBarItem, type MenuBarItemConfig, type MenuBarItemProps, type MenuBarProps, Modal, type ModalProps, type NotificationPayload, NotificationProvider, NumberInput, type NumberInputProps, OpaqueGridCard, type OpaqueGridCardProps, type PaginationOptions, Password, type PasswordProps, ScalableContainer, type ScalableContainerProps, SearchInput, type SearchInputProps, Sidebar, type SidebarItem, type SidebarProps, type SidebarSection, SkeletonBox, type SkeletonBoxProps, SkeletonCard, type SkeletonCardProps, SkeletonCircle, type SkeletonCircleProps, SkeletonText, type SkeletonTextProps, Switch, type SwitchInputProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, Temporal, type TemporalPickerProps, TextInput, type TextInputProps, type ThemeColors, type ThemeConfig, type ThemeDensity, type ThemeMotion, ThemeProvider, type ThemeProviderProps, type ThemeRadius, type ThemeShadows, ThemeSwitch, type ThemeSwitchProps, type ThemeTypography, ToggleButton, type ToggleButtonProps, type ToggleItem, Tooltip, type TooltipProps, TooltipProvider, TopBar, type TopBarProps, Tree, type TreeItemClickPayload, type TreeNode, type TreeProps, TreeSelect, type TreeSelectProps, Wizard, type WizardProps, type WizardStep, useNotification };
+export { AppShell, type AppShellProps, AutoComplete, type AutoCompleteProps, Button, type ButtonProps, Catalog, CatalogCarousel, type CatalogCarouselProps, CatalogGrid, type CatalogGridProps, type CatalogProps, Checkbox, type CheckboxProps, ContextMenu, type ContextMenuActionItem, type ContextMenuPosition, type ContextMenuProps, type DatePickerProps, Drawer, type DrawerProps, Dropdown, type DropdownItem, DropdownPill, type DropdownPillProps, type DropdownProps, type ExpandRowOptions, FadingBase, type FadingBaseProps, FileInput, type FileInputProps, GridCard, type GridCardItem, type GridCardProps, Icon, IconButton, type IconButtonProps, List, type ListItem, type ListProps, LoadingSpinner, type LoadingSpinnerProps, MenuBar, MenuBarItem, type MenuBarItemConfig, type MenuBarItemProps, type MenuBarProps, Modal, type ModalProps, type NotificationPayload, NotificationProvider, NumberInput, type NumberInputProps, OpaqueGridCard, type OpaqueGridCardProps, type PaginationOptions, Password, type PasswordProps, Portal, type PortalProps, ScalableContainer, type ScalableContainerProps, SearchInput, type SearchInputProps, Sidebar, type SidebarItem, type SidebarProps, type SidebarSection, SkeletonBox, type SkeletonBoxProps, SkeletonCard, type SkeletonCardProps, SkeletonCircle, type SkeletonCircleProps, SkeletonText, type SkeletonTextProps, Switch, type SwitchInputProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, Temporal, type TemporalPickerProps, TextInput, type TextInputProps, type ThemeColors, type ThemeConfig, type ThemeDensity, type ThemeMotion, ThemeProvider, type ThemeProviderProps, type ThemeRadius, type ThemeShadows, ThemeSwitch, type ThemeSwitchProps, type ThemeTypography, ToggleButton, type ToggleButtonProps, type ToggleItem, Tooltip, type TooltipProps, TooltipProvider, TopBar, type TopBarProps, Tree, type TreeItemClickPayload, type TreeNode, type TreeProps, TreeSelect, type TreeSelectProps, Wizard, type WizardProps, type WizardStep, useNotification };