@cleen/ui 0.1.0

package/src/components/textArea/TextArea.tsx

@@ -0,0 +1,244 @@
+import {
+  InfoLabels,
+  type InfoLabelsProps,
+} from '@/components/infoLabels/InfoLabels';
+import { cn } from '@cleen/ui-core';
+import {
+  forwardRef,
+  useEffect,
+  useMemo,
+  useState,
+  type ChangeEvent,
+  type ComponentProps,
+  type CSSProperties,
+  type DragEvent,
+  type ReactNode,
+} from 'react';
+
+export type TextAreaProps = Omit<ComponentProps<'textarea'>, 'onChange'> & {
+  label?: ReactNode;
+  value?: string;
+  minHeight?: number;
+  maxHeight?: number;
+  onChange?: (value: string) => void;
+  maxLengthLabelThreshold?: number;
+  maxLengthLabel?: (remaining: number) => ReactNode;
+  infoLabels?: InfoLabelsProps;
+  topRightElement?: ReactNode;
+  labelRightElement?: ReactNode;
+  textareaOverlay?: ReactNode;
+  classNames?: {
+    container?: string;
+    label?: string;
+    textareaContainer?: string;
+    textarea?: string;
+    maxLengthLabel?: string;
+  };
+  styles?: {
+    container?: CSSProperties;
+    label?: CSSProperties;
+    textareaContainer?: CSSProperties;
+    textarea?: CSSProperties;
+    maxLengthLabel?: CSSProperties;
+  };
+};
+
+/**
+ * TextArea component is a resizable textarea input field that can be used to capture multi-line text input from users.
+ */
+export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
+  function TextArea(
+    {
+      name,
+      id,
+      value,
+      defaultValue,
+      label,
+      disabled,
+      required,
+      infoLabels,
+      topRightElement,
+      labelRightElement,
+      textareaOverlay,
+      onChange,
+      minHeight,
+      maxHeight = 200,
+      maxLength,
+      maxLengthLabelThreshold = 0.5,
+      maxLengthLabel,
+      className,
+      classNames,
+      style,
+      styles,
+      ...props
+    },
+    ref
+  ) {
+    const isControlled = value !== undefined;
+    const [internalValue, setInternalValue] = useState<string>(
+      typeof defaultValue === 'string' ? defaultValue : ''
+    );
+
+    const currentValue = isControlled ? value : internalValue;
+
+    useEffect(() => {
+      if (!isControlled) {
+        setInternalValue(
+          value ?? (typeof defaultValue === 'string' ? defaultValue : '')
+        );
+      }
+    }, [value, defaultValue, isControlled]);
+
+    const handleTextareaResize = (e: ChangeEvent<HTMLTextAreaElement>) => {
+      const textarea = e.target;
+      textarea.style.height = 'auto';
+      const height = Math.min(textarea.scrollHeight, maxHeight);
+      textarea.style.height = `${height}px`;
+    };
+
+    const handleDragOver = (e: DragEvent<HTMLTextAreaElement>) => {
+      e.preventDefault();
+    };
+
+    const handleDrop = (e: DragEvent<HTMLTextAreaElement>) => {
+      e.preventDefault();
+      const data = e.dataTransfer?.getData('text/plain');
+      if (isControlled) {
+        onChange?.(`${value ?? ''}${data}`);
+      } else {
+        setInternalValue((prev: string) => `${prev}${data}`);
+        onChange?.(`${internalValue}${data}`);
+      }
+    };
+
+    const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+      const newValue = e.target.value;
+      if (!maxLength || newValue.length <= maxLength) {
+        if (!isControlled) {
+          setInternalValue(newValue);
+        }
+        onChange?.(newValue);
+        handleTextareaResize(e);
+      }
+    };
+
+    const subtitle = useMemo(() => {
+      if (
+        !maxLength ||
+        !maxLengthLabel ||
+        (currentValue?.toString()?.length ?? 0) / maxLength <
+          maxLengthLabelThreshold
+      ) {
+        return infoLabels?.subtitle;
+      }
+
+      return maxLengthLabel?.(
+        maxLength - (currentValue?.toString()?.length ?? 0)
+      );
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+      currentValue,
+      maxLength,
+      maxLengthLabelThreshold,
+      infoLabels?.subtitle,
+    ]);
+
+    return (
+      <div className={cn('cleen', className)} style={style}>
+        <div
+          className={cn(
+            'cleen-flex cleen-flex-col cleen-gap-1.5 cleen-rounded-md cleen-size-full cleen-font-medium cleen-text-gray',
+            classNames?.container
+          )}
+          style={styles?.container}
+        >
+          {(label || labelRightElement) && (
+            <div className="cleen-flex cleen-items-center cleen-justify-between cleen-mb-1.5">
+              {label && (
+                <label
+                  htmlFor={id || name}
+                  className={cn(
+                    'cleen-flex-1 cleen-block cleen-font-medium cleen-text-gray/90 cleen-text-sm cleen-leading-6',
+                    classNames?.label
+                  )}
+                  style={styles?.label}
+                >
+                  {label}{' '}
+                  {required && (
+                    <span className="cleen-ml-1 cleen-text-error/60">*</span>
+                  )}
+                </label>
+              )}
+
+              {labelRightElement && (
+                <div className="cleen-ml-auto">{labelRightElement}</div>
+              )}
+            </div>
+          )}
+
+          <div
+            className={cn(
+              'cleen-relative cleen-flex cleen-items-center cleen-shadow-sm cleen-border cleen-rounded-md cleen-transition-colors cleen-duration-200',
+              infoLabels?.errorMessage
+                ? 'cleen-border-error/50 hover:cleen-border-error/70'
+                : 'cleen-border-gray/10 hover:cleen-border-gray/20',
+              classNames?.textareaContainer
+            )}
+            style={styles?.textareaContainer}
+          >
+            {topRightElement && (
+              <div className="cleen-absolute cleen-top-2 cleen-right-2 cleen-z-10">
+                {topRightElement}
+              </div>
+            )}
+
+            {textareaOverlay && (
+              <div
+                className={cn(
+                  'cleen-absolute cleen-inset-0 cleen-px-3.5 cleen-py-3 cleen-rounded-lg cleen-overflow-y-auto cleen-text-sm cleen-leading-6 cleen-font-normal',
+                  disabled ? 'cleen-bg-gray/5' : 'cleen-bg-background'
+                )}
+              >
+                {textareaOverlay}
+              </div>
+            )}
+
+            <textarea
+              id={id || name}
+              name={name}
+              ref={ref}
+              disabled={disabled}
+              value={currentValue}
+              maxLength={maxLength}
+              className={cn(
+                'cleen-block cleen-flex-1 cleen-px-3.5 cleen-py-3 cleen-border-0 cleen-border-gray/30 cleen-rounded-lg focus:cleen-outline-none focus:cleen-ring-transparent placeholder:cleen-text-gray/50 sm:cleen-text-sm cleen-text-base sm:cleen-leading-6',
+                disabled
+                  ? 'cleen-bg-gray/5 cleen-text-gray/50'
+                  : 'cleen-bg-background cleen-text-gray cleen-font-normal',
+                classNames?.textarea
+              )}
+              style={{
+                ...(minHeight && { minHeight: `${minHeight}px` }),
+                ...styles?.textarea,
+              }}
+              onFocus={e =>
+                e.currentTarget.setSelectionRange(
+                  e.currentTarget.value.length,
+                  e.currentTarget.value.length
+                )
+              }
+              onDragOver={handleDragOver}
+              onDrop={handleDrop}
+              {...props}
+              onChange={handleChange}
+            />
+          </div>
+
+          {(infoLabels?.errorMessage ||
+            infoLabels?.infoMessage ||
+            subtitle) && <InfoLabels {...infoLabels} subtitle={subtitle} />}
+        </div>
+      </div>
+    );
+  }
+);

