@neoptocom/neopto-ui 1.6.8 → 1.6.9

package/dist/index.cjs

@@ -515,12 +515,9 @@ 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(" ");
 }
@@ -1154,7 +1151,8 @@ function getButtonClasses(variant = "primary", size = "md", fullWidth, className
   const variants = {
     primary: "bg-cyan-500 text-white hover:bg-cyan-400 active:bg-cyan-600 disabled:bg-neutral-400",
     secondary: "border border-cyan-500 text-cyan-500 bg-transparent hover:bg-cyan-50 active:bg-cyan-100 disabled:border-neutral-400 disabled:text-neutral-400",
-    ghost: "bg-transparent text-[var(--fg)] hover:bg-[var(--muted)] active:bg-[var(--muted)] disabled:opacity-50"
+    ghost: "bg-transparent text-[var(--fg)] hover:bg-[var(--muted)] active:bg-[var(--muted)] disabled:opacity-50",
+    inline: "text-cyan-500 bg-transparent active:bg-cyan-100 disabled:text-neutral-400"
   };
   const sizes = {
     sm: "h-9 px-3",
@@ -1164,7 +1162,7 @@ function getButtonClasses(variant = "primary", size = "md", fullWidth, className
   return [
     base,
     variants[variant],
-    sizes[size],
+    variant === "inline" ? "px-2" : sizes[size],
     fullWidth ? "w-full" : "",
     className
   ].filter(Boolean).join(" ");

package/dist/index.d.cts

@@ -228,7 +228,7 @@ declare function Search({ className, options, onSearch, selectedOption, onSelect
 
 type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
     /** Button visual variant */
-    variant?: "primary" | "secondary" | "ghost";
+    variant?: "primary" | "secondary" | "ghost" | "inline";
     /** Button size */
     size?: "sm" | "md" | "lg";
     /** Make button full width */
@@ -238,7 +238,7 @@ type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
 };
 declare const Button: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
     /** Button visual variant */
-    variant?: "primary" | "secondary" | "ghost";
+    variant?: "primary" | "secondary" | "ghost" | "inline";
     /** Button size */
     size?: "sm" | "md" | "lg";
     /** Make button full width */

package/dist/index.d.ts

@@ -228,7 +228,7 @@ declare function Search({ className, options, onSearch, selectedOption, onSelect
 
 type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
     /** Button visual variant */
-    variant?: "primary" | "secondary" | "ghost";
+    variant?: "primary" | "secondary" | "ghost" | "inline";
     /** Button size */
     size?: "sm" | "md" | "lg";
     /** Make button full width */
@@ -238,7 +238,7 @@ type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
 };
 declare const Button: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
     /** Button visual variant */
-    variant?: "primary" | "secondary" | "ghost";
+    variant?: "primary" | "secondary" | "ghost" | "inline";
     /** Button size */
     size?: "sm" | "md" | "lg";
     /** Make button full width */

package/dist/index.js

@@ -494,12 +494,9 @@ 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(" ");
 }
@@ -1133,7 +1130,8 @@ function getButtonClasses(variant = "primary", size = "md", fullWidth, className
   const variants = {
     primary: "bg-cyan-500 text-white hover:bg-cyan-400 active:bg-cyan-600 disabled:bg-neutral-400",
     secondary: "border border-cyan-500 text-cyan-500 bg-transparent hover:bg-cyan-50 active:bg-cyan-100 disabled:border-neutral-400 disabled:text-neutral-400",
-    ghost: "bg-transparent text-[var(--fg)] hover:bg-[var(--muted)] active:bg-[var(--muted)] disabled:opacity-50"
+    ghost: "bg-transparent text-[var(--fg)] hover:bg-[var(--muted)] active:bg-[var(--muted)] disabled:opacity-50",
+    inline: "text-cyan-500 bg-transparent active:bg-cyan-100 disabled:text-neutral-400"
   };
   const sizes = {
     sm: "h-9 px-3",
@@ -1143,7 +1141,7 @@ function getButtonClasses(variant = "primary", size = "md", fullWidth, className
   return [
     base,
     variants[variant],
-    sizes[size],
+    variant === "inline" ? "px-2" : sizes[size],
     fullWidth ? "w-full" : "",
     className
   ].filter(Boolean).join(" ");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neoptocom/neopto-ui",
-  "version": "1.6.8",
+  "version": "1.6.9",
   "private": false,
   "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": [

package/src/components/Button.stories.tsx

@@ -16,7 +16,7 @@ const meta: Meta<typeof Button> = {
   argTypes: {
     variant: {
       control: "inline-radio",
-      options: ["primary", "secondary", "ghost"]
+      options: ["primary", "secondary", "ghost", "inline"]
     },
     size: {
       control: "inline-radio",
@@ -54,6 +54,11 @@ export const Variants: Story = {
           Ghost
         </Typo>
       </Button>
+      <Button variant="inline">
+        <Typo variant="title-sm" bold="semibold">
+          Inline
+        </Typo>
+      </Button>
     </div>
   )
 };
@@ -95,6 +100,10 @@ export const WithIcons: Story = {
         <Icon name="settings" />
         <span>Settings</span>
       </Button>
+      <Button variant="inline">
+        <Icon name="settings" />
+        <span>Inline</span>
+      </Button>
     </div>
   )
 };

package/src/components/Button.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 
 export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
     /** Button visual variant */
-    variant?: "primary" | "secondary" | "ghost";
+    variant?: "primary" | "secondary" | "ghost" | "inline";
     /** Button size */
     size?: "sm" | "md" | "lg";
     /** Make button full width */
@@ -25,7 +25,8 @@ function getButtonClasses(
     const variants = {
         primary: "bg-cyan-500 text-white hover:bg-cyan-400 active:bg-cyan-600 disabled:bg-neutral-400",
         secondary: "border border-cyan-500 text-cyan-500 bg-transparent hover:bg-cyan-50 active:bg-cyan-100 disabled:border-neutral-400 disabled:text-neutral-400",
-        ghost: "bg-transparent text-[var(--fg)] hover:bg-[var(--muted)] active:bg-[var(--muted)] disabled:opacity-50"
+        ghost: "bg-transparent text-[var(--fg)] hover:bg-[var(--muted)] active:bg-[var(--muted)] disabled:opacity-50",
+        inline: "text-cyan-500 bg-transparent active:bg-cyan-100 disabled:text-neutral-400"
     };
 
     const sizes = {
@@ -37,7 +38,7 @@ function getButtonClasses(
     return [
         base,
         variants[variant],
-        sizes[size],
+        variant === "inline" ? "px-2" : sizes[size],
         fullWidth ? "w-full" : "",
         className
     ].filter(Boolean).join(" ");

package/src/components/Typo.tsx

@@ -47,16 +47,10 @@ function getTypoClasses(
     semibold: "font-semibold",
     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(" ");
 }