@cleen/ui 0.1.0

package/src/components/creditCardInput/util/format.ts

@@ -0,0 +1,102 @@
+export const clearNumber = (value = '') => {
+  return value.replace(/\D+/g, '');
+};
+
+export const getIssuer = (value: string) => {
+  switch (value.slice(0, 2)) {
+    case '34':
+    case '37':
+      return 'amex';
+
+    case '36':
+      return 'dinersclub';
+
+    default:
+      return 'other';
+  }
+};
+
+export function formatCardNumber(
+  value: string,
+  issuer: ReturnType<typeof getIssuer> = 'other'
+) {
+  if (!value) {
+    return value;
+  }
+
+  const clearValue = clearNumber(value);
+  let nextValue;
+
+  switch (issuer) {
+    case 'amex':
+      nextValue = `${clearValue.slice(0, 4)} ${clearValue.slice(4, 10)} ${clearValue.slice(10, 15)}`;
+      break;
+    case 'dinersclub':
+      nextValue = `${clearValue.slice(0, 4)} ${clearValue.slice(4, 10)} ${clearValue.slice(10, 14)}`;
+      break;
+    default:
+      nextValue = `${clearValue.slice(0, 4)} ${clearValue.slice(4, 8)} ${clearValue.slice(8, 12)} ${clearValue.slice(
+        12,
+        19
+      )}`;
+      break;
+  }
+
+  return nextValue.trim();
+}
+
+export const formatCVC = (value: string) => {
+  return clearNumber(value);
+};
+
+export function formatExpirationDate(value: string) {
+  const clearValue = clearNumber(value);
+
+  // If the value is empty or the first character is 2 or greater, return an empty string
+  if (!clearValue || parseInt(clearValue.charAt(0), 10) >= 2) {
+    return '';
+  }
+
+  // If the value is less than 2 characters, return it as is
+  if (clearValue.length < 2) {
+    return clearValue;
+  }
+
+  // Extract the month part
+  const month = clearValue.slice(0, 2);
+
+  // Check if the month is a valid number between 01 and 12
+  if (parseInt(month, 10) < 1 || parseInt(month, 10) > 12) {
+    return clearValue.slice(0, 1); // Return the first digit if the month is invalid
+  }
+
+  // If the value is between 2 and 4 characters, return the formatted MM
+  if (clearValue.length < 3) {
+    return month;
+  }
+
+  // If the value is 3 characters, return month/year format
+  if (clearValue.length === 3) {
+    return `${month}/${clearValue.charAt(2)}`;
+  }
+
+  // Extract the year part
+  const year =
+    clearValue.length === 6 ? clearValue.slice(-2) : clearValue.slice(2, 4);
+
+  // Get the current date
+  const now = new Date();
+  const currentYear = now.getFullYear() % 100; // Get last two digits of the current year
+  const currentMonth = now.getMonth() + 1; // Months are 0-based, so add 1
+
+  // Validate the year and month to ensure it's not in the past
+  if (
+    parseInt(year, 10) < currentYear ||
+    (parseInt(year, 10) === currentYear && parseInt(month, 10) < currentMonth)
+  ) {
+    return `${month}/${year.charAt(0)}`; // Return the month part with a single year digit if the year is invalid
+  }
+
+  // Format the expiration date as MM/YY
+  return `${month}/${year}`;
+}

package/src/components/datePicker/DatePicker.tsx

