@neoptocom/neopto-ui 1.6.12 → 1.6.14

package/dist/index.cjs

@@ -976,6 +976,7 @@ function Search({
   searchDelay = 300,
   disabled = false,
   maxHeight = 152,
+  placeholder = "Pesquisar",
   id,
   children,
   ...props
@@ -1135,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)
                 }
               ),
@@ -1165,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

@@ -223,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 */
@@ -244,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 */

package/dist/index.d.ts

@@ -223,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 */
@@ -244,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 */

package/dist/index.js

@@ -955,6 +955,7 @@ function Search({
   searchDelay = 300,
   disabled = false,
   maxHeight = 152,
+  placeholder = "Pesquisar",
   id,
   children,
   ...props
@@ -1114,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)
                 }
               ),
@@ -1144,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.12",
+  "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/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/Search.stories.tsx

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