@neoptocom/neopto-ui 1.5.0 → 1.5.2

package/dist/index.cjs

@@ -728,20 +728,40 @@ function Autocomplete({
   const listRef = React3.useRef(null);
   const normalizedOptions = React3.useMemo(() => {
     if (Array.isArray(options) && typeof options[0] === "string") {
-      return options.map((str) => ({ label: str, value: str }));
+      return options.map((str) => ({
+        name: str,
+        label: str,
+        value: str
+      }));
     }
-    return options;
+    return options.map((option) => {
+      const fallback = option.name ?? option.label ?? "";
+      return {
+        ...option,
+        name: option.name ?? fallback,
+        label: option.label ?? fallback
+      };
+    });
   }, [options]);
   const filtered = React3.useMemo(() => {
     const q = searchQuery.trim().toLowerCase();
     if (!q) return normalizedOptions;
-    return normalizedOptions.filter((o) => o.label.toLowerCase().includes(q));
+    return normalizedOptions.filter((o) => {
+      const name = o.name?.toLowerCase() ?? "";
+      const label = o.label?.toLowerCase() ?? "";
+      return name.includes(q) || label.includes(q);
+    });
   }, [normalizedOptions, searchQuery]);
   const anyOptionHasImage = React3.useMemo(
     () => normalizedOptions.some((o) => !!o.image),
     [normalizedOptions]
   );
-  const displayValue = selectedOption != null ? typeof selectedOption === "string" ? selectedOption : selectedOption.label : searchQuery;
+  const optionDisplay = (option) => {
+    if (!option) return "";
+    if (typeof option === "string") return option;
+    return option.name ?? option.label ?? "";
+  };
+  const displayValue = selectedOption != null ? optionDisplay(selectedOption) : searchQuery;
   function openList() {
     if (disabled) return;
     setOpen(true);
@@ -885,7 +905,8 @@ function Autocomplete({
             style: { maxHeight },
             children: filtered.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("ul", { id: listboxId, role: "listbox", ref: listRef, children: filtered.map((option, index) => {
               const active = index === activeIndex;
-              const selected = selectedOption != null && (typeof selectedOption === "string" ? selectedOption === option.label : selectedOption.label === option.label);
+              const optionName = option.name ?? option.label ?? "";
+              const selected = selectedOption != null && (typeof selectedOption === "string" ? selectedOption === optionName || selectedOption === (option.label ?? "") : (selectedOption.name ?? selectedOption.label ?? "") === optionName);
               return /* @__PURE__ */ jsxRuntime.jsxs(
                 "li",
                 {
@@ -901,13 +922,19 @@ function Autocomplete({
                   onClick: () => handleSelect(option),
                   children: [
                     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-                      anyOptionHasImage && /* @__PURE__ */ jsxRuntime.jsx(Avatar, { name: option.label, src: option.image || void 0 }),
-                      /* @__PURE__ */ jsxRuntime.jsx(Typo, { variant: "label-lg", className: "font-normal text-[var(--fg)]", children: option.label })
+                      anyOptionHasImage && /* @__PURE__ */ jsxRuntime.jsx(
+                        Avatar,
+                        {
+                          name: optionName,
+                          src: option.image || void 0
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(Typo, { variant: "label-lg", className: "font-normal text-[var(--fg)]", children: optionName })
                     ] }),
                     Array.isArray(option.group) && option.group.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(AvatarGroup, { children: option.group.map((member, i) => /* @__PURE__ */ jsxRuntime.jsx(Avatar, { name: member.name, src: member.image || void 0 }, i)) })
                   ]
                 },
-                `${option.label}-${index}`
+                `${optionName || index}-${index}`
               );
             }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-3", children: /* @__PURE__ */ jsxRuntime.jsx(Typo, { variant: "body-sm", className: "text-[var(--muted-fg)]", children: "No results found" }) })
           }
@@ -1147,6 +1174,7 @@ function Chip({
   backgroundColor,
   textColor,
   style,
+  onDelete,
   ...props
 }) {
   const base = "inline-flex w-fit items-center justify-center gap-1 whitespace-nowrap overflow-hidden rounded-full h-6 px-2 text-xs font-semibold";
@@ -1172,7 +1200,17 @@ function Chip({
       ...props,
       children: [
         icon ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: icon, size: "sm", className: "mr-0.5" }) : null,
-        /* @__PURE__ */ jsxRuntime.jsx("span", { children: label })
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: label }),
+        onDelete ? /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onDelete,
+            className: "ml-1 flex h-4 w-4 items-center justify-center rounded-full transition-colors hover:bg-black/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-black/30",
+            "aria-label": "Remove",
+            children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "close", size: "sm" })
+          }
+        ) : null
       ]
     }
   );

package/dist/index.d.cts

@@ -161,7 +161,9 @@ type SkeletonProps = React.HTMLAttributes<HTMLDivElement> & {
 declare function Skeleton({ className, rounded, ...props }: SkeletonProps): react_jsx_runtime.JSX.Element;
 
 type AutocompleteOption = {
-    label: string;
+    name?: string;
+    /** @deprecated Prefer using `name`. */
+    label?: string;
     value: any;
     image?: string;
     group?: Array<{
@@ -290,8 +292,10 @@ type ChipProps = React.HTMLAttributes<HTMLDivElement> & {
     backgroundColor?: string;
     /** Custom text color (overrides variant) */
     textColor?: string;
+    /** Optional handler to render a delete affordance */
+    onDelete?: React.MouseEventHandler<HTMLButtonElement>;
 };
-declare function Chip({ variant, icon, className, label, backgroundColor, textColor, style, ...props }: ChipProps): react_jsx_runtime.JSX.Element;
+declare function Chip({ variant, icon, className, label, backgroundColor, textColor, style, onDelete, ...props }: ChipProps): react_jsx_runtime.JSX.Element;
 
 type CounterProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> & {
     value?: number;

package/dist/index.d.ts

@@ -161,7 +161,9 @@ type SkeletonProps = React.HTMLAttributes<HTMLDivElement> & {
 declare function Skeleton({ className, rounded, ...props }: SkeletonProps): react_jsx_runtime.JSX.Element;
 
 type AutocompleteOption = {
-    label: string;
+    name?: string;
+    /** @deprecated Prefer using `name`. */
+    label?: string;
     value: any;
     image?: string;
     group?: Array<{
@@ -290,8 +292,10 @@ type ChipProps = React.HTMLAttributes<HTMLDivElement> & {
     backgroundColor?: string;
     /** Custom text color (overrides variant) */
     textColor?: string;
+    /** Optional handler to render a delete affordance */
+    onDelete?: React.MouseEventHandler<HTMLButtonElement>;
 };
-declare function Chip({ variant, icon, className, label, backgroundColor, textColor, style, ...props }: ChipProps): react_jsx_runtime.JSX.Element;
+declare function Chip({ variant, icon, className, label, backgroundColor, textColor, style, onDelete, ...props }: ChipProps): react_jsx_runtime.JSX.Element;
 
 type CounterProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> & {
     value?: number;

package/dist/index.js

@@ -707,20 +707,40 @@ function Autocomplete({
   const listRef = useRef(null);
   const normalizedOptions = useMemo(() => {
     if (Array.isArray(options) && typeof options[0] === "string") {
-      return options.map((str) => ({ label: str, value: str }));
+      return options.map((str) => ({
+        name: str,
+        label: str,
+        value: str
+      }));
     }
-    return options;
+    return options.map((option) => {
+      const fallback = option.name ?? option.label ?? "";
+      return {
+        ...option,
+        name: option.name ?? fallback,
+        label: option.label ?? fallback
+      };
+    });
   }, [options]);
   const filtered = useMemo(() => {
     const q = searchQuery.trim().toLowerCase();
     if (!q) return normalizedOptions;
-    return normalizedOptions.filter((o) => o.label.toLowerCase().includes(q));
+    return normalizedOptions.filter((o) => {
+      const name = o.name?.toLowerCase() ?? "";
+      const label = o.label?.toLowerCase() ?? "";
+      return name.includes(q) || label.includes(q);
+    });
   }, [normalizedOptions, searchQuery]);
   const anyOptionHasImage = useMemo(
     () => normalizedOptions.some((o) => !!o.image),
     [normalizedOptions]
   );
-  const displayValue = selectedOption != null ? typeof selectedOption === "string" ? selectedOption : selectedOption.label : searchQuery;
+  const optionDisplay = (option) => {
+    if (!option) return "";
+    if (typeof option === "string") return option;
+    return option.name ?? option.label ?? "";
+  };
+  const displayValue = selectedOption != null ? optionDisplay(selectedOption) : searchQuery;
   function openList() {
     if (disabled) return;
     setOpen(true);
@@ -864,7 +884,8 @@ function Autocomplete({
             style: { maxHeight },
             children: filtered.length > 0 ? /* @__PURE__ */ jsx("ul", { id: listboxId, role: "listbox", ref: listRef, children: filtered.map((option, index) => {
               const active = index === activeIndex;
-              const selected = selectedOption != null && (typeof selectedOption === "string" ? selectedOption === option.label : selectedOption.label === option.label);
+              const optionName = option.name ?? option.label ?? "";
+              const selected = selectedOption != null && (typeof selectedOption === "string" ? selectedOption === optionName || selectedOption === (option.label ?? "") : (selectedOption.name ?? selectedOption.label ?? "") === optionName);
               return /* @__PURE__ */ jsxs(
                 "li",
                 {
@@ -880,13 +901,19 @@ function Autocomplete({
                   onClick: () => handleSelect(option),
                   children: [
                     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                      anyOptionHasImage && /* @__PURE__ */ jsx(Avatar, { name: option.label, src: option.image || void 0 }),
-                      /* @__PURE__ */ jsx(Typo, { variant: "label-lg", className: "font-normal text-[var(--fg)]", children: option.label })
+                      anyOptionHasImage && /* @__PURE__ */ jsx(
+                        Avatar,
+                        {
+                          name: optionName,
+                          src: option.image || void 0
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(Typo, { variant: "label-lg", className: "font-normal text-[var(--fg)]", children: optionName })
                     ] }),
                     Array.isArray(option.group) && option.group.length > 0 && /* @__PURE__ */ jsx(AvatarGroup, { children: option.group.map((member, i) => /* @__PURE__ */ jsx(Avatar, { name: member.name, src: member.image || void 0 }, i)) })
                   ]
                 },
-                `${option.label}-${index}`
+                `${optionName || index}-${index}`
               );
             }) }) : /* @__PURE__ */ jsx("div", { className: "px-4 py-3", children: /* @__PURE__ */ jsx(Typo, { variant: "body-sm", className: "text-[var(--muted-fg)]", children: "No results found" }) })
           }
@@ -1126,6 +1153,7 @@ function Chip({
   backgroundColor,
   textColor,
   style,
+  onDelete,
   ...props
 }) {
   const base = "inline-flex w-fit items-center justify-center gap-1 whitespace-nowrap overflow-hidden rounded-full h-6 px-2 text-xs font-semibold";
@@ -1151,7 +1179,17 @@ function Chip({
       ...props,
       children: [
         icon ? /* @__PURE__ */ jsx(Icon, { name: icon, size: "sm", className: "mr-0.5" }) : null,
-        /* @__PURE__ */ jsx("span", { children: label })
+        /* @__PURE__ */ jsx("span", { children: label }),
+        onDelete ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onDelete,
+            className: "ml-1 flex h-4 w-4 items-center justify-center rounded-full transition-colors hover:bg-black/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-black/30",
+            "aria-label": "Remove",
+            children: /* @__PURE__ */ jsx(Icon, { name: "close", size: "sm" })
+          }
+        ) : null
       ]
     }
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neoptocom/neopto-ui",
-  "version": "1.5.0",
+  "version": "1.5.2",
   "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

@@ -6,7 +6,9 @@ import Avatar from "./Avatar";
 import AvatarGroup from "./AvatarGroup";
 
 export type AutocompleteOption = {
-  label: string;
+  name?: string;
+  /** @deprecated Prefer using `name`. */
+  label?: string;
   value: any;
   image?: string;
   group?: Array<{ name: string; image?: string }>;
@@ -55,16 +57,31 @@ export default function Autocomplete({
   // Normalize options
   const normalizedOptions: AutocompleteOption[] = useMemo(() => {
     if (Array.isArray(options) && typeof options[0] === "string") {
-      return (options as string[]).map((str) => ({ label: str, value: str }));
+      return (options as string[]).map((str) => ({
+        name: str,
+        label: str,
+        value: str
+      }));
     }
-    return options as AutocompleteOption[];
+    return (options as AutocompleteOption[]).map((option) => {
+      const fallback = option.name ?? option.label ?? "";
+      return {
+        ...option,
+        name: option.name ?? fallback,
+        label: option.label ?? fallback
+      };
+    });
   }, [options]);
 
   // Filter options
   const filtered = useMemo(() => {
     const q = searchQuery.trim().toLowerCase();
     if (!q) return normalizedOptions;
-    return normalizedOptions.filter((o) => o.label.toLowerCase().includes(q));
+    return normalizedOptions.filter((o) => {
+      const name = o.name?.toLowerCase() ?? "";
+      const label = o.label?.toLowerCase() ?? "";
+      return name.includes(q) || label.includes(q);
+    });
   }, [normalizedOptions, searchQuery]);
 
   const anyOptionHasImage = useMemo(
@@ -72,12 +89,14 @@ export default function Autocomplete({
     [normalizedOptions]
   );
 
+  const optionDisplay = (option?: AutocompleteOption | string | null) => {
+    if (!option) return "";
+    if (typeof option === "string") return option;
+    return option.name ?? option.label ?? "";
+  };
+
   const displayValue =
-    selectedOption != null
-      ? typeof selectedOption === "string"
-        ? selectedOption
-        : selectedOption.label
-      : searchQuery;
+    selectedOption != null ? optionDisplay(selectedOption) : searchQuery;
 
   function openList() {
     if (disabled) return;
@@ -225,14 +244,17 @@ export default function Autocomplete({
             <ul id={listboxId} role="listbox" ref={listRef}>
               {filtered.map((option, index) => {
                 const active = index === activeIndex;
+                const optionName = option.name ?? option.label ?? "";
                 const selected =
                   selectedOption != null &&
                   (typeof selectedOption === "string"
-                    ? selectedOption === option.label
-                    : selectedOption.label === option.label);
+                    ? selectedOption === optionName ||
+                      selectedOption === (option.label ?? "")
+                    : (selectedOption.name ?? selectedOption.label ?? "") ===
+                      optionName);
                 return (
                   <li
-                    key={`${option.label}-${index}`}
+                    key={`${optionName || index}-${index}`}
                     role="option"
                     aria-selected={selected}
                     className={[
@@ -248,10 +270,13 @@ export default function Autocomplete({
                   >
                     <div className="flex items-center gap-2">
                       {anyOptionHasImage && (
-                        <Avatar name={option.label} src={option.image || undefined} />
+                        <Avatar
+                          name={optionName}
+                          src={option.image || undefined}
+                        />
                       )}
                       <Typo variant="label-lg" className="font-normal text-[var(--fg)]">
-                        {option.label}
+                        {optionName}
                       </Typo>
                     </div>
                     {Array.isArray(option.group) && option.group.length > 0 && (

package/src/components/Breadcrumb.docs.mdx

@@ -58,3 +58,4 @@ page load. The interactive example demonstrates an in-app documents flow.
 - Clickable items expose keyboard handlers, so always keep labels descriptive.
 
 
+

package/src/components/Breadcrumb.stories.tsx

@@ -76,3 +76,4 @@ export const InteractiveNavigation: Story = {
 };
 
 
+

package/src/components/Button.docs.mdx

@@ -54,3 +54,4 @@ Use variants to communicate hierarchy:
 - Disable buttons sparingly—pair with helper text when an action is unavailable.
 
 
+

package/src/components/Button.stories.tsx

@@ -108,3 +108,4 @@ export const FullWidthCallToAction: Story = {
 };
 
 
+

package/src/components/Card.docs.mdx

@@ -54,3 +54,4 @@ when overlaying text on app backgrounds. For interactive cards, wrap focusable e
 attaching click handlers to the card root.
 
 
+

package/src/components/Chip.tsx

@@ -9,6 +9,8 @@ export type ChipProps = React.HTMLAttributes<HTMLDivElement> & {
   backgroundColor?: string;
   /** Custom text color (overrides variant) */
   textColor?: string;
+  /** Optional handler to render a delete affordance */
+  onDelete?: React.MouseEventHandler<HTMLButtonElement>;
 };
 
 export default function Chip({
@@ -19,6 +21,7 @@ export default function Chip({
   backgroundColor,
   textColor,
   style,
+  onDelete,
   ...props
 }: ChipProps) {
   const base =
@@ -42,17 +45,27 @@ export default function Chip({
   const mergedStyle: React.CSSProperties = {
     ...style,
     ...(backgroundColor && { backgroundColor }),
-    ...(textColor && { color: textColor }),
+    ...(textColor && { color: textColor })
   };
 
   return (
-    <div 
-      className={[base, colorClasses, className].join(" ")} 
+    <div
+      className={[base, colorClasses, className].join(" ")}
       style={mergedStyle}
       {...props}
     >
       {icon ? <Icon name={icon} size="sm" className="mr-0.5" /> : null}
       <span>{label}</span>
+      {onDelete ? (
+        <button
+          type="button"
+          onClick={onDelete}
+          className="ml-1 flex h-4 w-4 items-center justify-center rounded-full transition-colors hover:bg-black/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-black/30"
+          aria-label="Remove"
+        >
+          <Icon name="close" size="sm" />
+        </button>
+      ) : null}
     </div>
   );
 }

package/src/stories/Autocomplete.stories.tsx

@@ -3,11 +3,23 @@ import type { Meta, StoryObj } from "@storybook/react";
 import Autocomplete, { type AutocompleteOption } from "../components/Autocomplete";
 
 const OPTIONS: AutocompleteOption[] = [
-  { label: "Ada Lovelace", value: "ada", image: "https://images.unsplash.com/photo-1544005313-94ddf0286df2?q=80&w=128&auto=format&fit=facearea&facepad=2" },
-  { label: "Alan Turing", value: "turing" },
-  { label: "Grace Hopper", value: "hopper", image: "https://images.unsplash.com/photo-1545184180-25d471fe75d8?q=80&w=128&auto=format&fit=facearea&facepad=2" },
-  { label: "Edsger Dijkstra", value: "dijkstra" },
-  { label: "Barbara Liskov", value: "liskov" }
+  {
+    name: "Ada Lovelace",
+    label: "Ada Lovelace",
+    value: "ada",
+    image:
+      "https://images.unsplash.com/photo-1544005313-94ddf0286df2?q=80&w=128&auto=format&fit=facearea&facepad=2"
+  },
+  { name: "Alan Turing", value: "turing" },
+  {
+    name: "Grace Hopper",
+    label: "Grace Hopper",
+    value: "hopper",
+    image:
+      "https://images.unsplash.com/photo-1545184180-25d471fe75d8?q=80&w=128&auto=format&fit=facearea&facepad=2"
+  },
+  { name: "Edsger Dijkstra", value: "dijkstra" },
+  { name: "Barbara Liskov", value: "liskov" }
 ];
 
 const meta: Meta<typeof Autocomplete> = {
@@ -33,7 +45,10 @@ export const Playground: Story = {
       <div className="max-w-md">
         <Autocomplete {...args} selectedOption={value} onSelect={setValue} />
         <div className="mt-3 text-xs text-[--muted-fg]">
-          Selected: {typeof value === "string" ? value : value?.label ?? "none"}
+          Selected:{" "}
+          {typeof value === "string"
+            ? value
+            : value?.name ?? value?.label ?? "none"}
         </div>
       </div>
     );

package/src/stories/Chip.stories.tsx

@@ -33,4 +33,19 @@ export const Variants: Story = {
   )
 };
 
+export const Deletable: Story = {
+  args: {
+    label: "Filter: Active",
+    variant: "light",
+    onDelete: () => console.log("delete")
+  },
+  render: (args) => (
+    <div className="flex flex-wrap items-center gap-3">
+      <Chip {...args} onDelete={args.onDelete} />
+      <Chip label="Team: Core" onDelete={args.onDelete} variant="dark" />
+      <Chip label="Status: Pending" onDelete={args.onDelete} variant="warning" />
+    </div>
+  )
+};
+