@cleen/ui 0.1.0

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

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

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

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

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

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

package/src/components/sidebar/Sidebar.tsx

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

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

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

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

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

package/src/components/sidebar/index.ts

@@ -0,0 +1,13 @@
+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';