@monolith-forensics/monolith-ui 1.0.10 → 1.1.0

package/{src/components/Pill → Pill}/Pill.tsx

@@ -1,14 +1,13 @@
-import React from "react";
 import styled from "styled-components";
 import { X } from "lucide-react";
+import { ButtonHTMLAttributes, ReactNode } from "react";
+import { Size } from "../core";
 
-interface PillProps {
-  size?: "xs" | "sm" | "md" | "lg" | "xl";
-  showRemoveIcon?: boolean;
-  onRemove?: () => void;
+interface StyledButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  children?: ReactNode;
 }
 
-const StyledButton = styled.button`
+const StyledButton = styled.button<StyledButtonProps>`
   background-color: transparent;
   border: none;
   cursor: pointer;
@@ -22,9 +21,23 @@ const StyledButton = styled.button`
   padding-inline-end: 5px;
 `;
 
-const Pill: React.FC<PillProps> = styled(
-  ({ className, children, size, showRemoveIcon = true, onRemove }) => {
-    const handleRemove = (e) => {
+interface PillProps {
+  className?: string;
+  children?: ReactNode;
+  size?: Size;
+  showRemoveIcon?: boolean;
+  onRemove?: () => void;
+}
+
+const Pill = styled(
+  ({
+    className,
+    children,
+    size = "md",
+    showRemoveIcon = true,
+    onRemove,
+  }: PillProps) => {
+    const handleRemove = (e: React.MouseEvent<HTMLButtonElement>) => {
       e.preventDefault();
       e.stopPropagation();
       onRemove?.();
@@ -54,7 +67,25 @@ const Pill: React.FC<PillProps> = styled(
   font-weight: 500;
   color: ${({ theme }) => theme.palette.text.primary};
 
-  padding-inline-end: 0px;
+  padding-inline-end: ${({ size, showRemoveIcon }) => {
+    if (showRemoveIcon) {
+      return "0px";
+    }
+    switch (size) {
+      case "xs":
+        return "8px";
+      case "sm":
+        return "10px";
+      case "md":
+        return "12px";
+      case "lg":
+        return "14px";
+      case "xl":
+        return "16px";
+      default:
+        return "10px";
+    }
+  }};
 
   padding-inline-start: ${({ size }) => {
     switch (size) {
@@ -96,7 +127,6 @@ const Pill: React.FC<PillProps> = styled(
   background-color: ${({ theme }) => theme.palette.background.secondary};
 
   .pill-content {
-    // max-width: 90%;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;