@neoptocom/neopto-ui 1.5.2 → 1.5.4

package/dist/index.cjs

@@ -264,6 +264,39 @@ function Card({
     }
   );
 }
+var sizeMap = {
+  sm: 16,
+  md: 24,
+  lg: 36
+};
+function Icon({
+  name,
+  className = "",
+  title,
+  size = "md",
+  fill = 0
+}) {
+  const fontSize = sizeMap[size] ?? sizeMap.md;
+  const hasColorClass = /\b(?:text-|fill-|stroke-)\S+/.test(className);
+  const style = {
+    fontVariationSettings: `'FILL' ${fill}, 'wght' 300, 'GRAD' 0, 'opsz' ${fontSize}`,
+    fontSize,
+    lineHeight: 1,
+    display: "inline-block",
+    verticalAlign: "middle",
+    ...hasColorClass ? {} : { color: "inherit" }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: `material-symbols-rounded rounded ${className}`,
+      style,
+      "aria-hidden": title ? void 0 : true,
+      title,
+      children: name
+    }
+  );
+}
 var Input = React3__namespace.forwardRef(
   ({
     className,
@@ -273,14 +306,17 @@ var Input = React3__namespace.forwardRef(
     fieldsetProps,
     legendProps,
     error = false,
+    icon,
     ...props
   }, ref) => {
     const isInlineVariant = variant === "inline";
     const shouldUseInlineStyles = isInlineVariant || Boolean(label);
     const isError = error && !disabled;
+    const hasIcon = Boolean(icon);
     const inputClasses = [
       "w-full bg-transparent outline-none transition-colors",
-      shouldUseInlineStyles ? "h-9" : "h-12 px-4 rounded-full",
+      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)]"
     ];
     if (!shouldUseInlineStyles) {
@@ -307,6 +343,12 @@ var Input = React3__namespace.forwardRef(
     const inputClassName = inputClasses.join(" ");
     const inputElement = /* @__PURE__ */ jsxRuntime.jsx("input", { ref, disabled, className: inputClassName, ...props });
     if (!label) {
+      if (hasIcon) {
+        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+          inputElement,
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-4 top-1/2 -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: icon, className: "text-[var(--muted-fg)] opacity-50" }) })
+        ] });
+      }
       return inputElement;
     }
     const { className: fieldsetClassNameProp = "", ...restFieldsetProps } = fieldsetProps ?? {};
@@ -338,7 +380,10 @@ var Input = React3__namespace.forwardRef(
               children: label
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative flex pl-5 pr-3 pb-1 h-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full", children: inputElement }) })
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative flex pl-5 pr-3 pb-1 h-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full relative", children: [
+            inputElement,
+            hasIcon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-1 top-1/2 -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: icon, className: "text-[var(--muted-fg)] opacity-50" }) })
+          ] }) })
         ]
       }
     );
@@ -625,39 +670,6 @@ function Skeleton({ className = "", rounded = "md", ...props }) {
     }
   );
 }