@@ -0,0 +1,235 @@
+import { Button } from '@/components/button';
+import { Card } from '@/components/card';
+import type { DatePickerProps } from '@/components/datePicker/types/props';
+import { selectMinMaxDate } from '@/components/datePicker/utils/date';
+import { Dropdown } from '@/components/dropdown';
+import { InfoLabels } from '@/components/infoLabels';
+import { cn } from '@cleen/ui-core';
+import { forwardRef, useMemo, useState } from 'react';
+import {
+  DayPicker,
+  type DateRange,
+  type DayPickerProps,
+  type Matcher,
+} from 'react-day-picker';
+
+/**
+ * The `DatePicker` component is a controlled or uncontrolled date selection interface that combines a dropdown trigger with a calendar picker. It supports both single date and date range selection modes with customizable label, optional styling, and class name support for both the wrapper and internal DayPicker component.
+ */
+export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
+  function DatePicker(
+    {
+      label,
+      placeholder,
+      infoLabels,
+      selected,
+      onSelect,
+      leftIcon,
+      rightIcon,
+      className,
+      style,
+      classNames,
+      styles,
+      mode = 'single',
+      min,
+      max,
+      ...props
+    }: DatePickerProps,
+    ref
+  ) {
+    const isControlled = selected !== undefined;
+    const isSingleMode = mode === 'single';
+
+    const [isOpen, setIsOpen] = useState(false);
+    const [internalSingleSelected, setInternalSingleSelected] =
+      useState<Date>();
+    const [internalRangeSelected, setInternalRangeSelected] =
+      useState<DateRange>();
+
+    const currentSelected = isControlled
+      ? selected
+      : isSingleMode
+        ? internalSingleSelected
+        : internalRangeSelected;
+
+    const [dayPickerSelected, setDayPickerSelected] = useState<
+      Date | DateRange
+    >();
+
+    const handleSelect = (value: Date | DateRange | undefined) => {
+      if (!isControlled) {
+        if (isSingleMode && (value === undefined || value instanceof Date)) {
+          setInternalSingleSelected(value as Date);
+        } else if (!isSingleMode) {
+          setInternalRangeSelected(value as DateRange);
+        }
+      }
+
+      if (isSingleMode) {
+        (onSelect as (value?: Date) => void)?.(value as Date);
+      } else {
+        (onSelect as (value?: DateRange) => void)?.(value as DateRange);
+      }
+    };
+
+    const selectorLabel = useMemo(() => {
+      if (!currentSelected) {
+        return placeholder;
+      }
+
+      if (isSingleMode) {
+        return (currentSelected as Date)?.toLocaleDateString();
+      } else {
+        const range = currentSelected as DateRange;
+        if (range.from && range.to) {
+          return `${range.from.toLocaleDateString()} - ${range.to.toLocaleDateString()}`;
+        } else if (range.from) {
+          return range.from.toLocaleDateString();
+        }
+      }
+
+      return placeholder;
+    }, [placeholder, currentSelected, isSingleMode]);
+
+    const sharedProps: Omit<DayPickerProps, 'mode'> = {
+      navLayout: 'around',
+      ...(props as Omit<DayPickerProps, 'classNames' | 'styles' | 'mode'>),
+      className: cn('cleen-text-black', classNames?.datePicker?.className),
+      classNames: {
+        ...classNames?.datePicker?.classNames,
+        nav: cn('cleen-text-error', classNames?.datePicker?.classNames?.nav),
+      },
+      disabled:
+        min || max
+          ? ({
+              before: min === 'today' ? new Date() : min,
+              after: max === 'today' ? new Date() : max,
+            } as Matcher)
+          : undefined,
+      ...styles?.datePicker,
+    };
+
+    return (
+      <div ref={ref} className={cn('cleen', className)} style={style}>
+        {label && (
+          <label
+            className={cn(
+              'cleen-block cleen-mb-1.5 cleen-font-medium cleen-text-gray/90 cleen-text-sm cleen-leading-6',
+              classNames?.label
+            )}
+            style={styles?.label}
+          >
+            {label}
+          </label>
+        )}
+
+        <Dropdown
+          label={selectorLabel}
+          isOpen={isOpen}
+          onOpenChange={value => {
+            setDayPickerSelected(currentSelected);
+            setIsOpen(value);
+          }}
+          leftIcon={leftIcon}
+          rightIcon={rightIcon}
+          className={classNames?.dropdown?.className}
+          classNames={{
+            ...classNames?.dropdown?.classNames,
+            dropdown: cn(
+              'cleen-p-0 cleen-border-0',
+              classNames?.dropdown?.classNames?.dropdown
+            ),
+          }}
+          {...styles?.dropdown}
+        >
+          <Card
+            footer={{
+              hasDivider: true,
+              content: (
+                <div className="cleen-flex cleen-justify-between cleen-items-center">
+                  <Button
+                    variant="secondary"
+                    onClick={() => setIsOpen(false)}
+                    styles={{
+                      container: {
+                        minWidth: 'max-content',
+                      },
+                    }}
+                  >
+                    Close
+                  </Button>
+
+                  <Button
+                    onClick={() => {
+                      handleSelect(dayPickerSelected);
+                      setIsOpen(false);
+                    }}
+                    styles={{
+                      container: {
+                        minWidth: 'max-content',
+                      },
+                    }}
+                  >
+                    Apply
+                  </Button>
+                </div>
+              ),
+            }}
+            {...classNames?.card}
+            {...styles?.card}
+          >
+            {isSingleMode ? (
+              <DayPicker
+                mode="single"
+                {...sharedProps}
+                selected={dayPickerSelected as Date | undefined}
+                onSelect={(date?: Date) => {
+                  if (min || max) {
+                    setDayPickerSelected(
+                      selectMinMaxDate(date, {
+                        min: min as Date | 'today',
+                        max: max as Date | 'today',
+                      })
+                    );
+
+                    return;
+                  }
+
+                  setDayPickerSelected(date);
+                }}
+              />
+            ) : (
+              <DayPicker
+                mode="range"
+                {...sharedProps}
+                selected={dayPickerSelected as DateRange | undefined}
+                onSelect={(range?: DateRange) => {
+                  if (min || max) {
+                    setDayPickerSelected({
+                      from: selectMinMaxDate(range?.from, {
+                        min: min as Date | 'today',
+                        max: max as Date | 'today',
+                      }),
+                      to: selectMinMaxDate(range?.to, {
+                        min: min as Date | 'today',
+                        max: max as Date | 'today',
+                      }),
+                    });
+
+                    return;
+                  }
+
+                  setDayPickerSelected(range);
+                }}
+              />
+            )}
+          </Card>
+        </Dropdown>
+
+        {(infoLabels?.errorMessage ||
+          infoLabels?.infoMessage ||
+          infoLabels?.subtitle) && <InfoLabels {...infoLabels} />}
+      </div>
+    );
+  }
+);

