@neoptocom/neopto-ui 0.10.1 → 0.11.1

package/dist/index.cjs

@@ -230,20 +230,23 @@ function Card({
   );
 }
 var Input = React2__namespace.forwardRef(
-  ({ className, disabled, ...props }, ref) => {
+  ({ className, disabled, variant = "default", ...props }, ref) => {
+    const isBorderless = variant === "borderless";
     return /* @__PURE__ */ jsxRuntime.jsx(
       "input",
       {
         ref,
         disabled,
         className: [
-          "w-full h-12 px-4 rounded-full border bg-transparent outline-none transition-colors",
+          "w-full h-12 px-4 rounded-full bg-transparent outline-none transition-colors",
           "text-sm placeholder:text-[var(--muted-fg)]",
-          disabled ? "border-[#3F424F] text-[#3F424F] cursor-not-allowed" : [
+          !isBorderless && "border",
+          disabled ? "text-[#3F424F] cursor-not-allowed" + (isBorderless ? "" : " border-[#3F424F]") : [
             "text-[var(--muted-fg)]",
-            "border-[var(--muted-fg)]",
-            "hover:border-[var(--border)]",
-            "focus:border-[var(--color-brand)] focus:text-[var(--fg)]"
+            isBorderless ? "" : "border-[var(--muted-fg)]",
+            isBorderless ? "" : "hover:border-[var(--border)]",
+            "focus:text-[var(--fg)]",
+            isBorderless ? "" : "focus:border-[var(--color-brand)]"
           ].join(" "),
           className
         ].join(" "),
@@ -1184,12 +1187,12 @@ var AnimatedBgRectangle = ({ colors, delay = 0 }) => {
   );
 };
 var AnimatedBgRectangle_default = AnimatedBgRectangle;
-var ChatButton = ({
+var AgentButton = ({
   onOpenChat,
   hasNotification = false,
   notificationMessage = "",
   logoSrc,
-  logoAlt = "Chat Agent",
+  logoAlt = "Agent",
   animationColors = ["#7DADB9", "#3864F5", "#55468D", "#479A8D"]
 }) => {
   const [showText, setShowText] = React2.useState(false);
@@ -1289,8 +1292,9 @@ var ChatButton = ({
     }
   );
 };
-var ChatButton_default = ChatButton;
+var AgentButton_default = AgentButton;
 
+exports.AgentButton = AgentButton_default;
 exports.AnimatedBgCircle = AnimatedBgCircle_default;
 exports.AnimatedBgRectangle = AnimatedBgRectangle_default;
 exports.AppBackground = AppBackground;
@@ -1300,7 +1304,6 @@ exports.AvatarGroup = AvatarGroup;
 exports.BackgroundBlur = BackgroundBlur;
 exports.Button = Button;
 exports.Card = Card;
-exports.ChatButton = ChatButton_default;
 exports.Chip = Chip;
 exports.Counter = Counter;
 exports.Icon = Icon;

package/dist/index.d.cts

@@ -50,8 +50,14 @@ type CardProps = React.HTMLAttributes<HTMLDivElement> & {
 };
 declare function Card({ children, className, style, showDecorations, ...props }: CardProps): react_jsx_runtime.JSX.Element;
 
-type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>;
-declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> & {
+    /** Input visual variant */
+    variant?: "default" | "borderless";
+};
+declare const Input: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & {
+    /** Input visual variant */
+    variant?: "default" | "borderless";
+} & React.RefAttributes<HTMLInputElement>>;
 
 type ModalProps = {
     /** Whether the modal is open */
@@ -262,21 +268,21 @@ type CounterProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> & {
 };
 declare function Counter({ value, onChange, min, max, step, className, ...props }: CounterProps): react_jsx_runtime.JSX.Element;
 
-interface ChatButtonProps {
-    /** Callback when chat button is clicked */
+interface AgentButtonProps {
+    /** Callback when agent button is clicked */
     onOpenChat: () => void;
     /** Whether there's a new notification */
     hasNotification?: boolean;
     /** The notification message to display */
     notificationMessage?: string;
-    /** Logo source for the chat agent */
+    /** Logo source for the agent */
     logoSrc?: string;
     /** Alt text for the logo */
     logoAlt?: string;
     /** Custom animation colors */
     animationColors?: string[];
 }
-declare const ChatButton: ({ onOpenChat, hasNotification, notificationMessage, logoSrc, logoAlt, animationColors, }: ChatButtonProps) => react_jsx_runtime.JSX.Element;
+declare const AgentButton: ({ onOpenChat, hasNotification, notificationMessage, logoSrc, logoAlt, animationColors, }: AgentButtonProps) => react_jsx_runtime.JSX.Element;
 
 interface AnimatedBgCircleProps {
     colors: string[];
@@ -291,4 +297,4 @@ interface AnimatedBgRectangleProps {
 }
 declare const AnimatedBgRectangle: ({ colors, delay }: AnimatedBgRectangleProps) => react_jsx_runtime.JSX.Element;
 
-export { AnimatedBgCircle, AnimatedBgRectangle, AppBackground, type AppBackgroundProps, Autocomplete, type AutocompleteOption, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, BackgroundBlur, type BackgroundBlurProps, Button, type ButtonProps, Card, type CardProps, ChatButton, type ChatButtonProps, Chip, type ChipProps, Counter, type CounterProps, Icon, IconButton, type IconButtonProps, type IconProps, Input, type InputProps, Modal, type ModalProps, Search, type SearchOption, type SearchProps, Skeleton, type SkeletonProps, Typo, type TypoProps, type TypoVariant, type TypoWeight, index as assets };
+export { AgentButton, type AgentButtonProps, AnimatedBgCircle, AnimatedBgRectangle, AppBackground, type AppBackgroundProps, Autocomplete, type AutocompleteOption, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, BackgroundBlur, type BackgroundBlurProps, Button, type ButtonProps, Card, type CardProps, Chip, type ChipProps, Counter, type CounterProps, Icon, IconButton, type IconButtonProps, type IconProps, Input, type InputProps, Modal, type ModalProps, Search, type SearchOption, type SearchProps, Skeleton, type SkeletonProps, Typo, type TypoProps, type TypoVariant, type TypoWeight, index as assets };

package/dist/index.d.ts

@@ -50,8 +50,14 @@ type CardProps = React.HTMLAttributes<HTMLDivElement> & {
 };
 declare function Card({ children, className, style, showDecorations, ...props }: CardProps): react_jsx_runtime.JSX.Element;
 
-type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>;
-declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> & {
+    /** Input visual variant */
+    variant?: "default" | "borderless";
+};
+declare const Input: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & {
+    /** Input visual variant */
+    variant?: "default" | "borderless";
+} & React.RefAttributes<HTMLInputElement>>;
 
 type ModalProps = {
     /** Whether the modal is open */
@@ -262,21 +268,21 @@ type CounterProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> & {
 };
 declare function Counter({ value, onChange, min, max, step, className, ...props }: CounterProps): react_jsx_runtime.JSX.Element;
 
-interface ChatButtonProps {
-    /** Callback when chat button is clicked */
+interface AgentButtonProps {
+    /** Callback when agent button is clicked */
     onOpenChat: () => void;
     /** Whether there's a new notification */
     hasNotification?: boolean;
     /** The notification message to display */
     notificationMessage?: string;
-    /** Logo source for the chat agent */
+    /** Logo source for the agent */
     logoSrc?: string;
     /** Alt text for the logo */
     logoAlt?: string;
     /** Custom animation colors */
     animationColors?: string[];
 }
-declare const ChatButton: ({ onOpenChat, hasNotification, notificationMessage, logoSrc, logoAlt, animationColors, }: ChatButtonProps) => react_jsx_runtime.JSX.Element;
+declare const AgentButton: ({ onOpenChat, hasNotification, notificationMessage, logoSrc, logoAlt, animationColors, }: AgentButtonProps) => react_jsx_runtime.JSX.Element;
 
 interface AnimatedBgCircleProps {
     colors: string[];
@@ -291,4 +297,4 @@ interface AnimatedBgRectangleProps {
 }
 declare const AnimatedBgRectangle: ({ colors, delay }: AnimatedBgRectangleProps) => react_jsx_runtime.JSX.Element;
 
-export { AnimatedBgCircle, AnimatedBgRectangle, AppBackground, type AppBackgroundProps, Autocomplete, type AutocompleteOption, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, BackgroundBlur, type BackgroundBlurProps, Button, type ButtonProps, Card, type CardProps, ChatButton, type ChatButtonProps, Chip, type ChipProps, Counter, type CounterProps, Icon, IconButton, type IconButtonProps, type IconProps, Input, type InputProps, Modal, type ModalProps, Search, type SearchOption, type SearchProps, Skeleton, type SkeletonProps, Typo, type TypoProps, type TypoVariant, type TypoWeight, index as assets };
+export { AgentButton, type AgentButtonProps, AnimatedBgCircle, AnimatedBgRectangle, AppBackground, type AppBackgroundProps, Autocomplete, type AutocompleteOption, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, BackgroundBlur, type BackgroundBlurProps, Button, type ButtonProps, Card, type CardProps, Chip, type ChipProps, Counter, type CounterProps, Icon, IconButton, type IconButtonProps, type IconProps, Input, type InputProps, Modal, type ModalProps, Search, type SearchOption, type SearchProps, Skeleton, type SkeletonProps, Typo, type TypoProps, type TypoVariant, type TypoWeight, index as assets };

package/dist/index.js

@@ -209,20 +209,23 @@ function Card({
   );
 }
 var Input = React2.forwardRef(
-  ({ className, disabled, ...props }, ref) => {
+  ({ className, disabled, variant = "default", ...props }, ref) => {
+    const isBorderless = variant === "borderless";
     return /* @__PURE__ */ jsx(
       "input",
       {
         ref,
         disabled,
         className: [
-          "w-full h-12 px-4 rounded-full border bg-transparent outline-none transition-colors",
+          "w-full h-12 px-4 rounded-full bg-transparent outline-none transition-colors",
           "text-sm placeholder:text-[var(--muted-fg)]",
-          disabled ? "border-[#3F424F] text-[#3F424F] cursor-not-allowed" : [
+          !isBorderless && "border",
+          disabled ? "text-[#3F424F] cursor-not-allowed" + (isBorderless ? "" : " border-[#3F424F]") : [
             "text-[var(--muted-fg)]",
-            "border-[var(--muted-fg)]",
-            "hover:border-[var(--border)]",
-            "focus:border-[var(--color-brand)] focus:text-[var(--fg)]"
+            isBorderless ? "" : "border-[var(--muted-fg)]",
+            isBorderless ? "" : "hover:border-[var(--border)]",
+            "focus:text-[var(--fg)]",
+            isBorderless ? "" : "focus:border-[var(--color-brand)]"
           ].join(" "),
           className
         ].join(" "),
@@ -1163,12 +1166,12 @@ var AnimatedBgRectangle = ({ colors, delay = 0 }) => {
   );
 };
 var AnimatedBgRectangle_default = AnimatedBgRectangle;
-var ChatButton = ({
+var AgentButton = ({
   onOpenChat,
   hasNotification = false,
   notificationMessage = "",
   logoSrc,
-  logoAlt = "Chat Agent",
+  logoAlt = "Agent",
   animationColors = ["#7DADB9", "#3864F5", "#55468D", "#479A8D"]
 }) => {
   const [showText, setShowText] = useState(false);
@@ -1268,6 +1271,6 @@ var ChatButton = ({
     }
   );
 };
-var ChatButton_default = ChatButton;
+var AgentButton_default = AgentButton;
 
-export { AnimatedBgCircle_default as AnimatedBgCircle, AnimatedBgRectangle_default as AnimatedBgRectangle, AppBackground, Autocomplete, Avatar, AvatarGroup, BackgroundBlur, Button, Card, ChatButton_default as ChatButton, Chip, Counter, Icon, IconButton, Input, Modal, Search, Skeleton, Typo, assets_exports as assets };
+export { AgentButton_default as AgentButton, AnimatedBgCircle_default as AnimatedBgCircle, AnimatedBgRectangle_default as AnimatedBgRectangle, AppBackground, Autocomplete, Avatar, AvatarGroup, BackgroundBlur, Button, Card, Chip, Counter, Icon, IconButton, Input, Modal, Search, Skeleton, Typo, assets_exports as assets };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neoptocom/neopto-ui",
-  "version": "0.10.1",
+  "version": "0.11.1",
   "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+.",
   "keywords": [

package/src/components/Chat/{ChatButton.tsx → AgentButton.tsx}

@@ -3,14 +3,14 @@ import AnimatedBgCircle from "./AnimatedBgCircle";
 import AnimatedBgRectangle from "./AnimatedBgRectangle";
 import Typo from "../Typo";
 
-export interface ChatButtonProps {
-  /** Callback when chat button is clicked */
+export interface AgentButtonProps {
+  /** Callback when agent button is clicked */
   onOpenChat: () => void;
   /** Whether there's a new notification */
   hasNotification?: boolean;
   /** The notification message to display */
   notificationMessage?: string;
-  /** Logo source for the chat agent */
+  /** Logo source for the agent */
   logoSrc?: string;
   /** Alt text for the logo */
   logoAlt?: string;
@@ -18,14 +18,14 @@ export interface ChatButtonProps {
   animationColors?: string[];
 }
 
-const ChatButton = ({
+const AgentButton = ({
   onOpenChat,
   hasNotification = false,
   notificationMessage = "",
   logoSrc,
-  logoAlt = "Chat Agent",
+  logoAlt = "Agent",
   animationColors = ["#7DADB9", "#3864F5", "#55468D", "#479A8D"],
-}: ChatButtonProps) => {
+}: AgentButtonProps) => {
   const [showText, setShowText] = useState(false);
   const [delayedHasNotification, setDelayedHasNotification] = useState(false);
   const [isMounted, setIsMounted] = useState(false);
@@ -128,5 +128,5 @@ const ChatButton = ({
   );
 };
 
-export default ChatButton;
+export default AgentButton;
 

package/src/components/Chat/index.ts

@@ -1,5 +1,5 @@
-export { default as ChatButton } from "./ChatButton";
-export type { ChatButtonProps } from "./ChatButton";
+export { default as AgentButton } from "./AgentButton";
+export type { AgentButtonProps } from "./AgentButton";
 export { default as AnimatedBgCircle } from "./AnimatedBgCircle";
 export { default as AnimatedBgRectangle } from "./AnimatedBgRectangle";
 

package/src/components/Input.tsx

@@ -1,23 +1,30 @@
 import * as React from "react";
 
-export type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>;
+export type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> & {
+  /** Input visual variant */
+  variant?: "default" | "borderless";
+};
 
 export const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, disabled, ...props }, ref) => {
+  ({ className, disabled, variant = "default", ...props }, ref) => {
+    const isBorderless = variant === "borderless";
+    
     return (
       <input
         ref={ref}
         disabled={disabled}
         className={[
-          "w-full h-12 px-4 rounded-full border bg-transparent outline-none transition-colors",
+          "w-full h-12 px-4 rounded-full bg-transparent outline-none transition-colors",
           "text-sm placeholder:text-[var(--muted-fg)]",
+          !isBorderless && "border",
           disabled
-            ? "border-[#3F424F] text-[#3F424F] cursor-not-allowed"
+            ? "text-[#3F424F] cursor-not-allowed" + (isBorderless ? "" : " border-[#3F424F]")
             : [
                 "text-[var(--muted-fg)]",
-                "border-[var(--muted-fg)]",
-                "hover:border-[var(--border)]",
-                "focus:border-[var(--color-brand)] focus:text-[var(--fg)]"
+                isBorderless ? "" : "border-[var(--muted-fg)]",
+                isBorderless ? "" : "hover:border-[var(--border)]",
+                "focus:text-[var(--fg)]",
+                isBorderless ? "" : "focus:border-[var(--color-brand)]"
               ].join(" "),
           className
         ].join(" ")}

package/src/index.ts

@@ -37,4 +37,4 @@ export type { IconButtonProps } from "./components/IconButton";
 export type { IconProps } from "./components/Icon";
 export type { ChipProps } from "./components/Chip";
 export type { CounterProps } from "./components/Counter";
-export type { ChatButtonProps } from "./components/Chat";
+export type { AgentButtonProps } from "./components/Chat";

package/src/stories/{ChatButton.stories.tsx → AgentButton.stories.tsx}

@@ -1,13 +1,13 @@
 import * as React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { ChatButton } from "../components/Chat";
+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 ChatButton> = {
-  title: "Components/ChatButton",
-  component: ChatButton,
+const meta: Meta<typeof AgentButton> = {
+  title: "Components/AgentButton",
+  component: AgentButton,
   args: {
     hasNotification: false,
     notificationMessage: "Hello! How can I help you today?",
@@ -28,7 +28,7 @@ const meta: Meta<typeof ChatButton> = {
 };
 
 export default meta;
-type Story = StoryObj<typeof ChatButton>;
+type Story = StoryObj<typeof AgentButton>;
 
 export const Playground: Story = {
   render: (args) => {
@@ -36,7 +36,7 @@ export const Playground: Story = {
 
     return (
       <>
-        <ChatButton
+        <AgentButton
           {...args}
           onOpenChat={() => {
             setChatOpen(true);
@@ -79,7 +79,7 @@ export const AutoToggleNotification: Story = {
     }, []);
 
     return (
-      <ChatButton
+      <AgentButton
         {...args}
         hasNotification={hasNotification}
         notificationMessage="This notification toggles every 5 seconds!"

package/src/stories/Input.stories.tsx

@@ -36,3 +36,14 @@ export const Types: Story = {
     </div>
   )
 };
+
+export const Borderless: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4 w-96">
+      <Input variant="borderless" placeholder="Borderless input" type="text" />
+      <Input variant="borderless" placeholder="Borderless email" type="email" />
+      <Input variant="borderless" placeholder="Borderless search..." />
+      <Input variant="borderless" placeholder="Disabled borderless" disabled />
+    </div>
+  )
+};