@neoptocom/neopto-ui 1.6.6 → 1.6.8

package/CONSUMER_SETUP.md

@@ -4,6 +4,13 @@
 
 This component library uses **Tailwind CSS v4 utility classes** directly in the components. Your project **MUST** have Tailwind CSS v4 configured to use this library.
 
+---
+
+## 📚 Full Documentation
+
+Visit the [documentation site](https://neoptocom.github.io/neopto-ui/docs) for interactive examples and API documentation.
+
+
 ---
 
 ## 📦 Installation
@@ -129,8 +136,4 @@ document.documentElement.classList.toggle("dark");
 
 **Solution:** Ensure the `@source` directive points to the library's **source files** (`/src`), not the compiled dist folder. The source files contain all the Tailwind utility classes that need to be scanned.
 
----
-
-## 📚 Full Documentation
-
-Visit the [Storybook documentation](https://neoptocom.github.io/neopto-ui) for interactive examples and API documentation.
+---

package/README.md

@@ -1,6 +1,6 @@
 # NeoPTO UI
 
-A modern React component library built with Tailwind CSS v4 and TypeScript. Features dark mode, design tokens, and comprehensive Storybook documentation.
+A modern React component library built with Tailwind CSS v4 and TypeScript. Features dark mode, design tokens, and comprehensive documentation.
 
 > ⚠️ **Requirements:** This library requires **Tailwind CSS v4** and **@tailwindcss/postcss** in your project. See installation steps below.
 
@@ -11,7 +11,7 @@ A modern React component library built with Tailwind CSS v4 and TypeScript. Feat
 - **Type Safe**: Full TypeScript support with exported types
 - **Accessible**: Built with accessibility in mind
 - **Tree Shakable**: Optimized bundle size with tree shaking
-- **Storybook**: Comprehensive documentation and testing environment
+- **Documentation**: Comprehensive documentation site with interactive examples
 
 ## 📦 Installation
 
@@ -195,12 +195,14 @@ The library uses a comprehensive design token system:
 
 ## 📚 Documentation
 
-Visit our [Storybook documentation](https://neoptocom.github.io/neopto-ui/storybook-static) for:
+Visit our [documentation site](https://neoptocom.github.io/neopto-ui/docs) for:
 
 - Interactive component playground
 - Design system guidelines
 - Usage examples
 - Accessibility information
+- Getting started guide
+- Design tokens reference
 
 ## 🤝 Contributing
 

package/dist/index.cjs

@@ -3,6 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React11 = require('react');
 var reactDom = require('react-dom');
+var lucideReact = require('lucide-react');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -514,9 +515,12 @@ function getTypoClasses(weight = "normal", muted, className) {
     semibold: "font-semibold",
     bold: "font-bold"
   };
+  const hasMarginRight = className?.includes("mr-");
+  const horizontalSpacing = hasMarginRight ? "" : "mr-2";
   return [
     weights[weight],
     muted ? "text-[var(--muted-fg)]" : "",
+    horizontalSpacing,
     className
   ].filter(Boolean).join(" ");
 }
@@ -651,10 +655,10 @@ function AvatarGroup({
 }
 var roundMap = {
   none: "rounded-none",
-  sm: "rounded-[var(--radius-sm)]",
-  md: "rounded-[var(--radius-md)]",
-  lg: "rounded-[var(--radius-lg)]",
-  xl: "rounded-[var(--radius-xl)]",
+  sm: "rounded",
+  md: "rounded-md",
+  lg: "rounded-lg",
+  xl: "rounded-xl",
   full: "rounded-full"
 };
 function Skeleton({ className = "", rounded = "md", ...props }) {
@@ -1265,7 +1269,7 @@ function Chip({
       title,
       ...props,
       children: [
-        icon ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: icon, size: "sm", className: "mr-0.5 flex-shrink-0" }) : null,
+        icon ? icon : null,
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: label }),
         onDelete ? /* @__PURE__ */ jsxRuntime.jsx(
           "button",
@@ -1274,7 +1278,7 @@ function Chip({
             onClick: onDelete,
             className: "ml-1 flex h-4 w-4 items-center justify-center rounded-full transition-colors hover:bg-black/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-black/30 flex-shrink-0",
             "aria-label": "Remove",
-            children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "close", size: "sm" })
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 12, className: "flex-shrink-0" })
           }
         ) : null
       ]
