@eggspot/ui 0.0.0

package/src/components/Filter/FilterField/FilterSelect.tsx

@@ -0,0 +1,208 @@
+"use client"
+
+import { useCallback, useContext, useMemo, useState } from "react"
+import { SearchInput } from "@eggspot/ui/components/Input"
+import { cn } from "@eggspot/ui/lib/utils"
+import { Check, Minus } from "lucide-react"
+import {
+  Menu as AriaMenu,
+  MenuItem as AriaMenuItem,
+  Collection,
+  ListLayout,
+  RootMenuTriggerStateContext,
+  Virtualizer,
+} from "react-aria-components"
+
+import {
+  useFilterContext,
+  useFilterItem,
+  useFilterItemClose,
+} from "../Filter.store"
+import type { SelectOption } from "../Filter.types"
+import { isSelectOptionArray } from "../Filter.types"
+import { MenuOptionItem } from "./OptionItem"
+
+interface FilterSelectProps {
+  field?: string
+  options?: SelectOption[]
+  multi?: boolean
+  renderIcon?: (option: SelectOption, isSelected: boolean) => React.ReactNode
+  placeholder?: string
+  emptyMessage?: string
+}
+
+export function FilterSelect({
+  field: fieldProp,
+  options: optionsProp,
+  multi = true,
+  renderIcon,
+  placeholder = "Filter...",
+  emptyMessage = "No matching options",
+}: FilterSelectProps) {
+  const { value: filters, setFieldValue } = useFilterContext()
+  const filterItem = useFilterItem()
+  const onClose = useFilterItemClose()
+  const menuState = useContext(RootMenuTriggerStateContext)
+
+  const field = fieldProp ?? filterItem?.field
+  const options = optionsProp ?? filterItem?.options ?? []
+
+  if (!field) {
+    throw new Error(
+      "FilterSelect requires a field prop or must be used within a FilterItemProvider"
+    )
+  }
+
+  const [search, setSearch] = useState("")
+
+  const raw = filters[field]
+
+  const selectedValues = useMemo(() => {
+    if (!raw) return []
+    if (isSelectOptionArray(raw)) {
+      return raw.map((opt) => opt.value)
+    }
+    if (Array.isArray(raw)) {
+      return raw.map(String)
+    }
+    return [String(raw)]
+  }, [raw])
+
+  const selectedKeys = useMemo(() => new Set(selectedValues), [selectedValues])
+
+  const filteredOptions = useMemo(() => {
+    if (!search) return options
+    const lowerSearch = search.toLowerCase()
+    return options.filter((opt) =>
+      opt.label.toLowerCase().includes(lowerSearch)
+    )
+  }, [options, search])
+
+  const optionsWithId = useMemo(
+    () => filteredOptions.map((opt) => ({ ...opt, id: String(opt.value) })),
+    [filteredOptions]
+  )
+
+  const handleSelectionChange = useCallback(
+    (keys: Set<React.Key>) => {
+      const selectedIds = Array.from(keys).map(String)
+      const selectedOptions = options
+        .filter((opt) => selectedIds.includes(String(opt.value)))
+        .map(({ icon, ...rest }) => rest)
+
+      setFieldValue(
+        field,
+        selectedOptions.length > 0 ? selectedOptions : undefined
+      )
+
+      if (!multi && selectedOptions.length > 0) {
+        menuState?.close()
+        onClose?.()
+      }
+    },
+    [field, options, setFieldValue, multi, onClose]
+  )
+
+  const handleSelectAll = useCallback(() => {
+    const isAllSelected = selectedValues.length === optionsWithId.length
+
+    if (isAllSelected) {
+      setFieldValue(field, undefined)
+    } else {
+      const allOptions = optionsWithId.map(({ icon, id, ...rest }) => rest)
+      setFieldValue(field, allOptions)
+    }
+  }, [field, optionsWithId, selectedValues.length, setFieldValue])
+
+  const isAllSelected =
+    selectedValues.length === optionsWithId.length && optionsWithId.length > 0
+  const isIndeterminate =
+    selectedValues.length > 0 && selectedValues.length < optionsWithId.length
+
+  return (
+    <div className="flex max-h-[300px] min-w-[200px] flex-col">
+      <div className="border-gray-6 border-b px-3 py-2">
+        <SearchInput
+          placeholder={placeholder}
+          className="placeholder:text-gray-11 h-7 rounded border-0 bg-transparent pl-0 text-xs ring-0!"
+          onChange={setSearch}
+          value={search}
+        />
+      </div>
+
+      <Virtualizer
+        layout={ListLayout}
+        layoutOptions={{ estimatedRowHeight: 32 }}
+      >
+        <AriaMenu
+          aria-label="Filter options"
+          selectionMode={multi ? "multiple" : "single"}
+          selectedKeys={selectedKeys}
+          onSelectionChange={(keys) =>
+            handleSelectionChange(keys as Set<string>)
+          }
+          className="max-h-[250px] flex-1 overflow-auto py-1 outline-none"
+          renderEmptyState={() => (
+            <div className="text-gray-11 px-3 py-6 text-center text-xs">
+              {emptyMessage}
+            </div>
+          )}
+        >
+          {multi && optionsWithId.length > 0 && (
+            <SelectAllItem
+              isAllSelected={isAllSelected}
+              isIndeterminate={isIndeterminate}
+              onSelectAll={handleSelectAll}
+            />
+          )}
+
+          <Collection items={optionsWithId}>
+            {(option) => (
+              <MenuOptionItem
+                option={option}
+                multi={multi}
+                renderIcon={renderIcon}
+              />
+            )}
+          </Collection>
+        </AriaMenu>
+      </Virtualizer>
+    </div>
+  )
+}
+
+function SelectAllItem({
+  isAllSelected,
+  isIndeterminate,
+  onSelectAll,
+}: {
+  isAllSelected: boolean
+  isIndeterminate: boolean
+  onSelectAll: () => void
+}) {
+  return (
+    <AriaMenuItem
+      id="__select_all__"
+      textValue="Select All"
+      onAction={onSelectAll}
+      className={cn(
+        "flex w-full cursor-pointer items-center gap-2.5 px-3 py-1.5 text-left text-sm outline-none",
+        "hover:bg-gray-3 data-focused:bg-gray-3 transition-colors",
+        "text-gray-11 font-medium"
+      )}
+    >
+      <span
+        className={cn(
+          "flex size-4 shrink-0 items-center justify-center rounded border",
+          isAllSelected || isIndeterminate
+            ? "bg-accent-9 border-accent-9 text-white"
+            : "border-gray-7 bg-transparent"
+        )}
+      >
+        {isAllSelected && <Check className="size-3" strokeWidth={2.5} />}
+        {isIndeterminate && <Minus className="size-3" strokeWidth={2.5} />}
+      </span>
+      <span className="flex-1">Select All</span>
+    </AriaMenuItem>
+  )
+}

