@neoptocom/neopto-ui 1.6.8 → 1.6.10

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(" ");
 }
@@ -563,7 +560,8 @@ function getAvatarClasses(size = "md", className) {
   const base = "relative box-border flex items-center justify-center overflow-hidden rounded-full border border-[var(--border)] bg-[var(--muted)] text-[var(--fg)] select-none";
   const sizes = {
     sm: "w-[28px] h-[28px]",
-    md: "w-[60px] h-[60px]"
+    md: "w-[60px] h-[60px]",
+    bg: "w-[90px] h-[90px]"
   };
   return [base, sizes[size], className].filter(Boolean).join(" ");
 }
@@ -590,7 +588,7 @@ function Avatar({
     if (color) s.backgroundColor = color;
     return s;
   }, [color, style]);
-  const textVariant = size === "sm" ? "label-md" : "headline-md";
+  const textVariant = size === "sm" ? "label-md" : size === "bg" ? "headline-lg" : "headline-md";
   const showImage = !!src && !imgError;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -1154,7 +1152,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 +1163,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

@@ -143,7 +143,7 @@ type AvatarProps = {
     /** Accessible alt text; defaults to the person's name */
     alt?: string;
     /** Avatar size */
-    size?: "sm" | "md";
+    size?: "sm" | "md" | "bg";
 } & Omit<React.HTMLAttributes<HTMLDivElement>, "children">;
 declare function Avatar({ name, src, color, size, alt, className, style, ...props }: AvatarProps): react_jsx_runtime.JSX.Element;
 
@@ -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

@@ -143,7 +143,7 @@ type AvatarProps = {
     /** Accessible alt text; defaults to the person's name */
     alt?: string;
     /** Avatar size */
-    size?: "sm" | "md";
+    size?: "sm" | "md" | "bg";
 } & Omit<React.HTMLAttributes<HTMLDivElement>, "children">;
 declare function Avatar({ name, src, color, size, alt, className, style, ...props }: AvatarProps): react_jsx_runtime.JSX.Element;
 
@@ -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(" ");
 }
@@ -542,7 +539,8 @@ function getAvatarClasses(size = "md", className) {
   const base = "relative box-border flex items-center justify-center overflow-hidden rounded-full border border-[var(--border)] bg-[var(--muted)] text-[var(--fg)] select-none";
   const sizes = {
     sm: "w-[28px] h-[28px]",
-    md: "w-[60px] h-[60px]"
+    md: "w-[60px] h-[60px]",
+    bg: "w-[90px] h-[90px]"
   };
   return [base, sizes[size], className].filter(Boolean).join(" ");
 }
@@ -569,7 +567,7 @@ function Avatar({
     if (color) s.backgroundColor = color;
     return s;
   }, [color, style]);
-  const textVariant = size === "sm" ? "label-md" : "headline-md";
+  const textVariant = size === "sm" ? "label-md" : size === "bg" ? "headline-lg" : "headline-md";
   const showImage = !!src && !imgError;
   return /* @__PURE__ */ jsx(
     "div",
@@ -1133,7 +1131,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 +1142,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.10",
   "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/Avatar.tsx

@@ -12,7 +12,7 @@ export type AvatarProps = {
   /** Accessible alt text; defaults to the person's name */
   alt?: string;
   /** Avatar size */
-  size?: "sm" | "md";
+  size?: "sm" | "md" | "bg";
 } & Omit<React.HTMLAttributes<HTMLDivElement>, "children">;
 
 function getAvatarClasses(size: AvatarProps["size"] = "md", className?: string): string {
@@ -22,7 +22,8 @@ function getAvatarClasses(size: AvatarProps["size"] = "md", className?: string):
 
   const sizes = {
     sm: "w-[28px] h-[28px]",
-    md: "w-[60px] h-[60px]"
+    md: "w-[60px] h-[60px]",
+    bg: "w-[90px] h-[90px]"
   };
 
   return [base, sizes[size], className].filter(Boolean).join(" ");
@@ -53,7 +54,12 @@ export default function Avatar({
     return s;
   }, [color, style]);
 
-  const textVariant = size === "sm" ? ("label-md" as const) : ("headline-md" as const);
+  const textVariant =
+    size === "sm"
+      ? ("label-md" as const)
+      : size === "bg"
+        ? ("headline-lg" as const)
+        : ("headline-md" as const);
 
   const showImage = !!src && !imgError;
 

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(" ");
 }