@@ -1558,7 +1562,6 @@ var Breadcrumb = ({
   }
   return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Breadcrumb", className, children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "flex items-center flex-wrap", children: items.map((item, index) => {
     const isLast = index === items.length - 1;
-    const isFirst = index === 0;
     return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-center", children: [
       item.href && !isLast ? /* @__PURE__ */ jsxRuntime.jsxs(
         "a",
@@ -1572,8 +1575,7 @@ var Breadcrumb = ({
           },
           className: "group flex items-center gap-1 cursor-pointer text-[var(--muted-fg)]",
           children: [
-            isFirst && showHomeIcon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "home", size: "sm" }),
-            item.icon && !showHomeIcon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: item.icon, size: "sm" }),
+            item.icon && item.icon,
             /* @__PURE__ */ jsxRuntime.jsx(Typo, { variant: "label-md", bold: "semibold", className: "group-hover:underline", children: item.label })
           ]
         }
@@ -1592,8 +1594,7 @@ var Breadcrumb = ({
           } : void 0,
           "aria-current": isLast ? "page" : void 0,
           children: [
-            isFirst && showHomeIcon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "home", size: "sm" }),
-            item.icon && !showHomeIcon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: item.icon, size: "sm" }),
+            item.icon && item.icon,
             /* @__PURE__ */ jsxRuntime.jsx(Typo, { variant: "label-md", bold: isLast ? "bold" : "semibold", className: item.onClick && !isLast ? "group-hover:underline" : "", children: item.label })
           ]
         }

package/dist/index.d.cts

