@cleen/ui 0.1.0 → 0.1.2

package/src/components/select/blocks/SelectCustomMenuList.tsx

@@ -1,70 +0,0 @@
-import { Divider } from '@/components/divider';
-import type { ComponentProps } from 'react';
-import { components as SelectComponent } from 'react-select';
-
-export interface SelectCustomMenuListProps extends ComponentProps<
-  typeof SelectComponent.MenuList
-> {
-  isLoading?: boolean;
-  inputValue?: string;
-  createNewOptionCallback?: (value: string) => void;
-  createNewOptionLabelStringCb?: (inputValue: string) => string;
-}
-
-type SelectOption = {
-  label?: React.ReactNode;
-  labelString?: string;
-};
-
-export const SelectCustomMenuList = ({
-  isLoading,
-  inputValue,
-  options,
-  createNewOptionCallback,
-  createNewOptionLabelStringCb,
-  children,
-  ...props
-}: SelectCustomMenuListProps) => {
-  const normalizedInput = inputValue?.trim().toLowerCase();
-
-  const optionExists = (options as SelectOption[])?.some(option => {
-    // Prefer labelString when provided
-    if (option?.labelString) {
-      return option.labelString.toLowerCase() === normalizedInput;
-    }
-
-    // Fallback to legacy string label
-    if (typeof option?.label === 'string') {
-      return option.label.toLowerCase() === normalizedInput;
-    }
-
-    return false;
-  });
-
-  return (
-    <div className="cleen">
-      <SelectComponent.MenuList options={options} {...props}>
-        {children}
-
-        {createNewOptionCallback &&
-          !isLoading &&
-          inputValue &&
-          inputValue?.length > 0 &&
-          !optionExists && (
-            <div className="cleen-flex cleen-flex-col cleen-items-center cleen-justify-center">
-              <Divider />
-
-              <span
-                className="cleen-py-3 cleen-font-semibold cleen-text-sm cleen-text-primary/70 cleen-cursor-pointer"
-                onClick={() => {
-                  createNewOptionCallback(inputValue);
-                }}
-              >
-                {createNewOptionLabelStringCb?.(inputValue) || inputValue}
-              </span>
-            </div>
-          )}
-      </SelectComponent.MenuList>
-    </div>
-  );
-};

package/src/components/select/blocks/SelectNoOptionsMessage.tsx

@@ -1,22 +0,0 @@
-import { Loader } from '@/components/loader';
-import type { ComponentProps } from 'react';
-import { components as SelectComponent } from 'react-select';
-
-export interface SelectNoOptionsMessageProps extends ComponentProps<
-  typeof SelectComponent.NoOptionsMessage
-> {
-  isLoading?: boolean;
-  noDataFound?: string;
-}
-
-export const SelectNoOptionsMessage = ({
-  isLoading,
-  noDataFound,
-  ...props
-}: SelectNoOptionsMessageProps) => {
-  return (
-    <SelectComponent.NoOptionsMessage {...props}>
-      {isLoading ? <Loader /> : noDataFound || 'No data found'}
-    </SelectComponent.NoOptionsMessage>
-  );
-};

package/src/components/select/blocks/SelectOption.tsx

@@ -1,19 +0,0 @@
-import type { ComponentProps, ReactNode } from 'react';
-import { components as SelectComponent } from 'react-select';
-
-export type SelectOptionProps = ComponentProps<typeof SelectComponent.Option>;
-
-export const SelectOption = (props: SelectOptionProps) => {
-  const data = props.data as {
-    label?: ReactNode;
-    sublabel?: ReactNode;
-    [key: string]: unknown;
-  };
-
-  return (
-    <SelectComponent.Option {...props}>
-      {data?.label}
-      {data?.sublabel && <p className="cleen-text-xs">{data?.sublabel}</p>}
-    </SelectComponent.Option>
-  );
-};

package/src/components/select/blocks/SelectSingleValue.tsx

