react-18-ui-library 0.3.0 → 0.3.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 ui-sandbox
+
+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

@@ -3,6 +3,7 @@
 > A fully customizable, theme-aware React 18 enterprise UI component library — 70+ components, schema-driven forms, fluent validation, drag-and-drop file upload, and zero runtime CSS-in-JS overhead.
 
 [![npm version](https://img.shields.io/npm/v/react-18-ui-library.svg)](https://www.npmjs.com/package/react-18-ui-library)
+[![Storybook](https://img.shields.io/badge/Storybook-View_Components-ff4785.svg)](https://6998a00a26549f1450ed8008-alszlltjoh.chromatic.com/)
 [![TypeScript](https://img.shields.io/badge/TypeScript-5.4-blue.svg)](https://www.typescriptlang.org/)
 [![React](https://img.shields.io/badge/React-18-61dafb.svg)](https://react.dev/)
 [![TailwindCSS](https://img.shields.io/badge/TailwindCSS-3-38bdf8.svg)](https://tailwindcss.com/)
@@ -11,6 +12,13 @@
 
 ---
 
+<p align="center">
+  <strong>📚 <a href="https://6998a00a26549f1450ed8008-alszlltjoh.chromatic.com/">View the live component library in Storybook</a></strong><br>
+  <em>Browse, test, and explore 70+ components</em>
+</p>
+
+---
+
 ## Table of Contents
 
 - [Installation](#installation)
@@ -31,6 +39,7 @@
 - [CSS Token Reference](#css-token-reference)
 - [Security — Snyk](#security--snyk)
 - [Development](#development)
+- [CI/CD — Publishing](#cicd--publishing)
 - [Peer Dependencies](#peer-dependencies)
 - [License](#license)
 
@@ -72,6 +81,8 @@ export function App() {
 
 > **Important:** `react-18-ui-library/styles` must be imported **before** any of your own stylesheets so your CSS token overrides take precedence. You do **not** need Tailwind installed in your consuming app — all utility classes are pre-compiled into the library's stylesheet.
 
+> **📚 [View all components in Storybook →](https://6998a00a26549f1450ed8008-alszlltjoh.chromatic.com/)** — Browse and interact with the full component library.
+
 ---
 
 ## Theme System

package/dist/components/layout/Navbar/Navbar.d.ts

@@ -6,14 +6,26 @@ export interface NavbarLink {
     active?: boolean;
     icon?: React.ReactNode;
 }
+export interface NavbarProfileMenuItem {
+    name: string;
+    href?: string;
+    onClick?: () => void;
+}
+export interface NavbarProfile {
+    name: string;
+    email?: string;
+    avatarUrl?: string;
+    menuItems?: NavbarProfileMenuItem[];
+}
 export interface NavbarProps {
     logo?: React.ReactNode;
     links?: NavbarLink[];
     actions?: React.ReactNode;
+    profile?: NavbarProfile;
     sticky?: boolean;
     fixed?: boolean;
     bordered?: boolean;
     className?: string;
     onMenuToggle?: (open: boolean) => void;
 }
-export declare function Navbar({ logo, links, actions, sticky, fixed, bordered, className, onMenuToggle, }: NavbarProps): import("react/jsx-runtime").JSX.Element;
+export declare function Navbar({ logo, links, actions, profile, sticky, fixed, bordered, className, onMenuToggle, }: NavbarProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/layout/Navbar/index.d.ts

@@ -1,2 +1,2 @@
 export { Navbar } from './Navbar';
-export type { NavbarProps, NavbarLink } from './Navbar';
+export type { NavbarProps, NavbarLink, NavbarProfile, NavbarProfileMenuItem } from './Navbar';

package/dist/components/layout/Sidebar/Sidebar.d.ts

@@ -15,10 +15,12 @@ export interface SidebarProps {
     defaultCollapsed?: boolean;
     onCollapsedChange?: (collapsed: boolean) => void;
     header?: React.ReactNode;
+    /** Compact icon/logo shown in the header area when the sidebar is collapsed */
+    collapsedIcon?: React.ReactNode;
     footer?: React.ReactNode;
     overlay?: boolean;
     open?: boolean;
     onClose?: () => void;
     className?: string;
 }
-export declare function Sidebar({ items, collapsed: controlledCollapsed, defaultCollapsed, onCollapsedChange, header, footer, overlay, open, onClose, className, }: SidebarProps): import("react/jsx-runtime").JSX.Element;
+export declare function Sidebar({ items, collapsed: controlledCollapsed, defaultCollapsed, onCollapsedChange, header, collapsedIcon, footer, overlay, open, onClose, className, }: SidebarProps): import("react/jsx-runtime").JSX.Element;