@cleen/ui 0.1.0 → 0.1.1

package/src/components/textArea/TextArea.tsx

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

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

package/src/components/tooltip/Tooltip.tsx

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

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

package/src/icons/IconFromLibrary.tsx

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

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

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

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

package/tsconfig.json

@@ -1,27 +0,0 @@
-{
-  "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

@@ -1,23 +0,0 @@
-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',
-  ],
-}));