@apptimate/ui 1.0.0 → 1.2.0

package/CHANGELOG.md

@@ -1,7 +1,7 @@
-# @apptimate/ui
-
-## 1.0.0
-
-### Major Changes
-
-- init
+# @apptimate/ui
+
+## 1.0.0
+
+### Major Changes
+
+- init

package/package.json

@@ -1,18 +1,22 @@
-{
-  "name": "@apptimate/ui",
-  "version": "1.0.0",
-  "main": "src/index.tsx",
-  "types": "src/index.tsx",
-  "dependencies": {
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "framer-motion": "^12.38.0",
-    "lucide-react": "^1.14.0",
-    "react": "latest",
-    "tailwind-merge": "^3.5.0",
-    "@apptimate/core-lib": "*"
-  },
-  "publishConfig": {
-    "access": "public"
-  }
-}
+{
+  "name": "@apptimate/ui",
+  "version": "1.2.0",
+  "main": "src/index.tsx",
+  "types": "src/index.tsx",
+  "dependencies": {
+    "@apptimate/core-lib": "*",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "framer-motion": "^12.38.0",
+    "lucide-react": "^1.14.0",
+    "react": "^19.2.5",
+    "recharts": "^2.15.4",
+    "tailwind-merge": "^3.5.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "next": "^16.0.0"
+  }
+}

package/src/{Button.tsx → base-components/Button.tsx}

