@neoptocom/neopto-ui 1.5.0 → 1.5.1

package/dist/index.cjs

@@ -1147,6 +1147,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 +1173,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

@@ -290,8 +290,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

@@ -290,8 +290,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

@@ -1126,6 +1126,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 +1152,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.1",
   "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/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/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>
+  )
+};
+