@@ -290,7 +290,7 @@ declare function Icon({ name, className, title, size, fill }: IconProps): react_
 
 type ChipProps = React.HTMLAttributes<HTMLDivElement> & {
     variant?: "warning" | "success" | "error" | "light" | "dark";
-    icon?: string;
+    icon?: React.ReactNode;
     label?: string;
     /** Custom text color (overrides variant) */
     textColor?: string;
@@ -366,7 +366,7 @@ interface BreadcrumbItem {
     /** Optional href for navigation */
     href?: string;
     /** Optional icon name (Material Symbols) */
-    icon?: string;
+    icon?: React__default.ReactNode;
     /** Optional click handler */
     onClick?: () => void;
 }

package/dist/index.d.ts

@@ -290,7 +290,7 @@ declare function Icon({ name, className, title, size, fill }: IconProps): react_
 
 type ChipProps = React.HTMLAttributes<HTMLDivElement> & {
     variant?: "warning" | "success" | "error" | "light" | "dark";
-    icon?: string;
+    icon?: React.ReactNode;
     label?: string;
     /** Custom text color (overrides variant) */
     textColor?: string;
@@ -366,7 +366,7 @@ interface BreadcrumbItem {
     /** Optional href for navigation */
     href?: string;
     /** Optional icon name (Material Symbols) */
-    icon?: string;
+    icon?: React__default.ReactNode;
     /** Optional click handler */
     onClick?: () => void;
 }

package/dist/index.js

@@ -2,6 +2,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React11 from 'react';
 import { useState, useEffect, useMemo, useId, useRef, useCallback } from 'react';
 import { createPortal } from 'react-dom';
+import { X } from 'lucide-react';
 
 var __defProp = Object.defineProperty;
 var __export = (target, all) => {
@@ -493,9 +494,12 @@ function getTypoClasses(weight = "normal", muted, className) {
     semibold: "font-semibold",
     bold: "font-bold"
   };
+  const hasMarginRight = className?.includes("mr-");
+  const horizontalSpacing = hasMarginRight ? "" : "mr-2";
   return [
     weights[weight],
     muted ? "text-[var(--muted-fg)]" : "",
+    horizontalSpacing,
     className
   ].filter(Boolean).join(" ");
 }
@@ -630,10 +634,10 @@ function AvatarGroup({
 }
 var roundMap = {
   none: "rounded-none",
-  sm: "rounded-[var(--radius-sm)]",
-  md: "rounded-[var(--radius-md)]",
-  lg: "rounded-[var(--radius-lg)]",
-  xl: "rounded-[var(--radius-xl)]",
+  sm: "rounded",
+  md: "rounded-md",
+  lg: "rounded-lg",
+  xl: "rounded-xl",
   full: "rounded-full"
 };
 function Skeleton({ className = "", rounded = "md", ...props }) {
@@ -1244,7 +1248,7 @@ function Chip({
       title,
       ...props,
       children: [
-        icon ? /* @__PURE__ */ jsx(Icon, { name: icon, size: "sm", className: "mr-0.5 flex-shrink-0" }) : null,
+        icon ? icon : null,
         /* @__PURE__ */ jsx("span", { className: "truncate", children: label }),
         onDelete ? /* @__PURE__ */ jsx(
           "button",
@@ -1253,7 +1257,7 @@ function Chip({
             onClick: onDelete,
             className: "ml-1 flex h-4 w-4 items-center justify-center rounded-full transition-colors hover:bg-black/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-black/30 flex-shrink-0",
             "aria-label": "Remove",
-            children: /* @__PURE__ */ jsx(Icon, { name: "close", size: "sm" })
+            children: /* @__PURE__ */ jsx(X, { size: 12, className: "flex-shrink-0" })
           }
         ) : null
       ]
@@ -1537,7 +1541,6 @@ var Breadcrumb = ({
   }
   return /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", className, children: /* @__PURE__ */ jsx("ol", { className: "flex items-center flex-wrap", children: items.map((item, index) => {
     const isLast = index === items.length - 1;
-    const isFirst = index === 0;
     return /* @__PURE__ */ jsxs("li", { className: "flex items-center", children: [
       item.href && !isLast ? /* @__PURE__ */ jsxs(
         "a",
@@ -1551,8 +1554,7 @@ var Breadcrumb = ({
           },
           className: "group flex items-center gap-1 cursor-pointer text-[var(--muted-fg)]",
           children: [
-            isFirst && showHomeIcon && /* @__PURE__ */ jsx(Icon, { name: "home", size: "sm" }),
-            item.icon && !showHomeIcon && /* @__PURE__ */ jsx(Icon, { name: item.icon, size: "sm" }),
+            item.icon && item.icon,
             /* @__PURE__ */ jsx(Typo, { variant: "label-md", bold: "semibold", className: "group-hover:underline", children: item.label })
           ]
         }
@@ -1571,8 +1573,7 @@ var Breadcrumb = ({
           } : void 0,
           "aria-current": isLast ? "page" : void 0,
           children: [
-            isFirst && showHomeIcon && /* @__PURE__ */ jsx(Icon, { name: "home", size: "sm" }),
-            item.icon && !showHomeIcon && /* @__PURE__ */ jsx(Icon, { name: item.icon, size: "sm" }),
+            item.icon && item.icon,
             /* @__PURE__ */ jsx(Typo, { variant: "label-md", bold: isLast ? "bold" : "semibold", className: item.onClick && !isLast ? "group-hover:underline" : "", children: item.label })
           ]
         }

package/dist/styles.css

@@ -21,10 +21,6 @@
   --font-body: 'Roboto', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
   --font-sans: var(--font-body, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', sans-serif);
   --color-brand: #22A9CB;
-  --radius-sm: 0.25rem;
-  --radius-md: 0.375rem;
-  --radius-lg: 0.5rem;
-  --radius-xl: 0.75rem;
   --bg: #F3F4F6;
   --surface: #FFFFFF;
   --fg: #242832;
@@ -42,10 +38,6 @@
   --font-body: 'Roboto', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
   --font-sans: var(--font-body, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', sans-serif);
   --color-brand: #22A9CB;
-  --radius-sm: 0.25rem;
-  --radius-md: 0.375rem;
-  --radius-lg: 0.5rem;
-  --radius-xl: 0.75rem;
   --bg: #F3F4F6;
   --surface: #FFFFFF;
   --fg: #242832;

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@neoptocom/neopto-ui",
-  "version": "1.6.6",
+  "version": "1.6.8",
   "private": false,
-  "description": "A modern React component library built with Tailwind CSS v4 and TypeScript. Features dark mode, design tokens, and comprehensive Storybook documentation. Requires Tailwind v4+.",
+  "description": "A modern React component library built with Tailwind CSS v4 and TypeScript. Features dark mode, design tokens, and comprehensive documentation. Requires Tailwind v4+.",
   "keywords": [
     "react",
     "components",
@@ -18,7 +18,7 @@
     "type": "git",
     "url": "https://github.com/neoptocom/neopto-ui.git"
   },
-  "homepage": "https://github.com/neoptocom/neopto-ui#readme",
+  "homepage": "https://neoptocom.github.io/neopto-ui/docs",
   "bugs": {
     "url": "https://github.com/neoptocom/neopto-ui/issues"
   },
@@ -50,6 +50,8 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "storybook:docs": "storybook build --docs --output-dir storybook-static && cp storybook-static/index.json storybook-static/docs.json",
+    "docs": "vite --config docs/vite.config.ts",
+    "build:docs": "vite build --config docs/vite.config.ts",
     "prepublishOnly": "npm run build && npm run typecheck",
     "changeset": "changeset",
     "version-packages": "changeset version",
@@ -70,6 +72,7 @@
     "@storybook/test": "^8.1.0",
     "@tailwindcss/postcss": "^4.1.13",
     "@tailwindcss/vite": "^4.1.13",
+    "@types/node": "^24.10.1",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
     "@vitejs/plugin-react": "^5.0.3",
@@ -84,5 +87,9 @@
   },
   "publishConfig": {
     "access": "public"
+  },
+  "dependencies": {
+    "lucide-react": "^0.555.0",
+    "react-router-dom": "^7.9.6"
   }
 }