kupos-ui-components-lib 10.4.13 → 10.4.15

package/src/components/FilterSortBar/FilterSortBarMobile.tsx

@@ -1,9 +1,22 @@
 import React, { useEffect, useRef, useState } from "react";
 import FilterChip from "./FilterChip";
-import SingleFilterSheet from "./SingleFilterSheet";
 import FiltersMasterSheet from "./FiltersMasterSheet";
 import { DEFAULT_ICONS } from "./defaultIcons";
-import { FilterCategory, FilterCategoryKey, FilterSortBarMobileProps } from "./types";
+import { FilterCategory, FilterCategoryKey, FilterSortBarMobileProps, SortOption } from "./types";
+
+// Sort chips reuse an existing category or time-of-day icon where the
+// concept already has one (Horario→clock, Empresas→bus, Precio→piggy bank,
+// Después de las 6 PM→moon, Antes de las 6 AM→sunrise, Salón Cama→seat);
+// only keys with no such match (e.g. "duration" for Rápido) fall back to
+// icons.sortIcons.
+const SORT_ICON_SOURCE: Partial<Record<string, { category?: FilterCategoryKey; timeOfDay?: "sunrise" | "morning" | "sunset" | "night" }>> = {
+  time: { category: "time" },
+  company: { category: "company" },
+  price: { category: "price" },
+  after_6pm: { timeOfDay: "night" },
+  before_6am: { timeOfDay: "sunrise" },
+  cama: { category: "seatType" },
+};
 
 const DEFAULT_COLORS = {
   primaryColor: "#FF5C60",
@@ -12,8 +25,6 @@ const DEFAULT_COLORS = {
   chipTextColor: "#464647",
   badgeBackgroundColor: "#FFCBCC",
   badgeTextColor: "#FF5C60",
-  // Falls back to primaryColor/primaryTextColor below when the consumer
-  // doesn't pass a dedicated CTA button color.
   buttonColor: "#FF5C60",
   buttonTextColor: "#FFFFFF",
 };
@@ -25,7 +36,10 @@ const getCategoryActiveCount = (category: FilterCategory) => {
       ? 1
       : 0;
   }
-  return category.options?.filter((o) => o.selected).length || 0;
+  // checkedViaSort options are a display mirror of an active sort chip, not
+  // a real selection — the sort chip's own active count already covers it,
+  // so counting it here too would double it.
+  return category.options?.filter((o) => o.selected && !o.checkedViaSort).length || 0;
 };
 
 const isCategoryActive = (category: FilterCategory) => getCategoryActiveCount(category) > 0;
