@cleen/ui 0.1.0 → 0.1.2

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

@@ -1,40 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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

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

package/src/components/drawer/Drawer.tsx

@@ -1,222 +0,0 @@
-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

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

package/src/components/dropdown/Dropdown.tsx

@@ -1,224 +0,0 @@
-import { IconChevronDown } from '@/components/cleenIcon';
-import { InfoLabels } from '@/components/infoLabels';
-import type { InfoLabelsProps } from '@/components/infoLabels/InfoLabels';
-import { cn, useOutsideClick, usePositionClose } from '@cleen/ui-core';
-import {
-  forwardRef,
-  useEffect,
-  useRef,
-  useState,
-  type ButtonHTMLAttributes,
-  type ComponentProps,
-  type CSSProperties,
-  type ReactNode,
-} from 'react';
-import { createPortal } from 'react-dom';
-
-export type DropdownProps = Omit<ComponentProps<'div'>, 'title'> & {
-  type?: ButtonHTMLAttributes<HTMLButtonElement>['type'];
-  disabled?: boolean;
-  title?: ReactNode;
-  label?: ReactNode;
-  fullWidth?: boolean;
-  fullWidthDropdown?: boolean;
-  offset?: number;
-  leftIcon?: ReactNode;
-  rightIcon?: ReactNode;
-  isOpen?: boolean;
-  onOpenChange?: (isOpen: boolean) => void;
-  keepOpenOnClickContent?: boolean;
-  infoLabels?: InfoLabelsProps;
-  classNames?: {
-    container?: string;
-    label?: string;
-    title?: string;
-    trigger?: string;
-    dropdown?: string;
-  };
-  styles?: {
-    container?: CSSProperties;
-    label?: CSSProperties;
-    title?: CSSProperties;
-    trigger?: CSSProperties;
-    dropdown?: CSSProperties;
-  };
-};
-
-/**
- * The `Dropdown` component is a button that when clicked, displays a custom dropdown container beneath it.
- * It can be used to trigger actions or display a menu with custom content.
- */
-export const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
-  function Dropdown(
-    {
-      type = 'button',
-      label,
-      title,
-      disabled = false,
-      leftIcon,
-      rightIcon,
-      fullWidth = true,
-      fullWidthDropdown,
-      offset = 4,
-      isOpen,
-      onOpenChange,
-      keepOpenOnClickContent = true,
-      infoLabels,
-      className,
-      classNames,
-      style,
-      styles,
-      children,
-      ...props
-    },
-    ref
-  ) {
-    const [internalIsOpen, setInternalIsOpen] = useState(false);
-    const isCurrentOpen = isOpen !== undefined ? isOpen : internalIsOpen;
-
-    const dropdownRef = useRef<HTMLDivElement>(null);
-    const triggerRef = useRef<HTMLDivElement>(null);
-
-    // Calculate optimal position for the dropdown
-    const { positionStyles, isMounted } = usePositionClose({
-      triggerRef,
-      targetRef: dropdownRef,
-      position: 'bottom-left',
-      isOpen: isCurrentOpen,
-      offset,
-    });
-
-    // Handle click outside to close dropdown
-    useOutsideClick({
-      refs: [dropdownRef, triggerRef],
-      handler: () => {
-        setInternalIsOpen(false);
-        onOpenChange?.(false);
-      },
-      enabled: isCurrentOpen,
-    });
-
-    // Handle escape key
-    useEffect(() => {
-      const handleEscape = (e: KeyboardEvent) => {
-        if (e.key === 'Escape' && isCurrentOpen) {
-          setInternalIsOpen(false);
-          onOpenChange?.(false);
-        }
-      };
-
-      document.addEventListener('keydown', handleEscape);
-      return () => {
-        document.removeEventListener('keydown', handleEscape);
-      };
-    }, [isCurrentOpen, onOpenChange]);
-
-    const handleTriggerClick = () => {
-      const newState = !isCurrentOpen;
-      if (isOpen === undefined) {
-        setInternalIsOpen(newState);
-      }
-      onOpenChange?.(newState);
-    };
-
-    const handleDropdownClick = () => {
-      if (!keepOpenOnClickContent) {
-        const newState = false;
-        if (isOpen === undefined) {
-          setInternalIsOpen(newState);
-        }
-        onOpenChange?.(newState);
-      }
-    };
-
-    return (
-      <div
-        className={cn('cleen', className)}
-        style={style}
-        ref={ref}
-        {...props}
-      >
-        {title && (
-          <label
-            className={cn(
-              'cleen-block cleen-mb-1.5 cleen-font-medium cleen-text-gray/90 cleen-text-sm cleen-leading-6',
-              classNames?.title
-            )}
-            style={styles?.title}
-          >
-            {title}
-          </label>
-        )}
-
-        <div
-          className={cn(
-            'cleen-inline-block cleen-relative',
-            fullWidth && 'cleen-w-full'
-          )}
-          ref={triggerRef}
-        >
-          <button
-            type={type}
-            className={cn(
-              'cleen-flex cleen-justify-between cleen-items-center cleen-gap-2 cleen-bg-background cleen-shadow-sm cleen-my-auto cleen-px-3.5 cleen-py-2.5 cleen-border cleen-border-gray/10 cleen-rounded-md cleen-w-full cleen-text-gray/80 cleen-text-base cleen-transition-colors cleen-duration-200 hover:cleen-bg-gray/5 hover:cleen-border-gray/20',
-              {
-                'cleen-w-full cleen-flex-1': fullWidth,
-                'cleen-opacity-50 cleen-cursor-not-allowed cleen-pointer-events-none':
-                  disabled,
-              },
-              fullWidth && 'cleen-w-full',
-              classNames?.trigger
-            )}
-            style={styles?.trigger}
-            disabled={disabled}
-            onClick={handleTriggerClick}
-          >
-            {leftIcon}
-            <div
-              className={cn('cleen-flex-1 cleen-text-left', classNames?.label)}
-              style={styles?.label}
-            >
-              {label}
-            </div>
-            {rightIcon || <IconChevronDown />}
-          </button>
-        </div>
-
-        {(infoLabels?.errorMessage ||
-          infoLabels?.infoMessage ||
-          infoLabels?.subtitle) && <InfoLabels {...infoLabels} />}
-
-        {children &&
-          isCurrentOpen &&
-          createPortal(
-            <div className="cleen">
-              <div
-                ref={dropdownRef}
-                className={cn(
-                  'cleen-bg-background cleen-shadow-md cleen-p-2.5 cleen-border cleen-border-gray/10 cleen-rounded-lg',
-                  'cleen-fixed cleen-z-50',
-                  {
-                    'cleen-opacity-0': !isMounted,
-                  },
-                  classNames?.dropdown
-                )}
-                style={{
-                  top: `${positionStyles.top}px`,
-                  left: `${positionStyles.left}px`,
-                  minWidth:
-                    fullWidthDropdown && triggerRef.current?.offsetWidth
-                      ? `${triggerRef.current.offsetWidth}px`
-                      : undefined,
-                  ...styles?.dropdown,
-                }}
-                onClick={handleDropdownClick}
-              >
-                {children}
-              </div>
-            </div>,
-            document.body
-          )}
-      </div>
-    );
-  }
-);

