@neoptocom/neopto-ui 1.6.7 → 1.6.8

package/src/components/Breadcrumb.docs.mdx

@@ -68,3 +68,8 @@ page load. The interactive example demonstrates an in-app documents flow.
 
 
 
+
+
+
+
+

package/src/components/Breadcrumb.tsx

@@ -8,7 +8,7 @@ export interface BreadcrumbItem {
   /** Optional href for navigation */
   href?: string;
   /** Optional icon name (Material Symbols) */
-  icon?: string;
+  icon?: React.ReactNode;
   /** Optional click handler */
   onClick?: () => void;
 }
@@ -66,8 +66,7 @@ export const Breadcrumb: React.FC<BreadcrumbProps> = ({
                   }}
                   className="group flex items-center gap-1 cursor-pointer text-[var(--muted-fg)]"
                 >
-                  {isFirst && showHomeIcon && <Icon name="home" size="sm" />}
-                  {item.icon && !showHomeIcon && <Icon name={item.icon} size="sm" />}
+                  {item.icon && item.icon}
                   <Typo variant="label-md" bold="semibold" className="group-hover:underline">{item.label}</Typo>
                 </a>
               ) : (
@@ -88,8 +87,7 @@ export const Breadcrumb: React.FC<BreadcrumbProps> = ({
                   }
                   aria-current={isLast ? "page" : undefined}
                 >
-                  {isFirst && showHomeIcon && <Icon name="home" size="sm" />}
-                  {item.icon && !showHomeIcon && <Icon name={item.icon} size="sm" />}
+                  {item.icon && item.icon}
                   <Typo variant="label-md" bold={isLast ? "bold" : "semibold"} className={item.onClick && !isLast ? "group-hover:underline" : ""}>{item.label}</Typo>
                 </span>
               )}

package/src/components/Button.docs.mdx

@@ -64,3 +64,8 @@ Use variants to communicate hierarchy:
 
 
 
+
+
+
+
+

package/src/components/Button.stories.tsx

