@geomak/ui 1.2.0 → 1.3.0

package/dist/index.d.cts

@@ -465,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()
@@ -827,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;
@@ -1237,4 +1303,4 @@ declare const Temporal: {
     TemporalPicker: typeof TemporalPickerBase;
 };
 
-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, 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

@@ -465,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()
@@ -827,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;
@@ -1237,4 +1303,4 @@ declare const Temporal: {
     TemporalPicker: typeof TemporalPickerBase;
 };
 
-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, 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.js

@@ -202,8 +202,45 @@ function IconButton({
     }
   );
 }
+var VARIANT_CLASSES = {
+  primary: [
+    "bg-accent text-white",
+    "hover:bg-accent-hover",
+    "active:bg-accent",
+    "disabled:bg-roman-silver disabled:text-white/70 disabled:cursor-not-allowed",
+    "focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2"
+  ].join(" "),
+  secondary: [
+    "bg-transparent border border-accent text-accent",
+    "hover:bg-accent hover:text-white",
+    "active:bg-accent-hover active:text-white",
+    "disabled:border-roman-silver disabled:text-roman-silver disabled:cursor-not-allowed",
+    "focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2"
+  ].join(" "),
+  ghost: [
+    "bg-transparent text-foreground-secondary",
+    "hover:bg-ice dark:hover:bg-oxford-blue-700 hover:text-foreground",
+    "active:bg-ice-dark dark:active:bg-independence",
+    "disabled:text-roman-silver disabled:cursor-not-allowed",
+    "focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2"
+  ].join(" "),
+  danger: [
+    "bg-status-error text-white",
+    "hover:opacity-90",
+    "active:opacity-100",
+    "disabled:opacity-50 disabled:cursor-not-allowed",
+    "focus-visible:ring-2 focus-visible:ring-status-error focus-visible:ring-offset-2"
+  ].join(" ")
+};
+var SIZE_CLASSES = {
+  sm: "h-7  px-3   text-xs  gap-1   rounded-md",
+  md: "h-9  px-4   text-sm  gap-1.5 rounded-lg",
+  lg: "h-11 px-5   text-sm  gap-2   rounded-xl"
+};
 function Button({
   content,
+  variant = "primary",
+  size = "md",
   buttonType = "button",
   loading,
   disabled,
@@ -217,26 +254,33 @@ function Button({
       onClick,
       disabled: disabled || loading,
       type: buttonType,
-      className: "bg-usafa-blue w-60 h-9 outline-offset-2 mt-5 rounded-lg disabled:bg-roman-silver disabled:cursor-not-allowed transition-all duration-300 hover:bg-true-blue active:bg-usafa-blue flex justify-center gap-1 items-center text-white",
-      style: style ?? {},
+      style,
+      className: [
+        // Base — layout, transitions, focus reset
+        "inline-flex items-center justify-center font-medium",
+        "outline-none transition-colors duration-150 select-none",
+        "whitespace-nowrap",
+        SIZE_CLASSES[size],
+        VARIANT_CLASSES[variant]
+      ].join(" "),
       children: [
         loading ? /* @__PURE__ */ jsx(
           "svg",
           {
-            xmlns: "http://www.w3.org/2000/svg",
             viewBox: "0 0 24 24",
-            fill: "#fff",
-            className: "w-6 h-6 animate-spin",
+            fill: "currentColor",
+            className: "w-4 h-4 animate-spin flex-shrink-0",
+            "aria-hidden": "true",
             children: /* @__PURE__ */ jsx(
               "path",
               {
                 fillRule: "evenodd",
-                d: "M4.755 10.059a7.5 7.5 0 0112.548-3.364l1.903 1.903h-3.183a.75.75 0 100 1.5h4.992a.75.75 0 00.75-.75V4.356a.75.75 0 00-1.5 0v3.18l-1.9-1.9A9 9 0 003.306 9.67a.75.75 0 101.45.388zm15.408 3.352a.75.75 0 00-.919.53 7.5 7.5 0 01-12.548 3.364l-1.902-1.903h3.183a.75.75 0 000-1.5H2.984a.75.75 0 00-.75.75v4.992a.75.75 0 001.5 0v-3.18l1.9 1.9a9 9 0 0015.059-4.035.75.75 0 00-.53-.918z",
-                clipRule: "evenodd"
+                clipRule: "evenodd",
+                d: "M4.755 10.059a7.5 7.5 0 0112.548-3.364l1.903 1.903h-3.183a.75.75 0 100 1.5h4.992a.75.75 0 00.75-.75V4.356a.75.75 0 00-1.5 0v3.18l-1.9-1.9A9 9 0 003.306 9.67a.75.75 0 101.45.388zm15.408 3.352a.75.75 0 00-.919.53 7.5 7.5 0 01-12.548 3.364l-1.902-1.903h3.183a.75.75 0 000-1.5H2.984a.75.75 0 00-.75.75v4.992a.75.75 0 001.5 0v-3.18l1.9 1.9a9 9 0 0015.059-4.035.75.75 0 00-.53-.918z"
               }
             )
           }
-        ) : icon ? icon : null,
+        ) : icon ? /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", "aria-hidden": "true", children: icon }) : null,
         content
       ]
     }
@@ -659,15 +703,15 @@ var NotificationContext = createContext({
   open: () => void 0,
   close: () => void 0
 });
-var typeClass = {
-  info: "bg-info",
-  success: "bg-success",
-  warning: "bg-warning",
-  danger: "bg-error"
+var TYPE_BG = {
+  info: "bg-status-info",
+  success: "bg-status-success",
+  warning: "bg-status-warning",
+  danger: "bg-status-error"
 };
 function TypeIcon({ type }) {
   if (type === "success") {
-    return /* @__PURE__ */ jsx("svg", { width: "28", height: "28", viewBox: "0 0 28 28", fill: "none", children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 28 28", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
       "path",
       {
         fillRule: "evenodd",
@@ -678,52 +722,94 @@ function TypeIcon({ type }) {
     ) });
   }
   if (type === "info") {
-    return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#fff", className: "w-7 h-7", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 01.67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 11-.671-1.34l.041-.022zM12 9a.75.75 0 100-1.5.75.75 0 000 1.5z", clipRule: "evenodd" }) });
+    return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#fff", className: "w-5 h-5", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 01.67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 11-.671-1.34l.041-.022zM12 9a.75.75 0 100-1.5.75.75 0 000 1.5z", clipRule: "evenodd" }) });
   }
   if (type === "warning") {
-    return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#fff", className: "w-7 h-7", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z", clipRule: "evenodd" }) });
+    return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#fff", className: "w-5 h-5", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003zM12 8.25a.75.75 0 01.75.75v3.75a.75.75 0 01-1.5 0V9a.75.75 0 01.75-.75zm0 8.25a.75.75 0 100-1.5.75.75 0 000 1.5z", clipRule: "evenodd" }) });
   }
-  return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#fff", className: "w-7 h-7", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm11.378-3.917c-.89-.777-2.366-.777-3.255 0a.75.75 0 01-.988-1.129c1.454-1.272 3.776-1.272 5.23 0 1.513 1.324 1.513 3.518 0 4.842a3.75 3.75 0 01-.837.552c-.676.328-1.028.774-1.028 1.152v.75a.75.75 0 01-1.5 0v-.75c0-1.279 1.06-2.107 1.875-2.502.182-.088.351-.199.503-.331.83-.727.83-1.857 0-2.584zM12 18a.75.75 0 100-1.5.75.75 0 000 1.5z", clipRule: "evenodd" }) });
+  return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#fff", className: "w-5 h-5", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm11.378-3.917c-.89-.777-2.366-.777-3.255 0a.75.75 0 01-.988-1.129c1.454-1.272 3.776-1.272 5.23 0 1.513 1.324 1.513 3.518 0 4.842a3.75 3.75 0 01-.837.552c-.676.328-1.028.774-1.028 1.152v.75a.75.75 0 01-1.5 0v-.75c0-1.279 1.06-2.107 1.875-2.502.182-.088.351-.199.503-.331.83-.727.83-1.857 0-2.584zM12 18a.75.75 0 100-1.5.75.75 0 000 1.5z", clipRule: "evenodd" }) });
+}
+function NotificationItem({
+  n,
+  onClose,
+  reduced
+}) {
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      layout: true,
+      initial: { opacity: 0, x: reduced ? 0 : 56, scale: reduced ? 0.97 : 1 },
+      animate: { opacity: 1, x: 0, scale: 1 },
+      exit: { opacity: 0, x: reduced ? 0 : 40, scale: reduced ? 0.97 : 1 },
+      transition: reduced ? { duration: 0 } : {
+        opacity: { duration: 0.15 },
+        x: { type: "tween", duration: 0.22, ease: [0.16, 1, 0.3, 1] },
+        layout: { duration: 0.2 }
+      },
+      children: /* @__PURE__ */ jsxs(
+        Toast.Root,
+        {
+          open: true,
+          duration: n.duration,
+          onOpenChange: (o) => {
+            if (!o) onClose(n.id);
+          },
+          className: [
+            "rounded-xl shadow-md p-3 w-[300px] text-white",
+            "focus:outline-none focus-visible:ring-2 focus-visible:ring-white/60",
+            TYPE_BG[n.type ?? "info"]
+          ].join(" "),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5", children: [
+              /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: /* @__PURE__ */ jsx(TypeIcon, { type: n.type ?? "info" }) }),
+              /* @__PURE__ */ jsx(Toast.Title, { className: "font-semibold text-sm leading-snug flex-1", children: n.title }),
+              /* @__PURE__ */ jsx(Toast.Action, { asChild: true, altText: "Close", children: /* @__PURE__ */ jsx(
+                "button",
+                {
+                  "aria-label": "Close notification",
+                  onClick: () => onClose(n.id),
+                  className: "flex-shrink-0 rounded-md p-1 hover:bg-white/20 transition-colors duration-150 focus:outline-none focus-visible:ring-1 focus-visible:ring-white/60",
+                  children: /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M15 5L5 15M5 5l10 10", stroke: "#fff", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                }
+              ) })
+            ] }),
+            n.description && /* @__PURE__ */ jsx(Toast.Description, { className: "mt-1.5 text-xs text-white/80 leading-relaxed pl-7", children: n.description })
+          ]
+        }
+      )
+    }
+  );
 }
 function NotificationProvider({ children }) {
   const [notifications, setNotifications] = useState([]);
+  const reduced = useReducedMotion();
   const open = (payload) => {
-    setNotifications((prev) => [...prev, { duration: 4e3, ...payload, id: Date.now() + Math.random() }]);
+    setNotifications((prev) => [
+      ...prev,
+      { duration: 4e3, ...payload, id: Date.now() + Math.random() }
+    ]);
   };
   const close = (id) => {
     setNotifications((prev) => prev.filter((n) => n.id !== id));
   };
   return /* @__PURE__ */ jsx(NotificationContext.Provider, { value: { open, close }, children: /* @__PURE__ */ jsxs(Toast.Provider, { swipeDirection: "right", children: [
     children,
-    notifications.map((n) => /* @__PURE__ */ jsxs(
-      Toast.Root,
+    /* @__PURE__ */ jsx(
+      Toast.Viewport,
       {
-        open: true,
-        duration: n.duration,
-        onOpenChange: (o) => {
-          if (!o) close(n.id);
-        },
-        className: `rounded-lg shadow-md p-2 w-[300px] text-white ${typeClass[n.type ?? "info"]} data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=open]:slide-in-from-right-full data-[state=closed]:slide-out-to-right-full`,
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 border-b border-white pb-1", children: [
-            /* @__PURE__ */ jsx(TypeIcon, { type: n.type ?? "info" }),
-            /* @__PURE__ */ jsx(Toast.Title, { className: "text-center font-bold text-lg flex-1", children: n.title }),
-            /* @__PURE__ */ jsx(Toast.Action, { asChild: true, altText: "Close", children: /* @__PURE__ */ jsx(
-              "button",
-              {
-                "aria-label": "Close notification",
-                onClick: () => close(n.id),
-                className: "cursor-pointer rounded p-0.5 hover:bg-white/20 transition-colors",
-                children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M15 5L5 15M5 5l10 10", stroke: "#fff", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
-              }
-            ) })
-          ] }),
-          n.description && /* @__PURE__ */ jsx(Toast.Description, { className: "text-center mt-1 text-sm", children: n.description })
-        ]
-      },
-      n.id
-    )),
-    /* @__PURE__ */ jsx(Toast.Viewport, { className: "fixed top-[50px] right-0 flex flex-col gap-2 w-[350px] z-[500000] p-4 outline-none" })
+        asChild: true,
+        className: "fixed top-[56px] right-0 z-[500000] flex flex-col gap-2 w-[350px] p-4 outline-none",
+        children: /* @__PURE__ */ jsx("ul", { children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: notifications.map((n) => /* @__PURE__ */ jsx(
+          NotificationItem,
+          {
+            n,
+            onClose: close,
+            reduced
+          },
+          n.id
+        )) }) })
+      }
+    )
   ] }) });
 }
 function useNotification() {
@@ -1700,29 +1786,77 @@ function Table({
     /* @__PURE__ */ jsx("div", { children: footer })
   ] });
 }
