From f20061483f08ccd5f2bac79b05a7539bef675049 Mon Sep 17 00:00:00 2001
From: Wendy Yuchen Sun <wendyyuchensun@gmail.com>
Date: Fri, 6 Mar 2026 22:28:26 +0800
Subject: [PATCH 1/2] feat: add segmented-control button

---
 .../core/button/segmented-control.js          | 55 +++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 src/components/core/button/segmented-control.js

diff --git a/src/components/core/button/segmented-control.js b/src/components/core/button/segmented-control.js
new file mode 100644
index 0000000..426a9cf
--- /dev/null
+++ b/src/components/core/button/segmented-control.js
@@ -0,0 +1,55 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cn from 'classnames';
+
+const SegmentedControl = ({ items, value, onChange, 'aria-label': ariaLabel, buttonClassName }) => {
+  return (
+    <ul
+      aria-label={ariaLabel}
+      className="flex items-stretch rounded-lg border border-border-main overflow-hidden"
+    >
+      {items.map((item) => {
+        const isSelected = item.id === value;
+        return (
+          <li key={item.id} className="flex bg-white p-1">
+            <button
+              type="button"
+              aria-label={item.ariaLabel ?? item.label}
+              aria-current={isSelected ? 'true' : 'false'}
+              onClick={() => {
+                if (!isSelected) onChange(item.id);
+              }}
+              className={cn(
+                'flex items-center justify-center rounded-lg font-medium text-sm leading-[1.4] px-3 py-2',
+                'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[2px] focus-visible:outline-primary',
+                isSelected
+                  ? 'bg-blue-200 text-primary'
+                  : 'bg-white text-text-primary hover:bg-gray-50',
+                 buttonClassName 
+              )}
+            >
+              {item.label}
+            </button>
+          </li>
+        );
+      })}
+    </ul>
+  );
+};
+
+SegmentedControl.propTypes = {
+  items: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string.isRequired,
+      label: PropTypes.string.isRequired,
+      ariaLabel: PropTypes.string,
+      icon: PropTypes.node,
+    })
+  ).isRequired,
+  value: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  'aria-label': PropTypes.string,
+  buttonClassName: PropTypes.string,
+};
+
+export default SegmentedControl;

From 7e4a16d3ea264b2aaedf763549224960a93f11fb Mon Sep 17 00:00:00 2001
From: Wendy Yuchen Sun <wendyyuchensun@gmail.com>
Date: Fri, 6 Mar 2026 23:27:58 +0800
Subject: [PATCH 2/2] fix: prettier

---
 src/components/core/button/segmented-control.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/core/button/segmented-control.js b/src/components/core/button/segmented-control.js
index 426a9cf..ef8cd78 100644
--- a/src/components/core/button/segmented-control.js
+++ b/src/components/core/button/segmented-control.js
@@ -25,7 +25,7 @@ const SegmentedControl = ({ items, value, onChange, 'aria-label': ariaLabel, but
                 isSelected
                   ? 'bg-blue-200 text-primary'
                   : 'bg-white text-text-primary hover:bg-gray-50',
-                 buttonClassName 
+                buttonClassName
               )}
             >
               {item.label}