@justin_evo/evo-ui 1.0.2 → 1.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Justin Khor
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,70 +1,70 @@
-# Evo UI
-
-**A high-performance, enterprise-grade React UI component library.**
-
-Evo UI ships 30+ accessible, themeable React components — with built-in light &
-dark mode, full TypeScript types, `forwardRef` + native attribute pass-through,
-and **zero runtime dependencies**.
-
-- 📚 **Documentation:** https://elevora-ui-document-3fb80.web.app
-- 💻 **GitHub:** https://github.com/jinchuen/evo
-- 📦 **npm:** https://www.npmjs.com/package/@justin_evo/evo-ui
-
-## Installation
-
-```bash
-npm install @justin_evo/evo-ui
-```
-
-`react` and `react-dom` (>= 17) are peer dependencies. Evo UI itself has no
-runtime dependencies.
-
-## Quick start
-
-```jsx
-// Import the stylesheet once in your app entry (includes the light/dark theme tokens)
-import '@justin_evo/evo-ui/dist/evo-ui.css'
-
-import { EvoThemeProvider, EvoButton } from '@justin_evo/evo-ui'
-
-export default function App() {
-  return (
-    <EvoThemeProvider defaultTheme="system">
-      <EvoButton variant="solid" severity="primary">Hello Evo</EvoButton>
-    </EvoThemeProvider>
-  )
-}
-```
-
-## Why Evo UI
-
-- 🌗 **Light & dark mode** out of the box — CSS-variable theming, no runtime cost.
-- 📱 **Mobile-ready** — ≥ 44px touch targets, responsive down to 375px.
-- 🔡 **Fully typed** — ships `.d.ts`; every component forwards `ref` and native attributes.
-- 🧩 **Composable, orthogonal APIs** — e.g. `<Form.Field><Form.Label /></Form.Field>`.
-- 🪶 **Zero runtime dependencies.**
-
-## Components
-
-Full props, variants, and live examples for every component live in the
-[documentation](https://elevora-ui-document-3fb80.web.app).
-
-| Category               | Components                                                                                                  |
-| ---------------------- | ---------------------------------------------------------------------------------------------------------- |
-| **Theming**            | `EvoThemeProvider`, `EvoThemeToggle`                                                                        |
-| **Layout & structure** | `EvoStack`, `EvoGrid`, `EvoDivider`, `EvoContainer`, `EvoCard`                                              |
-| **Navigation**         | `EvoTabs`, `EvoBreadcrumb`, `EvoNav`, `EvoTopNav`, `EvoPagination`, `EvoCommandPalette`                     |
-| **Forms & inputs**     | `EvoInput`, `EvoRichTextArea`, `EvoSelect`, `EvoTreeSelect`, `EvoAutoComplete`, `EvoCheckbox`, `EvoRadio`, `EvoToggle`, `EvoForm` |
-| **Feedback & overlays**| `EvoModal`, `EvoNotification`, `EvoTooltip`, `EvoAlert`                                                     |
-| **Data display**       | `EvoBadge`, `EvoSkeleton`, `EvoTable`                                                                       |
-| **General**            | `EvoButton`                                                                                                 |
-| **Media**              | `EvoImageCropper`                                                                                           |
-
-## Documentation
-
-Browse the full component catalogue, prop tables, and copy-paste examples at
-**https://elevora-ui-document-3fb80.web.app**.
-
-## License
-
-MIT © Justin Khor
+# Evo UI
+
+**A high-performance, enterprise-grade React UI component library.**
+
+Evo UI ships 30+ accessible, themeable React components — with built-in light &
+dark mode, full TypeScript types, `forwardRef` + native attribute pass-through,
+and **zero runtime dependencies**.
+
+- 📚 **Documentation:** https://elevora-ui-document-3fb80.web.app
+- 💻 **GitHub:** https://github.com/jinchuen/evo
+- 📦 **npm:** https://www.npmjs.com/package/@justin_evo/evo-ui
+
+## Installation
+
+```bash
+npm install @justin_evo/evo-ui
+```
+
+`react` and `react-dom` (>= 17) are peer dependencies. Evo UI itself has no
+runtime dependencies.
+
+## Quick start
+
+```jsx
+// Import the stylesheet once in your app entry (includes the light/dark theme tokens)
+import '@justin_evo/evo-ui/dist/evo-ui.css'
+
+import { EvoThemeProvider, EvoButton } from '@justin_evo/evo-ui'
+
+export default function App() {
+  return (
+    <EvoThemeProvider defaultTheme="system">
+      <EvoButton variant="solid" severity="primary">Hello Evo</EvoButton>
+    </EvoThemeProvider>
+  )
+}
+```
+
+## Why Evo UI
+
+- 🌗 **Light & dark mode** out of the box — CSS-variable theming, no runtime cost.
+- 📱 **Mobile-ready** — ≥ 44px touch targets, responsive down to 375px.
+- 🔡 **Fully typed** — ships `.d.ts`; every component forwards `ref` and native attributes.
+- 🧩 **Composable, orthogonal APIs** — e.g. `<Form.Field><Form.Label /></Form.Field>`.
+- 🪶 **Zero runtime dependencies.**
+
+## Components
+
+Full props, variants, and live examples for every component live in the
+[documentation](https://elevora-ui-document-3fb80.web.app).
+
+| Category               | Components                                                                                                  |
+| ---------------------- | ---------------------------------------------------------------------------------------------------------- |
+| **Theming**            | `EvoThemeProvider`, `EvoThemeToggle`                                                                        |
+| **Layout & structure** | `EvoStack`, `EvoGrid`, `EvoDivider`, `EvoContainer`, `EvoCard`                                              |
+| **Navigation**         | `EvoTabs`, `EvoBreadcrumb`, `EvoNav`, `EvoTopNav`, `EvoPagination`, `EvoCommandPalette`                     |
+| **Forms & inputs**     | `EvoInput`, `EvoRichTextArea`, `EvoSelect`, `EvoTreeSelect`, `EvoAutoComplete`, `EvoCheckbox`, `EvoRadio`, `EvoToggle`, `EvoForm` |
+| **Feedback & overlays**| `EvoModal`, `EvoNotification`, `EvoTooltip`, `EvoAlert`                                                     |
+| **Data display**       | `EvoBadge`, `EvoSkeleton`, `EvoTable`                                                                       |
+| **General**            | `EvoButton`                                                                                                 |
+| **Media**              | `EvoImageCropper`                                                                                           |
+
+## Documentation
+
+Browse the full component catalogue, prop tables, and copy-paste examples at
+**https://elevora-ui-document-3fb80.web.app**.
+
+## License
+
+MIT © Justin Khor

package/dist/Nav/Nav.d.ts

@@ -11,6 +11,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;
 }
@@ -18,6 +21,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 {
     children: ReactNode;
@@ -27,6 +40,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. */

package/dist/TopNav/TopNav.d.ts

@@ -6,6 +6,14 @@ export interface EvoTopNavProps extends Omit<React.HTMLAttributes<HTMLElement>,
     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;
 }
 export interface EvoTopNavBrandProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -35,6 +43,15 @@ export interface EvoTopNavToggleProps extends Omit<React.ButtonHTMLAttributes<HT
     icon?: React.ReactNode;
     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;
@@ -62,6 +79,7 @@ declare const EvoTopNavMenu: React.ForwardRefExoticComponent<EvoTopNavMenuProps
 declare const EvoTopNavItem: React.ForwardRefExoticComponent<EvoTopNavItemProps & React.RefAttributes<HTMLElement>>;
 declare const EvoTopNavActions: React.ForwardRefExoticComponent<EvoTopNavActionsProps & React.RefAttributes<HTMLDivElement>>;
 declare const EvoTopNavToggle: React.ForwardRefExoticComponent<EvoTopNavToggleProps & React.RefAttributes<HTMLButtonElement>>;
+declare const EvoTopNavSearch: React.ForwardRefExoticComponent<EvoTopNavSearchProps & React.RefAttributes<HTMLButtonElement>>;
 declare const EvoTopNavDropdown: React.FC<EvoTopNavDropdownProps>;
 declare const EvoTopNavDropdownItem: React.ForwardRefExoticComponent<EvoTopNavDropdownItemProps & React.RefAttributes<HTMLElement>>;
 export declare const EvoTopNav: React.ForwardRefExoticComponent<EvoTopNavProps & React.RefAttributes<HTMLElement>> & {
@@ -70,6 +88,7 @@ export declare const EvoTopNav: React.ForwardRefExoticComponent<EvoTopNavProps &
     Item: typeof EvoTopNavItem;
     Actions: typeof EvoTopNavActions;
     Toggle: typeof EvoTopNavToggle;
+    Search: typeof EvoTopNavSearch;
     Dropdown: typeof EvoTopNavDropdown;
     DropdownItem: typeof EvoTopNavDropdownItem;
 };