@@ -1,28 +0,0 @@
-import type { ComponentProps, ReactNode } from 'react';
-import { components as SelectComponent } from 'react-select';
-
-export type SelectSingleValueProps = ComponentProps<
-  typeof SelectComponent.SingleValue
->;
-
-export const SelectSingleValue = (props: SelectSingleValueProps) => {
-  const data = props.data as {
-    label?: ReactNode;
-    sublabel?: ReactNode;
-    [key: string]: unknown;
-  };
-
-  return (
-    <SelectComponent.SingleValue {...props}>
-      <div className="cleen-flex cleen-items-center cleen-gap-2">
-        <p>{data?.label}</p>
-
-        {data?.sublabel && (
-          <p className="cleen-text-xs cleen-text-gray/70 cleen-line-clamp-1">
-            {data?.sublabel}
-          </p>
-        )}
-      </div>
-    </SelectComponent.SingleValue>
-  );
-};

package/src/components/select/index.ts

@@ -1 +0,0 @@
-export { Select, type SelectProps } from './Select';

package/src/components/sidebar/Sidebar.tsx

@@ -1,210 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-import type { SidebarProps, SidebarItemConfig } from './types';
-import SidebarItem from './SidebarItem';
-
-/**
- * Sidebar - A flexible, generic sidebar navigation component
- *
- * Provides a collapsible sidebar with navigation items and an expandable drawer.
- * Highly customizable through props, allowing for different menu structures,
- * drawer content, and styling.
- *
- * @example
- * ```tsx
- * const navigationItems = [
- *   { id: 'home', label: 'Home', iconName: 'Home' },
- *   { id: 'settings', label: 'Settings', iconName: 'Settings' },
- * ];
- *
- * const drawerContent = {
- *   home: <HomeDrawerContent />,
- *   settings: <SettingsDrawerContent />,
- * };
- *
- * <Sidebar
- *   navigationItems={navigationItems}
- *   drawerContent={drawerContent}
- *   logo={<MyLogo />}
- *   onLogoClick={() => navigate('/')}
- * />
- * ```
- */
-export default function Sidebar({
-  navigationItems,
-  bottomNavigationItems = [],
-  drawerContent = {},
-  logo,
-  onLogoClick,
-  userAvatar,
-  userInfo,
-  drawerFooter,
-  drawerWidth = 330,
-  defaultActiveId = null,
-  activeId: controlledActiveId,
-  onActiveChange,
-  closeOnOutsideClick = true,
-  closeOnBlur = true,
-  className = '',
-  navigationClassName = '',
-  drawerClassName = '',
-  renderSidebarItem,
-}: SidebarProps) {
-  const [internalActiveId, setInternalActiveId] = useState<string | null>(
-    defaultActiveId
-  );
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  // Use controlled state if provided, otherwise use internal state
-  const activeId =
-    controlledActiveId !== undefined ? controlledActiveId : internalActiveId;
-  const isOpen = !!activeId;
-
-  const handleMenuClick = (item: SidebarItemConfig) => {
-    const newId = activeId === item.id ? null : item.id;
-
-    if (controlledActiveId === undefined) {
-      setInternalActiveId(newId);
-    }
-
-    onActiveChange?.(newId);
-  };
-
-  // Handle outside clicks
-  useEffect(() => {
-    if (!closeOnOutsideClick || !isOpen) return;
-
-    const handleClickOutside = (event: MouseEvent) => {
-      if (
-        containerRef.current &&
-        !containerRef.current.contains(event.target as Node)
-      ) {
-        const newId = null;
-        if (controlledActiveId === undefined) {
-          setInternalActiveId(newId);
-        }
-        onActiveChange?.(newId);
-      }
-    };
-
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, [closeOnOutsideClick, isOpen, controlledActiveId, onActiveChange]);
-
-  // Handle blur to close
-  const handleBlur = (event: React.FocusEvent<HTMLDivElement>) => {
-    if (!closeOnBlur || !isOpen) return;
-
-    // Check if the new focus target is outside the sidebar
-    if (
-      containerRef.current &&
-      !containerRef.current.contains(event.relatedTarget as Node)
-    ) {
-      const newId = null;
-      if (controlledActiveId === undefined) {
-        setInternalActiveId(newId);
-      }
-      onActiveChange?.(newId);
-    }
-  };
-
-  return (
-    <div
-      className={`cleen-h-full cleen-flex cleen-bg-sidebar ${className}`}
-      ref={containerRef}
-      onBlur={handleBlur}
-      tabIndex={closeOnBlur ? 0 : undefined}
-    >
-      {/* Main sidebar navigation */}
-      <div
-        className={`cleen-h-full cleen-px-4 cleen-flex cleen-flex-col cleen-border-r cleen-border-r-gray/10 cleen-justify-between cleen-items-center cleen-gap-2 ${navigationClassName}`}
-      >
-        <div className="cleen-h-full">
-          {/* Logo */}
-          {logo && (
-            <div
-              className="cleen-flex cleen-justify-center cleen-items-center cleen-pt-8 cleen-pb-6 cleen-w-full cleen-cursor-pointer"
-              onClick={onLogoClick}
-            >
-              {logo}
-            </div>
-          )}
-
-          {/* Navigation items */}
-          <nav className="cleen-flex cleen-flex-col cleen-gap-2">
-            {navigationItems.map(item => (
-              <div key={item.id}>
-                {renderSidebarItem ? (
-                  renderSidebarItem(item, activeId === item.id, handleMenuClick)
-                ) : (
-                  <SidebarItem
-                    item={item}
-                    activeId={activeId}
-                    onClick={handleMenuClick}
-                  />
-                )}
-                {item?.withBottomDivider && (
-                  <div className="cleen-mt-2 cleen-w-12 cleen-h-[1px] cleen-bg-gray/10" />
-                )}
-              </div>
-            ))}
-          </nav>
-        </div>
-
-        {/* Bottom navigation items */}
-        <div className="cleen-flex cleen-flex-col cleen-items-center cleen-gap-2">
-          {bottomNavigationItems.map(item => (
-            <div key={item.id}>
-              {renderSidebarItem ? (
-                renderSidebarItem(item, activeId === item.id, handleMenuClick)
-              ) : (
-                <SidebarItem
-                  item={item}
-                  activeId={activeId}
-                  onClick={handleMenuClick}
-                  countBadge={item.badgeCount}
-                />
-              )}
-              {item?.withBottomDivider && (
-                <div className="cleen-mt-2 cleen-w-12 cleen-h-[1px] cleen-bg-gray/10" />
-              )}
-            </div>
-          ))}
-
-          {/* User avatar */}
-          {userAvatar && (
-            <div className="cleen-mt-6 cleen-mb-8">{userAvatar}</div>
-          )}
-        </div>
-      </div>
-
-      {/* Expandable drawer */}
-      <div
-        className={`cleen-h-full cleen-bg-sidebar cleen-flex cleen-flex-col cleen-transition-all cleen-duration-100 cleen-overflow-hidden ${
-          isOpen ? 'cleen-border-r cleen-border-r-gray/10' : ''
-        } ${drawerClassName}`}
-        style={{
-          width: isOpen ? `${drawerWidth}px` : '0px',
-          visibility: isOpen ? 'visible' : 'hidden',
-        }}
-      >
-        {/* Drawer content */}
-        {activeId && drawerContent[activeId] && (
-          <div className="cleen-flex-1 cleen-overflow-auto">
-            {drawerContent[activeId]}
-          </div>
-        )}
-
-        {/* Drawer footer */}
-        {activeId && (drawerFooter || userInfo) && (
-          <div className="cleen-flex cleen-justify-between cleen-items-start cleen-gap-4 cleen-pb-8 cleen-px-5 cleen-w-full cleen-border-t cleen-border-gray/10 cleen-pt-4">
-            {typeof drawerFooter === 'function'
-              ? drawerFooter(activeId)
-              : drawerFooter || userInfo}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}

package/src/components/sidebar/SidebarItem.tsx

@@ -1,88 +0,0 @@
-import { CleenIcon } from '@/components/cleenIcon';
-import { Tooltip } from '@/components/tooltip';
-import type { SidebarItemProps } from './types';
-
-/**
- * SidebarItem - A single navigation item in the sidebar
- *
- * Displays an icon with optional badge count and tooltip.
- * Supports active state styling and custom click handling.
- *
- * @example
- * ```tsx
- * <SidebarItem
- *   item={{ id: 'home', label: 'Home', iconName: 'Home' }}
- *   activeId="home"
- *   onClick={(item) => console.log('Clicked:', item.id)}
- *   countBadge={5}
- * />
- * ```
- */
-export default function SidebarItem({
-  item,
-  activeId,
-  onClick,
-  countBadge,
-  className = '',
-  renderIcon,
-}: SidebarItemProps) {
-  const isActive = activeId === item?.id;
-
-  const iconElement = renderIcon ? (
-    renderIcon(item, isActive)
-  ) : item?.iconSrc ? (
-    <img
-      src={item.iconSrc}
-      alt={item?.name || item?.label}
-      className={`cleen-w-6 cleen-h-6 cleen-transition-all cleen-duration-200 ${
-        isActive
-          ? '[filter:brightness(0)_saturate(100%)_invert(54%)_sepia(56%)_saturate(7022%)_hue-rotate(179deg)_brightness(102%)_contrast(101%)]'
-          : ''
-      }`}
-    />
-  ) : item?.iconName ? (
-    <CleenIcon
-      name={item.iconName as never}
-      className={`cleen-text-gray/50 cleen-transition-all cleen-duration-200 ${
-        isActive
-          ? '[filter:brightness(0)_saturate(100%)_invert(54%)_sepia(56%)_saturate(7022%)_hue-rotate(179deg)_brightness(102%)_contrast(101%)]'
-          : ''
-      }`}
-    />
-  ) : null;
-
-  return (
-    <Tooltip
-      hasArrow
-      placement="right"
-      color="rgba(var(--cleen-gray), 0.9)"
-      classNames={{
-        labelContainer: 'cleen-min-w-max cleen-z-[999]',
-      }}
-      label={item?.label}
-    >
-      <div
-        key={item?.id}
-        data-testid={`nav-item-${item?.id}`}
-        className={`
-          cleen-relative cleen-p-2 cleen-cursor-pointer cleen-rounded-md cleen-w-12 cleen-h-12 
-          cleen-flex cleen-justify-center cleen-items-center cleen-select-none
-          cleen-transition-colors cleen-duration-200
-          hover:cleen-bg-primary/10
-          ${isActive ? 'cleen-bg-primary/10' : ''}
-          ${className}
-        `}
-        onClick={() => onClick?.(item)}
-      >
-        <div className="group-hover:[filter:brightness(0)_saturate(100%)_invert(54%)_sepia(56%)_saturate(7022%)_hue-rotate(179deg)_brightness(102%)_contrast(101%)]">
-          {iconElement}
-        </div>
-        {countBadge && (
-          <div className="cleen-absolute -cleen-top-1 -cleen-right-1 cleen-flex cleen-items-center cleen-justify-center cleen-w-4 cleen-h-4 cleen-bg-white cleen-rounded-md cleen-border cleen-border-gray/30 cleen-font-normal cleen-text-[8px] cleen-text-gray">
-            {countBadge}
-          </div>
-        )}
-      </div>
-    </Tooltip>
-  );
-}

package/src/components/sidebar/drawerContainer/DrawerContainer.tsx

@@ -1,36 +0,0 @@
-import type { DrawerContainerProps } from '../types';
-
-/**
- * DrawerContainer - Container for drawer content with a title header
- *
- * Provides consistent styling and layout for sidebar drawer content.
- *
- * @example
- * ```tsx
- * <DrawerContainer title="Settings">
- *   <div>Your drawer content here</div>
- * </DrawerContainer>
- * ```
- */
-export default function DrawerContainer({
-  children,
-  title,
-  className = '',
-  renderHeader,
-}: DrawerContainerProps) {
-  return (
-    <div
-      className={`cleen-w-full cleen-h-full ${className}`}
-      data-testid={`drawer-container-${title}`}
-    >
-      {renderHeader ? (
-        renderHeader(title)
-      ) : (
-        <h1 className="cleen-text-sm cleen-font-medium cleen-pb-4 cleen-pt-9 cleen-px-4 cleen-text-gray">
-          {title}
-        </h1>
-      )}
-      <div className="cleen-h-max cleen-w-full cleen-px-4">{children}</div>
-    </div>
-  );
-}

package/src/components/sidebar/drawerContainer/DrawerContentTitle.tsx

@@ -1,165 +0,0 @@
-import { CleenIcon, IconName } from '@/components/cleenIcon';
-import { PillBadge } from '@/components/pillBadge';
-import type {
-  DrawerContentTitleProps,
-  SubmenuItem,
-} from '@/components/sidebar/types';
-
-/**
- * SubMenu component for collapsible menu items
- */
-function SubMenu({
-  items,
-  title,
-  iconName,
-  iconSrc,
-  iconSize = 24,
-}: {
-  items: SubmenuItem[];
-  title: string;
-  iconName?: string;
-  iconSrc?: string;
-  iconSize?: number;
-}) {
-  return (
-    <details className="cleen-group">
-      <summary className="cleen-flex cleen-items-center cleen-justify-between cleen-gap-3 cleen-px-3 cleen-py-2 cleen-w-full cleen-rounded-md cleen-cursor-pointer hover:cleen-bg-gray/5 cleen-transition-colors cleen-duration-200 cleen-list-none [&::-webkit-details-marker]:cleen-hidden">
-        <div
-          data-testid="title-list"
-          className="cleen-flex cleen-items-center cleen-gap-3"
-        >
-          {iconSrc ? (
-            <img
-              src={iconSrc}
-              alt={title}
-              className="cleen-w-6 cleen-h-6 cleen-text-gray/50 cleen-transition-colors cleen-duration-200 group-hover:cleen-text-gray"
-            />
-          ) : iconName ? (
-            <CleenIcon
-              name={iconName as never}
-              width={iconSize}
-              height={iconSize}
-              className="cleen-text-gray/50 cleen-transition-all cleen-duration-200"
-            />
-          ) : null}
-          <span className="cleen-font-semibold cleen-text-sm cleen-text-gray/70 group-hover:cleen-text-gray cleen-transition-colors cleen-duration-200">
-            {title}
-          </span>
-        </div>
-        <CleenIcon
-          name={IconName.ChevronUp}
-          className="cleen-w-5 cleen-h-5 cleen-text-gray cleen-transition-transform cleen-duration-200 group-open:cleen-rotate-180"
-        />
-      </summary>
-      <div className="cleen-flex cleen-flex-col cleen-gap-1 cleen-mt-1">
-        {items?.map(item => (
-          <span
-            key={item?.id}
-            className="cleen-py-2 cleen-px-3 cleen-pl-12 cleen-font-semibold cleen-text-sm cleen-text-gray/70 cleen-rounded-md cleen-cursor-pointer hover:cleen-text-gray hover:cleen-bg-primary/5 cleen-transition-colors cleen-duration-200"
-            onClick={() => item.onClick(item)}
-          >
-            {item?.title}
-          </span>
-        ))}
-      </div>
-    </details>
-  );
-}
-
-/**
- * DrawerContentTitle - A title/item component for drawer content
- *
- * Supports simple items with icons and badges, or collapsible submenus.
- *
- * @example
- * ```tsx
- * <DrawerContentTitle
- *   title="Dashboard"
- *   iconSrc="/icons/dashboard.svg"
- *   badgeCount={5}
- *   onClick={() => navigate('/dashboard')}
- * />
- *
- * // With submenu
- * <DrawerContentTitle
- *   title="Settings"
- *   iconSrc="/icons/settings.svg"
- *   submenu={[
- *     { id: '1', title: 'Profile', onClick: handleProfile },
- *     { id: '2', title: 'Security', onClick: handleSecurity },
- *   ]}
- * />
- * ```
- */
-export default function DrawerContentTitle({
-  title,
-  iconName,
-  iconSrc,
-  iconSize = 24,
-  badgeColor = 'gray',
-  badgeCount,
-  submenu,
-  onClick,
-  className = '',
-  titleClassName = '',
-  isActive = false,
-}: DrawerContentTitleProps) {
-  if (Array.isArray(submenu) && submenu.length > 0) {
-    return (
-      <SubMenu
-        items={submenu}
-        title={title}
-        iconSrc={iconSrc}
-        iconName={iconName}
-      />
-    );
-  }
-
-  return (
-    <div
-      className={`
-        cleen-flex cleen-items-center cleen-justify-between cleen-gap-3 cleen-px-3 cleen-py-2 cleen-w-full 
-        cleen-rounded-md cleen-cursor-pointer cleen-transition-colors cleen-duration-200
-        hover:cleen-bg-gray/5
-        ${isActive ? 'cleen-bg-gray/5' : ''}
-        ${className}
-      `}
-      onClick={onClick}
-    >
-      <div className="cleen-flex cleen-items-center cleen-gap-3">
-        {iconSrc ? (
-          <img
-            src={iconSrc}
-            alt={title}
-            width={iconSize}
-            height={iconSize}
-            className={`cleen-transition-all cleen-duration-200 ${
-              isActive
-                ? '[filter:brightness(0)_saturate(100%)_invert(22%)_sepia(12%)_saturate(1405%)_hue-rotate(179deg)_brightness(93%)_contrast(86%)]'
-                : ''
-            }`}
-          />
-        ) : iconName ? (
-          <CleenIcon
-            name={iconName as never}
-            width={iconSize}
-            height={iconSize}
-            className="cleen-text-gray/50 cleen-transition-all cleen-duration-200"
-          />
-        ) : null}
-        <span
-          className={`
-            cleen-font-semibold cleen-text-sm cleen-text-gray/70 cleen-transition-colors cleen-duration-200
-            ${isActive ? 'cleen-text-gray' : ''}
-            ${titleClassName}
-          `}
-        >
-          {title}
-        </span>
-      </div>
-      {['string', 'number'].includes(typeof badgeCount) && (
-        <PillBadge color={badgeColor as never} label={String(badgeCount)} />
-      )}
-    </div>
-  );
-}

package/src/components/sidebar/drawerContainer/index.ts

@@ -1,2 +0,0 @@
-export { default as DrawerContainer } from './DrawerContainer';
-export { default as DrawerContentTitle } from './DrawerContentTitle';

package/src/components/sidebar/index.ts

@@ -1,13 +0,0 @@
-export { default as Sidebar } from './Sidebar';
-export { default as SidebarItem } from './SidebarItem';
-export { default as DrawerContainer } from './drawerContainer/DrawerContainer';
-export { default as DrawerContentTitle } from './drawerContainer/DrawerContentTitle';
-export type {
-  SidebarItemConfig,
-  SidebarItemProps,
-  SubmenuItem,
-  DrawerContentTitleProps,
-  DrawerContainerProps,
-  DrawerConfig,
-  SidebarProps,
-} from './types';