package/src/components/datePicker/index.ts

@@ -0,0 +1,2 @@
+export { DatePicker } from './DatePicker';
+export { type DatePickerProps } from './types/props';

package/src/components/datePicker/types/props.ts

@@ -0,0 +1,47 @@
+import type { CardProps } from '@/components/card/Card';
+import type { DropdownProps } from '@/components/dropdown/Dropdown';
+import type { InfoLabelsProps } from '@/components/infoLabels/InfoLabels';
+import type { ComponentClassnames, ComponentStyles } from '@cleen/ui-core';
+import { type CSSProperties, type ReactNode } from 'react';
+import type { DateRange, DayPickerProps } from 'react-day-picker';
+
+export type DatePickerMode = 'single' | 'range';
+
+export type DatePickerBase = Omit<
+  DayPickerProps,
+  'classNames' | 'styles' | 'mode'
+> & {
+  label?: ReactNode;
+  placeholder?: ReactNode;
+  min?: Date | 'today';
+  max?: Date | 'today';
+  infoLabels?: InfoLabelsProps;
+  leftIcon?: ReactNode;
+  rightIcon?: ReactNode;
+  classNames?: {
+    label?: string;
+    dropdown?: ComponentClassnames<DropdownProps>;
+    card?: ComponentClassnames<CardProps>;
+    datePicker?: ComponentClassnames<DayPickerProps>;
+  };
+  styles?: {
+    label?: CSSProperties;
+    dropdown?: ComponentStyles<DropdownProps>;
+    card?: ComponentStyles<CardProps>;
+    datePicker?: ComponentStyles<DayPickerProps>;
+  };
+};
+
+export type DatePickerSingleProps = DatePickerBase & {
+  mode?: 'single';
+  selected?: Date;
+  onSelect?: (value?: Date) => void;
+};
+
+export type DatePickerRangeProps = DatePickerBase & {
+  mode?: 'range';
+  selected?: DateRange;
+  onSelect?: (value?: DateRange) => void;
+};
+
+export type DatePickerProps = DatePickerSingleProps | DatePickerRangeProps;

package/src/components/datePicker/utils/date.ts

@@ -0,0 +1,40 @@
+type SelectMinMaxDate = (
+  date?: Date,
+  minimax?: {
+    min?: Date | 'today';
+    max?: Date | 'today';
+  }
+) => Date | undefined;
+
+export const selectMinMaxDate: SelectMinMaxDate = (date, minimax) => {
+  if (!date) {
+    return undefined;
+  }
+
+  if (!minimax || (!minimax.min && !minimax.max)) {
+    return date;
+  }
+
+  const { min, max } = minimax;
+
+  const now = new Date();
+  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+
+  if (min) {
+    const minDate = min === 'today' ? today : min;
+
+    if (minDate >= date) {
+      return minDate;
+    }
+  }
+
+  if (max) {
+    const maxDate = max === 'today' ? today : max;
+
+    if (maxDate <= date) {
+      return maxDate;
+    }
+  }
+
+  return date;
+};