package/src/components/Filter/FilterField/FilterSingleDate.tsx

@@ -0,0 +1,277 @@
+"use client"
+
+import { useContext, useState } from "react"
+import { Button } from "@eggspot/ui/components/Button"
+import {
+  Calendar,
+  CalendarCell,
+  CalendarGrid,
+  CalendarGridBody,
+  CalendarGridHeader,
+  CalendarHeaderCell,
+  CalendarHeading,
+} from "@eggspot/ui/components/Calendar"
+import { parse } from "@eggspot/ui/components/DatePicker.utils"
+import { cn } from "@eggspot/ui/lib/utils"
+import type { CalendarDate, CalendarDateTime } from "@internationalized/date"
+import { getLocalTimeZone, today } from "@internationalized/date"
+import dayjs from "dayjs"
+import { ChevronLeft, ChevronRight } from "lucide-react"
+import { RootMenuTriggerStateContext } from "react-aria-components"
+
+import {
+  useFilterContext,
+  useFilterItem,
+  useFilterItemClose,
+} from "../Filter.store"
+
+interface FilterSingleDateProps {
+  field?: string
+  granularity?: "day" | "month"
+  onSelect?: (date: Date | undefined) => void
+}
+
+export function FilterSingleDate({
+  field: fieldProp,
+  granularity = "day",
+  onSelect,
+}: FilterSingleDateProps) {
+  const { value, setFieldValue } = useFilterContext()
+  const filterItem = useFilterItem()
+
+  const field = fieldProp ?? filterItem?.field
+
+  if (!field) {
+    throw new Error(
+      "FilterSingleDate requires a field prop or must be used within a FilterItemProvider"
+    )
+  }
+
+  const dateValue = value[field] as Date | null | undefined
+
+  const handleChange = (date: Date) => {
+    if (onSelect) {
+      onSelect(date)
+    } else {
+      setFieldValue(field, date)
+    }
+  }
+
+  const handleClear = () => {
+    if (onSelect) {
+      onSelect(undefined)
+    } else {
+      setFieldValue(field, undefined)
+    }
+  }
+
+  if (granularity === "month") {
+    return (
+      <MonthPicker
+        value={dateValue ?? undefined}
+        onChange={handleChange}
+        onClear={handleClear}
+      />
+    )
+  }
+
+  return (
+    <DayPicker
+      value={dateValue ?? undefined}
+      onChange={handleChange}
+      onClear={handleClear}
+    />
+  )
+}
+
+interface DayPickerProps {
+  value?: Date
+  onChange: (date: Date) => void
+  onClear: () => void
+}
+
+function DayPicker({ value, onChange, onClear }: DayPickerProps) {
+  const calendarValue = parse(value, "day")
+  const todayDate = today(getLocalTimeZone())
+  const menuState = useContext(RootMenuTriggerStateContext)
+  const onClose = useFilterItemClose()
+
+  const handleDateChange = (date: CalendarDate | CalendarDateTime) => {
+    onChange(date.toDate(getLocalTimeZone()))
+    // Close popover after selection
+    menuState?.close()
+    onClose?.()
+  }
+
+  const handleToday = () => {
+    onChange(dayjs().startOf("day").toDate())
+  }
+
+  return (
+    <div className="flex h-[352px] min-w-[280px] flex-col p-2">
+      <Calendar
+        aria-label="Select date"
+        className="w-full flex-1"
+        value={calendarValue}
+        onChange={handleDateChange}
+        defaultFocusedValue={calendarValue ?? todayDate}
+      >
+        <CalendarHeading />
+        <CalendarGrid className="w-full">
+          <CalendarGridHeader>
+            {(day) => (
+              <CalendarHeaderCell className="flex-1">{day}</CalendarHeaderCell>
+            )}
+          </CalendarGridHeader>
+          <CalendarGridBody>
+            {(date) => <CalendarCell date={date} />}
+          </CalendarGridBody>
+        </CalendarGrid>
+      </Calendar>
+
+      <div className="border-gray-6 flex justify-center gap-2 border-t pt-2">
+        <Button
+          size="sm"
+          variant="ghost"
+          intent="primary"
+          onClick={handleToday}
+        >
+          Today
+        </Button>
+        <Button
+          size="sm"
+          variant="ghost"
+          intent="secondary"
+          onClick={onClear}
+          isDisabled={!value}
+        >
+          Clear
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+interface MonthPickerProps {
+  value?: Date
+  onChange: (date: Date) => void
+  onClear: () => void
+}
+
+const MONTHS = [
+  "Jan",
+  "Feb",
+  "Mar",
+  "Apr",
+  "May",
+  "Jun",
+  "Jul",
+  "Aug",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dec",
+]
+
+function MonthPicker({ value, onChange, onClear }: MonthPickerProps) {
+  const currentYear = dayjs().year()
+  const [viewYear, setViewYear] = useState(
+    value ? dayjs(value).year() : currentYear
+  )
+  const onClose = useFilterItemClose()
+  const menuState = useContext(RootMenuTriggerStateContext)
+
+  const selectedMonth = value ? dayjs(value).month() : null
+  const selectedYear = value ? dayjs(value).year() : null
+
+  const handleMonthSelect = (monthIndex: number) => {
+    const date = dayjs()
+      .year(viewYear)
+      .month(monthIndex)
+      .startOf("month")
+      .toDate()
+    onChange(date)
+    onClose?.()
+    menuState?.close()
+  }
+
+  const handleThisMonth = () => {
+    onChange(dayjs().startOf("month").toDate())
+  }
+
+  return (
+    <div className="flex min-w-[280px] flex-col p-2">
+      <div className="mb-2 flex items-center justify-between">
+        <Button
+          mode="icon"
+          size="sm"
+          variant="ghost"
+          intent="secondary"
+          onClick={() => setViewYear((y) => y - 1)}
+          aria-label="Previous year"
+        >
+          <ChevronLeft className="size-4" />
+        </Button>
+        <span className="text-gray-12 text-sm font-medium">{viewYear}</span>
+        <Button
+          mode="icon"
+          size="sm"
+          variant="ghost"
+          intent="secondary"
+          onClick={() => setViewYear((y) => y + 1)}
+          aria-label="Next year"
+        >
+          <ChevronRight className="size-4" />
+        </Button>
+      </div>
+
+      <div className="grid grid-cols-3 gap-1">
+        {MONTHS.map((month, index) => {
+          const isSelected =
+            selectedMonth === index && selectedYear === viewYear
+          const isCurrentMonth =
+            dayjs().month() === index && dayjs().year() === viewYear
+
+          return (
+            <button
+              key={month}
+              type="button"
+              onClick={() => handleMonthSelect(index)}
+              className={cn(
+                "rounded-md px-3 py-2 text-sm transition-colors",
+                "hover:bg-gray-4 focus-visible:ring-accent-9 focus-visible:ring-2 focus-visible:outline-none",
+                isSelected
+                  ? "bg-accent-9 hover:bg-accent-10 text-white"
+                  : isCurrentMonth
+                    ? "text-accent-11"
+                    : "text-gray-11 hover:text-gray-12"
+              )}
+            >
+              {month}
+            </button>
+          )
+        })}
+      </div>
+
+      <div className="border-gray-6 mt-2 flex justify-center gap-2 border-t pt-2">
+        <Button
+          size="sm"
+          variant="ghost"
+          intent="primary"
+          onClick={handleThisMonth}
+        >
+          This month
+        </Button>
+        <Button
+          size="sm"
+          variant="ghost"
+          intent="secondary"
+          onClick={onClear}
+          isDisabled={!value}
+        >
+          Clear
+        </Button>
+      </div>
+    </div>
+  )
+}

package/src/components/Filter/FilterField/OptionItem.tsx

@@ -0,0 +1,112 @@
+"use client"
+
+import { cn } from "@eggspot/ui/lib/utils"
+import { Check } from "lucide-react"
+import { MenuItem as AriaMenuItem, ListBoxItem } from "react-aria-components"
+
+import type { SelectOption } from "../Filter.types"
+
+interface OptionItemProps {
+  option: SelectOption
+  multi?: boolean
+  renderIcon?: (option: SelectOption, isSelected: boolean) => React.ReactNode
+}
+
+/* Shared option item for Menu-based selects (FilterSelect) */
+export function MenuOptionItem({
+  option,
+  multi = true,
+  renderIcon,
+}: OptionItemProps) {
+  return (
+    <AriaMenuItem
+      id={String(option.value)}
+      textValue={option.label}
+      className={cn(
+        "flex w-full cursor-pointer items-center gap-2.5 px-3 py-1.5 text-left text-sm outline-none",
+        "hover:bg-gray-3 data-focused:bg-gray-3 transition-colors",
+        "data-selected:text-gray-12 text-gray-11"
+      )}
+    >
+      {({ isSelected }) => (
+        <OptionItemContent
+          option={option}
+          isSelected={isSelected}
+          multi={multi}
+          renderIcon={renderIcon}
+        />
+      )}
+    </AriaMenuItem>
+  )
+}
+
+/* Shared option item for ListBox-based selects (FilterAsyncSelect) */
+export function ListBoxOptionItem({
+  option,
+  multi = true,
+  renderIcon,
+}: OptionItemProps) {
+  return (
+    <ListBoxItem
+      id={String(option.value)}
+      textValue={option.label}
+      className={cn(
+        "flex w-full cursor-pointer items-center gap-2.5 px-3 py-1.5 text-left text-sm outline-none",
+        "hover:bg-gray-3 data-focused:bg-gray-3 transition-colors",
+        "data-selected:text-gray-12 text-gray-11"
+      )}
+    >
+      {({ isSelected }) => (
+        <OptionItemContent
+          option={option}
+          isSelected={isSelected}
+          multi={multi}
+          renderIcon={renderIcon}
+        />
+      )}
+    </ListBoxItem>
+  )
+}
+
+/* Shared content for option items */
+function OptionItemContent({
+  option,
+  isSelected,
+  multi,
+  renderIcon,
+}: {
+  option: SelectOption
+  isSelected: boolean
+  multi?: boolean
+  renderIcon?: (option: SelectOption, isSelected: boolean) => React.ReactNode
+}) {
+  return (
+    <>
+      <span
+        className={cn(
+          "flex size-4 shrink-0 items-center justify-center rounded border",
+          multi ? "rounded" : "rounded-full",
+          isSelected
+            ? "bg-accent-9 border-accent-9 text-white"
+            : "border-gray-7 bg-transparent"
+        )}
+      >
+        {isSelected && <Check className="size-3" strokeWidth={2.5} />}
+      </span>
+
+      {renderIcon ? (
+        <span className="shrink-0">{renderIcon(option, isSelected)}</span>
+      ) : option.avatar ? (
+        <img
+          src={option.avatar}
+          alt={option.label}
+          className="size-5 shrink-0 rounded-full object-cover"
+        />
+      ) : option.icon ? (
+        <span className="text-gray-11 shrink-0">{option.icon}</span>
+      ) : null}
+
+      <span className="flex-1 truncate">{option.label}</span>
+    </>
+  )
+}

package/src/components/Filter/FilterField/index.ts

@@ -0,0 +1,6 @@
+export * from "./DateModeRowValue"
+export * from "./FilterAsyncSelect"
+export * from "./FilterDateMode"
+export * from "./FilterDateRange"
+export * from "./FilterSelect"
+export * from "./FilterSingleDate"