package/src/components/dropdown/index.ts

@@ -1 +0,0 @@
-export { Dropdown, type DropdownProps } from './Dropdown';

package/src/components/filterDrawer/FilterDrawer.tsx

@@ -1,147 +0,0 @@
-import { Button } from '@/components/button';
-import { IconTrash } from '@/components/cleenIcon';
-import { Drawer } from '@/components/drawer';
-import { FilterDrawerFooter } from '@/components/filterDrawer/blocks/FilterDrawerFooter';
-import { SavedFiltersDropdown } from '@/components/filterDrawer/blocks/SavedFiltersDropdown';
-import { SaveFilterStep } from '@/components/filterDrawer/blocks/SaveFilterStep';
-import { DEFAULT_FILTER_DRAWER_LABELS } from '@/components/filterDrawer/constants/labels';
-import { FilterDrawerContext } from '@/components/filterDrawer/context/context';
-import { FilterDrawerProvider } from '@/components/filterDrawer/context/provider';
-import { applyDefaults, cn } from '@cleen/ui-core';
-import { forwardRef, useContext } from 'react';
-import type { FilterDrawerProps } from './types/props';
-
-/**
- * A right-anchored slide-over panel (drawer) specialized for filter interfaces.
- *
- * Features:
- * - Standard drawer functionality (open/close, overlay, customizable sections)
- * - Pre-configured footer with Save, Cancel and Apply actions
- * - Clear filters button in header
- * - Customizable labels for all buttons
- * - Accepts all standard Drawer props plus filter-specific callbacks
- */
-export const FilterDrawer = forwardRef<HTMLDivElement, FilterDrawerProps>(
-  function FilterDrawer(
-    {
-      selectedSavedFilter,
-      savedFilters,
-      isFiltersFetching,
-      children,
-      classNames,
-      styles,
-      labels,
-      withSavedFilters = true,
-      onClear,
-      onSave,
-      onCancel,
-      onApply,
-      onClose,
-      filterDateFormatter,
-      onFilterCategoryChange,
-      onFilterDelete,
-      onFilterPin,
-      onFilterSelect,
-      onFilterUnpin,
-      ...props
-    },
-    ref
-  ) {
-    return (
-      <FilterDrawerProvider
-        value={{
-          selectedSavedFilter,
-          savedFilters,
-          isFiltersFetching,
-          classNames,
-          styles,
-          labels: applyDefaults(DEFAULT_FILTER_DRAWER_LABELS, labels),
-          withSavedFilters,
-          onClear,
-          onSave,
-          onCancel,
-          onApply,
-          onClose,
-          filterDateFormatter,
-          onFilterCategoryChange,
-          onFilterDelete,
-          onFilterPin,
-          onFilterSelect,
-          onFilterUnpin,
-        }}
-      >
-        <FilterDrawerInternal {...props} ref={ref}>
-          {children}
-        </FilterDrawerInternal>
-      </FilterDrawerProvider>
-    );
-  }
-);
-
-const FilterDrawerInternal = forwardRef<HTMLDivElement, FilterDrawerProps>(
-  function FilterDrawerInternal({ children, ...props }, ref) {
-    const {
-      handleCloseSaveFilter,
-      isSaveFiltersStep,
-      selectedSavedFilter,
-      savedFilters,
-      isFiltersFetching,
-      classNames,
-      styles,
-      labels,
-      withSavedFilters = true,
-      onClear,
-      onFilterCategoryChange,
-      onFilterSelect,
-    } = useContext(FilterDrawerContext);
-
-    return (
-      <Drawer
-        footer={<FilterDrawerFooter />}
-        headerCloseBtn={
-          <Button
-            onClick={() => {
-              onClear?.();
-              onFilterSelect?.(undefined);
-            }}
-            leftIcon={<IconTrash />}
-            variant="secondary"
-            {...classNames?.clearBtn}
-            {...styles?.clearBtn}
-          >
-            {labels?.clear}
-          </Button>
-        }
-        classNames={{
-          ...classNames,
-          content: cn('cleen-space-y-4', classNames?.content),
-          footer: cn('cleen-justify-between', classNames?.footer),
-        }}
-        onClose={handleCloseSaveFilter}
-        ref={ref}
-        {...props}
-        title={isSaveFiltersStep ? labels?.saveStep?.title : props.title}
-        subtitle={
-          isSaveFiltersStep ? labels?.saveStep?.subtitle : props.subtitle
-        }
-      >
-        {isSaveFiltersStep ? (
-          <SaveFilterStep />
-        ) : (
-          <>
-            {withSavedFilters && (
-              <SavedFiltersDropdown
-                filters={savedFilters}
-                selectedSavedFilter={selectedSavedFilter}
-                onFilterCategoryChange={onFilterCategoryChange}
-                isFiltersFetching={isFiltersFetching}
-              />
-            )}
-
-            {children}
-          </>
-        )}
-      </Drawer>
-    );
-  }
-);