@justin_evo/evo-ui 1.0.2 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justin_evo/evo-ui",
-  "version": "1.0.2",
+  "version": "1.2.0",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
   "types": "dist/index.d.ts",

package/src/Nav/Nav.tsx

@@ -52,6 +52,9 @@ export interface EvoNavProps extends Omit<HTMLAttributes<HTMLElement>, 'children
   onDrawerOpenChange?: (open: boolean) => void;
   /** Hide the built-in hamburger trigger (use when wiring a trigger yourself). */
   hideTrigger?: boolean;
+  /** Collapse to an icon-only rail: labels hide, icons center, and each row
+   *  shows a native tooltip from its `tooltip` prop. @default false */
+  collapsed?: boolean;
   /** Accessible label for the <nav> landmark. @default 'Main navigation' */
   'aria-label'?: string;
 }
@@ -60,6 +63,16 @@ export interface EvoNavGroupProps {
   label: string;
   children: ReactNode;
   className?: string;
+  /** Render the heading as a disclosure that expands/collapses the group. */
+  collapsible?: boolean;
+  /** Uncontrolled initial open state (collapsible only). @default true */
+  defaultOpen?: boolean;
+  /** Controlled open state (collapsible only). */
+  open?: boolean;
+  /** Called when the group expands or collapses. */
+  onOpenChange?: (open: boolean) => void;
+  /** Small count chip shown after the label. */
+  count?: number;
 }
 
 interface EvoNavRowProps {
@@ -70,6 +83,8 @@ interface EvoNavRowProps {
   /** Render as <a href> instead of <button>. */
   href?: string;
   onClick?: (event: ReactMouseEvent | ReactKeyboardEvent) => void;
+  /** Tooltip text shown (via native title) when the nav is collapsed to a rail. */
+  tooltip?: string;
   /** Controlled expand state (only when row has SubItem children). */
   open?: boolean;
   /** Uncontrolled initial expand state. */
@@ -106,6 +121,8 @@ interface NavRootContextValue {
   closeDrawer: () => void;
   /** Root id used by the hamburger button's aria-controls. */
   rootId: string;
+  /** Icon-only rail mode — labels hide, rows surface a native tooltip. */
+  collapsed: boolean;
 }
 
 const NavRootContext = createContext<NavRootContextValue | null>(null);
@@ -160,7 +177,7 @@ function focusableRows(root: HTMLElement | null): HTMLElement[] {
   if (!root) return [];
   return Array.from(
     root.querySelectorAll<HTMLElement>(`[${ROW_ATTR}]:not([data-disabled="true"])`),
-  ).filter((el) => el.offsetParent !== null);
+  ).filter((el) => el.offsetParent !== null && el.closest('[inert]') === null);
 }
 
 function moveFocus(root: HTMLElement | null, from: HTMLElement, delta: 1 | -1 | 'first' | 'last') {
@@ -242,6 +259,7 @@ const NavRow = forwardRef<HTMLLIElement, RowInternalProps>(function NavRow(
     active = false,
     href,
     onClick,
+    tooltip,
     open: openProp,
     defaultOpen = false,
     onOpenChange,
@@ -252,6 +270,7 @@ const NavRow = forwardRef<HTMLLIElement, RowInternalProps>(function NavRow(
   liRef,
 ) {
   const rootCtx = useContext(NavRootContext);
+  const collapsed = rootCtx?.collapsed ?? false;
   const { depth } = useContext(NavDepthContext);
   const buttonRef = useRef<HTMLButtonElement | HTMLAnchorElement>(null);
   const rowId = useId();
@@ -364,6 +383,7 @@ const NavRow = forwardRef<HTMLLIElement, RowInternalProps>(function NavRow(
     id: rowId,
     className: rowClasses,
     style: rowStyle,
+    title: collapsed && tooltip ? tooltip : undefined,
     'aria-current': active ? ('page' as const) : undefined,
     'aria-expanded': expandable ? open : undefined,
     'aria-controls': expandable ? subListId : undefined,
@@ -450,21 +470,81 @@ export const EvoNavSubItem = forwardRef<HTMLLIElement, EvoNavSubItemProps>(funct
 EvoNavSubItem.displayName = 'EvoNavSubItem';
 
 export const EvoNavGroup = forwardRef<HTMLLIElement, EvoNavGroupProps>(function EvoNavGroup(
-  { label, children, className },
+  { label, children, className, collapsible = false, defaultOpen = true, open: openProp, onOpenChange, count },
   ref,
 ) {
   const headingId = useId();
+  const panelId = `${headingId}-panel`;
+  const collapsed = useContext(NavRootContext)?.collapsed ?? false;
+  // The disclosure is interactive only when collapsible AND not in icon-rail
+  // mode. In the rail the accordion is meaningless, so we render a static
+  // heading and show the items — avoiding a focusable, label-less toggle that
+  // would silently mutate the (forced-open) state.
+  const interactive = collapsible && !collapsed;
+  const [open, setOpen] = useControllableState(
+    interactive ? openProp : true,
+    interactive ? defaultOpen : true,
+    onOpenChange,
+  );
+  const effectiveOpen = collapsed ? true : open;
+
+  // Toggle `inert` imperatively rather than through a prop: `inert` is only a
+  // managed React attribute as of React 19, but the peer range allows >=17.
+  // The DOM API works on every version and keeps the console warning-free.
+  const panelRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    const el = panelRef.current;
+    if (!el) return;
+    if (effectiveOpen) el.removeAttribute('inert');
+    else el.setAttribute('inert', '');
+  }, [effectiveOpen]);
+
+  const countChip =
+    count != null ? (
+      <span className={styles.navGroupCount} aria-hidden="true">
+        {count}
+      </span>
+    ) : null;
+
+  const list = (
+    <ul role="group" aria-labelledby={headingId} className={styles.navList}>
+      {children}
+    </ul>
+  );
+
   return (
-    <li
-      ref={ref}
-      className={[styles.navGroup, className].filter(Boolean).join(' ')}
-    >
-      <div id={headingId} role="heading" aria-level={3} className={styles.navGroupLabel}>
-        {label}
-      </div>
-      <ul role="group" aria-labelledby={headingId} className={styles.navList}>
-        {children}
-      </ul>
+    <li ref={ref} className={[styles.navGroup, className].filter(Boolean).join(' ')}>
+      {interactive ? (
+        <button
+          type="button"
+          id={headingId}
+          className={[styles.navGroupLabel, styles.navGroupToggle].join(' ')}
+          aria-expanded={effectiveOpen}
+          aria-controls={panelId}
+          onClick={() => setOpen(!open)}
+        >
+          <span className={styles.navGroupLabelText}>{label}</span>
+          {countChip}
+          <ChevronIcon open={effectiveOpen} />
+        </button>
+      ) : (
+        <div id={headingId} role="heading" aria-level={3} className={styles.navGroupLabel}>
+          <span className={styles.navGroupLabelText}>{label}</span>
+          {countChip}
+        </div>
+      )}
+      {interactive ? (
+        <div
+          ref={panelRef}
+          id={panelId}
+          className={styles.navGroupPanel}
+          data-open={effectiveOpen ? 'true' : 'false'}
+        >
+          {list}
+        </div>
+      ) : (
+        list
+      )}
     </li>
   );
 });
@@ -517,6 +597,7 @@ const EvoNavRoot = forwardRef<HTMLElement, EvoNavProps>(function EvoNav(
     defaultDrawerOpen = false,
     onDrawerOpenChange,
     hideTrigger = false,
+    collapsed = false,
     className,
     'aria-label': ariaLabel = 'Main navigation',
     ...rest
@@ -560,14 +641,15 @@ const EvoNavRoot = forwardRef<HTMLElement, EvoNavProps>(function EvoNav(
   }, [isMobile, drawerOpen, closeDrawer]);
 
   const ctxValue = useMemo<NavRootContextValue>(
-    () => ({ isMobile, drawerOpen, setDrawerOpen, closeDrawer, rootId }),
-    [isMobile, drawerOpen, setDrawerOpen, closeDrawer, rootId],
+    () => ({ isMobile, drawerOpen, setDrawerOpen, closeDrawer, rootId, collapsed }),
+    [isMobile, drawerOpen, setDrawerOpen, closeDrawer, rootId, collapsed],
   );
 
   const navClasses = [
     styles.navContainer,
     isMobile ? styles.navMobile : styles.navDesktop,
     isMobile && drawerOpen ? styles.navDrawerOpen : '',
+    collapsed ? styles.navCollapsed : '',
     className,
   ]
     .filter(Boolean)

package/src/RichTextArea/RichTextArea.tsx

@@ -502,9 +502,26 @@ export const EvoRichTextArea = forwardRef<EvoRichTextHandle, EvoRichTextAreaProp
 
   // ---- Insert image (used by paste, drop, button) ----
   const insertImageAtCaret = useCallback((src: string, alt = '') => {
-    editorRef.current?.focus();
-    const html = `<img src="${src.replace(/"/g, '&quot;')}" alt="${alt.replace(/"/g, '&quot;')}" />`;
-    execCommand('insertHTML', html);
+    const el = editorRef.current;
+    if (!el) return;
+    el.focus();
+    const safeSrc = src.replace(/"/g, '&quot;');
+    const safeAlt = alt.replace(/"/g, '&quot;');
+    // Images render display:block; inserting a bare <img> leaves the caret
+    // beside it, which paints at the image's top-right edge. Drop a trailing
+    // empty paragraph and move the caret into it, so the user lands on a clean
+    // new line *below* the image. (Marker idiom matches unwrapBlocks above.)
+    execCommand('insertHTML', `<img src="${safeSrc}" alt="${safeAlt}" /><p data-evo-caret><br></p>`);
+    const landing = el.querySelector<HTMLParagraphElement>('p[data-evo-caret]');
+    if (landing) {
+      landing.removeAttribute('data-evo-caret');
+      const sel = window.getSelection();
+      const r = document.createRange();
+      r.setStart(landing, 0);
+      r.collapse(true);
+      sel?.removeAllRanges();
+      sel?.addRange(r);
+    }
     emitChange();
   }, [emitChange]);
 

package/src/TopNav/TopNav.tsx

@@ -32,6 +32,14 @@ export interface EvoTopNavProps
   onOpenChange?: (open: boolean) => void;
   /** Width in px below which Menu collapses into the drawer. @default 768 */
   collapseBelow?: number;
+  /** Staggered mount animation for the bar's contents. @default 'none' */
+  entrance?: 'none' | 'rise' | 'fade';
+  /** Pin the bar with position: sticky; top: 0. @default false */
+  sticky?: boolean;
+  /** On-scroll treatment of a sticky bar. @default 'none' */
+  scrollBehavior?: 'none' | 'elevate' | 'shrink' | 'hide';
+  /** Render a thin scroll-progress accent line along the bottom edge. @default false */
+  showProgress?: boolean;
   className?: string;
 }
 
@@ -74,6 +82,17 @@ export interface EvoTopNavToggleProps
   className?: string;
 }
 
+export interface EvoTopNavSearchProps
+  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+  /** Placeholder text shown inside the trigger. @default 'Search…' */
+  placeholder?: string;
+  /** Opt-in global hotkey, e.g. 'mod+k' (mod = ⌘ on macOS, Ctrl elsewhere). Default: none. */
+  shortcut?: string;
+  /** Override the kbd hint. @default platform-aware ⌘K / Ctrl K */
+  shortcutHint?: React.ReactNode;
+  className?: string;
+}
+
 export interface EvoTopNavDropdownProps {
   label: React.ReactNode;
   icon?: React.ReactNode;
@@ -159,6 +178,53 @@ const useHoverCapable = () =>
 const usePrefersReducedMotion = () =>
   useMediaQuery('(prefers-reduced-motion: reduce)');
 
+function useScrollState(
+  enabled: boolean,
+  behavior: 'none' | 'elevate' | 'shrink' | 'hide',
+  wantProgress: boolean,
+) {
+  const [scrolled, setScrolled] = useState(false);
+  const [hidden, setHidden] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const lastY = useRef(0);
+
+  useEffect(() => {
+    if (typeof window === 'undefined' || !enabled) {
+      setScrolled(false);
+      setHidden(false);
+      setProgress(0);
+      lastY.current = 0;
+      return;
+    }
+    let raf = 0;
+    const read = () => {
+      raf = 0;
+      const doc = document.documentElement;
+      const y = window.scrollY || doc.scrollTop || 0;
+      setScrolled(y > 8);
+      setHidden(behavior === 'hide' ? y > lastY.current && y > 64 : false);
+      if (wantProgress) {
+        const max = doc.scrollHeight - doc.clientHeight || 1;
+        setProgress(Math.min(1, Math.max(0, y / max)));
+      }
+      lastY.current = y;
+    };
+    const onScroll = () => {
+      if (!raf) raf = requestAnimationFrame(read);
+    };
+    read();
+    window.addEventListener('scroll', onScroll, { passive: true });
+    window.addEventListener('resize', onScroll, { passive: true });
+    return () => {
+      if (raf) cancelAnimationFrame(raf);
+      window.removeEventListener('scroll', onScroll);
+      window.removeEventListener('resize', onScroll);
+    };
+  }, [enabled, behavior, wantProgress]);
+
+  return { scrolled, hidden, progress };
+}
+
 function getFocusable(root: HTMLElement | null) {
   if (!root) return [] as HTMLElement[];
   return Array.from(
@@ -318,6 +384,23 @@ const ChevronIcon = ({ open }: { open: boolean }) => (
   </svg>
 );
 
+const SearchGlyph = () => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    aria-hidden="true"
+  >
+    <circle cx="11" cy="11" r="7" />
+    <path d="m20 20-3.2-3.2" />
+  </svg>
+);
+
 // ============================================================================
 // EvoTopNav.Brand
 // ============================================================================
@@ -522,6 +605,69 @@ const EvoTopNavToggle = forwardRef<HTMLButtonElement, EvoTopNavToggleProps>(
   },
 );
 
+// ============================================================================
+// EvoTopNav.Search — presentational ⌘K quick-search trigger
+// ============================================================================
+
+const EvoTopNavSearch = forwardRef<HTMLButtonElement, EvoTopNavSearchProps>(
+  function EvoTopNavSearch(
+    { placeholder = 'Search…', shortcut, shortcutHint, className, onClick, ...rest },
+    forwardedRef,
+  ) {
+    const localRef = useRef<HTMLButtonElement | null>(null);
+    const setRef = (node: HTMLButtonElement | null) => {
+      localRef.current = node;
+      if (typeof forwardedRef === 'function') forwardedRef(node);
+      else if (forwardedRef)
+        (forwardedRef as React.RefObject<HTMLButtonElement | null>).current = node;
+    };
+
+    // Platform-aware hint resolved after mount to avoid SSR hydration mismatch.
+    const [autoHint, setAutoHint] = useState<React.ReactNode>(null);
+    useEffect(() => {
+      if (shortcutHint !== undefined) return;
+      const platform =
+        (typeof navigator !== 'undefined' &&
+          (navigator.platform || navigator.userAgent)) || '';
+      setAutoHint(/Mac|iPhone|iPad|iPod/.test(platform) ? '⌘K' : 'Ctrl K');
+    }, [shortcutHint]);
+    const hint = shortcutHint !== undefined ? shortcutHint : autoHint;
+
+    // Opt-in global hotkey → dispatch a real click so onClick fires naturally.
+    useEffect(() => {
+      if (!shortcut) return;
+      const parts = shortcut.toLowerCase().split('+').map((p) => p.trim());
+      const wantMod = parts.some((p) => ['mod', 'cmd', 'meta', 'ctrl', 'control'].includes(p));
+      const key = parts[parts.length - 1];
+      const handler = (e: KeyboardEvent) => {
+        const mod = e.metaKey || e.ctrlKey;
+        if ((!wantMod || mod) && e.key.toLowerCase() === key) {
+          e.preventDefault();
+          localRef.current?.click();
+        }
+      };
+      document.addEventListener('keydown', handler);
+      return () => document.removeEventListener('keydown', handler);
+    }, [shortcut]);
+
+    return (
+      <button
+        ref={setRef}
+        className={cn(styles.topNavSearch, className)}
+        onClick={onClick}
+        {...rest}
+        type="button"
+      >
+        <span className={styles.topNavSearchIcon} aria-hidden="true">
+          <SearchGlyph />
+        </span>
+        <span className={styles.topNavSearchText}>{placeholder}</span>
+        {hint != null && <kbd className={styles.topNavSearchKbd}>{hint}</kbd>}
+      </button>
+    );
+  },
+);
+
 // ============================================================================
 // EvoTopNav.Dropdown
 // ============================================================================
@@ -812,7 +958,12 @@ export const EvoTopNav = forwardRef<HTMLElement, EvoTopNavProps>(
       defaultOpen = false,
       onOpenChange,
       collapseBelow = 768,
+      entrance = 'none',
+      sticky = false,
+      scrollBehavior = 'none',
+      showProgress = false,
       className,
+      style,
       ...rest
     },
     ref,
@@ -825,6 +976,12 @@ export const EvoTopNav = forwardRef<HTMLElement, EvoTopNavProps>(
 
     const isCollapsed = useIsCollapsed(collapseBelow);
     const reducedMotion = usePrefersReducedMotion();
+    const scrollEnabled = scrollBehavior !== 'none' || showProgress;
+    const { scrolled, hidden, progress } = useScrollState(scrollEnabled, scrollBehavior, showProgress);
+    const animateEntrance = entrance !== 'none' && !reducedMotion;
+    const mergedStyle: React.CSSProperties = showProgress
+      ? ({ ...style, ['--evo-topnav-progress' as string]: progress } as React.CSSProperties)
+      : (style as React.CSSProperties);
 
     const [toggleCount, setToggleCount] = useState(0);
     const registerToggle = useCallback(() => {
@@ -944,15 +1101,24 @@ export const EvoTopNav = forwardRef<HTMLElement, EvoTopNavProps>(
           ref={ref}
           className={cn(
             styles.topNav,
+            sticky && styles.topNavSticky,
             drawerActive && styles.topNavDrawerOpen,
             reducedMotion && styles.topNavReducedMotion,
             className,
           )}
+          style={mergedStyle}
           data-collapsed={isCollapsed || undefined}
           data-drawer-open={drawerActive || undefined}
+          data-entrance={animateEntrance ? entrance : undefined}
+          data-scroll={scrollBehavior !== 'none' ? scrollBehavior : undefined}
+          data-scrolled={scrolled || undefined}
+          data-hidden={hidden || undefined}
           {...rest}
         >
           <div className={styles.topNavInner}>{children}</div>
+          {showProgress && (
+            <span className={styles.topNavProgress} aria-hidden="true" />
+          )}
           {drawerActive && (
             <div
               className={styles.topNavBackdrop}
@@ -972,6 +1138,7 @@ export const EvoTopNav = forwardRef<HTMLElement, EvoTopNavProps>(
   Item: typeof EvoTopNavItem;
   Actions: typeof EvoTopNavActions;
   Toggle: typeof EvoTopNavToggle;
+  Search: typeof EvoTopNavSearch;
   Dropdown: typeof EvoTopNavDropdown;
   DropdownItem: typeof EvoTopNavDropdownItem;
 };
@@ -981,6 +1148,7 @@ EvoTopNavMenu.displayName = 'EvoTopNav.Menu';
 EvoTopNavItem.displayName = 'EvoTopNav.Item';
 EvoTopNavActions.displayName = 'EvoTopNav.Actions';
 EvoTopNavToggle.displayName = 'EvoTopNav.Toggle';
+EvoTopNavSearch.displayName = 'EvoTopNav.Search';
 EvoTopNavDropdown.displayName = 'EvoTopNav.Dropdown';
 EvoTopNavDropdownItem.displayName = 'EvoTopNav.DropdownItem';
 (EvoTopNav as { displayName?: string }).displayName = 'EvoTopNav';
@@ -990,5 +1158,6 @@ EvoTopNav.Menu = EvoTopNavMenu;
 EvoTopNav.Item = EvoTopNavItem;
 EvoTopNav.Actions = EvoTopNavActions;
 EvoTopNav.Toggle = EvoTopNavToggle;
+EvoTopNav.Search = EvoTopNavSearch;
 EvoTopNav.Dropdown = EvoTopNavDropdown;
 EvoTopNav.DropdownItem = EvoTopNavDropdownItem;

package/src/css/checkbox.module.scss

@@ -42,7 +42,7 @@
 
     &::after {
       opacity: 1;
-      transform: rotate(45deg) scale(1);
+      transform: translate(-50%, -60%) rotate(45deg) scale(1);
     }
   }
 
@@ -94,15 +94,18 @@
   &::after {
     content: '';
     position: absolute;
-    top: 0px;
-    left: 3px;
+    top: 50%;
+    left: 50%;
     width: 5px;
-    height: 8px;
+    height: 9px;
     border: 2px solid $evo-primary-fg;
     border-top: none;
     border-left: none;
     opacity: 0;
-    transform: rotate(45deg) scale(0.5);
+    // Centered via translate (parent's flex-centering can't reach an absolute
+    // child). -60% Y nudges the rotated "L" optically into the middle. The
+    // centering translate is folded into both states so the scale stays put.
+    transform: translate(-50%, -60%) rotate(45deg) scale(0.5);
     transition: opacity $transition-fast, transform $transition-fast;
   }
 }