@@ -118,3 +118,8 @@ export const FullWidthCallToAction: Story = {
 
 
 
+
+
+
+
+

package/src/components/Card.docs.mdx

@@ -64,3 +64,8 @@ attaching click handlers to the card root.
 
 
 
+
+
+
+
+

package/src/components/Chip.tsx

@@ -1,9 +1,10 @@
 import * as React from "react";
 import Icon from "./Icon";
+import { X } from "lucide-react";
 
 export 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;
@@ -129,7 +130,7 @@ export default function Chip({
       title={title}
       {...props}
     >
-      {icon ? <Icon name={icon} size="sm" className="mr-0.5 flex-shrink-0" /> : null}
+      {icon ? icon : null}
       <span className="truncate">{label}</span>
       {onDelete ? (
         <button
@@ -138,7 +139,7 @@ export default function Chip({
           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"
         >
-          <Icon name="close" size="sm" />
+          <X size={12} className="flex-shrink-0" />
         </button>
       ) : null}
     </div>

package/src/components/Skeleton.tsx

@@ -6,10 +6,10 @@ export type SkeletonProps = React.HTMLAttributes<HTMLDivElement> & {
 
 const roundMap: Record<NonNullable<SkeletonProps["rounded"]>, string> = {
   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"
 };
 

package/src/components/Typo.tsx

@@ -48,9 +48,15 @@ function getTypoClasses(
     bold: "font-bold"
   };
 
+  // Add default horizontal spacing (margin-right) for spacing between side-by-side Typo components
+  // Users can override with className="mr-0" if needed
+  const hasMarginRight = className?.includes("mr-");
+  const horizontalSpacing = hasMarginRight ? "" : "mr-2";
+  
   return [
     weights[weight],
     muted ? "text-[var(--muted-fg)]" : "",
+    horizontalSpacing,
     className
   ].filter(Boolean).join(" ");
 }

package/src/{components → stories}/Breadcrumb.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
-import { Breadcrumb, type BreadcrumbItem } from "./Breadcrumb";
+import { Breadcrumb, type BreadcrumbItem } from "../components/Breadcrumb";
+import { LayoutDashboard, Files, Rocket } from "lucide-react";
 
 const meta: Meta<typeof Breadcrumb> = {
   title: "Components/Breadcrumb",
@@ -26,9 +27,9 @@ export const Playground: Story = {};
 export const WithIcons: Story = {
   args: {
     items: [
-      { label: "Dashboard", href: "/", icon: "dashboard" },
-      { label: "Projects", href: "/projects", icon: "folder" },
-      { label: "Neptune Launch", icon: "rocket_launch" }
+      { label: "Dashboard", href: "/", icon: <LayoutDashboard size={12} /> },
+      { label: "Projects", href: "/projects", icon: <Files size={12} /> },
+      { label: "Neptune Launch", icon: <Rocket size={12} /> }
     ]
   }
 };
@@ -44,7 +45,6 @@ export const InteractiveNavigation: Story = {
     const sections: BreadcrumbItem[] = [
       { label: "Getting Started", href: "/docs/getting-started" },
       { label: "Guides", href: "/docs/guides" },
-      { label: "Auth", icon: "lock" }
     ];
 
     const [activeSection, setActiveSection] = useState(sections[sections.length - 1]);
@@ -86,3 +86,8 @@ export const InteractiveNavigation: Story = {
 
 
 
+
+
+
+
+

package/src/stories/Chip.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import Chip from "../components/Chip";
+import { Check } from "lucide-react";
 
 const meta: Meta<typeof Chip> = {
   title: "Components/Chip",
@@ -18,7 +19,7 @@ type Story = StoryObj<typeof Chip>;
 export const Playground: Story = {};
 
 export const WithIcon: Story = {
-  args: { icon: "check", label: "Completed", variant: "success" }
+  args: { icon: <Check size={12} className="flex-shrink-0" />, label: "Completed", variant: "success" }
 };
 
 export const Variants: Story = {

package/src/stories/Skeleton.stories.tsx

@@ -13,7 +13,7 @@ export const Blocks: Story = {
     <div className="space-y-3">
       <Skeleton className="h-4 w-48" />
       <Skeleton className="h-4 w-72" />
-      <Skeleton className="h-24 w-full rounded-[--radius-lg]" />
+      <Skeleton className="h-24 w-full rounded-lg" />
     </div>
   )
 };

package/src/styles/library.css

@@ -33,7 +33,7 @@
   -webkit-font-smoothing: antialiased;
 }
 
-.btn { @apply inline-flex items-center justify-center gap-2 rounded-[--radius-lg] px-4 py-2 text-sm font-medium transition; }
+.btn { @apply inline-flex items-center justify-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition; }
 .btn-outline { @apply border border-[--color-brand] text-[--color-brand] bg-[--surface] hover:bg-[--color-brand]/10; }
 .btn-primary { @apply bg-[--color-brand] text-white hover:opacity-90 active:opacity-80; }
 

package/src/styles/tailwind.css

@@ -37,6 +37,6 @@
 }
 
 /* Optional shared utility classes used by some components */
-.btn { @apply inline-flex items-center justify-center gap-2 rounded-[--radius-lg] px-4 py-2 text-sm font-medium transition; }
+.btn { @apply inline-flex items-center justify-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition; }
 .btn-primary { @apply bg-[--color-brand] text-white hover:opacity-90 active:opacity-80; }
 .btn-outline { @apply border border-[--color-brand] text-[--color-brand] bg-[--surface] hover:bg-[--color-brand]/10; }

package/src/styles/tokens.css

@@ -5,10 +5,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;
@@ -26,10 +22,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/src/stories/AgentButton.stories.tsx

@@ -1,170 +0,0 @@
-import * as React from "react";
-import type { Meta, StoryObj } from "@storybook/react";
-import { AgentButton } from "../components/Chat";
-import Typo from "../components/Typo";
-import agentLogoDark from "../assets/agent-neopto-dark.svg";
-import agentLogoLight from "../assets/agent-neopto.svg";
-
-const meta: Meta<typeof AgentButton> = {
-  title: "Components/AgentButton",
-  component: AgentButton,
-  args: {
-    hasNotification: false,
-    notificationMessage: "Hello! How can I help you today?",
-    logoSrc: agentLogoDark,
-    logoAlt: "NeoPTO Agent",
-  },
-  argTypes: {
-    hasNotification: { control: "boolean" },
-    notificationMessage: { control: "text" },
-  },
-  decorators: [
-    (Story) => (
-      <div className="min-h-screen relative">
-        <Story />
-      </div>
-    ),
-  ],
-};
-
-export default meta;
-type Story = StoryObj<typeof AgentButton>;
-
-export const Playground: Story = {
-  render: (args) => {
-    const [chatOpen, setChatOpen] = React.useState(false);
-
-    return (
-      <>
-        <AgentButton
-          {...args}
-          onOpenChat={() => {
-            setChatOpen(true);
-            console.log("Chat opened!");
-          }}
-        />
-        {chatOpen && (
-          <div className="fixed bottom-24 right-8 bg-[var(--surface)] border border-[var(--border)] rounded-lg p-4 shadow-lg z-50">
-            <Typo variant="body-md" className="text-[var(--fg)]">Chat opened!</Typo>
-            <button
-              onClick={() => setChatOpen(false)}
-              className="mt-2 underline"
-            >
-              <Typo variant="label-sm" className="text-[var(--muted-fg)]">Close</Typo>
-            </button>
-          </div>
-        )}
-      </>
-    );
-  },
-};
-
-export const WithNotification: Story = {
-  args: {
-    hasNotification: true,
-    notificationMessage: "I have a new update for your project. Would you like to see it?",
-  },
-};
-
-export const AutoToggleNotification: Story = {
-  render: (args) => {
-    const [hasNotification, setHasNotification] = React.useState(false);
-
-    React.useEffect(() => {
-      const interval = setInterval(() => {
-        setHasNotification((prev) => !prev);
-      }, 5000);
-
-      return () => clearInterval(interval);
-    }, []);
-
-    return (
-      <AgentButton
-        {...args}
-        hasNotification={hasNotification}
-        notificationMessage="This notification toggles every 5 seconds!"
-        onOpenChat={() => {
-          setHasNotification(false);
-          console.log("Chat opened!");
-        }}
-      />
-    );
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    disabled: true,
-    hasNotification: true,
-    notificationMessage: "This button is disabled (greyscale, no animations)",
-  },
-};
-
-export const DisabledWhenChatOpen: Story = {
-  render: (args) => {
-    const [chatOpen, setChatOpen] = React.useState(false);
-
-    return (
-      <>
-        <AgentButton
-          {...args}
-          disabled={chatOpen}
-          hasNotification={!chatOpen}
-          notificationMessage="Click to open chat (button will become disabled)"
-          onOpenChat={() => {
-            setChatOpen(true);
-            console.log("Chat opened!");
-          }}
-        />
-        {chatOpen && (
-          <div className="fixed bottom-24 right-8 bg-[var(--surface)] border border-[var(--border)] rounded-lg p-4 shadow-lg z-50 max-w-md">
-            <Typo variant="body-md" className="text-[var(--fg)]">
-              Chat is open! Notice the button is now disabled (greyscale with no animations).
-            </Typo>
-            <button
-              onClick={() => setChatOpen(false)}
-              className="mt-2 px-3 py-1 bg-[var(--color-brand)] text-white rounded-full"
-            >
-              <Typo variant="label-sm">Close Chat</Typo>
-            </button>
-          </div>
-        )}
-      </>
-    );
-  },
-};
-
-export const DisabledTransition: Story = {
-  render: (args) => {
-    const [disabled, setDisabled] = React.useState(false);
-
-    React.useEffect(() => {
-      const interval = setInterval(() => {
-        setDisabled((prev) => !prev);
-      }, 4000);
-
-      return () => clearInterval(interval);
-    }, []);
-
-    return (
-      <>
-        <AgentButton
-          {...args}
-          disabled={disabled}
-          hasNotification={!disabled}
-          notificationMessage="Watch the smooth 1-second transition!"
-          onOpenChat={() => console.log("Chat opened!")}
-        />
-        <div className="fixed top-8 left-8 bg-[var(--surface)] border border-[var(--border)] rounded-lg p-4 shadow-lg">
-          <Typo variant="body-md" className="text-[var(--fg)]">
-            State: <strong>{disabled ? "Disabled" : "Enabled"}</strong>
-          </Typo>
-          <Typo variant="label-sm" className="text-[var(--muted-fg)] mt-1">
-            Toggles every 4 seconds
-          </Typo>
-        </div>
-      </>
-    );
-  },
-};
-