@@ -40,6 +54,8 @@ const FilterSortBarMobile = ({
   categories,
   onApply,
   onClearFilter,
+  sortOptions,
+  onSortChange,
   currencySign = "$",
   colors,
   icons,
@@ -55,6 +71,14 @@ const FilterSortBarMobile = ({
     categoryIcons: { ...DEFAULT_ICONS.categoryIcons, ...icons?.categoryIcons },
     categoryIconsActive: { ...DEFAULT_ICONS.categoryIconsActive, ...icons?.categoryIconsActive },
     timeOfDayIcons: { ...DEFAULT_ICONS.timeOfDayIcons, ...icons?.timeOfDayIcons },
+    sortIcons: { ...DEFAULT_ICONS.sortIcons, ...icons?.sortIcons },
+  };
+
+  const resolveSortIcon = (key: string): string | undefined => {
+    const source = SORT_ICON_SOURCE[key];
+    if (source?.category) return resolvedIcons.categoryIcons?.[source.category];
+    if (source?.timeOfDay) return resolvedIcons.timeOfDayIcons?.[source.timeOfDay];
+    return resolvedIcons.sortIcons?.[key];
   };
 
   // Re-sync the draft whenever the committed categories change from the
@@ -63,9 +87,14 @@ const FilterSortBarMobile = ({
     setDraftCategories(categories);
   }, [categories]);
 
-  const openCategory = draftCategories.find((c) => c.key === openSheet) || null;
-  const isMasterOpen = openSheet === "all";
-  const totalActiveCategories = categories.filter(isCategoryActive).length;
+  // Every filter chip opens the same master sheet, pre-selecting whichever
+  // category was tapped ("all" — the Filtros button — leaves it unset so
+  // FiltersMasterSheet falls back to its first category).
+  const isMasterOpen = openSheet !== null;
+  const initialCategoryKey = openSheet && openSheet !== "all" ? openSheet : undefined;
+  const totalActiveCategories =
+    categories.filter(isCategoryActive).length +
+    (sortOptions || []).filter((s) => !s.direction && s.active).length;
 
   const handleScroll = () => {
     setIsScrolled((scrollRef.current?.scrollLeft ?? 0) > 4);
@@ -103,15 +132,6 @@ const FilterSortBarMobile = ({
     );
   };
 
-  const handleApplySingle = () => {
-    if (openSheet && openSheet !== "all") onApply(openSheet, draftCategories);
-    closeSheet();
-  };
-
-  const handleClearSingle = () => {
-    if (openSheet && openSheet !== "all") onClearFilter(openSheet);
-  };
-
   const handleApplyAll = () => {
     onApply("all", draftCategories);
     closeSheet();
@@ -137,9 +157,45 @@ const FilterSortBarMobile = ({
     onApply(categoryKey, updated);
   };
 
+  // Directional sorts (Horario, Precio, Rápido) are mutually exclusive —
+  // picking one deactivates the others, and re-tapping the active one flips
+  // its direction. Cohort sorts (no `direction`, e.g. Después de las 6 PM,
+  // Salón Cama) are independent toggles that layer on top of whichever
+  // directional sort is active.
+  const handleSortChipClick = (key: string) => {
+    if (!sortOptions || !onSortChange) return;
+    const target = sortOptions.find((s) => s.key === key);
+    if (!target) return;
+
+    const updated: SortOption[] = sortOptions.map((s) => {
+      if (s.direction) {
+        if (s.key !== key) return s.active ? { ...s, active: false } : s;
+        return s.active ? { ...s, direction: s.direction === "asc" ? "desc" : "asc" } : { ...s, active: true };
+      }
+      return s.key === key ? { ...s, active: !s.active } : s;
+    });
+    onSortChange(updated);
+
+    // A cohort sort chip's matching checkbox (checkedViaSort: true, option
+    // id === sort key) mirrors this chip inside the Filtros sheet. Keep that
+    // mirror in sync when the chip is toggled from the bar — otherwise the
+    // chip turns off but the underlying filter option stays selected.
+    if (!target.direction) {
+      const nextSelected = !target.active;
+      const hasMirror = categories.some((cat) => cat.options?.some((o) => o.checkedViaSort && o.id === key));
+      if (hasMirror) {
+        const updatedCategories = categories.map((cat) => ({
+          ...cat,
+          options: cat.options?.map((o) => (o.checkedViaSort && o.id === key ? { ...o, selected: nextSelected } : o)),
+        }));
+        onApply("all", updatedCategories);
+      }
+    }
+  };
+
   return (
     <div>
-      <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+      <div className="flex items-center gap-[8px]">
         <FilterChip
           label="Filtros"
           active={totalActiveCategories > 0}
@@ -152,73 +208,73 @@ const FilterSortBarMobile = ({
           icons={resolvedIcons}
         />
         <div
-          style={{
-            width: 1,
-            alignSelf: "stretch",
-            backgroundColor: resolvedColors.chipBorderColor,
-            opacity: 0.5,
-            flexShrink: 0,
-          }}
+          className="w-px self-stretch flex-shrink-0 opacity-50"
+          style={{ backgroundColor: resolvedColors.chipBorderColor }}
         />
         <div
           ref={scrollRef}
           onScroll={handleScroll}
-          style={{
-            display: "flex",
-            alignItems: "center",
-            gap: 8,
-            overflowX: "auto",
-            scrollbarWidth: "none",
-            paddingBottom: 2,
-          }}
+          className="flex items-center gap-[8px] overflow-x-auto pb-[2px] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
         >
-          {categories.map((category) => (
+          {sortOptions?.map((sort) => (
             <FilterChip
-              key={category.key}
-              label={category.label}
-              active={isCategoryActive(category)}
-              isOpen={openSheet === category.key}
-              onClick={() => openSheetFor(category.key)}
-              iconSrc={resolvedIcons.categoryIcons?.[category.key]}
-              activeIconSrc={resolvedIcons.categoryIconsActive?.[category.key]}
-              badgeCount={getCategoryActiveCount(category)}
+              key={`sort:${sort.key}`}
+              label={sort.label}
+              active={sort.active}
+              isOpen={false}
+              onClick={() => handleSortChipClick(sort.key)}
+              iconSrc={resolveSortIcon(sort.key)}
+              sortDirection={sort.direction && sort.active ? sort.direction : undefined}
+              hideTrailingIcon={!(sort.direction && sort.active)}
+              badgeCount={sort.active ? sort.count : undefined}
               colors={resolvedColors}
               icons={resolvedIcons}
             />
           ))}
+          {categories
+            // hideChip categories never get a standalone top-bar chip, even
+            // once something is selected inside the Filtros sheet — surfacing
+            // it there duplicated the dedicated sort chip for the same
+            // concept (e.g. "Horarios" filter next to the "Horario" sort chip).
+            .filter((category) => !category.hideChip)
+            .map((category) => (
+              <FilterChip
+                key={category.key}
+                label={category.label}
+                active={isCategoryActive(category)}
+                isOpen={openSheet === category.key}
+                onClick={() => openSheetFor(category.key)}
+                iconSrc={resolvedIcons.categoryIcons?.[category.key]}
+                activeIconSrc={resolvedIcons.categoryIconsActive?.[category.key]}
+                badgeCount={getCategoryActiveCount(category)}
+                colors={resolvedColors}
+                icons={resolvedIcons}
+              />
+            ))}
           {categories
             .filter((category) => category.inlineOptions && category.options?.length)
             .flatMap((category) =>
-              (category.options || []).map((option) => (
-                <FilterChip
-                  key={`${category.key}:${option.id}`}
-                  label={option.label}
-                  active={option.selected}
-                  isOpen={false}
-                  onClick={() => handleInlineOptionToggle(category.key, option.id)}
-                  iconSrc={option.icon ? resolvedIcons.timeOfDayIcons?.[option.icon] : undefined}
-                  colors={resolvedColors}
-                  icons={resolvedIcons}
-                />
-              )),
+              (category.options || [])
+                .filter((option) => !option.excludeFromInline)
+                .map((option) => (
+                  <FilterChip
+                    key={`${category.key}:${option.id}`}
+                    label={option.label}
+                    active={option.selected}
+                    isOpen={false}
+                    onClick={() => handleInlineOptionToggle(category.key, option.id)}
+                    iconSrc={option.icon ? resolvedIcons.timeOfDayIcons?.[option.icon] : undefined}
+                    colors={resolvedColors}
+                    icons={resolvedIcons}
+                  />
+                )),
             )}
         </div>
       </div>
 
-      <SingleFilterSheet
-        category={openCategory}
-        onClose={closeSheet}
-        onToggleOption={(optionId) => openSheet && openSheet !== "all" && handleDraftToggleOption(openSheet, optionId)}
-        onPriceRangeChange={(min, max) => openSheet && openSheet !== "all" && handleDraftPriceRangeChange(openSheet, min, max)}
-        onClear={handleClearSingle}
-        onApply={handleApplySingle}
-        currencySign={currencySign}
-        colors={resolvedColors}
-        icons={resolvedIcons}
-      />
-
       <FiltersMasterSheet
         isOpen={isMasterOpen}
+        initialCategoryKey={initialCategoryKey}
         categories={draftCategories}
         onClose={closeSheet}
         onToggleOption={handleDraftToggleOption}

package/src/components/FilterSortBar/FiltersMasterSheet.tsx

@@ -1,6 +1,6 @@
-import React, { useMemo, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { BottomSheet } from "../../ui/BottomSheet";
-import { CloseIcon, SearchIcon } from "./icons";
+import { CloseIcon } from "./icons";
 import OptionCheckboxList from "./OptionCheckboxList";
 import PriceRangeSlider from "./PriceRangeSlider";
 import SheetFooter from "./SheetFooter";
@@ -8,6 +8,8 @@ import { FilterCategory, FilterCategoryKey, FilterSortBarColors, FilterSortBarIc
 
 interface FiltersMasterSheetProps {
   isOpen: boolean;
+  /** Category to pre-select when the sheet opens — set when a specific filter chip (rather than the Filtros button) was tapped. */
+  initialCategoryKey?: FilterCategoryKey;
   categories: FilterCategory[];
   onClose: () => void;
   onToggleOption: (categoryKey: FilterCategoryKey, optionId: string) => void;
@@ -21,6 +23,7 @@ interface FiltersMasterSheetProps {
 
 const FiltersMasterSheet = ({
   isOpen,
+  initialCategoryKey,
   categories,
   onClose,
   onToggleOption,
@@ -31,124 +34,49 @@ const FiltersMasterSheet = ({
   colors,
   icons,
 }: FiltersMasterSheetProps) => {
-  const [activeKey, setActiveKey] = useState<FilterCategoryKey>(categories[0]?.key ?? "time");
-  const [searchQuery, setSearchQuery] = useState("");
+  const [activeKey, setActiveKey] = useState<FilterCategoryKey>(initialCategoryKey ?? categories[0]?.key ?? "time");
 
-  const activeCategory = categories.find((c) => c.key === activeKey) || categories[0];
+  // Reset the pre-selected tab every time the sheet is (re)opened, whether
+  // via a specific filter chip or the general Filtros button.
+  useEffect(() => {
+    if (isOpen) {
+      setActiveKey(initialCategoryKey ?? categories[0]?.key ?? "time");
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpen]);
 
-  const filteredOptions = useMemo(() => {
-    if (!activeCategory?.options) return [];
-    if (!searchQuery.trim()) return activeCategory.options;
-    const q = searchQuery.trim().toLowerCase();
-    return activeCategory.options.filter((o) => o.label.toLowerCase().includes(q));
-  }, [activeCategory, searchQuery]);
+  const activeCategory = categories.find((c) => c.key === activeKey) || categories[0];
 
   if (!isOpen) return null;
 
   return (
-    <BottomSheet isOpen={isOpen} onClose={onClose} showBackdrop height="75vh" padding="20px 0 0px">
-      <div style={{ display: "flex", flexDirection: "column", height: "calc(75vh - 40px)" }}>
-        <div
-          style={{
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between",
-            padding: "0 20px 14px",
-          }}
-        >
-          <span style={{ fontSize: 16, fontWeight: 700, color: "#464647" }}>Filtros</span>
-          <div
-            onClick={onClose}
-            style={{ cursor: "pointer", padding: 4, WebkitTapHighlightColor: "transparent" }}
-          >
-            <CloseIcon size={14} src={icons?.closeIcon} />
-          </div>
-        </div>
-
-        <div style={{ padding: "0 20px 14px" }}>
-          <div
-            style={{
-              display: "flex",
-              alignItems: "center",
-              gap: 8,
-              border: "1px solid #E5E5E5",
-              borderRadius: 10,
-              padding: "9px 12px",
-            }}
-          >
-            <SearchIcon size={15} src={icons?.searchIcon} />
-            <input
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              placeholder="Buscar filtro"
-              style={{
-                border: "none",
-                outline: "none",
-                fontSize: 13,
-                flex: 1,
-                color: "#464647",
-                background: "transparent",
-              }}
-            />
+    <BottomSheet isOpen={isOpen} onClose={onClose} showBackdrop height="65vh" padding="20px 0 0px">
+      <div className="flex flex-col h-[calc(65vh-40px)]">
+        <div className="flex items-center justify-between px-[20px] pb-[14px]">
+          <span className="text-[16px] font-bold text-[#464647] font-['DMSans-Bold',sans-serif]">Filtros</span>
+          <div onClick={onClose} className="cursor-pointer p-[4px] [-webkit-tap-highlight-color:transparent]">
+            <CloseIcon size={22} src={icons?.closeIcon} />
           </div>
         </div>
 
-        <div style={{ display: "flex", flex: 1, overflow: "hidden", position: "relative", borderTop: "1px solid #E5E5E5", borderBottom: "1px solid #E5E5E5" }}>
-          <div
-            style={{
-              position: "absolute",
-              top: 0,
-              bottom: 0,
-              left: 0,
-              width: 130,
-              backgroundColor: "#F3F4F6",
-              zIndex: 0,
-            }}
-          />
-          <div
-            style={{
-              width: 130,
-              flexShrink: 0,
-              position: "relative",
-              zIndex: 1,
-            }}
-          >
+        <div className="flex flex-1 overflow-hidden relative border-t border-b border-[#E5E5E5]">
+          <div className="absolute top-0 bottom-0 left-0 w-[120px] bg-[#F9FAFB] z-0" />
+          <div className="w-[120px] flex-shrink-0 relative z-[1] bg-[#F9FAFB]">
             {categories.map((cat) => {
               const isActive = cat.key === activeKey;
               return (
                 <div
                   key={cat.key}
                   onClick={() => setActiveKey(cat.key)}
-                  style={{
-                    position: "relative",
-                    display: "flex",
-                    alignItems: "center",
-                    minHeight: 44,
-                    boxSizing: "border-box",
-                    padding: "8px 8px 8px 20px",
-                    fontSize: 13,
-                    lineHeight: 1.25,
-                    fontWeight: isActive ? 700 : 400,
-                    color: isActive ? colors.primaryColor : "#464647",
-                    backgroundColor: isActive ? "#fff" : "transparent",
-                    cursor: "pointer",
-                    WebkitTapHighlightColor: "transparent",
-                    userSelect: "none",
-                    WebkitUserSelect: "none",
-                  }}
+                  className={`relative flex items-center min-h-[44px] box-border py-[8px] pr-[8px] pl-[20px] text-[13px] leading-[1.25] cursor-pointer select-none [-webkit-tap-highlight-color:transparent] ${
+                    isActive ? "font-bold bg-[#FFFFFF]" : "font-normal bg-transparent"
+                  }`}
+                  style={{ color: isActive ? colors.primaryColor : "#464647" }}
                 >
                   {isActive && (
                     <div
-                      style={{
-                        position: "absolute",
-                        left: 0,
-                        top: 8,
-                        bottom: 8,
-                        width: 4,
-                        borderTopRightRadius: 4,
-                        borderBottomRightRadius: 4,
-                        backgroundColor: colors.primaryColor,
-                      }}
+                      className="absolute left-[0px] top-[8px] bottom-[8px] w-[4px] rounded-tr-[4px] rounded-br-[4px]"
+                      style={{ backgroundColor: colors.primaryColor }}
                     />
                   )}
                   {cat.label}
@@ -157,21 +85,9 @@ const FiltersMasterSheet = ({
             })}
           </div>
 
-          <div
-            style={{ flex: 1, overflowY: "auto", paddingLeft: 16, paddingRight: 20, position: "relative", zIndex: 1, backgroundColor: "#fff" }}
-          >
+          <div className="flex-1 overflow-y-auto pl-[16px] pr-[20px] relative z-[1] bg-white">
             {activeCategory && (
-              <div
-                style={{
-                  fontSize: 11,
-                  fontWeight: 700,
-                  color: "#9B9B9B",
-                  textTransform: "uppercase",
-                  letterSpacing: 0.4,
-                  marginBottom: 5,
-                  marginTop: 15,
-                }}
-              >
+              <div className="text-[11px] font-bold text-[#9B9B9B] uppercase tracking-[0.4px] mb-[5px] mt-[15px]">
                 {activeCategory.sectionLabel || activeCategory.label}
               </div>
             )}
@@ -186,7 +102,7 @@ const FiltersMasterSheet = ({
               />
             ) : (
               <OptionCheckboxList
-                options={filteredOptions}
+                options={activeCategory?.options || []}
                 kind={activeCategory?.kind || "checkbox"}
                 onToggle={(optionId) => onToggleOption(activeCategory.key, optionId)}
                 primaryColor={colors.primaryColor}
@@ -197,7 +113,7 @@ const FiltersMasterSheet = ({
           </div>
         </div>
 
-        <div style={{ padding: "0px 20px 0" }}>
+        <div className="px-[20px]">
           <SheetFooter onClear={onClearAll} onApply={onApplyAll} colors={colors} />
         </div>
       </div>

package/src/components/FilterSortBar/OptionCheckboxList.tsx

@@ -23,7 +23,7 @@ const RatingLabel = ({
   starColor: string;
   icons?: FilterSortBarIcons;
 }) => (
-  <div style={{ display: "flex", alignItems: "center", gap: 1, whiteSpace: "nowrap" }}>
+  <div className="flex items-center gap-[1px] whitespace-nowrap">
     {Array.from({ length: 5 }, (_, i) => (
       <StarIcon
         key={i}
@@ -34,14 +34,14 @@ const RatingLabel = ({
         emptySrc={icons?.starEmptyIcon}
       />
     ))}
-    <span style={{ marginLeft: 6 }}>{label}</span>
+    <span className="ml-[6px]">{label}</span>
   </div>
 );
 
 const OptionCheckboxList = ({ options, kind, onToggle, primaryColor, starColor, icons }: OptionCheckboxListProps) => {
   if (!options?.length) {
     return (
-      <div style={{ padding: "24px 0", textAlign: "center", color: "#9B9B9B", fontSize: 13 }}>
+      <div className="py-[24px] text-center text-[#9B9B9B] text-[13px]">
         No hay opciones disponibles
       </div>
     );
@@ -53,23 +53,12 @@ const OptionCheckboxList = ({ options, kind, onToggle, primaryColor, starColor,
         <div
           key={option.id}
           onClick={() => onToggle(option.id)}
-          style={{
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between",
-            padding: "12px 2px",
-            cursor: "pointer",
-            fontSize: 13,
-            color: "#464647",
-            WebkitTapHighlightColor: "transparent",
-            userSelect: "none",
-            WebkitUserSelect: "none",
-          }}
+          className="flex items-center justify-between py-[12px] px-[2px] cursor-pointer text-[13px] text-[#464647] select-none [-webkit-tap-highlight-color:transparent]"
         >
           {kind === "rating" ? (
             <RatingLabel stars={option.stars} label={option.label} starColor={starColor} icons={icons} />
           ) : option.icon ? (
-            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
+            <div className="flex items-center gap-[10px]">
               <TimeOfDayIcon variant={option.icon} size={16} src={icons?.timeOfDayIcons?.[option.icon]} />
               <span>{option.label}</span>
             </div>

package/src/components/FilterSortBar/PriceRangeSlider.tsx

@@ -72,66 +72,37 @@ const PriceRangeSlider = ({
   };
 
   return (
-    <div style={{ padding: "8px 4px 4px" }}>
-      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 28 }}>
-        <div
-          style={{
-            flex: 1,
-            border: "1px solid #E5E5E5",
-            borderRadius: 8,
-            padding: "6px 10px 8px",
-          }}
-        >
-          <div style={{ fontSize: 11, color: "#9B9B9B", marginBottom: 2 }}>{minLabel}</div>
-          <div style={{ fontSize: 13, fontWeight: 700, color: "#464647" }}>
+    <div className="p-[8px_4px_4px]">
+      <div className="flex items-center gap-[8px] mb-[28px]">
+        <div className="flex-1 border border-[#E5E5E5] rounded-[8px] p-[6px_10px_8px]">
+          <div className="text-[11px] text-[#464647] mb-[2px]">{minLabel}</div>
+          <div className="text-[13px] font-bold text-[#464647]">
             {formatCurrency(currentMin, currencySign)}
           </div>
         </div>
-        <span style={{ color: "#9B9B9B", fontSize: 13 }}>-</span>
-        <div
-          style={{
-            flex: 1,
-            border: "1px solid #E5E5E5",
-            borderRadius: 8,
-            padding: "6px 10px 8px",
-          }}
-        >
-          <div style={{ fontSize: 11, color: "#9B9B9B", marginBottom: 2 }}>{maxLabel}</div>
-          <div style={{ fontSize: 13, fontWeight: 700, color: "#464647" }}>
+        <span className="text-[#9B9B9B] text-[13px]">-</span>
+        <div className="flex-1 border border-[#E5E5E5] rounded-[8px] p-[6px_10px_8px]">
+          <div className="text-[11px] text-[#464647] mb-[2px]">{maxLabel}</div>
+          <div className="text-[13px] font-bold text-[#464647]">
             {formatCurrency(currentMax, currencySign)}
           </div>
         </div>
       </div>
 
-      <div style={{ padding: `0 ${THUMB_RADIUS}px`, overflow: "visible" }}>
+      <div className="overflow-visible" style={{ padding: `0 ${THUMB_RADIUS}px` }}>
         <div
           ref={trackRef}
-          style={{
-            position: "relative",
-            height: THUMB_SIZE,
-            display: "flex",
-            alignItems: "center",
-            touchAction: "none",
-            overflow: "visible",
-          }}
+          className="relative flex items-center overflow-visible [touch-action:none]"
+          style={{ height: THUMB_SIZE }}
         >
+          <div className="absolute left-0 right-0 h-[3px] rounded-[2px] bg-[#E5E5E5]" />
+          {/* Stops right at each thumb's border instead of reaching its center
+              (which would run the line underneath half of the circle). */}
           <div
+            className="absolute h-[3px] rounded-[2px]"
             style={{
-              position: "absolute",
-              left: 0,
-              right: 0,
-              height: 3,
-              borderRadius: 2,
-              backgroundColor: "#E5E5E5",
-            }}
-          />
-          <div
-            style={{
-              position: "absolute",
-              left: `${minPct}%`,
-              right: `${100 - maxPct}%`,
-              height: 3,
-              borderRadius: 2,
+              left: `calc(${minPct}% + ${THUMB_RADIUS}px)`,
+              right: `calc(${100 - maxPct}% + ${THUMB_RADIUS}px)`,
               backgroundColor: primaryColor,
             }}
           />
@@ -148,32 +119,20 @@ const PriceRangeSlider = ({
               aria-valuemin={min}
               aria-valuemax={max}
               aria-valuenow={thumb === "min" ? currentMin : currentMax}
+              className="absolute rounded-full bg-white cursor-grab shadow-[0_1px_4px_rgba(0,0,0,0.25)]"
               style={{
-                position: "absolute",
                 left: `${pct}%`,
                 transform: "translateX(-50%)",
                 width: THUMB_SIZE,
                 height: THUMB_SIZE,
-                borderRadius: "50%",
-                backgroundColor: "#fff",
                 border: `2px solid ${primaryColor}`,
-                boxShadow: "0 1px 4px rgba(0,0,0,0.25)",
-                cursor: "grab",
                 zIndex: thumb === "min" ? 2 : 3,
               }}
             />
           ))}
         </div>
       </div>
-      <div
-        style={{
-          display: "flex",
-          justifyContent: "space-between",
-          fontSize: 11,
-          color: "#9B9B9B",
-          marginTop: 8,
-        }}
-      >
+      <div className="flex justify-between text-[11px] text-[#464647] mt-[8px]">
         <span>{formatCurrency(min, currencySign)}</span>
         <span>{formatCurrency(max, currencySign)}</span>
       </div>