@geomak/ui 1.1.0 → 1.3.0

package/dist/index.d.cts

@@ -1,44 +1,8 @@
+export { C as COLORS, S as SemanticColorKey, a as SemanticRadiusKey, V as VarColorKey, b as VarRadiusKey, c as VarShadowKey, P as palette, s as semanticTokens, v as vars } from './index-CPCiQllz.cjs';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React$1 from 'react';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 
-declare const COLORS: {
-    PALETTE: {
-        readonly 'true-blue': "#0466C8";
-        readonly 'usafa-blue': "#0353A4";
-        readonly 'dark-cornflower-blue': "#023E7D";
-        readonly 'oxford-blue-700': "#002855";
-        readonly 'oxford-blue-800': "#001845";
-        readonly 'oxford-blue-900': "#001233";
-        readonly independence: "#33415C";
-        readonly 'black-coral': "#5C677D";
-        readonly 'roman-silver': "#7D8597";
-        readonly manatee: "#979DAC";
-        readonly white: "#fff";
-        readonly ice: "#DBF1FD";
-        readonly 'ice-dark': "#d0e3ed";
-        readonly 'midnight-green-eagle-900': "#013E53";
-        readonly 'midnight-green-eagle-700': "#125F6C";
-        readonly 'midnight-green-eagle-500': "#125F6C";
-        readonly 'rich-black-fogra': "#000202";
-        readonly 'rich-black-fogra-opaque': "#0000005b";
-        readonly 'prussian-blue': "#00273A";
-        readonly 'indigo-dye': "#013C54";
-        readonly ming: "#0F6372";
-        readonly skobeloff: "#217479";
-        readonly 'dark-cyan': "#2A8784";
-        readonly 'celadon-green': "#297E74";
-        readonly turquise: "#2EB8B0";
-        readonly 'oxford-blue-700-opaque': "rgba(0, 40, 85, .3)";
-        readonly disabled: "#dee2e6";
-        readonly error: "tomato";
-        readonly warning: "orange";
-        readonly success: "lightgreen";
-        readonly info: "lightblue";
-        readonly transparent: "rgba(255, 255, 255, .0)";
-    };
-};
-
 declare const Icon: {
     (): react_jsx_runtime.JSX.Element;
     Moon: ({ color }: {
@@ -501,22 +465,25 @@ interface NotificationPayload {
  * toast notifications. Then call `useNotification()` anywhere inside to
  * trigger them.
  *
+ * Toasts slide in from the right and exit to the right.
+ * `prefers-reduced-motion` is respected via `useReducedMotion()`.
+ *
  * @example
- * // _app.tsx / main.tsx
+ * // main.tsx / _app.tsx
  * <NotificationProvider>
  *   <App />
  * </NotificationProvider>
  *
  * // Inside a component
  * const notify = useNotification()
- * notify.success({ title: 'Saved!', description: 'Your changes were saved.', duration: 3000 })
+ * notify.success({ title: 'Saved!', description: 'Your changes were saved.' })
  */
 declare function NotificationProvider({ children }: {
     children: React$1.ReactNode;
 }): react_jsx_runtime.JSX.Element;
 /** ─────────────────── hook ─────────────────── */
 /**
- * Imperative notification API.
+ * Imperative notification API. Must be called inside `NotificationProvider`.
  *
  * @example
  * const notify = useNotification()
@@ -863,38 +830,101 @@ interface ThemeSwitchProps {
             checked: boolean;
         };
     }) => void;
+    /** Optional accessible label (defaults to "Toggle dark mode") */
+    label?: string;
 }
 /**
  * Theme (dark-mode) toggle switch powered by Radix Switch.
  *
- * Displays a red/green dot to indicate the checked state.
- * Used as the dark-mode toggle in the TopBar.
+ * The thumb color indicates mode: green = light, slate = dark.
+ * Layout (position, margin) is the parent's responsibility — this component
+ * renders inline with no external margins.
  *
  * @example
- * <Switch checked={isDarkMode} onChange={({ target }) => setDarkMode(target.checked)} />
+ * <ThemeSwitch checked={isDark} onChange={({ target }) => setDark(target.checked)} />
  */
-declare function Switch$1({ checked, onChange }: ThemeSwitchProps): react_jsx_runtime.JSX.Element;
+declare function ThemeSwitch({ checked, onChange, label }: ThemeSwitchProps): react_jsx_runtime.JSX.Element;
+
+interface TopBarProps {
+    /** Brand area — logo, wordmark, or app name. Rendered on the leading edge. */
+    brand?: React$1.ReactNode;
+    /**
+     * Centre content — primary navigation links, breadcrumb, or page title.
+     * On mobile (< md breakpoint) this moves below the brand row.
+     */
+    center?: React$1.ReactNode;
+    /**
+     * Trailing actions — theme toggle, user avatar, notification bell, etc.
+     * Rendered on the trailing edge.
+     */
+    actions?: React$1.ReactNode;
+    /**
+     * Height in pixels (default 56). Controls the `h-*` style directly so
+     * child scroll-offset calculations can consume it as a CSS var.
+     */
+    height?: number;
+    /** Additional className on the root element */
+    className?: string;
+}
+/**
+ * App-shell top navigation bar.
+ *
+ * Three named slots: brand (leading), center, actions (trailing).
+ * All slots are optional — omit what you don't need.
+ *
+ * The component is sticky by default (`sticky top-0`) with `z-[100]`.
+ * Height is exposed as `--topbar-height` CSS variable on the element so
+ * layout children can reference it for scroll-offset or sticky positioning.
+ *
+ * Light/dark aware via Phase B semantic tokens.
+ *
+ * @example
+ * <TopBar
+ *   brand={<Logo />}
+ *   center={<NavLinks />}
+ *   actions={
+ *     <>
+ *       <ThemeSwitch checked={isDark} onChange={toggleDark} />
+ *       <UserAvatar />
+ *     </>
+ *   }
+ * />
+ */
+declare function TopBar({ brand, center, actions, height, className, }: TopBarProps): react_jsx_runtime.JSX.Element;
 
 interface ButtonProps {
     content?: React$1.ReactNode;
-    /** HTML button type attribute */
+    /** Visual style variant */
+    variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
+    /** Size — controls height, padding, and font size */
+    size?: 'sm' | 'md' | 'lg';
+    /** HTML button type */
     buttonType?: 'button' | 'submit' | 'reset';
-    /** Visual variant */
-    type?: string;
     loading?: boolean;
     disabled?: boolean;
+    /** Inline style overrides (width, etc.). Margins/layout belong in the parent. */
     style?: React$1.CSSProperties;
+    /** Leading icon — rendered before content */
     icon?: React$1.ReactNode;
     onClick?: React$1.MouseEventHandler<HTMLButtonElement>;
+    /**
+     * @deprecated Pass `variant` instead. Kept for API compat — currently no-op.
+     * Will be removed in the next major version.
+     */
+    type?: string;
 }
 /**
- * Primary action button.
+ * Primary action button with variant + size system.
+ *
+ * Width is never hardcoded — set `style={{ width }}` or let the parent grid/flex control it.
  *
  * @example
  * <Button content="Save" onClick={handleSave} />
- * <Button content="Submit" buttonType="submit" loading={isPending} />
+ * <Button content="Delete" variant="danger" size="sm" />
+ * <Button content="Cancel" variant="secondary" />
+ * <Button content="Loading…" loading buttonType="submit" />
  */
-declare function Button({ content, buttonType, loading, disabled, style, icon, onClick, }: ButtonProps): react_jsx_runtime.JSX.Element;
+declare function Button({ content, variant, size, buttonType, loading, disabled, style, icon, onClick, }: ButtonProps): react_jsx_runtime.JSX.Element;
 
 interface TextInputProps {
     value?: any;
@@ -1273,4 +1303,4 @@ declare const Temporal: {
     TemporalPicker: typeof TemporalPickerBase;
 };
 
-export { AutoComplete, type AutoCompleteProps, Button, type ButtonProps, COLORS, 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, Switch, type SwitchInputProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, Temporal, type TemporalPickerProps, TextInput, type TextInputProps, Switch$1 as ThemeSwitch, type ThemeSwitchProps, ToggleButton, type ToggleButtonProps, type ToggleItem, Tooltip, type TooltipProps, TooltipProvider, Tree, type TreeItemClickPayload, type TreeNode, type TreeProps, TreeSelect, type TreeSelectProps, Wizard, type WizardProps, type WizardStep, useNotification };
+export { 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, Switch, type SwitchInputProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, Temporal, type TemporalPickerProps, TextInput, type TextInputProps, ThemeSwitch, type ThemeSwitchProps, 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,44 +1,8 @@
+export { C as COLORS, S as SemanticColorKey, a as SemanticRadiusKey, V as VarColorKey, b as VarRadiusKey, c as VarShadowKey, P as palette, s as semanticTokens, v as vars } from './index-CPCiQllz.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React$1 from 'react';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 
-declare const COLORS: {
-    PALETTE: {
-        readonly 'true-blue': "#0466C8";
-        readonly 'usafa-blue': "#0353A4";
-        readonly 'dark-cornflower-blue': "#023E7D";
-        readonly 'oxford-blue-700': "#002855";
-        readonly 'oxford-blue-800': "#001845";
-        readonly 'oxford-blue-900': "#001233";
-        readonly independence: "#33415C";
-        readonly 'black-coral': "#5C677D";
-        readonly 'roman-silver': "#7D8597";
-        readonly manatee: "#979DAC";
-        readonly white: "#fff";
-        readonly ice: "#DBF1FD";
-        readonly 'ice-dark': "#d0e3ed";
-        readonly 'midnight-green-eagle-900': "#013E53";
-        readonly 'midnight-green-eagle-700': "#125F6C";
-        readonly 'midnight-green-eagle-500': "#125F6C";
-        readonly 'rich-black-fogra': "#000202";
-        readonly 'rich-black-fogra-opaque': "#0000005b";
-        readonly 'prussian-blue': "#00273A";
-        readonly 'indigo-dye': "#013C54";
-        readonly ming: "#0F6372";
-        readonly skobeloff: "#217479";
-        readonly 'dark-cyan': "#2A8784";
-        readonly 'celadon-green': "#297E74";
-        readonly turquise: "#2EB8B0";
-        readonly 'oxford-blue-700-opaque': "rgba(0, 40, 85, .3)";
-        readonly disabled: "#dee2e6";
-        readonly error: "tomato";
-        readonly warning: "orange";
-        readonly success: "lightgreen";
-        readonly info: "lightblue";
-        readonly transparent: "rgba(255, 255, 255, .0)";
-    };
-};
-
 declare const Icon: {
     (): react_jsx_runtime.JSX.Element;
     Moon: ({ color }: {
@@ -501,22 +465,25 @@ interface NotificationPayload {
  * toast notifications. Then call `useNotification()` anywhere inside to
  * trigger them.
  *
+ * Toasts slide in from the right and exit to the right.
+ * `prefers-reduced-motion` is respected via `useReducedMotion()`.
+ *
  * @example
- * // _app.tsx / main.tsx
+ * // main.tsx / _app.tsx
  * <NotificationProvider>
  *   <App />
  * </NotificationProvider>
  *
  * // Inside a component
  * const notify = useNotification()
- * notify.success({ title: 'Saved!', description: 'Your changes were saved.', duration: 3000 })
+ * notify.success({ title: 'Saved!', description: 'Your changes were saved.' })
  */
 declare function NotificationProvider({ children }: {
     children: React$1.ReactNode;
 }): react_jsx_runtime.JSX.Element;
 /** ─────────────────── hook ─────────────────── */
 /**
- * Imperative notification API.
+ * Imperative notification API. Must be called inside `NotificationProvider`.
  *
  * @example
  * const notify = useNotification()
@@ -863,38 +830,101 @@ interface ThemeSwitchProps {
             checked: boolean;
         };
     }) => void;
+    /** Optional accessible label (defaults to "Toggle dark mode") */
+    label?: string;
 }
 /**
  * Theme (dark-mode) toggle switch powered by Radix Switch.
  *
- * Displays a red/green dot to indicate the checked state.
- * Used as the dark-mode toggle in the TopBar.
+ * The thumb color indicates mode: green = light, slate = dark.
+ * Layout (position, margin) is the parent's responsibility — this component
+ * renders inline with no external margins.
  *
  * @example
- * <Switch checked={isDarkMode} onChange={({ target }) => setDarkMode(target.checked)} />
+ * <ThemeSwitch checked={isDark} onChange={({ target }) => setDark(target.checked)} />
  */
-declare function Switch$1({ checked, onChange }: ThemeSwitchProps): react_jsx_runtime.JSX.Element;
+declare function ThemeSwitch({ checked, onChange, label }: ThemeSwitchProps): react_jsx_runtime.JSX.Element;
+
+interface TopBarProps {
+    /** Brand area — logo, wordmark, or app name. Rendered on the leading edge. */
+    brand?: React$1.ReactNode;
+    /**
+     * Centre content — primary navigation links, breadcrumb, or page title.
+     * On mobile (< md breakpoint) this moves below the brand row.
+     */
+    center?: React$1.ReactNode;
+    /**
+     * Trailing actions — theme toggle, user avatar, notification bell, etc.
+     * Rendered on the trailing edge.
+     */
+    actions?: React$1.ReactNode;
+    /**
+     * Height in pixels (default 56). Controls the `h-*` style directly so
+     * child scroll-offset calculations can consume it as a CSS var.
+     */
+    height?: number;
+    /** Additional className on the root element */
+    className?: string;
+}
+/**
+ * App-shell top navigation bar.
+ *
+ * Three named slots: brand (leading), center, actions (trailing).
+ * All slots are optional — omit what you don't need.
+ *
+ * The component is sticky by default (`sticky top-0`) with `z-[100]`.
+ * Height is exposed as `--topbar-height` CSS variable on the element so
+ * layout children can reference it for scroll-offset or sticky positioning.
+ *
+ * Light/dark aware via Phase B semantic tokens.
+ *
+ * @example
+ * <TopBar
+ *   brand={<Logo />}
+ *   center={<NavLinks />}
+ *   actions={
+ *     <>
+ *       <ThemeSwitch checked={isDark} onChange={toggleDark} />
+ *       <UserAvatar />
+ *     </>
+ *   }
+ * />
+ */
+declare function TopBar({ brand, center, actions, height, className, }: TopBarProps): react_jsx_runtime.JSX.Element;
 
 interface ButtonProps {
     content?: React$1.ReactNode;
-    /** HTML button type attribute */
+    /** Visual style variant */
+    variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
+    /** Size — controls height, padding, and font size */
+    size?: 'sm' | 'md' | 'lg';
+    /** HTML button type */
     buttonType?: 'button' | 'submit' | 'reset';
-    /** Visual variant */
-    type?: string;
     loading?: boolean;
     disabled?: boolean;
+    /** Inline style overrides (width, etc.). Margins/layout belong in the parent. */
     style?: React$1.CSSProperties;
+    /** Leading icon — rendered before content */
     icon?: React$1.ReactNode;
     onClick?: React$1.MouseEventHandler<HTMLButtonElement>;
+    /**
+     * @deprecated Pass `variant` instead. Kept for API compat — currently no-op.
+     * Will be removed in the next major version.
+     */
+    type?: string;
 }
 /**
- * Primary action button.
+ * Primary action button with variant + size system.
+ *
+ * Width is never hardcoded — set `style={{ width }}` or let the parent grid/flex control it.
  *
  * @example
  * <Button content="Save" onClick={handleSave} />
- * <Button content="Submit" buttonType="submit" loading={isPending} />
+ * <Button content="Delete" variant="danger" size="sm" />
+ * <Button content="Cancel" variant="secondary" />
+ * <Button content="Loading…" loading buttonType="submit" />
  */
-declare function Button({ content, buttonType, loading, disabled, style, icon, onClick, }: ButtonProps): react_jsx_runtime.JSX.Element;
+declare function Button({ content, variant, size, buttonType, loading, disabled, style, icon, onClick, }: ButtonProps): react_jsx_runtime.JSX.Element;
 
 interface TextInputProps {
     value?: any;
@@ -1273,4 +1303,4 @@ declare const Temporal: {
     TemporalPicker: typeof TemporalPickerBase;
 };
 
-export { AutoComplete, type AutoCompleteProps, Button, type ButtonProps, COLORS, 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, Switch, type SwitchInputProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, Temporal, type TemporalPickerProps, TextInput, type TextInputProps, Switch$1 as ThemeSwitch, type ThemeSwitchProps, ToggleButton, type ToggleButtonProps, type ToggleItem, Tooltip, type TooltipProps, TooltipProvider, Tree, type TreeItemClickPayload, type TreeNode, type TreeProps, TreeSelect, type TreeSelectProps, Wizard, type WizardProps, type WizardStep, useNotification };
+export { 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, Switch, type SwitchInputProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, Temporal, type TemporalPickerProps, TextInput, type TextInputProps, ThemeSwitch, type ThemeSwitchProps, 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 };