Implement share and export components

app/components/layout/ListItem/ListItem.container.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+/**
+ * Figma: Community Rule System — "Add Custom Field/Popover" (List-item/lockup)
+ * https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=20887-175710
+ */
+import { memo } from "react";
+import { ListItemView } from "./ListItem.view";
+import type { ListItemProps } from "./ListItem.types";
+
+const ListItem = memo<ListItemProps>((props) => {
+  return <ListItemView {...props} />;
+});
+
+ListItem.displayName = "ListItem";
+
+export default ListItem;

app/components/layout/ListItem/ListItem.types.ts

@@ -0,0 +1,10 @@
+import type { IconName } from "../../asset/icon";
+
+export type ListItemProps = {
+  label: string;
+  leadingIcon: IconName;
+  onClick: () => void;
+  /** Bottom divider between rows — false on the final row per Figma. */
+  showDivider: boolean;
+  className?: string;
+};

app/components/layout/ListItem/ListItem.view.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { memo } from "react";
+import Icon from "../../asset/icon";
+import type { ListItemProps } from "./ListItem.types";
+
+export const ListItemView = memo(function ListItemView({
+  label,
+  leadingIcon,
+  onClick,
+  showDivider,
+  className = "",
+}: ListItemProps) {
+  const dividerClass = showDivider
+    ? "border-b border-solid border-[var(--color-border-default-tertiary)]"
+    : "";
+
+  return (
+    <button
+      type="button"
+      role="menuitem"
+      onClick={onClick}
+      className={`relative flex w-full shrink-0 cursor-pointer items-center gap-[6px] px-[4px] py-[16px] text-left hover:bg-[var(--color-surface-default-tertiary)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-border-invert-primary)] ${dividerClass} ${className}`}
+    >
+      <span className="flex size-6 shrink-0 items-center justify-center overflow-visible text-[var(--color-content-default-primary)]">
+        <Icon name={leadingIcon} size={24} />
+      </span>
+      <span className="min-w-0 flex-1 text-left font-inter text-[12px] font-normal leading-4 whitespace-normal text-[var(--color-content-default-primary)]">
+        {label}
+      </span>
+    </button>
+  );
+});
+
+ListItemView.displayName = "ListItemView";

app/components/layout/ListItem/index.tsx

@@ -0,0 +1,2 @@
+export { default } from "./ListItem.container";
+export type { ListItemProps } from "./ListItem.types";