@neoptocom/neopto-ui 1.6.10 → 1.6.14

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(" ");
@@ -967,6 +976,7 @@ function Search({
   searchDelay = 300,
   disabled = false,
   maxHeight = 152,
+  placeholder = "Pesquisar",
   id,
   children,
   ...props
@@ -1126,7 +1136,7 @@ function Search({
                     "leading-tight text-[var(--fg)] placeholder:text-[var(--muted-fg)]",
                     "px-2"
                   ].join(" "),
-                  placeholder: "Pesquisar",
+                  placeholder,
                   onClick: () => !disabled && setOpen(true)
                 }
               ),
@@ -1156,6 +1166,7 @@ function getButtonClasses(variant = "primary", size = "md", fullWidth, className
     inline: "text-cyan-500 bg-transparent active:bg-cyan-100 disabled:text-neutral-400"
   };
   const sizes = {
+    xs: "h-6 px-2",
     sm: "h-9 px-3",
     md: "h-12 px-[18px]",
     lg: "h-14 px-6"

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 */
@@ -219,18 +223,20 @@ interface SearchProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSele
     disabled?: boolean;
     /** Maximum height of the options dropdown */
     maxHeight?: number;
+    /** Placeholder shown when the input is empty and nothing is selected */
+    placeholder?: string;
     /** Optional id base (for accessibility hooks) */
     id?: string;
     /** Optional filter children to render when filters are expanded */
     children?: React.ReactNode;
 }
-declare function Search({ className, options, onSearch, selectedOption, onSelect, searchDelay, disabled, maxHeight, id, children, ...props }: SearchProps): react_jsx_runtime.JSX.Element;
+declare function Search({ className, options, onSearch, selectedOption, onSelect, searchDelay, disabled, maxHeight, placeholder, id, children, ...props }: SearchProps): react_jsx_runtime.JSX.Element;
 
 type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
     /** Button visual variant */
     variant?: "primary" | "secondary" | "ghost" | "inline";
     /** Button size */
-    size?: "sm" | "md" | "lg";
+    size?: "xs" | "sm" | "md" | "lg";
     /** Make button full width */
     fullWidth?: boolean;
     /** Icon component to display instead of text */
@@ -240,7 +246,7 @@ declare const Button: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes
     /** Button visual variant */
     variant?: "primary" | "secondary" | "ghost" | "inline";
     /** Button size */
-    size?: "sm" | "md" | "lg";
+    size?: "xs" | "sm" | "md" | "lg";
     /** Make button full width */
     fullWidth?: boolean;
     /** Icon component to display instead of text */
@@ -394,7 +400,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 +420,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 */
@@ -219,18 +223,20 @@ interface SearchProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSele
     disabled?: boolean;
     /** Maximum height of the options dropdown */
     maxHeight?: number;
+    /** Placeholder shown when the input is empty and nothing is selected */
+    placeholder?: string;
     /** Optional id base (for accessibility hooks) */
     id?: string;
     /** Optional filter children to render when filters are expanded */
     children?: React.ReactNode;
 }
-declare function Search({ className, options, onSearch, selectedOption, onSelect, searchDelay, disabled, maxHeight, id, children, ...props }: SearchProps): react_jsx_runtime.JSX.Element;
+declare function Search({ className, options, onSearch, selectedOption, onSelect, searchDelay, disabled, maxHeight, placeholder, id, children, ...props }: SearchProps): react_jsx_runtime.JSX.Element;
 
 type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
     /** Button visual variant */
     variant?: "primary" | "secondary" | "ghost" | "inline";
     /** Button size */
-    size?: "sm" | "md" | "lg";
+    size?: "xs" | "sm" | "md" | "lg";
     /** Make button full width */
     fullWidth?: boolean;
     /** Icon component to display instead of text */
@@ -240,7 +246,7 @@ declare const Button: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes
     /** Button visual variant */
     variant?: "primary" | "secondary" | "ghost" | "inline";
     /** Button size */
-    size?: "sm" | "md" | "lg";
+    size?: "xs" | "sm" | "md" | "lg";
     /** Make button full width */
     fullWidth?: boolean;
     /** Icon component to display instead of text */