-function Switch({ checked, onChange }) {
+function ThemeSwitch({ checked, onChange, label = "Toggle dark mode" }) {
   const id = useId();
-  return /* @__PURE__ */ jsx("div", { className: "relative bottom-5", children: /* @__PURE__ */ jsx("label", { htmlFor: id, className: "flex items-center cursor-pointer mr-12 select-none", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("label", { htmlFor: id, className: "flex items-center gap-2 cursor-pointer select-none", children: /* @__PURE__ */ jsx(
     SwitchPrimitive.Root,
     {
       id,
       checked,
       onCheckedChange: (c) => onChange({ target: { checked: c } }),
-      className: "relative inline-flex h-6 w-14 items-center rounded-full bg-prussian-blue dark:bg-white transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-usafa-blue",
+      "aria-label": label,
+      className: [
+        "relative inline-flex h-6 w-11 items-center rounded-full",
+        "transition-colors duration-200",
+        "bg-foreground-secondary data-[state=checked]:bg-accent",
+        "focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2"
+      ].join(" "),
       children: /* @__PURE__ */ jsx(
         SwitchPrimitive.Thumb,
         {
-          className: "pointer-events-none inline-flex h-8 w-8 rounded-full shadow transition-transform duration-200 data-[state=checked]:translate-x-[22px] data-[state=unchecked]:translate-x-[-4px]",
-          children: /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: `rounded-full w-8 h-8 ${checked ? "bg-success" : "bg-error"} transition-colors duration-200`
-            }
+          className: [
+            "pointer-events-none block h-5 w-5 rounded-full shadow-sm",
+            "transition-transform duration-200",
+            "data-[state=checked]:translate-x-[22px]",
+            "data-[state=unchecked]:translate-x-[2px]",
+            // Moon icon (dark mode indicator) when checked, sun when unchecked
+            checked ? "bg-oxford-blue-900" : "bg-white"
+          ].join(" "),
+          children: checked ? (
+            // Moon
+            /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "currentColor", className: "w-3 h-3 m-1 text-manatee", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z" }) })
+          ) : (
+            // Sun
+            /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "currentColor", className: "w-3 h-3 m-1 text-usafa-blue", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707z" }) })
           )
         }
       )
     }
-  ) }) });
+  ) });
+}
+function TopBar({
+  brand,
+  center,
+  actions,
+  height = 56,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxs(
+    "header",
+    {
+      className: [
+        "sticky top-0 z-[100]",
+        "flex items-center justify-between gap-4",
+        "border-b border-border bg-surface",
+        "px-4 md:px-6",
+        className
+      ].join(" "),
+      style: {
+        height,
+        // Expose as CSS var so consumers can write:
+        //   padding-top: calc(var(--topbar-height) + 1rem)
+        ["--topbar-height"]: `${height}px`
+      },
+      children: [
+        brand !== void 0 ? /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 flex-shrink-0", children: brand }) : (
+          // Reserve leading space even when brand is null so center stays centred
+          /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: "flex-shrink-0 w-0" })
+        ),
+        center !== void 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center justify-center min-w-0", children: center }),
+        actions !== void 0 && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 flex-shrink-0", children: actions })
+      ]
+    }
+  );
 }
 function TextInput({
   value,
@@ -1999,7 +2133,7 @@ function Checkbox({
     /* @__PURE__ */ jsx("div", { className: "text-error text-center", children: errorMessage })
   ] });
 }
