@neoptocom/neopto-ui 1.6.9 → 1.6.12

package/dist/index.cjs

@@ -303,6 +303,7 @@ var Input = React11__namespace.forwardRef(
     className,
     disabled,
     variant = "default",
+    size = "md",
     label,
     fieldsetProps,
     legendProps,
@@ -314,11 +315,15 @@ var Input = React11__namespace.forwardRef(
     const shouldUseInlineStyles = isInlineVariant || Boolean(label);
     const isError = error && !disabled;
     const hasIcon = Boolean(icon);
+    const inputSizeClass = shouldUseInlineStyles ? size === "sm" ? "h-4" : size === "lg" ? "h-10" : "h-9" : size === "sm" ? "h-6 rounded-full" : size === "lg" ? "h-14 rounded-full" : "h-12 rounded-full";
+    const inputPaddingClass = shouldUseInlineStyles ? hasIcon ? "pr-8" : "" : size === "sm" ? hasIcon ? "px-3 pr-9" : "px-3" : hasIcon ? "px-4 pr-10" : "px-4";
+    const inputTextSizeClass = size === "sm" ? "text-xs placeholder:text-xs" : "text-sm placeholder:text-sm";
     const inputClasses = [
       "w-full bg-transparent outline-none transition-colors",
-      shouldUseInlineStyles ? "h-9" : "h-12 rounded-full",
-      shouldUseInlineStyles ? hasIcon ? "pr-8" : "" : hasIcon ? "px-4 pr-10" : "px-4",
-      "font-['Poppins'] text-sm placeholder:text-[var(--muted-fg)]"
+      inputSizeClass,
+      inputPaddingClass,
+      inputTextSizeClass,
+      "font-['Poppins'] placeholder:text-[var(--muted-fg)]"
     ];
     if (!shouldUseInlineStyles) {
       inputClasses.push("border");
@@ -354,16 +359,20 @@ var Input = React11__namespace.forwardRef(
     }
     const { className: fieldsetClassNameProp = "", ...restFieldsetProps } = fieldsetProps ?? {};
     const { className: legendClassNameProp = "", ...restLegendProps } = legendProps ?? {};
+    const fieldsetHeightClass = size === "sm" ? "h-8" : size === "lg" ? "h-16" : "h-14";
     const fieldsetClassName = [
-      "w-full min-w-0 rounded-full border bg-[var(--surface)] transition-colors h-14",
+      "w-full min-w-0 rounded-full border bg-[var(--surface)] transition-colors",
+      fieldsetHeightClass,
       isError ? "border-[var(--destructive)]" : "border-[var(--border)]",
       isError ? "focus-within:border-[var(--destructive)]" : "focus-within:border-[var(--color-brand)]",
       disabled ? "opacity-60 cursor-not-allowed" : "",
       fieldsetClassNameProp
     ].filter(Boolean).join(" ");
     const legendColorClass = disabled ? "text-[var(--muted-fg)]" : isError ? "text-[var(--destructive)]" : "text-[var(--muted-fg)]";
+    const legendSizeClass = size === "sm" ? "text-xs" : "text-sm";
     const legendClassNameCombined = [
-      "ml-4 px-1 text-sm leading-none relative font-normal select-none",
+      "ml-4 px-1 leading-none relative font-normal select-none",
+      legendSizeClass,
       legendColorClass,
       legendClassNameProp
     ].filter(Boolean).join(" ");
@@ -560,7 +569,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(" ");
 }
@@ -587,7 +597,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",

package/dist/index.d.cts

@@ -62,6 +62,8 @@ declare function Card({ children, className, style, showDecorations, variant, el
 type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & {
     /** Input visual variant */
     variant?: "default" | "inline";
+    /** Input size */
+    size?: "sm" | "md" | "lg";
     /** Optional floating label (renders a fieldset wrapper when provided) */
     label?: string;
     /** Additional props for the surrounding fieldset when label is set */
@@ -76,6 +78,8 @@ type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & {
 declare const Input: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & {
     /** Input visual variant */
     variant?: "default" | "inline";
+    /** Input size */
+    size?: "sm" | "md" | "lg";
     /** Optional floating label (renders a fieldset wrapper when provided) */
     label?: string;
     /** Additional props for the surrounding fieldset when label is set */
@@ -143,7 +147,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;
 
@@ -394,7 +398,7 @@ interface BreadcrumbProps {
  */
 declare const Breadcrumb: React__default.FC<BreadcrumbProps>;
 
-type DateInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "onChange" | "type"> & {
+type DateInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "onChange" | "type" | "size"> & {
     /** Label text displayed above the input */
     label?: string;
     /** Current date value */
@@ -414,7 +418,7 @@ type DateInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "value"
     /** Background image URL for dark mode */
     darkBackgroundImage?: string;
 };
-declare const DateInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "type" | "value"> & {
+declare const DateInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "size" | "type" | "value"> & {
     /** Label text displayed above the input */
     label?: string;
     /** Current date value */

package/dist/index.d.ts

@@ -62,6 +62,8 @@ declare function Card({ children, className, style, showDecorations, variant, el
 type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & {
     /** Input visual variant */
     variant?: "default" | "inline";
+    /** Input size */
+    size?: "sm" | "md" | "lg";
     /** Optional floating label (renders a fieldset wrapper when provided) */
     label?: string;
     /** Additional props for the surrounding fieldset when label is set */
@@ -76,6 +78,8 @@ type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & {
 declare const Input: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & {
     /** Input visual variant */
     variant?: "default" | "inline";
+    /** Input size */
+    size?: "sm" | "md" | "lg";
     /** Optional floating label (renders a fieldset wrapper when provided) */
     label?: string;
     /** Additional props for the surrounding fieldset when label is set */
@@ -143,7 +147,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;
 
@@ -394,7 +398,7 @@ interface BreadcrumbProps {
  */
 declare const Breadcrumb: React__default.FC<BreadcrumbProps>;
 
-type DateInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "onChange" | "type"> & {
+type DateInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "onChange" | "type" | "size"> & {
     /** Label text displayed above the input */
     label?: string;
     /** Current date value */
@@ -414,7 +418,7 @@ type DateInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "value"
     /** Background image URL for dark mode */
     darkBackgroundImage?: string;
 };
-declare const DateInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "type" | "value"> & {
+declare const DateInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "size" | "type" | "value"> & {
     /** Label text displayed above the input */
     label?: string;
     /** Current date value */

package/dist/index.js

@@ -282,6 +282,7 @@ var Input = React11.forwardRef(
     className,
     disabled,
     variant = "default",
+    size = "md",
     label,
     fieldsetProps,
     legendProps,
@@ -293,11 +294,15 @@ var Input = React11.forwardRef(
     const shouldUseInlineStyles = isInlineVariant || Boolean(label);
     const isError = error && !disabled;
     const hasIcon = Boolean(icon);
+    const inputSizeClass = shouldUseInlineStyles ? size === "sm" ? "h-4" : size === "lg" ? "h-10" : "h-9" : size === "sm" ? "h-6 rounded-full" : size === "lg" ? "h-14 rounded-full" : "h-12 rounded-full";
+    const inputPaddingClass = shouldUseInlineStyles ? hasIcon ? "pr-8" : "" : size === "sm" ? hasIcon ? "px-3 pr-9" : "px-3" : hasIcon ? "px-4 pr-10" : "px-4";
+    const inputTextSizeClass = size === "sm" ? "text-xs placeholder:text-xs" : "text-sm placeholder:text-sm";
     const inputClasses = [
       "w-full bg-transparent outline-none transition-colors",
-      shouldUseInlineStyles ? "h-9" : "h-12 rounded-full",
-      shouldUseInlineStyles ? hasIcon ? "pr-8" : "" : hasIcon ? "px-4 pr-10" : "px-4",
-      "font-['Poppins'] text-sm placeholder:text-[var(--muted-fg)]"
+      inputSizeClass,
+      inputPaddingClass,
+      inputTextSizeClass,
+      "font-['Poppins'] placeholder:text-[var(--muted-fg)]"
     ];
     if (!shouldUseInlineStyles) {
       inputClasses.push("border");
@@ -333,16 +338,20 @@ var Input = React11.forwardRef(
     }
     const { className: fieldsetClassNameProp = "", ...restFieldsetProps } = fieldsetProps ?? {};
     const { className: legendClassNameProp = "", ...restLegendProps } = legendProps ?? {};
+    const fieldsetHeightClass = size === "sm" ? "h-8" : size === "lg" ? "h-16" : "h-14";
     const fieldsetClassName = [
-      "w-full min-w-0 rounded-full border bg-[var(--surface)] transition-colors h-14",
+      "w-full min-w-0 rounded-full border bg-[var(--surface)] transition-colors",
+      fieldsetHeightClass,
       isError ? "border-[var(--destructive)]" : "border-[var(--border)]",
       isError ? "focus-within:border-[var(--destructive)]" : "focus-within:border-[var(--color-brand)]",
       disabled ? "opacity-60 cursor-not-allowed" : "",
       fieldsetClassNameProp
     ].filter(Boolean).join(" ");
     const legendColorClass = disabled ? "text-[var(--muted-fg)]" : isError ? "text-[var(--destructive)]" : "text-[var(--muted-fg)]";
+    const legendSizeClass = size === "sm" ? "text-xs" : "text-sm";
     const legendClassNameCombined = [
-      "ml-4 px-1 text-sm leading-none relative font-normal select-none",
+      "ml-4 px-1 leading-none relative font-normal select-none",
+      legendSizeClass,
       legendColorClass,
       legendClassNameProp
     ].filter(Boolean).join(" ");
@@ -539,7 +548,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(" ");
 }
@@ -566,7 +576,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",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neoptocom/neopto-ui",
-  "version": "1.6.9",
+  "version": "1.6.12",
   "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/DateInput.tsx

@@ -6,7 +6,7 @@ import { assets } from "..";
 
 export type DateInputProps = Omit<
   React.InputHTMLAttributes<HTMLInputElement>,
-  "value" | "onChange" | "type"
+  "value" | "onChange" | "type" | "size"
 > & {
   /** Label text displayed above the input */
   label?: string;

package/src/components/Input.tsx

@@ -4,6 +4,8 @@ import Icon from "./Icon";
 export type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & {
   /** Input visual variant */
   variant?: "default" | "inline";
+  /** Input size */
+  size?: "sm" | "md" | "lg";
   /** Optional floating label (renders a fieldset wrapper when provided) */
   label?: string;
   /** Additional props for the surrounding fieldset when label is set */
@@ -22,6 +24,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
       className,
       disabled,
       variant = "default",
+      size = "md",
       label,
       fieldsetProps,
       legendProps,
@@ -35,14 +38,36 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
     const shouldUseInlineStyles = isInlineVariant || Boolean(label);
     const isError = error && !disabled;
     const hasIcon = Boolean(icon);
+    const inputSizeClass = shouldUseInlineStyles
+      ? size === "sm"
+        ? "h-4"
+        : size === "lg"
+          ? "h-10"
+          : "h-9"
+      : size === "sm"
+        ? "h-6 rounded-full"
+        : size === "lg"
+          ? "h-14 rounded-full"
+          : "h-12 rounded-full";
+    const inputPaddingClass = shouldUseInlineStyles
+      ? hasIcon
+        ? "pr-8"
+        : ""
+      : size === "sm"
+        ? hasIcon
+          ? "px-3 pr-9"
+          : "px-3"
+        : hasIcon
+          ? "px-4 pr-10"
+          : "px-4";
+    const inputTextSizeClass = size === "sm" ? "text-xs placeholder:text-xs" : "text-sm placeholder:text-sm";
 
     const inputClasses: string[] = [
       "w-full bg-transparent outline-none transition-colors",
-      shouldUseInlineStyles ? "h-9" : "h-12 rounded-full",
-      shouldUseInlineStyles 
-        ? (hasIcon ? "pr-8" : "") 
-        : (hasIcon ? "px-4 pr-10" : "px-4"),
-      "font-['Poppins'] text-sm placeholder:text-[var(--muted-fg)]"
+      inputSizeClass,
+      inputPaddingClass,
+      inputTextSizeClass,
+      "font-['Poppins'] placeholder:text-[var(--muted-fg)]"
     ];
 
     if (!shouldUseInlineStyles) {
@@ -94,8 +119,12 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
 
     const { className: legendClassNameProp = "", ...restLegendProps } = legendProps ?? {};
 
+    const fieldsetHeightClass =
+      size === "sm" ? "h-8" : size === "lg" ? "h-16" : "h-14";
+
     const fieldsetClassName = [
-      "w-full min-w-0 rounded-full border bg-[var(--surface)] transition-colors h-14",
+      "w-full min-w-0 rounded-full border bg-[var(--surface)] transition-colors",
+      fieldsetHeightClass,
       isError ? "border-[var(--destructive)]" : "border-[var(--border)]",
       isError
         ? "focus-within:border-[var(--destructive)]"
@@ -111,9 +140,11 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
       : isError
       ? "text-[var(--destructive)]"
       : "text-[var(--muted-fg)]";
+    const legendSizeClass = size === "sm" ? "text-xs" : "text-sm";
 
     const legendClassNameCombined = [
-      "ml-4 px-1 text-sm leading-none relative font-normal select-none",
+      "ml-4 px-1 leading-none relative font-normal select-none",
+      legendSizeClass,
       legendColorClass,
       legendClassNameProp
     ]

package/src/stories/Input.stories.tsx

@@ -37,6 +37,30 @@ export const Types: Story = {
   )
 };
 
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex flex-col gap-6 w-96">
+      <div className="flex flex-col gap-3">
+        <Input size="sm" placeholder="Small input" />
+        <Input size="md" placeholder="Medium input" />
+        <Input size="lg" placeholder="Large input" />
+      </div>
+
+      <div className="flex flex-col gap-3">
+        <Input size="sm" variant="inline" placeholder="Small inline input" />
+        <Input size="md" variant="inline" placeholder="Medium inline input" />
+        <Input size="lg" variant="inline" placeholder="Large inline input" />
+      </div>
+
+      <div className="flex flex-col gap-3">
+        <Input size="sm" label="Small labeled" placeholder="Small labeled input" />
+        <Input size="md" label="Medium labeled" placeholder="Medium labeled input" />
+        <Input size="lg" label="Large labeled" placeholder="Large labeled input" />
+      </div>
+    </div>
+  )
+};
+
 export const Inline: Story = {
   render: () => (
     <div className="flex flex-col gap-4 w-96">