@geomak/ui 5.0.2 → 5.0.3

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 export { C as COLORS, S as SemanticColorKey, a as SemanticSharedKey, V as VarColorKey, b as VarDensityKey, c as VarMotionKey, d as VarRadiusKey, e as VarShadowKey, f as VarTypoKey, g as VarZIndexKey, P as palette, s as semanticTokens, v as vars } from './index-CvyV3YPI.cjs';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React$1, { ReactNode } from 'react';
+import React$1 from 'react';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 
 declare const Icon: {
@@ -599,7 +599,7 @@ declare function useNotification(): {
     danger: (props: Omit<NotificationPayload, "type">) => void;
 };
 
-type LoadingSpinnerSize = 'sm' | 'md' | 'lg';
+type LoadingSpinnerSize = 'xs' | 'sm' | 'md' | 'lg';
 interface LoadingSpinnerProps {
     /**
      * Text revealed letter-by-letter beneath the spinner. Optional — pass
@@ -720,22 +720,50 @@ interface ListProps {
 declare function List({ items, onItemClick, activeKey }: ListProps): react_jsx_runtime.JSX.Element;
 
 interface ScalableContainerProps {
+    /** Resting width. Any CSS length / percent. Default `'100%'`. */
     width?: React$1.CSSProperties['width'];
+    /** Resting height. Any CSS length / percent. Default `'auto'`. */
     height?: React$1.CSSProperties['height'];
+    /** Content to render inside. */
     children?: React$1.ReactNode;
-    /** CSS class applied to the children wrapper when expanded */
+    /** CSS class appended to the expanded children wrapper. */
     assignClassOnClick?: string;
+    /** Override the expand-button icon. */
+    expandIcon?: React$1.ReactNode;
+    /** Override the collapse-button icon. */
+    collapseIcon?: React$1.ReactNode;
+    /**
+     * Position of the toggle button inside the container.
+     * Default `'top-right'` — matches the OS-window convention.
+     */
+    togglePosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 }
 /**
- * Container that can be expanded to fill its parent, with a tooltip-annotated
- * expand/collapse icon button.
+ * Container that smoothly expands to fill its parent 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.
+ *
+ * **What's different from the previous version**
+ * - Animates BOTH width and height (was width-only).
+ * - No baked-in background — the container is transparent by default,
+ *   so it overlays whatever surface the consumer puts behind it.
+ * - Shadow lifts on expand (`shadow-md` → `shadow-2xl`) like a window
+ *   being raised. No colour change.
+ * - The toggle button is a plain rounded chip with the chevron icon,
+ *   not the old `IconButton` with the heavy background. Floats over
+ *   the content via absolute positioning so it doesn't push layout.
+ * - Configurable toggle position (default top-right, matching OS
+ *   close-button convention).
  *
  * @example
- * <ScalableContainer width="50%" height={300}>
- *   <Chart data={data} />
+ * ```tsx
+ * <ScalableContainer width={480} height={300}>
+ *   <Chart data={metrics} />
  * </ScalableContainer>
+ * ```
  */
-declare function ScalableContainer({ width, height, children, assignClassOnClick, }: ScalableContainerProps): react_jsx_runtime.JSX.Element;
+declare function ScalableContainer({ width, height, children, assignClassOnClick, expandIcon, collapseIcon, togglePosition, }: ScalableContainerProps): react_jsx_runtime.JSX.Element;
 
 interface GridCardItem {
     key: string | number;
@@ -821,50 +849,6 @@ interface CatalogProps {
  */
 declare function Catalog({ display, items, buttonText, onOpen }: CatalogProps): react_jsx_runtime.JSX.Element;
 
-interface MenuBarItemProps {
-    icon: React$1.ReactNode;
-    isActive: boolean;
-    title: string;
-    /** Called when the item is clicked (navigation or logout etc.) */
-    onClick?: () => void;
-}
-/**
- * Single item in the MenuBar sidebar.
- *
- * Decoupled from React Router and context — navigation is delegated to `onClick`.
- * The Tooltip is powered by Radix (same as the standalone Tooltip component).
- *
- * @example
- * <MenuBarItem
- *   icon={<Icon.Dashboard />}
- *   title="Dashboard"
- *   isActive={pathname === '/dashboard'}
- *   onClick={() => navigate('/dashboard')}
- * />
- */
-declare function MenuBarItem({ icon, isActive, title, onClick }: MenuBarItemProps): react_jsx_runtime.JSX.Element;
-
-interface MenuBarItemConfig extends MenuBarItemProps {
-    key: string;
-}
-interface MenuBarProps {
-    items: MenuBarItemConfig[];
-}
-/**
- * Vertical icon sidebar (left edge of the app).
- *
- * Decoupled from React Router, useAuth, and useData.
- * The app composes the items array (with `onClick` handlers) and passes it in.
- *
- * @example
- * const items: MenuBarItemConfig[] = [
- *   { key: 'dash', icon: <Icon.Dashboard />, title: 'Dashboard', isActive: pathname === '/dashboard', onClick: () => navigate('/dashboard') },
- *   { key: 'logout', icon: <Icon.PowerOff />, title: 'Sign Out', isActive: false, onClick: logOut },
- * ]
- * <MenuBar items={items} />
- */
-declare function MenuBar({ items }: MenuBarProps): react_jsx_runtime.JSX.Element;
-
 /**
  * A single action in the context menu.
  *
@@ -1662,15 +1646,6 @@ interface SearchInputProps {
  */
 declare const SearchInput: React$1.ForwardRefExoticComponent<SearchInputProps & React$1.RefAttributes<HTMLInputElement>>;
 
-interface DropdownPillProps {
-    value?: ReactNode;
-    hasSiblings?: boolean;
-}
-/**
- * Pill chip used inside Dropdown to display selected values.
- */
-declare function DropdownPill({ value, hasSiblings }: DropdownPillProps): react_jsx_runtime.JSX.Element;
-
 interface CheckboxProps {
     /** Controlled checked state */
     checked?: boolean;
@@ -1765,6 +1740,13 @@ interface DropdownProps {
     disabled?: boolean;
     /** Label/input orientation. Defaults to `'vertical'`. */
     layout?: 'horizontal' | 'vertical';
+    /**
+     * Show a "+N more" pill alongside the first selected item in multiselect
+     * mode. Defaults to `false` — a single pill is shown with the first
+     * selection and consumers typically open the dropdown to see the rest.
+     * Set `true` if you want the count visible on the trigger.
+     */
+    showSelectedCount?: boolean;
     errorMessage?: React$1.ReactNode;
     style?: React$1.CSSProperties;
     htmlFor?: string;
@@ -1787,7 +1769,7 @@ interface DropdownProps {
  * // Multi-select
  * <Dropdown isMultiselect label="Fuels" items={fuels} value={form.fuels} onChange={handleChange} />
  */
-declare function Dropdown({ isMultiselect, hasSearch, label, name, value, onChange, disabled, layout, errorMessage, style, htmlFor, items, labelStyle, placeholder, }: DropdownProps): react_jsx_runtime.JSX.Element;
+declare function Dropdown({ isMultiselect, hasSearch, label, name, value, onChange, disabled, layout, errorMessage, style, htmlFor, items, labelStyle, placeholder, showSelectedCount, }: DropdownProps): react_jsx_runtime.JSX.Element;
 
 interface AutoCompleteItem {
     key: string;
@@ -1998,4 +1980,4 @@ type TemporalPickerProps = DatePickerProps;
  */
 declare function DatePicker({ value, onChange, label, placeholder, htmlFor, name: _name, layout, disabled, errorMessage, min, max, style, format, weekStartsOn, clearable, }: DatePickerProps): react_jsx_runtime.JSX.Element;
 
-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, DatePicker as 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, 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, 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, DatePicker as 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

@@ -1,6 +1,6 @@
 export { C as COLORS, S as SemanticColorKey, a as SemanticSharedKey, V as VarColorKey, b as VarDensityKey, c as VarMotionKey, d as VarRadiusKey, e as VarShadowKey, f as VarTypoKey, g as VarZIndexKey, P as palette, s as semanticTokens, v as vars } from './index-CvyV3YPI.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React$1, { ReactNode } from 'react';
+import React$1 from 'react';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 
 declare const Icon: {
@@ -599,7 +599,7 @@ declare function useNotification(): {
     danger: (props: Omit<NotificationPayload, "type">) => void;
 };
 
-type LoadingSpinnerSize = 'sm' | 'md' | 'lg';
+type LoadingSpinnerSize = 'xs' | 'sm' | 'md' | 'lg';
 interface LoadingSpinnerProps {
     /**
      * Text revealed letter-by-letter beneath the spinner. Optional — pass
@@ -720,22 +720,50 @@ interface ListProps {
 declare function List({ items, onItemClick, activeKey }: ListProps): react_jsx_runtime.JSX.Element;
 
 interface ScalableContainerProps {
+    /** Resting width. Any CSS length / percent. Default `'100%'`. */
     width?: React$1.CSSProperties['width'];
+    /** Resting height. Any CSS length / percent. Default `'auto'`. */
     height?: React$1.CSSProperties['height'];
+    /** Content to render inside. */
     children?: React$1.ReactNode;
-    /** CSS class applied to the children wrapper when expanded */
+    /** CSS class appended to the expanded children wrapper. */
     assignClassOnClick?: string;
+    /** Override the expand-button icon. */
+    expandIcon?: React$1.ReactNode;
+    /** Override the collapse-button icon. */
+    collapseIcon?: React$1.ReactNode;
+    /**
+     * Position of the toggle button inside the container.
+     * Default `'top-right'` — matches the OS-window convention.
+     */
+    togglePosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 }
 /**
- * Container that can be expanded to fill its parent, with a tooltip-annotated
- * expand/collapse icon button.
+ * Container that smoothly expands to fill its parent 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.
+ *
+ * **What's different from the previous version**
+ * - Animates BOTH width and height (was width-only).
+ * - No baked-in background — the container is transparent by default,
+ *   so it overlays whatever surface the consumer puts behind it.
+ * - Shadow lifts on expand (`shadow-md` → `shadow-2xl`) like a window
+ *   being raised. No colour change.
+ * - The toggle button is a plain rounded chip with the chevron icon,
+ *   not the old `IconButton` with the heavy background. Floats over
+ *   the content via absolute positioning so it doesn't push layout.
+ * - Configurable toggle position (default top-right, matching OS
+ *   close-button convention).
  *
  * @example
- * <ScalableContainer width="50%" height={300}>
- *   <Chart data={data} />
+ * ```tsx
+ * <ScalableContainer width={480} height={300}>
+ *   <Chart data={metrics} />
  * </ScalableContainer>
+ * ```
  */
-declare function ScalableContainer({ width, height, children, assignClassOnClick, }: ScalableContainerProps): react_jsx_runtime.JSX.Element;
+declare function ScalableContainer({ width, height, children, assignClassOnClick, expandIcon, collapseIcon, togglePosition, }: ScalableContainerProps): react_jsx_runtime.JSX.Element;
 
 interface GridCardItem {
     key: string | number;
@@ -821,50 +849,6 @@ interface CatalogProps {
  */
 declare function Catalog({ display, items, buttonText, onOpen }: CatalogProps): react_jsx_runtime.JSX.Element;
 
-interface MenuBarItemProps {
-    icon: React$1.ReactNode;
-    isActive: boolean;
-    title: string;
-    /** Called when the item is clicked (navigation or logout etc.) */
-    onClick?: () => void;
-}
-/**
- * Single item in the MenuBar sidebar.
- *
- * Decoupled from React Router and context — navigation is delegated to `onClick`.
- * The Tooltip is powered by Radix (same as the standalone Tooltip component).
- *
- * @example
- * <MenuBarItem
- *   icon={<Icon.Dashboard />}
- *   title="Dashboard"
- *   isActive={pathname === '/dashboard'}
- *   onClick={() => navigate('/dashboard')}
- * />
- */
-declare function MenuBarItem({ icon, isActive, title, onClick }: MenuBarItemProps): react_jsx_runtime.JSX.Element;
-
-interface MenuBarItemConfig extends MenuBarItemProps {
-    key: string;
-}
-interface MenuBarProps {
-    items: MenuBarItemConfig[];
-}
-/**
- * Vertical icon sidebar (left edge of the app).
- *
- * Decoupled from React Router, useAuth, and useData.
- * The app composes the items array (with `onClick` handlers) and passes it in.
- *
- * @example
- * const items: MenuBarItemConfig[] = [
- *   { key: 'dash', icon: <Icon.Dashboard />, title: 'Dashboard', isActive: pathname === '/dashboard', onClick: () => navigate('/dashboard') },
- *   { key: 'logout', icon: <Icon.PowerOff />, title: 'Sign Out', isActive: false, onClick: logOut },
- * ]
- * <MenuBar items={items} />
- */
-declare function MenuBar({ items }: MenuBarProps): react_jsx_runtime.JSX.Element;
-
 /**
  * A single action in the context menu.
  *
@@ -1662,15 +1646,6 @@ interface SearchInputProps {
  */
 declare const SearchInput: React$1.ForwardRefExoticComponent<SearchInputProps & React$1.RefAttributes<HTMLInputElement>>;
 
-interface DropdownPillProps {
-    value?: ReactNode;
-    hasSiblings?: boolean;
-}
-/**
- * Pill chip used inside Dropdown to display selected values.
- */
-declare function DropdownPill({ value, hasSiblings }: DropdownPillProps): react_jsx_runtime.JSX.Element;
-
 interface CheckboxProps {
     /** Controlled checked state */
     checked?: boolean;
@@ -1765,6 +1740,13 @@ interface DropdownProps {
     disabled?: boolean;
     /** Label/input orientation. Defaults to `'vertical'`. */
     layout?: 'horizontal' | 'vertical';
+    /**
+     * Show a "+N more" pill alongside the first selected item in multiselect
+     * mode. Defaults to `false` — a single pill is shown with the first
+     * selection and consumers typically open the dropdown to see the rest.
+     * Set `true` if you want the count visible on the trigger.
+     */
+    showSelectedCount?: boolean;
     errorMessage?: React$1.ReactNode;
     style?: React$1.CSSProperties;
     htmlFor?: string;
@@ -1787,7 +1769,7 @@ interface DropdownProps {
  * // Multi-select
  * <Dropdown isMultiselect label="Fuels" items={fuels} value={form.fuels} onChange={handleChange} />
  */
-declare function Dropdown({ isMultiselect, hasSearch, label, name, value, onChange, disabled, layout, errorMessage, style, htmlFor, items, labelStyle, placeholder, }: DropdownProps): react_jsx_runtime.JSX.Element;
+declare function Dropdown({ isMultiselect, hasSearch, label, name, value, onChange, disabled, layout, errorMessage, style, htmlFor, items, labelStyle, placeholder, showSelectedCount, }: DropdownProps): react_jsx_runtime.JSX.Element;
 
 interface AutoCompleteItem {
     key: string;
@@ -1998,4 +1980,4 @@ type TemporalPickerProps = DatePickerProps;
  */
 declare function DatePicker({ value, onChange, label, placeholder, htmlFor, name: _name, layout, disabled, errorMessage, min, max, style, format, weekStartsOn, clearable, }: DatePickerProps): react_jsx_runtime.JSX.Element;
 
-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, DatePicker as 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, 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, 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, DatePicker as 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 };