@geomak/ui 1.8.0 → 2.0.0

package/dist/index.d.cts

@@ -853,42 +853,79 @@ interface MenuBarProps {
  */
 declare function MenuBar({ items }: MenuBarProps): react_jsx_runtime.JSX.Element;
 
+/**
+ * A single action in the context menu.
+ *
+ * - Leaf items (no `children`) call `onClick` when activated.
+ * - Parent items (with `children`) open a sub-menu on hover / arrow-right.
+ * - `disabled` items render but cannot be activated; screen readers
+ *   announce them as disabled.
+ */
 interface ContextMenuActionItem {
-    key: string | number;
+    key: React$1.Key;
+    /** Label shown for the item. May be plain text or a node. */
     value: React$1.ReactNode;
     icon?: React$1.ReactNode;
-    onClick?: (path?: string, reportType?: string) => void;
-    path?: string;
-    reportType?: string;
+    /** Fires when the item is activated. Ignored when `children` is set. */
+    onClick?: () => void;
+    /** Optional sub-menu items. */
     children?: ContextMenuActionItem[];
-}
-interface ContextMenuPosition {
-    x: number;
-    y: number;
+    /** Render as disabled — still visible but not activatable. */
+    disabled?: boolean;
 }
 interface ContextMenuProps {
+    /** Top-level items. Each may carry nested `children` for sub-menus. */
     items: ContextMenuActionItem[];
-    position: ContextMenuPosition;
-    visible: boolean;
-    onClose: () => void;
+    /**
+     * The element that should respond to right-click. The entire React
+     * subtree underneath becomes the trigger area. Wrap an existing
+     * component / div / image — anything you can right-click on.
+     */
+    children: React$1.ReactNode;
 }
 /**
- * Right-click context menu positioned at arbitrary screen coordinates.
- *
- * Decoupled from `useData()` — the app manages `visible`, `position`, and
- * `items` in its own state and passes them here.
+ * Right-click context menu, built on `@radix-ui/react-context-menu`.
  *
- * @example
- * const [ctx, setCtx] = useState({ visible: false, items: [], position: { x: 0, y: 0 } })
+ * **Idiomatic usage**: wrap the element that should respond to right-click.
+ * Radix handles positioning (avoids viewport edges automatically), keyboard
+ * navigation (↑↓ to move, → to open sub-menu, ← to close, Enter to activate,
+ * Esc to dismiss), focus management, and portal-based stacking.
  *
- * <div onContextMenu={(e) => {
- *   e.preventDefault()
- *   setCtx({ visible: true, items: menuItems, position: { x: e.clientX, y: e.clientY } })
- * }}>...</div>
+ * @example Basic — flat menu
+ * ```tsx
+ * <ContextMenu
+ *   items={[
+ *     { key: 'edit',   value: 'Edit',   onClick: () => openEditor() },
+ *     { key: 'delete', value: 'Delete', onClick: () => askDelete() },
+ *   ]}
+ * >
+ *   <Card vessel={vessel} />
+ * </ContextMenu>
+ * ```
  *
- * <ContextMenu {...ctx} onClose={() => setCtx(c => ({ ...c, visible: false }))} />
+ * @example With sub-menu
+ * ```tsx
+ * <ContextMenu
+ *   items={[
+ *     {
+ *       key: 'export', value: 'Export',
+ *       children: [
+ *         { key: 'csv',  value: 'as CSV',  onClick: () => exportCsv() },
+ *         { key: 'xlsx', value: 'as Excel', onClick: () => exportXlsx() },
+ *       ],
+ *     },
+ *   ]}
+ * >
+ *   <Table rows={rows} />
+ * </ContextMenu>
+ * ```
  */
-declare function ContextMenu({ items, position, visible, onClose }: ContextMenuProps): react_jsx_runtime.JSX.Element;
+declare function ContextMenu({ items, children }: ContextMenuProps): react_jsx_runtime.JSX.Element;
+/** @deprecated The Radix rewrite positions the menu automatically — no coordinates needed. */
+interface ContextMenuPosition {
+    x: number;
+    y: number;
+}
 
 interface WizardStep {
     /** Ref to the DOM element to highlight */
@@ -1457,11 +1494,14 @@ interface TextInputProps {
 declare function TextInput({ value, onChange, disabled, label, htmlFor, placeholder, name, inputStyle, style, layout, onBlur, errorMessage, labelColor, }: TextInputProps): react_jsx_runtime.JSX.Element;
 
 interface NumberInputProps {
+    /** Step size for the up/down buttons and native arrow-key handling. Default `1`. */
     step?: number;
-    value?: any;
+    /** Current value. `undefined` renders an empty field; a number renders that value. */
+    value?: number | '';
+    /** Fires with the next number. Empty input resolves to `undefined`. */
     onChange?: (e: {
         target: {
-            value: number;
+            value: number | undefined;
             id?: string;
             name?: string;
         };
@@ -1470,8 +1510,8 @@ interface NumberInputProps {
     htmlFor?: string;
     name?: string;
     disabled?: boolean;
-    /** 'horizontal' | 'vertical' */
-    layout?: string;
+    /** Label/input orientation. Defaults to `'horizontal'`. */
+    layout?: 'horizontal' | 'vertical';
     errorMessage?: React$1.ReactNode;
     inputStyle?: React$1.CSSProperties;
     labelStyle?: React$1.CSSProperties;
@@ -1480,12 +1520,42 @@ interface NumberInputProps {
     min?: number;
     max?: number;
     readOnly?: boolean;
-    [key: string]: any;
+    /** Optional precision for floating-point steps (number of decimal places to round to). */
+    precision?: number;
 }
 /**
- * Number input with increment / decrement controls.
+ * Numeric input with keyboard-accessible increment / decrement buttons.
+ *
+ * **What's improved over the previous version**
+ * - Step buttons are real `<button>` elements with `aria-label`, focus rings,
+ *   and proper keyboard activation (Enter / Space). The previous version used
+ *   `<span onClick>` which keyboard-only users could not reach.
+ * - Floating-point drift on decimal steps (`0.1 + 0.2 = 0.30000000000000004`)
+ *   is rounded out via a `precision` prop or auto-inferred from the step.
+ * - Empty input resolves to `undefined` instead of `NaN` — works with form
+ *   libraries (RHF, Formik) that treat empty as "no value".
+ * - The decrement chevron actually points down (the previous SVG was the up
+ *   chevron rotated, with the up chevron itself wrongly using the same path).
+ * - Width is a prop, not hardcoded `w-60`. Default is `w-full` so the input
+ *   flows with its parent.
+ *
+ * @example
+ * ```tsx
+ * const [qty, setQty] = useState<number | undefined>(1)
+ * <NumberInput
+ *   label="Quantity"
+ *   value={qty ?? ''}
+ *   onChange={({ target }) => setQty(target.value)}
+ *   min={0} max={99}
+ * />
+ * ```
+ *
+ * @example Decimal step
+ * ```tsx
+ * <NumberInput label="Tonnage" step={0.25} precision={2} />
+ * ```
  */
-declare function NumberInput({ step, value, onChange, label, htmlFor, name, disabled, layout, errorMessage, inputStyle, labelStyle, placeholder, style, min, max, readOnly, }: NumberInputProps): react_jsx_runtime.JSX.Element;
+declare function NumberInput({ step, value, onChange, label, htmlFor, name, disabled, layout, errorMessage, inputStyle, labelStyle, placeholder, style, min, max, readOnly, precision, }: NumberInputProps): react_jsx_runtime.JSX.Element;
 
 interface PasswordProps {
     value?: string;

package/dist/index.d.ts

@@ -853,42 +853,79 @@ interface MenuBarProps {
  */
 declare function MenuBar({ items }: MenuBarProps): react_jsx_runtime.JSX.Element;
 
+/**
+ * A single action in the context menu.
+ *
+ * - Leaf items (no `children`) call `onClick` when activated.
+ * - Parent items (with `children`) open a sub-menu on hover / arrow-right.
+ * - `disabled` items render but cannot be activated; screen readers
+ *   announce them as disabled.
+ */
 interface ContextMenuActionItem {
-    key: string | number;
+    key: React$1.Key;
+    /** Label shown for the item. May be plain text or a node. */
     value: React$1.ReactNode;
     icon?: React$1.ReactNode;
-    onClick?: (path?: string, reportType?: string) => void;
-    path?: string;
-    reportType?: string;
+    /** Fires when the item is activated. Ignored when `children` is set. */
+    onClick?: () => void;
+    /** Optional sub-menu items. */
     children?: ContextMenuActionItem[];
-}
-interface ContextMenuPosition {
-    x: number;
-    y: number;
+    /** Render as disabled — still visible but not activatable. */
+    disabled?: boolean;
 }
 interface ContextMenuProps {
+    /** Top-level items. Each may carry nested `children` for sub-menus. */
     items: ContextMenuActionItem[];
-    position: ContextMenuPosition;
-    visible: boolean;
-    onClose: () => void;
+    /**
+     * The element that should respond to right-click. The entire React
+     * subtree underneath becomes the trigger area. Wrap an existing
+     * component / div / image — anything you can right-click on.
+     */
+    children: React$1.ReactNode;
 }
 /**
- * Right-click context menu positioned at arbitrary screen coordinates.
- *
- * Decoupled from `useData()` — the app manages `visible`, `position`, and
- * `items` in its own state and passes them here.
+ * Right-click context menu, built on `@radix-ui/react-context-menu`.
  *
- * @example
- * const [ctx, setCtx] = useState({ visible: false, items: [], position: { x: 0, y: 0 } })
+ * **Idiomatic usage**: wrap the element that should respond to right-click.
+ * Radix handles positioning (avoids viewport edges automatically), keyboard
+ * navigation (↑↓ to move, → to open sub-menu, ← to close, Enter to activate,
+ * Esc to dismiss), focus management, and portal-based stacking.
  *
- * <div onContextMenu={(e) => {
- *   e.preventDefault()
- *   setCtx({ visible: true, items: menuItems, position: { x: e.clientX, y: e.clientY } })
- * }}>...</div>
+ * @example Basic — flat menu
+ * ```tsx
+ * <ContextMenu
+ *   items={[
+ *     { key: 'edit',   value: 'Edit',   onClick: () => openEditor() },
+ *     { key: 'delete', value: 'Delete', onClick: () => askDelete() },
+ *   ]}
+ * >
+ *   <Card vessel={vessel} />
+ * </ContextMenu>
+ * ```
  *
- * <ContextMenu {...ctx} onClose={() => setCtx(c => ({ ...c, visible: false }))} />
+ * @example With sub-menu
+ * ```tsx
+ * <ContextMenu
+ *   items={[
+ *     {
+ *       key: 'export', value: 'Export',
+ *       children: [
+ *         { key: 'csv',  value: 'as CSV',  onClick: () => exportCsv() },
+ *         { key: 'xlsx', value: 'as Excel', onClick: () => exportXlsx() },
+ *       ],
+ *     },
+ *   ]}
+ * >
+ *   <Table rows={rows} />
+ * </ContextMenu>
+ * ```
  */
-declare function ContextMenu({ items, position, visible, onClose }: ContextMenuProps): react_jsx_runtime.JSX.Element;
+declare function ContextMenu({ items, children }: ContextMenuProps): react_jsx_runtime.JSX.Element;
+/** @deprecated The Radix rewrite positions the menu automatically — no coordinates needed. */
+interface ContextMenuPosition {
+    x: number;
+    y: number;
+}
 
 interface WizardStep {
     /** Ref to the DOM element to highlight */
@@ -1457,11 +1494,14 @@ interface TextInputProps {
 declare function TextInput({ value, onChange, disabled, label, htmlFor, placeholder, name, inputStyle, style, layout, onBlur, errorMessage, labelColor, }: TextInputProps): react_jsx_runtime.JSX.Element;
 
 interface NumberInputProps {
+    /** Step size for the up/down buttons and native arrow-key handling. Default `1`. */
     step?: number;
-    value?: any;
+    /** Current value. `undefined` renders an empty field; a number renders that value. */
+    value?: number | '';
+    /** Fires with the next number. Empty input resolves to `undefined`. */
     onChange?: (e: {
         target: {
-            value: number;
+            value: number | undefined;
             id?: string;
             name?: string;
         };
@@ -1470,8 +1510,8 @@ interface NumberInputProps {
     htmlFor?: string;
     name?: string;
     disabled?: boolean;
-    /** 'horizontal' | 'vertical' */
-    layout?: string;
+    /** Label/input orientation. Defaults to `'horizontal'`. */
+    layout?: 'horizontal' | 'vertical';
     errorMessage?: React$1.ReactNode;
     inputStyle?: React$1.CSSProperties;
     labelStyle?: React$1.CSSProperties;
@@ -1480,12 +1520,42 @@ interface NumberInputProps {
     min?: number;
     max?: number;
     readOnly?: boolean;
-    [key: string]: any;
+    /** Optional precision for floating-point steps (number of decimal places to round to). */
+    precision?: number;
 }
 /**
- * Number input with increment / decrement controls.
+ * Numeric input with keyboard-accessible increment / decrement buttons.
+ *
+ * **What's improved over the previous version**
+ * - Step buttons are real `<button>` elements with `aria-label`, focus rings,
+ *   and proper keyboard activation (Enter / Space). The previous version used
+ *   `<span onClick>` which keyboard-only users could not reach.
+ * - Floating-point drift on decimal steps (`0.1 + 0.2 = 0.30000000000000004`)
+ *   is rounded out via a `precision` prop or auto-inferred from the step.
+ * - Empty input resolves to `undefined` instead of `NaN` — works with form
+ *   libraries (RHF, Formik) that treat empty as "no value".
+ * - The decrement chevron actually points down (the previous SVG was the up
+ *   chevron rotated, with the up chevron itself wrongly using the same path).
+ * - Width is a prop, not hardcoded `w-60`. Default is `w-full` so the input
+ *   flows with its parent.
+ *
+ * @example
+ * ```tsx
+ * const [qty, setQty] = useState<number | undefined>(1)
+ * <NumberInput
+ *   label="Quantity"
+ *   value={qty ?? ''}
+ *   onChange={({ target }) => setQty(target.value)}
+ *   min={0} max={99}
+ * />
+ * ```
+ *
+ * @example Decimal step
+ * ```tsx
+ * <NumberInput label="Tonnage" step={0.25} precision={2} />
+ * ```
  */
-declare function NumberInput({ step, value, onChange, label, htmlFor, name, disabled, layout, errorMessage, inputStyle, labelStyle, placeholder, style, min, max, readOnly, }: NumberInputProps): react_jsx_runtime.JSX.Element;
+declare function NumberInput({ step, value, onChange, label, htmlFor, name, disabled, layout, errorMessage, inputStyle, labelStyle, placeholder, style, min, max, readOnly, precision, }: NumberInputProps): react_jsx_runtime.JSX.Element;
 
 interface PasswordProps {
     value?: string;