@@ -14,7 +14,7 @@ export interface ButtonProps {
   children?: React.ReactNode;
 
   /** The visual style variant of the button */
-  variant?: 'solid' | 'bordered' | 'light' | 'flat' | 'shadow' | 'ghost';
+  variant?: 'solid' | 'bordered' | 'light' | 'flat' | 'shadow' | 'ghost' | 'soft';
 
   /** The color scheme of the button */
   color?: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger';
@@ -73,7 +73,7 @@ const iconSizeMap = {
 
 export const buttonVariants = cva(
   [
-    'inline-flex items-center justify-center gap-2 font-[inherit] font-medium cursor-pointer transition-all duration-200 relative whitespace-nowrap select-none outline-none overflow-hidden',
+    'inline-flex items-center justify-center gap-2 font-[inherit] font-medium cursor-pointer transition-all duration-200 relative whitespace-nowrap select-none outline-none overflow-hidden shrink-0 shadow-[0_1px_2px_rgba(0,0,0,0.02)]',
     'focus-visible:outline-2 focus-visible:outline-[var(--aceui-color-focus)] focus-visible:outline-offset-2',
   ],
   {
@@ -85,6 +85,7 @@ export const buttonVariants = cva(
         flat: '',
         shadow: '',
         ghost: '',
+        soft: '',
       },
       color: {
         default: '',
@@ -95,14 +96,14 @@ export const buttonVariants = cva(
         danger: '',
       },
       size: {
-        small: 'text-[0.75rem] leading-[1rem] px-3 min-h-8',
-        medium: 'text-[0.875rem] leading-[1.25rem] px-4 min-h-10',
-        large: 'text-[1rem] leading-[1.5rem] px-6 min-h-12',
+        small: 'text-[0.75rem] leading-[1rem] px-3 h-8',
+        medium: 'text-[0.8125rem] leading-[1.25rem] px-4 h-10',
+        large: 'text-[1rem] leading-[1.5rem] px-6 h-12',
       },
       radius: {
         none: 'rounded-none',
         small: 'rounded-[8px]',
-        medium: 'rounded-[12px]',
+        medium: 'rounded-[10px]',
         large: 'rounded-[14px]',
         full: 'rounded-full',
         squircle: 'rounded-full',
@@ -129,12 +130,12 @@ export const buttonVariants = cva(
       { variant: 'solid', color: 'warning', class: 'border-none bg-warning-500 text-warning-foreground hover:bg-warning-600 active:bg-warning-700' },
       { variant: 'solid', color: 'danger', class: 'border-none bg-danger-500 text-danger-foreground hover:bg-danger-600 active:bg-danger-700' },
       /* Bordered */
-      { variant: 'bordered', color: 'default', class: 'bg-transparent text-default-500 border-1 border-default-500 hover:bg-default-50' },
-      { variant: 'bordered', color: 'primary', class: 'bg-transparent text-primary-500 border-1 border-primary-500 hover:bg-primary-50' },
-      { variant: 'bordered', color: 'secondary', class: 'bg-transparent text-secondary-500 border-1 border-secondary-500 hover:bg-secondary-50' },
-      { variant: 'bordered', color: 'success', class: 'bg-transparent text-success-500 border-1 border-success-500 hover:bg-success-50' },
-      { variant: 'bordered', color: 'warning', class: 'bg-transparent text-warning-500 border-1 border-warning-500 hover:bg-warning-50' },
-      { variant: 'bordered', color: 'danger', class: 'bg-transparent text-danger-500 border-1 border-danger-500 hover:bg-danger-50' },
+      { variant: 'bordered', color: 'default', class: 'bg-transparent text-default-500 border border-default-500 hover:bg-default-50' },
+      { variant: 'bordered', color: 'primary', class: 'bg-transparent text-primary-500 border border-primary-500 hover:bg-primary-50' },
+      { variant: 'bordered', color: 'secondary', class: 'bg-transparent text-secondary-500 border border-secondary-500 hover:bg-secondary-50' },
+      { variant: 'bordered', color: 'success', class: 'bg-transparent text-success-500 border border-success-500 hover:bg-success-50' },
+      { variant: 'bordered', color: 'warning', class: 'bg-transparent text-warning-500 border border-warning-500 hover:bg-warning-50' },
+      { variant: 'bordered', color: 'danger', class: 'bg-transparent text-danger-500 border border-danger-500 hover:bg-danger-50' },
       /* Light */
       { variant: 'light', color: 'default', class: 'bg-default-50 text-default-500 border-none hover:bg-default-100' },
       { variant: 'light', color: 'primary', class: 'bg-primary-50 text-primary-500 border-none hover:bg-primary-100' },
@@ -149,6 +150,13 @@ export const buttonVariants = cva(
       { variant: 'flat', color: 'success', class: 'bg-transparent text-success-500 border-none hover:bg-success-50' },
       { variant: 'flat', color: 'warning', class: 'bg-transparent text-warning-500 border-none hover:bg-warning-50' },
       { variant: 'flat', color: 'danger', class: 'bg-transparent text-danger-500 border-none hover:bg-danger-50' },
+      /* Soft */
+      { variant: 'soft', color: 'default', class: 'bg-gray-50 text-gray-700 border border-gray-100 hover:bg-gray-100 hover:border-gray-200' },
+      { variant: 'soft', color: 'primary', class: 'bg-primary-50 text-primary-700 border border-primary-200 hover:bg-primary-100 hover:border-primary-300' },
+      { variant: 'soft', color: 'secondary', class: 'bg-secondary-50 text-secondary-700 border border-secondary-200 hover:bg-secondary-100 hover:border-secondary-300' },
+      { variant: 'soft', color: 'success', class: 'bg-success-50 text-success-700 border border-success-200 hover:bg-success-100 hover:border-success-300' },
+      { variant: 'soft', color: 'warning', class: 'bg-warning-50 text-warning-700 border border-warning-200 hover:bg-warning-100 hover:border-warning-300' },
+      { variant: 'soft', color: 'danger', class: 'bg-danger-50 text-danger-700 border border-danger-200 hover:bg-danger-100 hover:border-danger-300' },
       /* Shadow */
       { variant: 'shadow', color: 'default', class: 'border-none bg-default-500 text-default-foreground hover:bg-default-600 active:bg-default-700' },
       { variant: 'shadow', color: 'primary', class: 'border-none bg-primary-500 text-primary-foreground hover:bg-primary-600 active:bg-primary-700' },
@@ -197,7 +205,7 @@ export const Button = ({
   variant = 'solid',
   color = 'primary',
   size = 'medium',
-  radius = 'squircle',
+  radius = 'full',
   isDisabled = false,
   isLoading = false,
   icon,

package/src/{ChipInput.tsx → base-components/ChipInput.tsx}

@@ -136,7 +136,7 @@ export const ChipInput = ({
             <div
                 className={cn(
                     'flex flex-wrap items-center gap-1.5 px-3 py-2 rounded-[10px] border bg-surface-0 transition-colors min-h-[42px] cursor-text',
-                    error ? 'border-danger-500' : 'border-border-default focus-within:border-primary-500',
+                    error ? 'border-danger-500 hover:border-danger-500' : 'border-border-default hover:border-gray-300 focus-within:border-gray-300',
                     disabled && 'opacity-50 pointer-events-none'
                 )}
                 onClick={() => inputRef.current?.focus()}

package/src/base-components/DateLabel.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+
+export interface DateLabelProps {
+  date: string | Date;
+  className?: string;
+}
+
+export function DateLabel({ date, className = '' }: DateLabelProps) {
+  if (!date) return <span className="text-gray-300">-</span>;
+
+  const d = new Date(date);
+  
+  // Format to "2026-05-07 4:35PM"
+  const year = d.getFullYear();
+  const month = String(d.getMonth() + 1).padStart(2, '0');
+  const day = String(d.getDate()).padStart(2, '0');
+  let hours = d.getHours();
+  const minutes = String(d.getMinutes()).padStart(2, '0');
+  const ampm = hours >= 12 ? 'PM' : 'AM';
+  hours = hours % 12;
+  hours = hours ? hours : 12; // the hour '0' should be '12'
+  
+  const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}${ampm}`;
+
+  // Calculate relative time
+  const now = new Date();
+  const diffInSeconds = Math.floor((now.getTime() - d.getTime()) / 1000);
+  
+  let relativeText = null;
+
+  if (diffInSeconds < 60) {
+    relativeText = 'just now';
+  } else if (diffInSeconds < 3600) {
+    const mins = Math.floor(diffInSeconds / 60);
+    relativeText = `${mins} min${mins !== 1 ? 's' : ''} ago`;
+  } else if (diffInSeconds < 86400) {
+    // Less than 24 hours ago
+    const hours = Math.floor(diffInSeconds / 3600);
+    
+    // Check if it's the same calendar day or previous
+    const isSameDay = now.getDate() === d.getDate() && now.getMonth() === d.getMonth() && now.getFullYear() === d.getFullYear();
+    
+    if (isSameDay) {
+      relativeText = `${hours} hour${hours !== 1 ? 's' : ''} ago`;
+    } else {
+      relativeText = 'yesterday';
+    }
+  } else if (diffInSeconds < 172800) {
+    // Between 24 and 48 hours ago
+    const yesterday = new Date(now);
+    yesterday.setDate(now.getDate() - 1);
+    
+    const isYesterday = yesterday.getDate() === d.getDate() && yesterday.getMonth() === d.getMonth() && yesterday.getFullYear() === d.getFullYear();
+    
+    if (isYesterday) {
+      relativeText = 'yesterday';
+    }
+  }
+
+  return (
+    <div className={`flex flex-col ${className}`}>
+      <span className="text-gray-600 font-medium whitespace-nowrap">{formattedDate}</span>
+      {relativeText && (
+        <span className="text-[10.5px] text-gray-400 font-semibold">{relativeText}</span>
+      )}
+    </div>
+  );
+}

package/src/base-components/DateRangePicker.tsx

@@ -0,0 +1,392 @@
+'use client';
+
+import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import { createPortal } from 'react-dom';
+import { Calendar, ChevronDown, X, Check } from 'lucide-react';
+import { cn } from '@apptimate/core-lib';
+
+// ── Preset definitions ──────────────────────────────────────────────
+export type DateRangePresetKey =
+  | 'today'
+  | 'yesterday'
+  | 'this_week'
+  | 'last_7_days'
+  | 'this_month'
+  | 'last_30_days'
+  | 'this_year'
+  | 'custom';
+
+export interface DateRange {
+  from: string; // YYYY-MM-DD
+  to: string;   // YYYY-MM-DD
+}
+
+export interface DateRangePreset {
+  key: DateRangePresetKey;
+  label: string;
+  resolve: () => DateRange;
+}
+
+const fmt = (d: Date): string => {
+  const y = d.getFullYear();
+  const m = String(d.getMonth() + 1).padStart(2, '0');
+  const day = String(d.getDate()).padStart(2, '0');
+  return `${y}-${m}-${day}`;
+};
+
+const today = (): Date => {
+  const d = new Date();
+  d.setHours(0, 0, 0, 0);
+  return d;
+};
+
+const PRESETS: DateRangePreset[] = [
+  {
+    key: 'today',
+    label: 'Today',
+    resolve: () => {
+      const d = fmt(today());
+      return { from: d, to: d };
+    },
+  },
+  {
+    key: 'yesterday',
+    label: 'Yesterday',
+    resolve: () => {
+      const d = today();
+      d.setDate(d.getDate() - 1);
+      const s = fmt(d);
+      return { from: s, to: s };
+    },
+  },
+  {
+    key: 'this_week',
+    label: 'This Week',
+    resolve: () => {
+      const d = today();
+      const day = d.getDay(); // 0=Sun
+      const diff = day === 0 ? 6 : day - 1; // monday start
+      const start = new Date(d);
+      start.setDate(d.getDate() - diff);
+      return { from: fmt(start), to: fmt(d) };
+    },
+  },
+  {
+    key: 'last_7_days',
+    label: 'Last 7 Days',
+    resolve: () => {
+      const d = today();
+      const start = new Date(d);
+      start.setDate(d.getDate() - 6);
+      return { from: fmt(start), to: fmt(d) };
+    },
+  },
+  {
+    key: 'this_month',
+    label: 'This Month',
+    resolve: () => {
+      const d = today();
+      const start = new Date(d.getFullYear(), d.getMonth(), 1);
+      return { from: fmt(start), to: fmt(d) };
+    },
+  },
+  {
+    key: 'last_30_days',
+    label: 'Last 30 Days',
+    resolve: () => {
+      const d = today();
+      const start = new Date(d);
+      start.setDate(d.getDate() - 29);
+      return { from: fmt(start), to: fmt(d) };
+    },
+  },
+  {
+    key: 'this_year',
+    label: 'This Year',
+    resolve: () => {
+      const d = today();
+      const start = new Date(d.getFullYear(), 0, 1);
+      return { from: fmt(start), to: fmt(d) };
+    },
+  },
+  {
+    key: 'custom',
+    label: 'Custom Range',
+    resolve: () => {
+      const d = fmt(today());
+      return { from: d, to: d };
+    },
+  },
+];
+
+// ── Props ──────────────────────────────────────────────────────────
+export interface DateRangePickerProps {
+  /** Currently selected preset key */
+  value: DateRangePresetKey;
+  /** The resolved from/to dates */
+  dateRange: DateRange;
+  /** Callback when selection changes */
+  onChange: (preset: DateRangePresetKey, range: DateRange) => void;
+  /** Additional className for the trigger */
+  className?: string;
+  /** Alignment of the dropdown */
+  align?: 'left' | 'right';
+}
+
+// ── Helpers ──────────────────────────────────────────────────────────
+const formatDisplayDate = (dateStr: string): string => {
+  if (!dateStr) return '';
+  const d = new Date(dateStr + 'T00:00:00');
+  return d.toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' });
+};
+
+const getDisplayLabel = (preset: DateRangePresetKey, range: DateRange): string => {
+  const p = PRESETS.find((pr) => pr.key === preset);
+  if (!p) return '';
+  if (preset === 'custom') {
+    if (range.from === range.to) return formatDisplayDate(range.from);
+    return `${formatDisplayDate(range.from)} – ${formatDisplayDate(range.to)}`;
+  }
+  return p.label;
+};
+
+// ── Component ──────────────────────────────────────────────────────
+export const DateRangePicker = ({
+  value,
+  dateRange,
+  onChange,
+  className,
+  align = 'left',
+}: DateRangePickerProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [coords, setCoords] = useState({ top: 0, bottom: 0, left: 0, right: 0 });
+  const triggerRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  // Custom-range local state (only used when editing custom)
+  const [customFrom, setCustomFrom] = useState(dateRange.from);
+  const [customTo, setCustomTo] = useState(dateRange.to);
+  const [showCustomPanel, setShowCustomPanel] = useState(value === 'custom');
+
+  // Sync custom state when dateRange changes externally
+  useEffect(() => {
+    setCustomFrom(dateRange.from);
+    setCustomTo(dateRange.to);
+  }, [dateRange.from, dateRange.to]);
+
+  const updatePosition = useCallback(() => {
+    if (triggerRef.current) {
+      const rect = triggerRef.current.getBoundingClientRect();
+      setCoords({
+        top: rect.top + window.scrollY,
+        bottom: rect.bottom + window.scrollY,
+        left: rect.left + window.scrollX,
+        right: window.innerWidth - rect.right - window.scrollX,
+      });
+    }
+  }, []);
+
+  const toggleDropdown = () => {
+    if (!isOpen) {
+      updatePosition();
+      setShowCustomPanel(value === 'custom');
+    }
+    setIsOpen((prev) => !prev);
+  };
+
+  const closeDropdown = () => setIsOpen(false);
+
+  // Close on outside click
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      const target = e.target as Element;
+      const clickedTrigger = triggerRef.current?.contains(target as Node);
+      const clickedContent = contentRef.current?.contains(target as Node);
+      if (!clickedTrigger && !clickedContent) {
+        setIsOpen(false);
+      }
+    };
+    const handleScroll = () => { if (isOpen) updatePosition(); };
+    const handleResize = () => { if (isOpen) updatePosition(); };
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+      window.addEventListener('scroll', handleScroll, true);
+      window.addEventListener('resize', handleResize);
+    }
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      window.removeEventListener('scroll', handleScroll, true);
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [isOpen, updatePosition]);
+
+  const handlePresetClick = (preset: DateRangePreset) => {
+    if (preset.key === 'custom') {
+      setShowCustomPanel(true);
+      return; // don't close, show custom date inputs
+    }
+    const resolved = preset.resolve();
+    onChange(preset.key, resolved);
+    setShowCustomPanel(false);
+    closeDropdown();
+  };
+
+  const handleCustomApply = () => {
+    if (customFrom && customTo) {
+      // ensure from <= to
+      const f = customFrom <= customTo ? customFrom : customTo;
+      const t = customFrom <= customTo ? customTo : customFrom;
+      onChange('custom', { from: f, to: t });
+      closeDropdown();
+    }
+  };
+
+  const displayLabel = useMemo(() => getDisplayLabel(value, dateRange), [value, dateRange]);
+
+  return (
+    <>
+      {/* Trigger */}
+      <div ref={triggerRef} className={cn("relative inline-block", className)}>
+        <button
+          type="button"
+          onClick={toggleDropdown}
+          className={cn(
+            "flex items-center gap-2 px-3 py-2.5 rounded-xl text-[12.5px] font-bold border transition-all",
+            "bg-white border-gray-200 hover:border-gray-300 text-gray-700",
+            isOpen && "border-primary-300 ring-2 ring-primary-100"
+          )}
+        >
+          <Calendar size={14} strokeWidth={2.5} className="text-gray-400 flex-shrink-0" />
+          <span className="truncate max-w-[180px]">{displayLabel}</span>
+          <ChevronDown
+            size={13}
+            strokeWidth={2.5}
+            className={cn(
+              "text-gray-400 transition-transform flex-shrink-0",
+              isOpen && "rotate-180"
+            )}
+          />
+        </button>
+      </div>
+
+      {/* Dropdown via portal */}
+      {isOpen && typeof document !== 'undefined' && createPortal(
+        <div
+          ref={contentRef}
+          style={{
+            position: 'absolute',
+            top: `${coords.bottom}px`,
+            ...(align === 'left'
+              ? { left: `${coords.left}px` }
+              : { right: `${coords.right}px` }),
+          }}
+          className="z-[9999] mt-1.5 rounded-[12px] bg-white border border-gray-200 shadow-[0_8px_30px_rgb(0,0,0,0.12)] animate-in fade-in zoom-in-95 duration-200 overflow-hidden"
+        >
+          <div className="flex">
+            {/* Preset list */}
+            <div className={cn(
+              "py-2 min-w-[180px]",
+              showCustomPanel && "border-r border-gray-100"
+            )}>
+              <p className="px-3 pb-1.5 pt-1 text-[10px] font-bold text-gray-400 uppercase tracking-wider">
+                Date Range
+              </p>
+              {PRESETS.map((preset) => (
+                <button
+                  key={preset.key}
+                  type="button"
+                  onClick={() => handlePresetClick(preset)}
+                  className={cn(
+                    "w-full px-3 py-2 text-[13px] text-left transition-colors flex items-center gap-2",
+                    (value === preset.key && !(preset.key === 'custom' && !showCustomPanel))
+                      ? "bg-primary-50 text-primary-700 font-bold"
+                      : "text-gray-700 hover:bg-gray-50 font-medium"
+                  )}
+                >
+                  {value === preset.key && (
+                    <Check size={13} strokeWidth={3} className="text-primary-600 flex-shrink-0" />
+                  )}
+                  <span className={cn(value !== preset.key && "pl-[21px]")}>
+                    {preset.label}
+                  </span>
+                </button>
+              ))}
+            </div>
+
+            {/* Custom date panel */}
+            {showCustomPanel && (
+              <div className="p-3 min-w-[220px] flex flex-col gap-3">
+                <p className="text-[10px] font-bold text-gray-400 uppercase tracking-wider">
+                  Custom Range
+                </p>
+                <div className="space-y-2">
+                  <div>
+                    <label className="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-1 block">
+                      From
+                    </label>
+                    <input
+                      type="date"
+                      value={customFrom}
+                      onChange={(e) => setCustomFrom(e.target.value)}
+                      className="appearance-none bg-white border border-gray-200 rounded-lg px-3 py-2 text-[12.5px] font-semibold text-gray-700 outline-none transition-all hover:border-gray-300 focus:border-primary-300 focus:ring-2 focus:ring-primary-100 w-full"
+                    />
+                  </div>
+                  <div>
+                    <label className="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-1 block">
+                      To
+                    </label>
+                    <input
+                      type="date"
+                      value={customTo}
+                      onChange={(e) => setCustomTo(e.target.value)}
+                      className="appearance-none bg-white border border-gray-200 rounded-lg px-3 py-2 text-[12.5px] font-semibold text-gray-700 outline-none transition-all hover:border-gray-300 focus:border-primary-300 focus:ring-2 focus:ring-primary-100 w-full"
+                    />
+                  </div>
+                </div>
+                <button
+                  type="button"
+                  onClick={handleCustomApply}
+                  disabled={!customFrom || !customTo}
+                  className={cn(
+                    "w-full py-2 rounded-lg text-[12.5px] font-bold transition-all",
+                    customFrom && customTo
+                      ? "bg-primary-500 text-white hover:bg-primary-600 active:bg-primary-700"
+                      : "bg-gray-100 text-gray-400 cursor-not-allowed"
+                  )}
+                >
+                  Apply Range
+                </button>
+              </div>
+            )}
+          </div>
+
+          {/* Footer showing resolved range */}
+          {value !== 'custom' && (
+            <div className="px-3 py-2 border-t border-gray-100 bg-gray-50/50">
+              <p className="text-[11px] text-gray-500 font-medium">
+                <span className="font-bold text-gray-600">{formatDisplayDate(dateRange.from)}</span>
+                {dateRange.from !== dateRange.to && (
+                  <>
+                    <span className="mx-1">→</span>
+                    <span className="font-bold text-gray-600">{formatDisplayDate(dateRange.to)}</span>
+                  </>
+                )}
+              </p>
+            </div>
+          )}
+        </div>,
+        document.body
+      )}
+    </>
+  );
+};
+
+// ── Utility: resolve a preset key to a DateRange ───────────────────
+export const resolveDateRangePreset = (key: DateRangePresetKey): DateRange => {
+  const preset = PRESETS.find((p) => p.key === key);
+  if (!preset) return { from: fmt(today()), to: fmt(today()) };
+  return preset.resolve();
+};
+
+DateRangePicker.displayName = 'DateRangePicker';

package/src/base-components/DesktopFilterPopover.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { SlidersHorizontal } from 'lucide-react';
+import { Dropdown } from './Dropdown';
+import { Button } from './Button';
+import { cn } from '@apptimate/core-lib';
+
+export interface DesktopFilterPopoverProps {
+    /** Content to render inside the filter popover (typically Select components) */
+    children: React.ReactNode;
+    /** Custom label for the trigger button aria-label */
+    label?: string;
+    /** Additional class for outer wrapper */
+    className?: string;
+    /** Additional class for the trigger button */
+    triggerClassName?: string;
+    /** Whether any filter is active — shows a visual indicator dot */
+    hasActiveFilter?: boolean;
+}
+
+export const DesktopFilterPopover = ({
+    children,
+    label = "Filters",
+    className,
+    triggerClassName,
+    hasActiveFilter = false,
+}: DesktopFilterPopoverProps) => {
+    return (
+        <div className={cn("hidden lg:block relative", className)}>
+            <Dropdown
+                align="right"
+                contentClassName="w-[260px] p-3 space-y-3"
+                trigger={
+                    <div className="relative">
+                        <Button
+                            variant="soft"
+                            color="default"
+                            className={cn("!p-0 text-gray-500", triggerClassName)}
+                            icon={<SlidersHorizontal size={18} strokeWidth={2} />}
+                            ariaLabel={label}
+                        />
+                        {hasActiveFilter && (
+                            <span className="absolute -top-0.5 -right-0.5 w-2 h-2 bg-primary-500 rounded-full ring-2 ring-white" />
+                        )}
+                    </div>
+                }
+            >
+                <div onClick={(e) => e.stopPropagation()} className="space-y-3">
+                    {children}
+                </div>
+            </Dropdown>
+        </div>
+    );
+};