-var sizeMap = {
-  sm: 16,
-  md: 24,
-  lg: 36
-};
-function Icon({
-  name,
-  className = "",
-  title,
-  size = "md",
-  fill = 0
-}) {
-  const fontSize = sizeMap[size] ?? sizeMap.md;
-  const hasColorClass = /\b(?:text-|fill-|stroke-)\S+/.test(className);
-  const style = {
-    fontVariationSettings: `'FILL' ${fill}, 'wght' 300, 'GRAD' 0, 'opsz' ${fontSize}`,
-    fontSize,
-    lineHeight: 1,
-    display: "inline-block",
-    verticalAlign: "middle",
-    ...hasColorClass ? {} : { color: "inherit" }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "span",
-    {
-      className: `material-symbols-rounded rounded ${className}`,
-      style,
-      "aria-hidden": title ? void 0 : true,
-      title,
-      children: name
-    }
-  );
-}
 function getIconButtonClasses(variant = "ghost", size = "md", className) {
   const base = "cursor-pointer flex items-center justify-center rounded-full flex-shrink-0 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-cyan-500/40 disabled:cursor-not-allowed disabled:opacity-50";
   const variants = {
@@ -831,7 +843,7 @@ function Autocomplete({
           "fieldset",
           {
             className: [
-              "w-full min-w-0 rounded-full border bg-[var(--surface)] transition-colors h-16",
+              "w-full min-w-0 rounded-full border bg-[var(--surface)] transition-colors h-13",
               "border-[var(--border)] focus-within:border-[var(--color-brand)]",
               disabled ? "opacity-60 cursor-not-allowed" : ""
             ].join(" "),
@@ -885,6 +897,7 @@ function Autocomplete({
                     onClick: selectedOption && !open ? handleClear : () => setOpen((s) => !s),
                     disabled,
                     "aria-label": selectedOption && !open ? "Clear" : open ? "Collapse" : "Expand",
+                    className: "absolute right-0 top-[-30%]",
                     iconClassName: [
                       "transition-transform duration-300 text-[var(--muted-fg)]",
                       open ? "rotate-180 text-[var(--color-brand)]" : ""

package/dist/index.d.cts

@@ -70,6 +70,8 @@ type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & {
     legendProps?: React.HTMLAttributes<HTMLLegendElement>;
     /** Flag to visually mark the input as errored */
     error?: boolean;
+    /** Optional icon name to display on the inner right of the input */
+    icon?: string;
 };
 declare const Input: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & {
     /** Input visual variant */
@@ -82,6 +84,8 @@ declare const Input: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttribu
     legendProps?: React.HTMLAttributes<HTMLLegendElement>;
     /** Flag to visually mark the input as errored */
     error?: boolean;
+    /** Optional icon name to display on the inner right of the input */
+    icon?: string;
 } & React.RefAttributes<HTMLInputElement>>;
 
 type TextareaProps = Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> & {

package/dist/index.d.ts

@@ -70,6 +70,8 @@ type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & {
     legendProps?: React.HTMLAttributes<HTMLLegendElement>;
     /** Flag to visually mark the input as errored */
     error?: boolean;
+    /** Optional icon name to display on the inner right of the input */
+    icon?: string;
 };
 declare const Input: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & {
     /** Input visual variant */
@@ -82,6 +84,8 @@ declare const Input: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttribu
     legendProps?: React.HTMLAttributes<HTMLLegendElement>;
     /** Flag to visually mark the input as errored */
     error?: boolean;
+    /** Optional icon name to display on the inner right of the input */
+    icon?: string;
 } & React.RefAttributes<HTMLInputElement>>;
 
 type TextareaProps = Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> & {

package/dist/index.js

@@ -243,6 +243,39 @@ function Card({
     }
   );
 }
+var sizeMap = {
+  sm: 16,
+  md: 24,
+  lg: 36
+};
+function Icon({
+  name,
+  className = "",
+  title,
+  size = "md",
+  fill = 0
+}) {
+  const fontSize = sizeMap[size] ?? sizeMap.md;
+  const hasColorClass = /\b(?:text-|fill-|stroke-)\S+/.test(className);
+  const style = {
+    fontVariationSettings: `'FILL' ${fill}, 'wght' 300, 'GRAD' 0, 'opsz' ${fontSize}`,
+    fontSize,
+    lineHeight: 1,
+    display: "inline-block",
+    verticalAlign: "middle",
+    ...hasColorClass ? {} : { color: "inherit" }
+  };
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: `material-symbols-rounded rounded ${className}`,
+      style,
+      "aria-hidden": title ? void 0 : true,
+      title,
+      children: name
+    }
+  );
+}
 var Input = React3.forwardRef(
   ({
     className,
@@ -252,14 +285,17 @@ var Input = React3.forwardRef(
     fieldsetProps,
     legendProps,
     error = false,
+    icon,
     ...props
   }, ref) => {
     const isInlineVariant = variant === "inline";
     const shouldUseInlineStyles = isInlineVariant || Boolean(label);
     const isError = error && !disabled;
+    const hasIcon = Boolean(icon);
     const inputClasses = [
       "w-full bg-transparent outline-none transition-colors",
-      shouldUseInlineStyles ? "h-9" : "h-12 px-4 rounded-full",
+      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)]"
     ];
     if (!shouldUseInlineStyles) {
@@ -286,6 +322,12 @@ var Input = React3.forwardRef(
     const inputClassName = inputClasses.join(" ");
     const inputElement = /* @__PURE__ */ jsx("input", { ref, disabled, className: inputClassName, ...props });
     if (!label) {
+      if (hasIcon) {
+        return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          inputElement,
+          /* @__PURE__ */ jsx("div", { className: "absolute right-4 top-1/2 -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ jsx(Icon, { name: icon, className: "text-[var(--muted-fg)] opacity-50" }) })
+        ] });
+      }
       return inputElement;
     }
     const { className: fieldsetClassNameProp = "", ...restFieldsetProps } = fieldsetProps ?? {};
@@ -317,7 +359,10 @@ var Input = React3.forwardRef(
               children: label
             }
           ),
-          /* @__PURE__ */ jsx("div", { className: "relative flex pl-5 pr-3 pb-1 h-full", children: /* @__PURE__ */ jsx("div", { className: "flex w-full", children: inputElement }) })
+          /* @__PURE__ */ jsx("div", { className: "relative flex pl-5 pr-3 pb-1 h-full", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full relative", children: [
+            inputElement,
+            hasIcon && /* @__PURE__ */ jsx("div", { className: "absolute right-1 top-1/2 -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ jsx(Icon, { name: icon, className: "text-[var(--muted-fg)] opacity-50" }) })
+          ] }) })
         ]
       }
     );
@@ -604,39 +649,6 @@ function Skeleton({ className = "", rounded = "md", ...props }) {
     }
   );
 }
-var sizeMap = {
-  sm: 16,
-  md: 24,
-  lg: 36
-};
-function Icon({
-  name,
-  className = "",
-  title,
-  size = "md",
-  fill = 0
-}) {
-  const fontSize = sizeMap[size] ?? sizeMap.md;
-  const hasColorClass = /\b(?:text-|fill-|stroke-)\S+/.test(className);
-  const style = {
-    fontVariationSettings: `'FILL' ${fill}, 'wght' 300, 'GRAD' 0, 'opsz' ${fontSize}`,
-    fontSize,
-    lineHeight: 1,
-    display: "inline-block",
-    verticalAlign: "middle",
-    ...hasColorClass ? {} : { color: "inherit" }
-  };
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      className: `material-symbols-rounded rounded ${className}`,
-      style,
-      "aria-hidden": title ? void 0 : true,
-      title,
-      children: name
-    }
-  );
-}
 function getIconButtonClasses(variant = "ghost", size = "md", className) {
   const base = "cursor-pointer flex items-center justify-center rounded-full flex-shrink-0 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-cyan-500/40 disabled:cursor-not-allowed disabled:opacity-50";
   const variants = {
@@ -810,7 +822,7 @@ function Autocomplete({
           "fieldset",
           {
             className: [
-              "w-full min-w-0 rounded-full border bg-[var(--surface)] transition-colors h-16",
+              "w-full min-w-0 rounded-full border bg-[var(--surface)] transition-colors h-13",
               "border-[var(--border)] focus-within:border-[var(--color-brand)]",
               disabled ? "opacity-60 cursor-not-allowed" : ""
             ].join(" "),
@@ -864,6 +876,7 @@ function Autocomplete({
                     onClick: selectedOption && !open ? handleClear : () => setOpen((s) => !s),
                     disabled,
                     "aria-label": selectedOption && !open ? "Clear" : open ? "Collapse" : "Expand",
+                    className: "absolute right-0 top-[-30%]",
                     iconClassName: [
                       "transition-transform duration-300 text-[var(--muted-fg)]",
                       open ? "rotate-180 text-[var(--color-brand)]" : ""

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neoptocom/neopto-ui",
-  "version": "1.5.2",
+  "version": "1.5.4",
   "private": false,
   "description": "A modern React component library built with Tailwind CSS v4 and TypeScript. Features dark mode, design tokens, and comprehensive Storybook documentation. Requires Tailwind v4+.",
   "keywords": [

package/src/components/Autocomplete.tsx

@@ -167,7 +167,7 @@ export default function Autocomplete({
     >
       <fieldset
         className={[
-          "w-full min-w-0 rounded-full border bg-[var(--surface)] transition-colors h-16",
+          "w-full min-w-0 rounded-full border bg-[var(--surface)] transition-colors h-13",
           "border-[var(--border)] focus-within:border-[var(--color-brand)]",
           disabled ? "opacity-60 cursor-not-allowed" : ""
         ].join(" ")}
@@ -222,6 +222,7 @@ export default function Autocomplete({
               }
               disabled={disabled}
               aria-label={selectedOption && !open ? "Clear" : open ? "Collapse" : "Expand"}
+              className="absolute right-0 top-[-30%]"
               iconClassName={[
                 "transition-transform duration-300 text-[var(--muted-fg)]",
                 open ? "rotate-180 text-[var(--color-brand)]" : ""

package/src/components/Breadcrumb.docs.mdx

@@ -59,3 +59,6 @@ page load. The interactive example demonstrates an in-app documents flow.
 
 
 
+
+
+

package/src/components/Breadcrumb.stories.tsx

@@ -77,3 +77,6 @@ export const InteractiveNavigation: Story = {
 
 
 
+
+
+

package/src/components/Button.docs.mdx

@@ -55,3 +55,6 @@ Use variants to communicate hierarchy:
 
 
 
+
+
+

package/src/components/Button.stories.tsx

@@ -109,3 +109,6 @@ export const FullWidthCallToAction: Story = {
 
 
 
+
+
+

package/src/components/Card.docs.mdx

@@ -55,3 +55,6 @@ attaching click handlers to the card root.
 
 
 
+
+
+

package/src/components/Input.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import Icon from "./Icon";
 
 export type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & {
   /** Input visual variant */
@@ -11,6 +12,8 @@ export type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size
   legendProps?: React.HTMLAttributes<HTMLLegendElement>;
   /** Flag to visually mark the input as errored */
   error?: boolean;
+  /** Optional icon name to display on the inner right of the input */
+  icon?: string;
 };
 
 export const Input = React.forwardRef<HTMLInputElement, InputProps>(
@@ -23,6 +26,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
       fieldsetProps,
       legendProps,
       error = false,
+      icon,
       ...props
     },
     ref
@@ -30,10 +34,14 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
     const isInlineVariant = variant === "inline";
     const shouldUseInlineStyles = isInlineVariant || Boolean(label);
     const isError = error && !disabled;
+    const hasIcon = Boolean(icon);
 
     const inputClasses: string[] = [
       "w-full bg-transparent outline-none transition-colors",
-      shouldUseInlineStyles ? "h-9" : "h-12 px-4 rounded-full",
+      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)]"
     ];
 
@@ -67,7 +75,18 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input ref={ref} disabled={disabled} className={inputClassName} {...props} />
     );
 
+    // Standalone input (no label)
     if (!label) {
+      if (hasIcon) {
+        return (
+          <div className="relative">
+            {inputElement}
+            <div className="absolute right-4 top-1/2 -translate-y-1/2 pointer-events-none">
+              <Icon name={icon!} className="text-[var(--muted-fg)] opacity-50" />
+            </div>
+          </div>
+        );
+      }
       return inputElement;
     }
 
@@ -113,7 +132,14 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
           {label}
         </legend>
         <div className="relative flex pl-5 pr-3 pb-1 h-full">
-          <div className="flex w-full">{inputElement}</div>
+          <div className="flex w-full relative">
+            {inputElement}
+            {hasIcon && (
+              <div className="absolute right-1 top-1/2 -translate-y-1/2 pointer-events-none">
+                <Icon name={icon!} className="text-[var(--muted-fg)] opacity-50" />
+              </div>
+            )}
+          </div>
         </div>
       </fieldset>
     );

package/src/stories/Input.stories.tsx

@@ -73,3 +73,14 @@ export const Error: Story = {
     </div>
   )
 };
+
+export const WithIcon: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4 w-96">
+      <Input variant="inline" icon="search" placeholder="Search..." />
+      <Input icon="email" type="email" placeholder="Email" />
+      <Input label="Username" icon="person" placeholder="johndoe" />
+      <Input label="Password" icon="lock" type="password" placeholder="Required field" error />
+    </div>
+  )
+};