package/src/components/divider/Divider.tsx

@@ -0,0 +1,43 @@
+import { cn } from '@cleen/ui-core';
+import type { ComponentProps, CSSProperties } from 'react';
+
+export interface DividerProps extends ComponentProps<'div'> {
+  isHorizontal?: boolean;
+  classNames?: {
+    container?: string;
+  };
+  styles?: {
+    container?: CSSProperties;
+  };
+}
+
+/**
+ * The `Divider` component renders a thin horizontal or vertical separator line.
+ *
+ * - Set `isHorizontal` to `false` to render a vertical divider (defaults to `true`).
+ * - Accepts `classNames` and `styles` to customize: `container`.
+ */
+export const Divider = ({
+  isHorizontal = true,
+  className,
+  classNames,
+  style,
+  styles,
+  ...props
+}: DividerProps) => {
+  return (
+    <div className={cn('cleen', className)} style={style}>
+      <div
+        className={cn(
+          'cleen-bg-gray/10 cleen-my-0',
+          isHorizontal
+            ? 'cleen-w-full cleen-h-[1px]'
+            : 'cleen-w-[1px] cleen-h-full',
+          classNames?.container
+        )}
+        style={styles?.container}
+        {...props}
+      />
+    </div>
+  );
+};

package/src/components/divider/index.ts

@@ -0,0 +1 @@
+export { Divider, type DividerProps } from './Divider';

package/src/components/drawer/Drawer.tsx

