chore: built in versions

src/components/list-input/index.tsx

@@ -6,7 +6,7 @@ import ListItem from './list-item';
 
 interface ListInputProps {
   dataList: string[];
-  label: React.ReactNode;
+  label?: React.ReactNode;
   description?: React.ReactNode;
   btnText?: string;
   options?: Global.HintOptions[];

src/components/templates/card.tsx

@@ -12,6 +12,7 @@ interface CardProps {
   footer?: React.ReactNode;
   icon?: React.ReactNode;
   active?: boolean;
+  hoverable?: boolean;
   disabled?: boolean;
   onClick?: () => void;
 }
@@ -33,6 +34,11 @@ const CardWrapper = styled.div.attrs({
     transition: background-color 0.2s ease;
   }
 
+  &.hoverable:hover:not(.disabled) {
+    background-color: var(--ant-color-fill-tertiary);
+    transition: background-color 0.2s ease;
+  }
+
   &.ghost {
     background-color: transparent;
   }
@@ -102,19 +108,26 @@ const Card: React.FC<CardProps> = (props) => {
     icon,
     active,
     disabled,
+    hoverable,
     onClick
   } = props;
 
+  const handleClick = () => {
+    if (disabled || !clickable) return;
+    onClick?.();
+  };
+
   return (
     <CardWrapper
       className={classNames(className, {
         clickable: clickable,
+        hoverable: hoverable,
         active: active,
         disabled: disabled,
         ghost: ghost
       })}
       style={{ height: height || '180px' }}
-      onClick={onClick}
+      onClick={handleClick}
     >
       {icon && <Icon>{icon}</Icon>}
       <Inner>