package/src/components/textArea/index.ts

@@ -0,0 +1 @@
+export { TextArea, type TextAreaProps } from './TextArea';

package/src/components/tooltip/Tooltip.tsx

@@ -0,0 +1,200 @@
+import { cn, usePositionClose, type Position } from '@cleen/ui-core';
+import {
+  useEffect,
+  useRef,
+  useState,
+  type ComponentProps,
+  type CSSProperties,
+  type MouseEvent,
+  type ReactNode,
+} from 'react';
+import { createPortal } from 'react-dom';
+
+export interface TooltipProps extends ComponentProps<'div'> {
+  label?: ReactNode;
+  invertColors?: boolean;
+  placement?: Position;
+  bg?: string;
+  closeOnClick?: boolean;
+  hideOnMouseDown?: boolean;
+  isOpen?: boolean;
+  isDisabled?: boolean;
+  hasArrow?: boolean;
+  openDelay?: number;
+  offset?: number;
+  classNames?: {
+    container?: string;
+    labelContainer?: string;
+  };
+  styles?: {
+    container?: CSSProperties;
+    labelContainer?: CSSProperties;
+  };
+}
+
+/**
+ * Hover-activated tooltip that portals a label relative to its trigger child.
+ *
+ * - Wrap any element as `children`; the tooltip appears when it is hovered or focused.
+ * - Control position with `placement` (any `Position` value) and tweak gap with `offset`.
+ * - Delay opening by `openDelay` milliseconds to avoid flickery quick-hovers.
+ * - Use `isOpen` for fully controlled mode; `isDisabled` to suppress rendering entirely.
+ * - Override bubble colors with `bg` / `color`, or enable `invertColors` for a dark-on-light style.
+ * - Accepts `classNames` and `styles` for keys: `container`, `labelContainer`.
+ */
+export const Tooltip = ({
+  bg,
+  label,
+  color,
+  closeOnClick = true,
+  hideOnMouseDown = true,
+  isOpen,
+  children,
+  hasArrow,
+  placement = 'top',
+  offset = 8,
+  className,
+  classNames,
+  isDisabled,
+  openDelay = 0,
+  invertColors = false,
+  style,
+  styles,
+  onClick,
+  onMouseEnter,
+  onMouseLeave,
+  ...props
+}: TooltipProps) => {
+  const [open, setOpen] = useState(isOpen ?? false);
+  const [isHolding, setIsHolding] = useState(false);
+
+  const tooltipRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLDivElement>(null);
+  const openTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // Calculate optimal position for the tooltip
+  const { positionStyles, isMounted, optimalPosition } = usePositionClose({
+    triggerRef,
+    targetRef: tooltipRef,
+    position: placement,
+    isOpen: open && !isDisabled,
+    offset,
+  });
+
+  useEffect(() => {
+    setOpen(isOpen ?? false);
+  }, [isOpen]);
+
+  const handleClick = (e: MouseEvent<HTMLDivElement>) => {
+    onClick?.(e);
+
+    if (closeOnClick) {
+      setOpen(false);
+    }
+  };
+
+  const handleHover = (e: MouseEvent<HTMLDivElement>, over: boolean) => {
+    if (isOpen !== undefined) return; // Don't handle hover if open state is controlled externally
+
+    if (over) {
+      onMouseEnter?.(e);
+
+      if (openDelay && openDelay > 0) {
+        openTimeoutRef.current = setTimeout(() => {
+          setOpen(true);
+        }, openDelay);
+      } else {
+        setOpen(true);
+      }
+    } else {
+      // Clear the pending timeout to prevent tooltip from opening after mouse has left
+      if (openTimeoutRef.current) {
+        clearTimeout(openTimeoutRef.current);
+        openTimeoutRef.current = null;
+      }
+
+      setOpen(false);
+      onMouseLeave?.(e);
+    }
+  };
+
+  useEffect(() => {
+    const handleMouseDown = () => {
+      if (hideOnMouseDown) {
+        setIsHolding(true);
+      }
+    };
+
+    const handleMouseUp = () => {
+      setIsHolding(false);
+    };
+
+    document.addEventListener('mousedown', handleMouseDown);
+    document.addEventListener('mouseup', handleMouseUp);
+
+    return () => {
+      document.removeEventListener('mousedown', handleMouseDown);
+      document.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, []);
+
+  return (
+    <div className={cn('cleen', className)} style={style}>
+      <div
+        ref={triggerRef}
+        className={cn('cleen-relative cleen-max-w-fit', classNames?.container)}
+        style={styles?.container}
+        onClick={handleClick}
+        onMouseEnter={e => handleHover(e, true)}
+        onMouseLeave={e => handleHover(e, false)}
+        {...props}
+      >
+        {children}
+      </div>
+
+      {open &&
+        !isDisabled &&
+        !isHolding &&
+        createPortal(
+          <div className="cleen">
+            <div
+              ref={tooltipRef}
+              className={cn(
+                'cleen-shadow cleen-px-2 cleen-py-0.5 cleen-rounded-md cleen-text-sm cleen-transition-opacity cleen-duration-200 cleen-pointer-events-none',
+                'cleen-absolute cleen-z-50',
+                `${invertColors ? 'cleen-bg-primary after:cleen-border-primary cleen-text-white' : 'cleen-bg-white after:cleen-border-white cleen-text-primary'}`,
+                {
+                  'cleen-opacity-0': !isMounted,
+                  'cleen-opacity-100': isMounted,
+                  // Arrow styles
+                  'after:cleen-content-[""] after:cleen-absolute after:cleen-border-[6px]':
+                    hasArrow,
+                  'after:cleen-border-x-transparent after:cleen-border-b-transparent after:cleen-top-full after:cleen-left-[calc(50%-6px)] after:cleen-drop-shadow-[0_1px_0.5px_rgba(var(--cleen-black),0.1)]':
+                    hasArrow && optimalPosition === 'top',
+                  'after:cleen-border-x-transparent after:cleen-border-t-transparent after:cleen-bottom-full after:cleen-left-[calc(50%-6px)] after:cleen-drop-shadow-[0_-0.25px_0.5px_rgba(var(--cleen-black),0.1)]':
+                    hasArrow && optimalPosition === 'bottom',
+                  'after:cleen-border-y-transparent after:cleen-border-r-transparent after:cleen-left-full after:cleen-top-[calc(50%-6px)] after:cleen-drop-shadow-[1px_0_0.5px_rgba(var(--cleen-black),0.1)]':
+                    hasArrow && optimalPosition === 'left',
+                  'after:cleen-border-y-transparent after:cleen-border-l-transparent after:cleen-right-full after:cleen-top-[calc(50%-6px)] after:cleen-drop-shadow-[-0.25px_0_0.5px_rgba(var(--cleen-black),0.1)]':
+                    hasArrow && optimalPosition === 'right',
+                },
+                classNames?.labelContainer
+              )}
+              style={{
+                top: `${positionStyles.top}px`,
+                left: `${positionStyles.left}px`,
+                ...(bg && { backgroundColor: bg }),
+                ...(color && { color }),
+                ...styles?.labelContainer,
+              }}
+            >
+              {label}
+            </div>
+          </div>,
+          document.body
+        )}
+    </div>
+  );
+};
+
+export default Tooltip;

package/src/components/tooltip/index.ts

@@ -0,0 +1 @@
+export { Tooltip, type TooltipProps } from './Tooltip';

package/src/icons/IconFromLibrary.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { IconBaseProps, IconType } from 'react-icons/lib';
+
+export interface IconFromLibraryProps extends IconBaseProps {
+  icon: IconType;
+}
+
+export const IconFromLibrary: React.FC<IconFromLibraryProps> = ({
+  icon: OriginalIcon,
+  ...props
+}) => {
+  return <OriginalIcon {...props} />;
+};

package/src/icons/getIconByName.ts

@@ -0,0 +1,81 @@
+import type { IconType } from 'react-icons/lib';
+
+/**
+ * Maps icon names to their corresponding icon components from react-icons.
+ * This allows you to dynamically load icons by name string without importing the entire library.
+ *
+ * @param iconName - The full icon name (e.g., 'FaHome', 'MdSettings', 'AiFillHeart')
+ * @returns The icon component, or null if not found
+ *
+ * @example
+ * ```tsx
+ * const HomeIcon = getIconByName('FaHome');
+ * if (HomeIcon) {
+ *   return <IconFromLibrary icon={HomeIcon} size={24} />;
+ * }
+ * ```
+ */
+export const getIconByName = async (
+  iconName: string
+): Promise<IconType | null> => {
+  if (!iconName || typeof iconName !== 'string') {
+    return null;
+  }
+
+  // Extract the library prefix (first 2 characters)
+  const prefix = iconName.substring(0, 2);
+
+  try {
+    let iconModule;
+
+    switch (prefix) {
+      case 'Fa':
+        iconModule = await import('react-icons/fa');
+        break;
+      case 'Md':
+        iconModule = await import('react-icons/md');
+        break;
+      case 'Ai':
+        iconModule = await import('react-icons/ai');
+        break;
+      case 'Bi':
+        iconModule = await import('react-icons/bi');
+        break;
+      case 'Bs':
+        iconModule = await import('react-icons/bs');
+        break;
+      case 'Fi':
+        iconModule = await import('react-icons/fi');
+        break;
+      case 'Hi':
+        iconModule = await import('react-icons/hi');
+        break;
+      case 'Io':
+        iconModule = await import('react-icons/io');
+        break;
+      case 'Ri':
+        iconModule = await import('react-icons/ri');
+        break;
+      default:
+        console.warn(
+          `Unknown icon library prefix: ${prefix} in icon name: ${iconName}`
+        );
+        return null;
+    }
+
+    // Get the specific icon from the module
+    // The dynamic import returns a module object, we need to access the named export
+    const iconComponent = (iconModule as Record<string, IconType | unknown>)[
+      iconName
+    ];
+
+    if (!iconComponent || typeof iconComponent !== 'function') {
+      return null;
+    }
+
+    return iconComponent as IconType;
+  } catch (error) {
+    console.error(`Error loading icon "${iconName}":`, error);
+    return null;
+  }
+};

package/src/icons/index.ts

@@ -0,0 +1,16 @@
+export { IconFromLibrary } from './IconFromLibrary';
+export type { IconFromLibraryProps } from './IconFromLibrary';
+
+// Export icon name to component mapper utility
+export { getIconByName } from './getIconByName';
+
+// Re-export commonly used icon sets from react-icons (important)
+export * from 'react-icons/fa';
+export * from 'react-icons/md';
+export * from 'react-icons/ai';
+export * from 'react-icons/bi';
+export * from 'react-icons/bs';
+export * from 'react-icons/fi';
+export * from 'react-icons/hi';
+export * from 'react-icons/io';
+export * from 'react-icons/ri';

package/src/index.ts

@@ -0,0 +1 @@
+export * from './components';

package/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+
+    // Urls
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    },
+
+    // For types in watch mode
+    "outDir": "./dist"
+  },
+  "include": ["src"]
+}

package/tsup.config.ts

@@ -0,0 +1,23 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig(({ watch }) => ({
+  entry: ['src/index.ts', 'src/icons/index.ts', 'src/charts/index.ts'],
+  format: ['esm'],
+  dts: true,
+  clean: !watch,
+  minify: !watch,
+  external: [
+    'react',
+    'react-dom',
+    'react-router-dom',
+    '@cleen/ui-core',
+    'apexcharts',
+    'react-apexcharts',
+    'react-icons',
+    'wavesurfer.js',
+    '@wavesurfer/react',
+    'react-day-picker',
+    'react-toastify',
+    'react-select',
+  ],
+}));