@@ -0,0 +1,222 @@
+import { IconXClose } from '@/components/cleenIcon';
+import {
+  forwardRef,
+  useEffect,
+  useRef,
+  useState,
+  type ComponentProps,
+  type CSSProperties,
+  type ReactNode,
+} from 'react';
+import { createPortal } from 'react-dom';
+import { cn } from '@cleen/ui-core';
+
+const sizes = {
+  xs: 320,
+  sm: 384,
+  md: 448,
+  lg: 512,
+  xl: 576,
+  '2xl': 672,
+  '3xl': 768,
+};
+
+const TRANSITION_DURATION = 300;
+
+export type DrawerProps = Omit<ComponentProps<'div'>, 'title'> & {
+  title?: ReactNode;
+  subtitle?: ReactNode;
+  headerCloseBtn?: ReactNode;
+  footer?: ReactNode;
+  isOpen?: boolean;
+  onClose?: () => void;
+  closeOnOverlayClick?: boolean;
+  zIndex?: number;
+  size?: keyof typeof sizes | number;
+  p?: number;
+  gap?: number;
+  classNames?: {
+    overlay?: string;
+    drawer?: string;
+    header?: string;
+    title?: string;
+    subtitle?: string;
+    content?: string;
+    footer?: string;
+  };
+  styles?: {
+    overlay?: CSSProperties;
+    drawer?: CSSProperties;
+    header?: CSSProperties;
+    title?: CSSProperties;
+    subtitle?: CSSProperties;
+    content?: CSSProperties;
+    footer?: CSSProperties;
+  };
+};
+
+/**
+ * A right-anchored slide-over panel (drawer) for presenting contextual UI.
+ *
+ * - Controlled via `isOpen` (boolean) and `onClose` (callback).
+ * - Renders a clickable overlay/backdrop that closes the drawer when clicked.
+ * - Supports an optional `title`, `subtitle`, custom `headerCloseBtn`, `footer`, and `children` for the content area.
+ * - Accepts `classNames` and `styles` objects to customize classes and inline styles for:
+ *   `overlay`, `drawer`, `header`, `title`, `subtitle`, `content`, and `footer`.
+ * - Forwards remaining div props and a ref to the root element.
+ */
+export const Drawer = forwardRef<HTMLDivElement, DrawerProps>(function Drawer(
+  {
+    title,
+    subtitle,
+    children,
+    headerCloseBtn,
+    footer,
+    isOpen = false,
+    onClose,
+    closeOnOverlayClick = true,
+    zIndex = 50,
+    size = 'lg',
+    p,
+    gap,
+    className,
+    classNames,
+    style,
+    styles,
+    ...props
+  },
+  ref
+) {
+  const [isVisible, setIsVisible] = useState(isOpen);
+  const [shouldRender, setShouldRender] = useState(isOpen);
+  const internalRef = useRef<HTMLDivElement>(null);
+
+  const closeDrawer = () => {
+    setIsVisible(false);
+    setTimeout(() => onClose?.(), TRANSITION_DURATION);
+  };
+
+  useEffect(() => {
+    if (isOpen) {
+      setShouldRender(true);
+      const timer = setTimeout(() => setIsVisible(true), 1);
+      return () => clearTimeout(timer);
+    } else {
+      setIsVisible(false);
+      const timer = setTimeout(
+        () => setShouldRender(false),
+        TRANSITION_DURATION
+      );
+      return () => clearTimeout(timer);
+    }
+  }, [isOpen]);
+
+  if (!shouldRender) {
+    return null;
+  }
+
+  return createPortal(
+    <div className={cn('cleen', className)} style={style} ref={ref} {...props}>
+      {/* Overlay */}
+      <div
+        className={cn(
+          'cleen-fixed cleen-inset-0 cleen-bg-black/50 dark:cleen-bg-white/50 cleen-transition-opacity cleen-duration-300 cleen-ease-in-out',
+          isVisible ? 'cleen-opacity-100' : 'cleen-opacity-0',
+          classNames?.overlay
+        )}
+        onClick={() => {
+          if (closeOnOverlayClick) {
+            closeDrawer();
+          }
+        }}
+        style={{ zIndex: zIndex - 1, ...styles?.overlay }}
+        aria-hidden="true"
+      />
+
+      {/* Drawer */}
+      <div
+        className={cn(
+          'cleen-top-0 cleen-right-0 cleen-fixed cleen-flex cleen-flex-col cleen-gap-6 cleen-bg-white cleen-shadow-l cleen-h-screen cleen-transition-transform cleen-duration-300 cleen-ease-in-out cleen-transform',
+          isVisible ? 'cleen-translate-x-0' : 'cleen-translate-x-full',
+          classNames?.drawer
+        )}
+        style={{
+          zIndex,
+          width: typeof size === 'number' ? size : sizes[size],
+          ...(gap !== undefined && { gap }),
+          ...styles?.drawer,
+        }}
+        ref={internalRef}
+      >
+        <div
+          className={cn(
+            'cleen-flex cleen-justify-between cleen-items-center cleen-px-6 cleen-pt-6 cleen-w-full',
+            classNames?.header
+          )}
+          style={{
+            ...(p !== undefined && { paddingInline: p, paddingTop: p }),
+            ...styles?.header,
+          }}
+        >
+          <div className="cleen-flex cleen-flex-col">
+            <span
+              className={cn(
+                'cleen-font-semibold cleen-text-gray cleen-text-xl',
+                classNames?.title
+              )}
+              style={styles?.title}
+            >
+              {title}
+            </span>
+
+            <span
+              className={cn(
+                'cleen-font-normal cleen-text-gray/60 cleen-text-sm',
+                classNames?.subtitle
+              )}
+              style={styles?.subtitle}
+            >
+              {subtitle}
+            </span>
+          </div>
+
+          {headerCloseBtn || (
+            <IconXClose
+              onClick={closeDrawer}
+              className={'cleen-mb-auto cleen-size-5 cleen-cursor-pointer'}
+            />
+          )}
+        </div>
+
+        <div
+          className={cn(
+            'cleen-flex-1 cleen-px-6 cleen-overflow-y-auto cleen-no-scrollbar',
+            classNames?.content
+          )}
+          style={{
+            ...(p !== undefined && { paddingInline: p }),
+            ...styles?.content,
+          }}
+        >
+          {children}
+        </div>
+
+        {footer && (
+          <div
+            className={cn(
+              'cleen-flex cleen-justify-end cleen-items-center cleen-gap-2 cleen-bg-sidebar cleen-px-6 cleen-py-4 cleen-border-gray/10 cleen-border-t',
+              classNames?.footer
+            )}
+            style={{
+              ...(p !== undefined && { paddingInline: p, paddingBlock: gap }),
+              ...styles?.footer,
+            }}
+          >
+            {footer}
+          </div>
+        )}
+      </div>
+    </div>,
+    document.body
+  );
+});

package/src/components/drawer/index.ts

@@ -0,0 +1 @@
+export { Drawer, type DrawerProps } from './Drawer';