@campxdev/react-blueprint 3.0.0-alpha.4 → 3.0.0-alpha.6

package/src/components/Input/Button/Button.tsx

@@ -13,6 +13,32 @@ export type ButtonProps = React.ComponentProps<'button'> &
     fullWidth?: boolean;
   };
 
+/**
+ * Button component with enhanced features
+ *
+ * A customizable button component that wraps the shadcn Button with additional
+ * functionality including loading states, icons, and full width options.
+ *
+ * @component
+ * @param {ButtonProps} props - The button properties
+ * @param {boolean} [props.loading=false] - Whether the button is in a loading state
+ * @param {ReactNode} [props.startIcon] - Icon to display at the start of the button
+ * @param {ReactNode} [props.endIcon] - Icon to display at the end of the button
+ * @param {boolean} [props.fullWidth=false] - Whether the button should take full width
+ * @param {boolean} [props.disabled] - Whether the button is disabled
+ * @param {ReactNode} [props.children] - The button content/label
+ * @param {string} [props.className] - Additional CSS classes to apply
+ * @param {string} [props.variant] - Button style variant from buttonVariants
+ * @param {string} [props.size] - Button size variant from buttonVariants
+ * @returns {React.ReactElement} The rendered button element
+ *
+ * @example
+ * ```tsx
+ * <Button loading={isLoading} startIcon={<SendIcon />} variant="default">
+ *   Submit
+ * </Button>
+ * ```
+ */
 export const Button = ({
   loading = false,
   disabled,

package/src/components/Input/Button/ButtonLoader.css

@@ -4,9 +4,9 @@
   padding: 10px 20px;
   font-size: '14px';
   aspect-ratio: 2.5;
-  --_g: no-repeat radial-gradient(farthest-side, #fff 90%, #fff);
+  --_g: no-repeat radial-gradient(circle, currentColor 48%, #0000);
   background: var(--_g), var(--_g), var(--_g), var(--_g);
-  background-size: 20% 50%;
+  background-size: 15% 40%;
   animation: l44 1s infinite linear alternate;
   scale: 0.5;
 }

package/src/components/Input/DatePicker/DatePicker.tsx

@@ -1,16 +1,5 @@
-import { cn } from '@/lib/utils';
-import { Calendar } from '@/shadcn-components/Input/Calendar/Calendar';
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/shadcn-components/Input/Popover/Popover';
-import { format as DateFnsFormat } from 'date-fns';
-import { CalendarDays } from 'lucide-react';
-import { cloneElement, useEffect, useRef, useState } from 'react';
-import { Typography } from '../../DataDisplay/Typography/Typography';
-import { Button } from '../Button/Button';
-import { LabelWrapper } from '../LabelWrapper/LabelWrapper';
+import { DatePickerFilter } from './components/DatePickerFilter';
+import { DatePickerInput } from './components/DatePickerInput';
 
 type DateFormat = 'yyyy' | 'MMMM yyyy' | 'dd MMMM yyyy' | 'dd/MM/yyyy';
 
@@ -40,185 +29,58 @@ export type DatePickerProps = {
   onClose?: () => void;
   onBlur?: React.FocusEventHandler;
   fullWidth?: boolean;
+  type?: 'input' | 'filter';
   [key: string]: any;
 };
 
+/**
+ * DatePicker component for date selection
+ *
+ * A flexible date picker component that supports both input and filter modes,
+ * with customizable date formats, restrictions, and shortcuts.
+ *
+ * @component
+ * @param {DatePickerProps} props - The date picker properties
+ * @param {React.ReactNode | string} [props.label] - Label for the date picker
+ * @param {string} [props.name] - Name attribute for the input
+ * @param {Date} [props.value] - Currently selected date
+ * @param {(date: Date | undefined) => void} [props.onChange] - Callback fired when date changes
+ * @param {DateFormat} [props.format='dd/MM/yyyy'] - Date format for display
+ * @param {string} [props.placeholder] - Placeholder text
+ * @param {string} [props.helperText] - Helper text below the input
+ * @param {boolean} [props.required] - Whether the field is required
+ * @param {boolean} [props.disabled] - Whether the picker is disabled
+ * @param {Date} [props.minDate] - Minimum selectable date
+ * @param {Date} [props.maxDate] - Maximum selectable date
+ * @param {boolean} [props.disablePast] - Whether past dates are disabled
+ * @param {boolean} [props.disableFuture] - Whether future dates are disabled
+ * @param {(date: Date) => boolean} [props.shouldDisableDate] - Custom date disable logic
+ * @param {(date: Date) => boolean} [props.shouldDisableMonth] - Custom month disable logic
+ * @param {(date: Date) => boolean} [props.shouldDisableYear] - Custom year disable logic
+ * @param {boolean} [props.fullWidth] - Whether the picker takes full width
+ * @param {'input' | 'filter'} [props.type='input'] - Display type of the picker
+ * @param {() => void} [props.onOpen] - Callback when picker opens
+ * @param {() => void} [props.onClose] - Callback when picker closes
+ * @returns {React.ReactElement} The rendered date picker component
+ *
+ * @example
+ * ```tsx
+ * <DatePicker
+ *   label="Select Date"
+ *   value={date}
+ *   onChange={setDate}
+ *   format="dd/MM/yyyy"
+ *   required
+ * />
+ * ```
+ */
 export const DatePicker = ({
-  label,
-  name,
-  value,
-  onChange,
-  required = false,
-  format = 'dd/MM/yyyy',
-  helperText,
-  placeholder = 'Pick a date',
-  shortcutsItems = [],
-  openPickerIcon: Icon = <CalendarDays />,
-  containerProps,
-  error,
-  disabled = false,
-  minDate,
-  maxDate,
-  disablePast = false,
-  disableFuture = false,
-  shouldDisableDate,
-  shouldDisableMonth,
-  shouldDisableYear,
-  className,
-  onOpen,
-  onClose,
-  fullWidth,
-  ...rest
+  type = 'input',
+  ...props
 }: DatePickerProps) => {
-  const [open, setOpen] = useState(false);
-  const [date, setDate] = useState<Date | undefined>(value);
-  const wrapperRef = useRef<HTMLSpanElement>(null);
+  if (type === 'filter') {
+    return <DatePickerFilter {...props} />;
+  }
 
-  const formatDateString = (date: Date | undefined) => {
-    if (!date) return '';
-
-    try {
-      return DateFnsFormat(date, format);
-    } catch {
-      return DateFnsFormat(date, 'dd/MM/yyyy');
-    }
-  };
-
-  const handleOpenChange = (newOpen: boolean) => {
-    setOpen(newOpen);
-    if (newOpen && onOpen) {
-      onOpen();
-    } else if (!newOpen && onClose) {
-      onClose();
-    }
-  };
-
-  const [, forceUpdate] = useState({});
-  useEffect(() => {
-    forceUpdate({});
-  }, []);
-
-  return (
-    <LabelWrapper
-      label={label}
-      required={required}
-      name={name}
-      containerProps={{
-        ...(fullWidth && { style: { width: '100%' } }),
-        ...containerProps,
-      }}
-    >
-      <Popover open={open} onOpenChange={handleOpenChange}>
-        <PopoverTrigger asChild>
-          <span
-            ref={wrapperRef}
-            style={{ display: fullWidth ? 'block' : 'inline-block' }}
-          >
-            <Button
-              variant="input"
-              className={cn(
-                'justify-between text-left font-normal',
-                !date && 'text-muted-foreground',
-                error && 'border-destructive',
-                fullWidth ? 'w-full' : 'w-auto',
-                className,
-              )}
-              disabled={disabled}
-              {...rest}
-            >
-              <span>{date ? formatDateString(date) : placeholder}</span>
-              {Icon &&
-                cloneElement(Icon as React.ReactElement, {
-                  className: 'ml-2 h-4 w-4',
-                })}
-            </Button>
-          </span>
-        </PopoverTrigger>
-        <PopoverContent className="w-auto p-0" align="start">
-          <div className="flex flex-col">
-            {/* Shortcuts */}
-            {shortcutsItems.length > 0 && (
-              <div className="border-b p-2">
-                <div className="flex flex-wrap gap-1">
-                  {shortcutsItems.map((shortcut, index) => (
-                    <Button
-                      key={index}
-                      variant="outline"
-                      size="sm"
-                      onClick={() => {
-                        const newDate = shortcut.getValue();
-                        onChange?.(newDate);
-                        setDate(newDate);
-                        setOpen(false);
-                      }}
-                    >
-                      {shortcut.label}
-                    </Button>
-                  ))}
-                </div>
-              </div>
-            )}
-
-            {/* Calendar */}
-            <Calendar
-              mode="single"
-              selected={date}
-              onSelect={(date) => {
-                onChange?.(date);
-                setDate(date);
-              }}
-              disabled={(date) => {
-                // Start of today for comparison
-                const today = new Date();
-                today.setHours(0, 0, 0, 0);
-                const compareDate = new Date(date);
-                compareDate.setHours(0, 0, 0, 0);
-
-                // Check min/max dates
-                if (minDate) {
-                  const min = new Date(minDate);
-                  min.setHours(0, 0, 0, 0);
-                  if (compareDate < min) return true;
-                }
-                if (maxDate) {
-                  const max = new Date(maxDate);
-                  max.setHours(0, 0, 0, 0);
-                  if (compareDate > max) return true;
-                }
-
-                // Check disablePast
-                if (disablePast && compareDate < today) return true;
-
-                // Check disableFuture
-                if (disableFuture && compareDate > today) return true;
-
-                // Check custom date disable function
-                if (shouldDisableDate && shouldDisableDate(date)) return true;
-
-                // Check month disable function
-                if (shouldDisableMonth && shouldDisableMonth(date)) return true;
-
-                // Check year disable function
-                if (shouldDisableYear && shouldDisableYear(date)) return true;
-
-                return false;
-              }}
-              captionLayout={'dropdown'}
-              defaultMonth={date}
-            />
-          </div>
-        </PopoverContent>
-      </Popover>
-
-      {/* Helper Text / Error */}
-      {(helperText || error) && (
-        <Typography
-          variant="small"
-          className={cn('ml-1 mt-1', error && 'text-destructive')}
-        >
-          {typeof error === 'string' ? error : error?.message || helperText}
-        </Typography>
-      )}
-    </LabelWrapper>
-  );
+  return <DatePickerInput {...props} />;
 };

package/src/components/Input/DatePicker/components/DatePickerFilter.tsx

@@ -0,0 +1,178 @@
+import { Separator } from '@/components/DataDisplay/Separator/Separator';
+import { cn } from '@/lib/utils';
+import { Calendar } from '@/shadcn-components/Input/Calendar/Calendar';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/shadcn-components/Input/Popover/Popover';
+import { format as DateFnsFormat } from 'date-fns';
+import { CalendarDays } from 'lucide-react';
+import { useEffect, useRef, useState } from 'react';
+import { Button } from '../../Button/Button';
+import { DatePickerProps } from '../DatePicker';
+
+export const DatePickerFilter = ({
+  label,
+  value,
+  onChange,
+  format = 'dd/MM/yyyy',
+  placeholder = 'Pick a date',
+  shortcutsItems = [],
+  openPickerIcon: Icon = <CalendarDays />,
+  disabled = false,
+  minDate,
+  maxDate,
+  disablePast = false,
+  disableFuture = false,
+  shouldDisableDate,
+  shouldDisableMonth,
+  shouldDisableYear,
+  className,
+  onOpen,
+  onClose,
+  fullWidth,
+  type,
+  ...rest
+}: DatePickerProps) => {
+  const [open, setOpen] = useState(false);
+  const wrapperRef = useRef<HTMLSpanElement>(null);
+
+  const formatDateString = (date: Date | undefined) => {
+    if (!date) return '';
+
+    try {
+      return DateFnsFormat(date, format);
+    } catch {
+      return DateFnsFormat(date, 'dd/MM/yyyy');
+    }
+  };
+
+  const handleOpenChange = (newOpen: boolean) => {
+    setOpen(newOpen);
+    if (newOpen && onOpen) {
+      onOpen();
+    } else if (!newOpen && onClose) {
+      onClose();
+    }
+  };
+
+  const handleClear = () => {
+    onChange?.(undefined);
+    setOpen(false);
+  };
+
+  // Force re-render on mount to ensure positioning works
+  const [, forceUpdate] = useState({});
+  useEffect(() => {
+    forceUpdate({});
+  }, []);
+
+  const hasValue = !!value;
+  const displayText = hasValue ? `${label} = ${formatDateString(value)}` : label;
+
+  return (
+    <Popover open={open} onOpenChange={handleOpenChange}>
+      <PopoverTrigger asChild>
+        <span
+          ref={wrapperRef}
+          style={{ display: fullWidth ? 'block' : 'inline-block' }}
+        >
+          <Button
+            variant={hasValue ? 'default' : 'input'}
+            className={cn(
+              'justify-between',
+              fullWidth ? 'w-full' : '',
+              className,
+            )}
+            disabled={disabled}
+            {...rest}
+          >
+            {displayText || placeholder}
+            <CalendarDays className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+          </Button>
+        </span>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0" align="start">
+        <div className="flex flex-col">
+          {/* Shortcuts */}
+          {shortcutsItems.length > 0 && (
+            <div className="border-b p-2">
+              <div className="flex flex-wrap gap-1">
+                {shortcutsItems.map((shortcut, index) => (
+                  <Button
+                    key={index}
+                    variant="outline"
+                    size="sm"
+                    onClick={() => {
+                      const newDate = shortcut.getValue();
+                      onChange?.(newDate);
+                      setOpen(false);
+                    }}
+                  >
+                    {shortcut.label}
+                  </Button>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Calendar */}
+          <Calendar
+            mode="single"
+            selected={value}
+            onSelect={(date) => {
+              onChange?.(date);
+            }}
+            disabled={(date) => {
+              // Start of today for comparison
+              const today = new Date();
+              today.setHours(0, 0, 0, 0);
+              const compareDate = new Date(date);
+              compareDate.setHours(0, 0, 0, 0);
+
+              // Check min/max dates
+              if (minDate) {
+                const min = new Date(minDate);
+                min.setHours(0, 0, 0, 0);
+                if (compareDate < min) return true;
+              }
+              if (maxDate) {
+                const max = new Date(maxDate);
+                max.setHours(0, 0, 0, 0);
+                if (compareDate > max) return true;
+              }
+
+              // Check disablePast
+              if (disablePast && compareDate < today) return true;
+
+              // Check disableFuture
+              if (disableFuture && compareDate > today) return true;
+
+              // Check custom date disable function
+              if (shouldDisableDate && shouldDisableDate(date)) return true;
+
+              // Check month disable function
+              if (shouldDisableMonth && shouldDisableMonth(date)) return true;
+
+              // Check year disable function
+              if (shouldDisableYear && shouldDisableYear(date)) return true;
+
+              return false;
+            }}
+            captionLayout={'dropdown'}
+            defaultMonth={value}
+          />
+
+          {/* Clear Button */}
+          <Separator />
+          <div className="flex flex-row items-center justify-left">
+            <Button variant="link" onClick={handleClear} className="min-w-0">
+              Clear
+            </Button>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+};

package/src/components/Input/DatePicker/components/DatePickerInput.tsx

@@ -0,0 +1,192 @@
+import { cn } from '@/lib/utils';
+import { Calendar } from '@/shadcn-components/Input/Calendar/Calendar';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/shadcn-components/Input/Popover/Popover';
+import { format as DateFnsFormat } from 'date-fns';
+import { CalendarDays } from 'lucide-react';
+import { cloneElement, useEffect, useRef, useState } from 'react';
+import { Typography } from '../../../DataDisplay/Typography/Typography';
+import { Button } from '../../Button/Button';
+import { LabelWrapper } from '../../LabelWrapper/LabelWrapper';
+import { DatePickerProps } from '../DatePicker';
+
+export const DatePickerInput = ({
+  label,
+  name,
+  value,
+  onChange,
+  required = false,
+  format = 'dd/MM/yyyy',
+  helperText,
+  placeholder = 'Pick a date',
+  shortcutsItems = [],
+  openPickerIcon: Icon = <CalendarDays />,
+  containerProps,
+  error,
+  disabled = false,
+  minDate,
+  maxDate,
+  disablePast = false,
+  disableFuture = false,
+  shouldDisableDate,
+  shouldDisableMonth,
+  shouldDisableYear,
+  className,
+  onOpen,
+  onClose,
+  fullWidth,
+  type,
+  ...rest
+}: DatePickerProps) => {
+  const [open, setOpen] = useState(false);
+  const wrapperRef = useRef<HTMLSpanElement>(null);
+
+  const formatDateString = (date: Date | undefined) => {
+    if (!date) return '';
+
+    try {
+      return DateFnsFormat(date, format);
+    } catch {
+      return DateFnsFormat(date, 'dd/MM/yyyy');
+    }
+  };
+
+  const handleOpenChange = (newOpen: boolean) => {
+    setOpen(newOpen);
+    if (newOpen && onOpen) {
+      onOpen();
+    } else if (!newOpen && onClose) {
+      onClose();
+    }
+  };
+
+  const [, forceUpdate] = useState({});
+  useEffect(() => {
+    forceUpdate({});
+  }, []);
+
+  return (
+    <LabelWrapper
+      label={label}
+      required={required}
+      name={name}
+      containerProps={{
+        ...(fullWidth && { style: { width: '100%' } }),
+        ...containerProps,
+      }}
+    >
+      <Popover open={open} onOpenChange={handleOpenChange}>
+        <PopoverTrigger asChild>
+          <span
+            ref={wrapperRef}
+            style={{ display: fullWidth ? 'block' : 'inline-block' }}
+          >
+            <Button
+              variant="input"
+              className={cn(
+                'justify-between text-left font-normal',
+                !value && 'text-muted-foreground',
+                error && 'border-destructive',
+                fullWidth ? 'w-full' : 'w-auto',
+                className,
+              )}
+              disabled={disabled}
+              {...rest}
+            >
+              <span>{value ? formatDateString(value) : placeholder}</span>
+              {Icon &&
+                cloneElement(Icon as React.ReactElement, {
+                  className: 'ml-2 h-4 w-4',
+                })}
+            </Button>
+          </span>
+        </PopoverTrigger>
+        <PopoverContent className="w-auto p-0" align="start">
+          <div className="flex flex-col">
+            {/* Shortcuts */}
+            {shortcutsItems.length > 0 && (
+              <div className="border-b p-2">
+                <div className="flex flex-wrap gap-1">
+                  {shortcutsItems.map((shortcut, index) => (
+                    <Button
+                      key={index}
+                      variant="outline"
+                      size="sm"
+                      onClick={() => {
+                        const newDate = shortcut.getValue();
+                        onChange?.(newDate);
+                        setOpen(false);
+                      }}
+                    >
+                      {shortcut.label}
+                    </Button>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* Calendar */}
+            <Calendar
+              mode="single"
+              selected={value}
+              onSelect={(date) => {
+                onChange?.(date);
+              }}
+              disabled={(date) => {
+                // Start of today for comparison
+                const today = new Date();
+                today.setHours(0, 0, 0, 0);
+                const compareDate = new Date(date);
+                compareDate.setHours(0, 0, 0, 0);
+
+                // Check min/max dates
+                if (minDate) {
+                  const min = new Date(minDate);
+                  min.setHours(0, 0, 0, 0);
+                  if (compareDate < min) return true;
+                }
+                if (maxDate) {
+                  const max = new Date(maxDate);
+                  max.setHours(0, 0, 0, 0);
+                  if (compareDate > max) return true;
+                }
+
+                // Check disablePast
+                if (disablePast && compareDate < today) return true;
+
+                // Check disableFuture
+                if (disableFuture && compareDate > today) return true;
+
+                // Check custom date disable function
+                if (shouldDisableDate && shouldDisableDate(date)) return true;
+
+                // Check month disable function
+                if (shouldDisableMonth && shouldDisableMonth(date)) return true;
+
+                // Check year disable function
+                if (shouldDisableYear && shouldDisableYear(date)) return true;
+
+                return false;
+              }}
+              captionLayout={'dropdown'}
+              defaultMonth={value}
+            />
+          </div>
+        </PopoverContent>
+      </Popover>
+
+      {/* Helper Text / Error */}
+      {(helperText || error) && (
+        <Typography
+          variant="small"
+          className={cn('ml-1 mt-1', error && 'text-destructive')}
+        >
+          {typeof error === 'string' ? error : error?.message || helperText}
+        </Typography>
+      )}
+    </LabelWrapper>
+  );
+};