@cntyclub/ui-react 0.8.1 → 0.8.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntyclub/ui-react",
-  "version": "0.8.1",
+  "version": "0.8.2",
   "description": "React component library for the Country Club UI Kit — Base UI primitives styled with the Country Club design system (Tailwind CSS v4)",
   "type": "module",
   "sideEffects": [

package/src/components/ui/segmented-control.tsx

@@ -22,6 +22,17 @@ interface SegmentedControlProps<T extends string> {
   className?: string;
 }
 
+/**
+ * Per-size segment padding. The base toggle sizes are icon-button tight
+ * (~5px), which crowds text labels like "Past 3 months"; a segmented control
+ * reads as text tabs, so it wants room to breathe on both axes.
+ */
+const SEGMENT_SIZE: Record<NonNullable<SegmentedControlProps<string>["size"]>, string> = {
+  sm: "h-8 px-3.5 sm:h-7",
+  default: "h-9 px-4 sm:h-8",
+  lg: "h-10 px-5 sm:h-9",
+};
+
 /**
  * A single-select segmented control — a compact row of mutually-exclusive
  * options (e.g. a time-range switch: Past month / Past 3 months / Overall).
@@ -53,7 +64,11 @@ function SegmentedControl<T extends string>({
       variant={variant}
     >
       {options.map((option) => (
-        <ToggleGroupItem key={option.value} value={option.value}>
+        <ToggleGroupItem
+          key={option.value}
+          value={option.value}
+          className={SEGMENT_SIZE[size]}
+        >
           {option.label}
         </ToggleGroupItem>
       ))}