-function Switch2({
+function Switch({
   checked = false,
   onChange,
   checkedIcon,
@@ -2599,6 +2733,6 @@ Temporal.DatePicker = DatePickerBase;
 Temporal.TemporalPicker = TemporalPickerBase;
 var DatePicker_default = Temporal;
 
-export { AutoComplete, Button, Catalog, CatalogCarousel, CatalogGrid, Checkbox, ContextMenu, Drawer, Dropdown, DropdownPill, FadingBase, FileInput, GridCard, icons_default as Icon, IconButton, List2 as List, LoadingSpinner, MenuBar, MenuBarItem, Modal, NotificationProvider, NumberInput, OpaqueGridCard, Password, ScalableContainer, SearchInput_default as SearchInput, Switch2 as Switch, Table, Tabs, DatePicker_default as Temporal, TextInput, Switch as ThemeSwitch, ToggleButton, Tooltip, TooltipProvider, Tree, TreeSelect, Wizard, useNotification };
+export { AutoComplete, Button, Catalog, CatalogCarousel, CatalogGrid, Checkbox, ContextMenu, Drawer, Dropdown, DropdownPill, FadingBase, FileInput, GridCard, icons_default as Icon, IconButton, List2 as List, LoadingSpinner, MenuBar, MenuBarItem, Modal, NotificationProvider, NumberInput, OpaqueGridCard, Password, ScalableContainer, SearchInput_default as SearchInput, Switch, Table, Tabs, DatePicker_default as Temporal, TextInput, ThemeSwitch, ToggleButton, Tooltip, TooltipProvider, TopBar, Tree, TreeSelect, Wizard, useNotification };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map