@@ -394,7 +400,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 +420,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(" ");
@@ -946,6 +955,7 @@ function Search({
   searchDelay = 300,
   disabled = false,
   maxHeight = 152,
+  placeholder = "Pesquisar",
   id,
   children,
   ...props
@@ -1105,7 +1115,7 @@ function Search({
                     "leading-tight text-[var(--fg)] placeholder:text-[var(--muted-fg)]",
                     "px-2"
                   ].join(" "),
-                  placeholder: "Pesquisar",
+                  placeholder,
                   onClick: () => !disabled && setOpen(true)
                 }
               ),
@@ -1135,6 +1145,7 @@ function getButtonClasses(variant = "primary", size = "md", fullWidth, className
     inline: "text-cyan-500 bg-transparent active:bg-cyan-100 disabled:text-neutral-400"
   };
   const sizes = {
+    xs: "h-6 px-2",
     sm: "h-9 px-3",
     md: "h-12 px-[18px]",
     lg: "h-14 px-6"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neoptocom/neopto-ui",
-  "version": "1.6.10",
+  "version": "1.6.14",
   "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.docs.mdx

@@ -6,7 +6,7 @@ import * as ButtonStories from "./Button.stories";
 
 # Button
 
-Buttons trigger primary user actions. They support three visual variants, three sizes, optional full
+Buttons trigger primary user actions. They support three visual variants, four sizes (`xs`–`lg`), optional full
 width layout, and icon affordances.
 
 ## Usage

package/src/components/Button.stories.tsx

@@ -20,7 +20,7 @@ const meta: Meta<typeof Button> = {
     },
     size: {
       control: "inline-radio",
-      options: ["sm", "md", "lg"]
+      options: ["xs", "sm", "md", "lg"]
     },
     fullWidth: {
       control: "boolean"
@@ -66,6 +66,11 @@ export const Variants: Story = {
 export const Sizes: Story = {
   render: () => (
     <div className="flex flex-wrap items-center gap-4">
+      <Button size="xs">
+        <Typo variant="label-sm" bold="semibold">
+          Extra small
+        </Typo>
+      </Button>
       <Button size="sm">
         <Typo variant="title-sm" bold="semibold">
           Small

package/src/components/Button.tsx

@@ -4,7 +4,7 @@ export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
     /** Button visual variant */
     variant?: "primary" | "secondary" | "ghost" | "inline";
     /** Button size */
-    size?: "sm" | "md" | "lg";
+    size?: "xs" | "sm" | "md" | "lg";
     /** Make button full width */
     fullWidth?: boolean;
     /** Icon component to display instead of text */
@@ -30,6 +30,7 @@ function getButtonClasses(
     };
 
     const sizes = {
+        xs: "h-6 px-2",
         sm: "h-9 px-3",
         md: "h-12 px-[18px]",
         lg: "h-14 px-6"

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/components/Search.tsx

@@ -28,6 +28,8 @@ export interface SearchProps
   disabled?: boolean;
   /** Maximum height of the options dropdown */
   maxHeight?: number;
+  /** Placeholder shown when the input is empty and nothing is selected */
+  placeholder?: string;
   /** Optional id base (for accessibility hooks) */
   id?: string;
   /** Optional filter children to render when filters are expanded */
@@ -43,6 +45,7 @@ export default function Search({
   searchDelay = 300,
   disabled = false,
   maxHeight = 152,
+  placeholder = "Pesquisar",
   id,
   children,
   ...props
@@ -218,7 +221,7 @@ export default function Search({
                 "leading-tight text-[var(--fg)] placeholder:text-[var(--muted-fg)]",
                 "px-2"
               ].join(" ")}
-              placeholder="Pesquisar"
+              placeholder={placeholder}
               onClick={() => !disabled && setOpen(true)}
             />
             {/* Action button (clear or expand) */}

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">

package/src/stories/Search.stories.tsx

@@ -39,7 +39,8 @@ const meta: Meta<typeof Search> = {
     selectedOption: null,
     disabled: false,
     maxHeight: 180,
-    searchDelay: 300
+    searchDelay: 300,
+    placeholder: "Pesquisar"
   }
 };