@snapdragonsnursery/react-components 1.1.38 → 1.3.0

package/src/components/ChildSearchFilters.jsx

@@ -0,0 +1,237 @@
+// Child Search Filters Component
+// Provides advanced filtering capabilities for child search including status, site, date of birth, age, and sorting options
+// Usage: <ChildSearchFilters filters={filters} onFiltersChange={setFilters} sites={sites} />
+
+import React from "react";
+import { Input } from "./ui/input";
+import { Select, SelectOption } from "./ui/select";
+import { DateRangePicker } from "./ui/date-range-picker";
+import { Button } from "./ui/button";
+import {
+  FunnelIcon,
+  ChevronDownIcon,
+  ChevronUpIcon,
+} from "@heroicons/react/24/outline";
+
+const ChildSearchFilters = ({
+  filters,
+  onFiltersChange,
+  sites = null,
+  activeOnly = true,
+  isAdvancedFiltersOpen,
+  onToggleAdvancedFilters,
+  onClearFilters,
+  onApplyFilters,
+}) => {
+  // Local state for filters that haven't been applied yet
+  const [localFilters, setLocalFilters] = React.useState(filters);
+  const [hasUnsavedChanges, setHasUnsavedChanges] = React.useState(false);
+
+  // Update local filters when props change
+  React.useEffect(() => {
+    setLocalFilters(filters);
+    setHasUnsavedChanges(false);
+  }, [filters]);
+  // Convert existing date strings to DateRangePicker format
+  const getDateRange = () => {
+    if (localFilters.dobFrom || localFilters.dobTo) {
+      return {
+        from: localFilters.dobFrom ? new Date(localFilters.dobFrom) : null,
+        to: localFilters.dobTo ? new Date(localFilters.dobTo) : null,
+      };
+    }
+    return null;
+  };
+
+  const handleDateRangeChange = (range) => {
+    // DateRangePicker now only calls onSelect when both dates are selected or when cleared
+    if (range?.from && range?.to) {
+      // Both dates selected - update local filters
+      setLocalFilters(prev => ({
+        ...prev,
+        dobFrom: range.from.toISOString().split('T')[0],
+        dobTo: range.to.toISOString().split('T')[0],
+      }));
+      setHasUnsavedChanges(true);
+    } else if (!range?.from && !range?.to) {
+      // Range cleared - clear local filters
+      setLocalFilters(prev => ({
+        ...prev,
+        dobFrom: '',
+        dobTo: '',
+      }));
+      setHasUnsavedChanges(true);
+    }
+    // No need to handle single date selection as DateRangePicker handles it internally
+  };
+
+  const handleFilterChange = (key, value) => {
+    setLocalFilters(prev => ({
+      ...prev,
+      [key]: value,
+    }));
+    setHasUnsavedChanges(true);
+  };
+
+  const clearFilters = () => {
+    onClearFilters();
+  };
+
+  const handleApplyFilters = () => {
+    onApplyFilters(localFilters);
+    setHasUnsavedChanges(false);
+  };
+
+  const handleCancelChanges = () => {
+    setLocalFilters(filters);
+    setHasUnsavedChanges(false);
+  };
+
+  return (
+    <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 mb-6">
+      <div className="p-6">
+        {/* Advanced Filters Toggle */}
+        <div className="flex items-center justify-between">
+          <button
+            onClick={onToggleAdvancedFilters}
+            className="flex items-center space-x-2 text-sm text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300"
+          >
+            <FunnelIcon className="h-4 w-4" />
+            <span>Advanced Filters</span>
+            {isAdvancedFiltersOpen ? (
+              <ChevronUpIcon className="h-4 w-4" />
+            ) : (
+              <ChevronDownIcon className="h-4 w-4" />
+            )}
+          </button>
+          <button
+            onClick={clearFilters}
+            className="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200"
+          >
+            Clear Filters
+          </button>
+        </div>
+
+        {/* Advanced Filters */}
+        {isAdvancedFiltersOpen && (
+          <div 
+            className="mt-4 p-4 rounded-lg" 
+            style={{ 
+              backgroundColor: 'hsl(var(--card))',
+              border: '1px solid hsl(var(--border))'
+            }}
+          >
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+              {/* Status Filter */}
+              <div>
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                  Status
+                </label>
+                <Select
+                  value={localFilters.status}
+                  onChange={(e) => handleFilterChange("status", e.target.value)}
+                  className="bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white"
+                >
+                  <SelectOption value="all">All Children</SelectOption>
+                  <SelectOption value="active">Active Only</SelectOption>
+                  <SelectOption value="inactive">Inactive Only</SelectOption>
+                </Select>
+              </div>
+
+              {/* Site Filter */}
+              {sites && sites.length > 0 && (
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                    Site
+                  </label>
+                  <Select
+                    value={localFilters.selectedSiteId}
+                    onChange={(e) => handleFilterChange("selectedSiteId", e.target.value)}
+                    className="bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white"
+                  >
+                    <SelectOption value="">All Sites</SelectOption>
+                    {sites.map((site) => (
+                      <SelectOption key={site.site_id} value={site.site_id}>
+                        {site.site_name}
+                      </SelectOption>
+                    ))}
+                  </Select>
+                </div>
+              )}
+
+              {/* Date of Birth Range */}
+              <div>
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                  Date of Birth Range
+                </label>
+                <DateRangePicker
+                  selectedRange={getDateRange()}
+                  onSelect={handleDateRangeChange}
+                  placeholder="Select date of birth range"
+                  className="bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white"
+                />
+              </div>
+
+              {/* Age Range */}
+              <div>
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                  Age From (months)
+                </label>
+                <Input
+                  type="number"
+                  min="0"
+                  value={localFilters.ageFrom}
+                  onChange={(e) => handleFilterChange("ageFrom", e.target.value)}
+                  placeholder="0"
+                  className="bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white"
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                  Age To (months)
+                </label>
+                <Input
+                  type="number"
+                  min="0"
+                  value={localFilters.ageTo}
+                  onChange={(e) => handleFilterChange("ageTo", e.target.value)}
+                  placeholder="60"
+                  className="bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white"
+                />
+              </div>
+            </div>
+
+            {/* Apply/Cancel Buttons */}
+            {hasUnsavedChanges && (
+              <div className="mt-6 pt-4 border-t border-gray-200 dark:border-gray-700">
+                <div className="flex items-center justify-between">
+                  <span className="text-sm text-gray-600 dark:text-gray-400">
+                    You have unsaved filter changes
+                  </span>
+                  <div className="flex items-center space-x-2">
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={handleCancelChanges}
+                    >
+                      Cancel
+                    </Button>
+                    <Button
+                      size="sm"
+                      onClick={handleApplyFilters}
+                    >
+                      Apply Filters
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ChildSearchFilters; 

package/src/components/ChildSearchFilters.test.jsx

@@ -0,0 +1,280 @@
+// ChildSearchFilters Component Tests
+// Tests the filter functionality including status, site, date of birth, and age options
+
+import React from "react";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import ChildSearchFilters from "./ChildSearchFilters";
+
+// Mock the UI components
+jest.mock("./ui/input", () => ({
+  __esModule: true,
+  Input: ({ value, onChange, placeholder, type, min, className, ...props }) => (
+    <input
+      data-testid="input"
+      value={value}
+      onChange={onChange}
+      placeholder={placeholder}
+      type={type}
+      min={min}
+      className={className}
+      {...props}
+    />
+  ),
+}));
+
+jest.mock("./ui/select", () => ({
+  __esModule: true,
+  Select: ({ value, onChange, children, className, ...props }) => (
+    <select
+      data-testid="select"
+      value={value}
+      onChange={onChange}
+      className={className}
+      {...props}
+    >
+      {children}
+    </select>
+  ),
+  SelectOption: ({ value, children, ...props }) => (
+    <option value={value} {...props}>
+      {children}
+    </option>
+  ),
+}));
+
+jest.mock("./ui/date-range-picker", () => ({
+  __esModule: true,
+  DateRangePicker: ({ selectedRange, onSelect, placeholder, className, ...props }) => (
+    <div data-testid="date-range-picker" className={className}>
+      <button
+        onClick={() => onSelect && onSelect({ from: new Date('2020-01-01'), to: new Date('2020-12-31') })}
+        {...props}
+      >
+        {selectedRange?.from && selectedRange?.to 
+          ? `${selectedRange.from.toLocaleDateString()} - ${selectedRange.to.toLocaleDateString()}`
+          : placeholder || 'Select date range'
+        }
+      </button>
+    </div>
+  ),
+}));
+
+describe("ChildSearchFilters", () => {
+  const mockFilters = {
+    status: "active",
+    selectedSiteId: "",
+    dobFrom: "",
+    dobTo: "",
+    ageFrom: "",
+    ageTo: "",
+  };
+
+  const mockSites = [
+    { site_id: 1, site_name: "Site A" },
+    { site_id: 2, site_name: "Site B" },
+  ];
+
+  const defaultProps = {
+    filters: mockFilters,
+    onFiltersChange: jest.fn(),
+    onApplyFilters: jest.fn(),
+    sites: mockSites,
+    activeOnly: true,
+    isAdvancedFiltersOpen: false,
+    onToggleAdvancedFilters: jest.fn(),
+    onClearFilters: jest.fn(),
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("renders the advanced filters toggle button", () => {
+    render(<ChildSearchFilters {...defaultProps} />);
+    
+    expect(screen.getByText("Advanced Filters")).toBeInTheDocument();
+    expect(screen.getByText("Clear Filters")).toBeInTheDocument();
+  });
+
+  it("shows advanced filters when isAdvancedFiltersOpen is true", () => {
+    render(<ChildSearchFilters {...defaultProps} isAdvancedFiltersOpen={true} />);
+    
+    expect(screen.getByText("Status")).toBeInTheDocument();
+    expect(screen.getByText("Site")).toBeInTheDocument();
+    expect(screen.getByText("Date of Birth Range")).toBeInTheDocument();
+    expect(screen.getByText("Age From (months)")).toBeInTheDocument();
+    expect(screen.getByText("Age To (months)")).toBeInTheDocument();
+  });
+
+  it("hides advanced filters when isAdvancedFiltersOpen is false", () => {
+    render(<ChildSearchFilters {...defaultProps} isAdvancedFiltersOpen={false} />);
+    
+    expect(screen.queryByText("Status")).not.toBeInTheDocument();
+    expect(screen.queryByText("Site")).not.toBeInTheDocument();
+  });
+
+  it("calls onToggleAdvancedFilters when toggle button is clicked", () => {
+    render(<ChildSearchFilters {...defaultProps} />);
+    
+    fireEvent.click(screen.getByText("Advanced Filters"));
+    
+    expect(defaultProps.onToggleAdvancedFilters).toHaveBeenCalledTimes(1);
+  });
+
+  it("calls onClearFilters when clear button is clicked", () => {
+    render(<ChildSearchFilters {...defaultProps} />);
+    
+    fireEvent.click(screen.getByText("Clear Filters"));
+    
+    expect(defaultProps.onClearFilters).toHaveBeenCalledTimes(1);
+  });
+
+  it("renders site options when sites are provided", () => {
+    render(<ChildSearchFilters {...defaultProps} isAdvancedFiltersOpen={true} />);
+    
+    const siteSelect = screen.getAllByTestId("select")[1]; // Second select is site
+    expect(siteSelect).toBeInTheDocument();
+    
+    // Check that site options are rendered
+    expect(siteSelect).toHaveValue("");
+    expect(siteSelect).toHaveTextContent("All Sites");
+    expect(siteSelect).toHaveTextContent("Site A");
+    expect(siteSelect).toHaveTextContent("Site B");
+  });
+
+  it("does not render site filter when sites are not provided", () => {
+    render(
+      <ChildSearchFilters 
+        {...defaultProps} 
+        sites={null} 
+        isAdvancedFiltersOpen={true} 
+      />
+    );
+    
+    const selects = screen.getAllByTestId("select");
+    expect(selects).toHaveLength(1); // Only Status filter (no site filter when sites=null)
+  });
+
+  it("shows apply button when filters are changed", () => {
+    render(<ChildSearchFilters {...defaultProps} isAdvancedFiltersOpen={true} />);
+    
+    const statusSelect = screen.getAllByTestId("select")[0];
+    fireEvent.change(statusSelect, { target: { value: "inactive" } });
+    
+    expect(screen.getByText("Apply Filters")).toBeInTheDocument();
+    expect(screen.getByText("You have unsaved filter changes")).toBeInTheDocument();
+  });
+
+  it("calls onApplyFilters when apply button is clicked", () => {
+    render(<ChildSearchFilters {...defaultProps} isAdvancedFiltersOpen={true} />);
+    
+    const statusSelect = screen.getAllByTestId("select")[0];
+    fireEvent.change(statusSelect, { target: { value: "inactive" } });
+    
+    const applyButton = screen.getByText("Apply Filters");
+    fireEvent.click(applyButton);
+    
+    expect(defaultProps.onApplyFilters).toHaveBeenCalledWith(
+      expect.objectContaining({
+        status: "inactive"
+      })
+    );
+  });
+
+  it("calls onApplyFilters when apply button is clicked with date range", () => {
+    render(<ChildSearchFilters {...defaultProps} isAdvancedFiltersOpen={true} />);
+    
+    const dateRangePicker = screen.getByTestId("date-range-picker");
+    const button = dateRangePicker.querySelector("button");
+    fireEvent.click(button);
+    
+    const applyButton = screen.getByText("Apply Filters");
+    fireEvent.click(applyButton);
+    
+    expect(defaultProps.onApplyFilters).toHaveBeenCalledWith(
+      expect.objectContaining({
+        dobFrom: "2020-01-01",
+        dobTo: "2020-12-31"
+      })
+    );
+  });
+
+  it("calls onApplyFilters when apply button is clicked with age filter", () => {
+    render(<ChildSearchFilters {...defaultProps} isAdvancedFiltersOpen={true} />);
+    
+    const ageFromInput = screen.getAllByTestId("input")[0];
+    fireEvent.change(ageFromInput, { target: { value: "12" } });
+    
+    const applyButton = screen.getByText("Apply Filters");
+    fireEvent.click(applyButton);
+    
+    expect(defaultProps.onApplyFilters).toHaveBeenCalledWith(
+      expect.objectContaining({
+        ageFrom: "12"
+      })
+    );
+  });
+
+  it("displays correct filter values", () => {
+    const filtersWithValues = {
+      ...mockFilters,
+      status: "inactive",
+      selectedSiteId: "1",
+      dobFrom: "2020-01-01",
+      dobTo: "2020-12-31",
+      ageFrom: "12",
+      ageTo: "60",
+    };
+
+    render(
+      <ChildSearchFilters 
+        {...defaultProps} 
+        filters={filtersWithValues}
+        isAdvancedFiltersOpen={true} 
+      />
+    );
+    
+    const statusSelect = screen.getAllByTestId("select")[0];
+    const siteSelect = screen.getAllByTestId("select")[1];
+    const dateRangePicker = screen.getByTestId("date-range-picker");
+    const ageFromInput = screen.getAllByTestId("input")[0];
+    const ageToInput = screen.getAllByTestId("input")[1];
+    
+    expect(statusSelect).toHaveValue("inactive");
+    expect(siteSelect).toHaveValue("1");
+    expect(dateRangePicker).toBeInTheDocument();
+    expect(ageFromInput).toHaveValue(12);
+    expect(ageToInput).toHaveValue(60);
+  });
+
+  it("has correct accessibility attributes", () => {
+    render(<ChildSearchFilters {...defaultProps} isAdvancedFiltersOpen={true} />);
+    
+    // Check that all inputs have proper labels
+    expect(screen.getByText("Status")).toBeInTheDocument();
+    expect(screen.getByText("Site")).toBeInTheDocument();
+    expect(screen.getByText("Date of Birth Range")).toBeInTheDocument();
+    expect(screen.getByText("Age From (months)")).toBeInTheDocument();
+    expect(screen.getByText("Age To (months)")).toBeInTheDocument();
+  });
+
+  it("applies correct CSS classes for dark mode support", () => {
+    render(<ChildSearchFilters {...defaultProps} isAdvancedFiltersOpen={true} />);
+    
+    const inputs = screen.getAllByTestId("input");
+    const selects = screen.getAllByTestId("select");
+    
+    inputs.forEach(input => {
+      expect(input.className).toContain("dark:bg-gray-800");
+      expect(input.className).toContain("dark:border-gray-600");
+      expect(input.className).toContain("dark:text-white");
+    });
+    
+    selects.forEach(select => {
+      expect(select.className).toContain("dark:bg-gray-800");
+      expect(select.className).toContain("dark:border-gray-600");
+      expect(select.className).toContain("dark:text-white");
+    });
+  });
+}); 

package/src/components/ui/calendar.jsx

@@ -0,0 +1,173 @@
+import * as React from "react"
+import {
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from "lucide-react"
+import { DayPicker, getDefaultClassNames } from "react-day-picker";
+
+import { cn } from "../../lib/utils"
+import { Button, buttonVariants } from "./button"
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = "label",
+  buttonVariant = "ghost",
+  formatters,
+  components,
+  ...props
+}) {
+  const defaultClassNames = getDefaultClassNames()
+
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+              className={cn(
+          "bg-background group/calendar p-3",
+          className
+        )}
+      captionLayout={captionLayout}
+      formatters={{
+        formatMonthDropdown: (date) =>
+          date.toLocaleString("default", { month: "short" }),
+        ...formatters,
+      }}
+      classNames={{
+        root: cn("w-fit", defaultClassNames.root),
+        months: cn("flex gap-4 flex-col md:flex-row relative", defaultClassNames.months),
+        month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
+        nav: cn(
+          "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
+          defaultClassNames.nav
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "h-8 w-8 aria-disabled:opacity-50 p-0 select-none",
+          defaultClassNames.button_previous
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "h-8 w-8 aria-disabled:opacity-50 p-0 select-none",
+          defaultClassNames.button_next
+        ),
+        month_caption: cn(
+          "flex items-center justify-center h-8 w-full px-8",
+          defaultClassNames.month_caption
+        ),
+        dropdowns: cn(
+          "w-full flex items-center text-sm font-medium justify-center h-8 gap-1.5",
+          defaultClassNames.dropdowns
+        ),
+        dropdown_root: cn(
+          "relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",
+          defaultClassNames.dropdown_root
+        ),
+        dropdown: cn("absolute bg-popover inset-0 opacity-0", defaultClassNames.dropdown),
+        caption_label: cn("select-none font-medium", captionLayout === "label"
+          ? "text-sm"
+          : "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5", defaultClassNames.caption_label),
+        table: "w-full border-collapse",
+        weekdays: cn("flex", defaultClassNames.weekdays),
+        weekday: cn(
+          "text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none",
+          defaultClassNames.weekday
+        ),
+        week: cn("flex w-full mt-2", defaultClassNames.week),
+        week_number_header: cn("select-none w-8", defaultClassNames.week_number_header),
+        week_number: cn(
+          "text-[0.8rem] select-none text-muted-foreground",
+          defaultClassNames.week_number
+        ),
+        day: cn(
+          "relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
+          defaultClassNames.day
+        ),
+        range_start: cn("rounded-l-md bg-accent", defaultClassNames.range_start),
+        range_middle: cn("rounded-none", defaultClassNames.range_middle),
+        range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
+        today: cn(
+          "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
+          defaultClassNames.today
+        ),
+        outside: cn(
+          "text-muted-foreground aria-selected:text-muted-foreground aria-selected:bg-muted aria-selected:opacity-50",
+          defaultClassNames.outside
+        ),
+        disabled: cn("text-muted-foreground opacity-50", defaultClassNames.disabled),
+        hidden: cn("invisible", defaultClassNames.hidden),
+        ...classNames,
+      }}
+      components={{
+        Root: ({ className, rootRef, ...props }) => {
+          return (<div data-slot="calendar" ref={rootRef} className={cn(className)} {...props} />);
+        },
+        Chevron: ({ className, orientation, ...props }) => {
+          if (orientation === "left") {
+            return (<ChevronLeftIcon className={cn("size-4", className)} {...props} />);
+          }
+
+          if (orientation === "right") {
+            return (<ChevronRightIcon className={cn("size-4", className)} {...props} />);
+          }
+
+          return (<ChevronDownIcon className={cn("size-4", className)} {...props} />);
+        },
+        DayButton: CalendarDayButton,
+        WeekNumber: ({ children, ...props }) => {
+          return (
+            <td {...props}>
+              <div
+                className="flex h-8 w-8 items-center justify-center text-center">
+                {children}
+              </div>
+            </td>
+          );
+        },
+        ...components,
+      }}
+      {...props} />
+  );
+}
+
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  ...props
+}) {
+  const defaultClassNames = getDefaultClassNames()
+
+  const ref = React.useRef(null)
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus()
+  }, [modifiers.focused])
+
+  return (
+    <Button
+      ref={ref}
+      variant="ghost"
+      size="icon"
+      data-day={day.date.toLocaleDateString()}
+      data-selected-single={
+        modifiers.selected &&
+        !modifiers.range_start &&
+        !modifiers.range_end &&
+        !modifiers.range_middle
+      }
+      data-range-start={modifiers.range_start}
+      data-range-end={modifiers.range_end}
+      data-range-middle={modifiers.range_middle}
+              className={cn(
+          "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-8 flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70",
+          // Add specific styling for outside selected dates
+          modifiers.outside && modifiers.selected && "bg-muted text-muted-foreground opacity-50",
+          defaultClassNames.day,
+          className
+        )}
+      {...props} />
+  );
+}
+
+export { Calendar, CalendarDayButton }