@cleen/ui-core 0.1.0 → 0.1.2

package/tailwind-entry.css

@@ -1,81 +1,86 @@
-@import 'react-toastify/dist/ReactToastify.css';
-@import './styles/react-day-styles.css';
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-/* Hide scrollbar for Chrome, Safari and Opera */
-.cleen-no-scrollbar::-webkit-scrollbar {
-  display: none;
-}
-
-/* Hide scrollbar for IE, Edge and Firefox */
-.cleen-no-scrollbar {
-  -ms-overflow-style: none; /* IE and Edge */
-  scrollbar-width: none; /* Firefox */
-}
-
-:root {
-  --cleen-white: 255, 255, 255;
-  --cleen-black: 0, 0, 0;
-  --cleen-gray: 38, 38, 38;
-  --cleen-pink: 193, 21, 116;
-  --cleen-purple: 89, 37, 220;
-  --cleen-indigo: 53, 56, 205;
-  --cleen-blue: 23, 92, 211;
-  --cleen-light-gray: 200, 200, 200;
-
-  --cleen-primary: 0, 133, 211;
-  --cleen-success: 6, 118, 71;
-  --cleen-warning: 181, 71, 8;
-  --cleen-error: 180, 35, 24;
-
-  --cleen-brand: 68, 129, 193;
-  --cleen-sidebar: 249, 250, 251;
-  --cleen-background: 255, 255, 255;
-  --cleen-accent: 65, 70, 81;
-
-  --toastify-color-light: rgb(var(--cleen-background));
-  --toastify-text-color-light: rgba(var(--cleen-gray), 0.6);
-  --toastify-toast-shadow: 0px 4px 12px rgba(var(--cleen-black), 0.1);
-
-  --toastify-color-info: rgb(var(--cleen-primary));
-  --toastify-color-success: rgb(var(--cleen-success));
-  --toastify-color-warning: rgb(var(--cleen-warning));
-  --toastify-color-error: rgb(var(--cleen-error));
-
-  .Toastify__close-button {
-    color: rgb(var(--cleen-black));
-  }
-
-  .rdp-root {
-    --rdp-accent-color: rgb(var(--cleen-primary));
-    --rdp-accent-background-color: rgb(var(--cleen-background));
-  }
-
-  .cleen-waveform ::part(region-handle) {
-    border-color: rgb(var(--cleen-black)) !important;
-  }
-}
-
-.dark {
-  --cleen-white: 3, 7, 18;
-  --cleen-black: 243, 244, 246;
-  --cleen-gray: 209, 213, 219;
-  --cleen-pink: 236, 72, 153;
-  --cleen-purple: 168, 85, 247;
-  --cleen-indigo: 99, 102, 241;
-  --cleen-blue: 59, 130, 246;
-  --cleen-light-gray: 100, 100, 100;
-
-  --cleen-primary: 0, 157, 248;
-  --cleen-success: 34, 197, 94;
-  --cleen-warning: 251, 191, 36;
-  --cleen-error: 239, 68, 68;
-
-  --cleen-brand: 0, 122, 204;
-  --cleen-sidebar: 17, 24, 39;
-  --cleen-background: 3, 7, 18;
-  --cleen-accent: 255, 255, 255;
-}
+@import 'react-toastify/dist/ReactToastify.css';
+@import './styles/react-day-styles.css';
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+.cleen-no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+.cleen-no-scrollbar {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
+
+:root {
+  --cleen-white: 255, 255, 255;
+  --cleen-black: 0, 0, 0;
+  --cleen-gray: 38, 38, 38;
+  --cleen-pink: 193, 21, 116;
+  --cleen-purple: 89, 37, 220;
+  --cleen-indigo: 53, 56, 205;
+  --cleen-blue: 23, 92, 211;
+  --cleen-light-gray: 200, 200, 200;
+
+  --cleen-primary: 0, 133, 211;
+  --cleen-success: 6, 118, 71;
+  --cleen-warning: 181, 71, 8;
+  --cleen-error: 180, 35, 24;
+
+  --cleen-brand: 68, 129, 193;
+  --cleen-sidebar: 249, 250, 251;
+  --cleen-background: 255, 255, 255;
+  --cleen-accent: 65, 70, 81;
+
+  --toastify-color-light: rgb(var(--cleen-background));
+  --toastify-text-color-light: rgba(var(--cleen-gray), 0.6);
+  --toastify-toast-shadow: 0px 4px 12px rgba(var(--cleen-black), 0.1);
+
+  --toastify-color-info: rgb(var(--cleen-primary));
+  --toastify-color-success: rgb(var(--cleen-success));
+  --toastify-color-warning: rgb(var(--cleen-warning));
+  --toastify-color-error: rgb(var(--cleen-error));
+
+  .Toastify__close-button {
+    color: rgb(var(--cleen-black));
+  }
+
+  .rdp-root {
+    --rdp-accent-color: rgb(var(--cleen-primary));
+    --rdp-accent-background-color: rgb(var(--cleen-background));
+    --rdp-range_middle-color: rgb(var(--cleen-white));
+  }
+
+  .cleen-waveform ::part(region-handle) {
+    border-color: rgb(var(--cleen-black)) !important;
+  }
+}
+
+.dark {
+  --cleen-white: 3, 7, 18;
+  --cleen-black: 243, 244, 246;
+  --cleen-gray: 209, 213, 219;
+  --cleen-pink: 236, 72, 153;
+  --cleen-purple: 168, 85, 247;
+  --cleen-indigo: 99, 102, 241;
+  --cleen-blue: 59, 130, 246;
+  --cleen-light-gray: 100, 100, 100;
+
+  --cleen-primary: 0, 157, 248;
+  --cleen-success: 34, 197, 94;
+  --cleen-warning: 251, 191, 36;
+  --cleen-error: 239, 68, 68;
+
+  --cleen-brand: 0, 122, 204;
+  --cleen-sidebar: 17, 24, 39;
+  --cleen-background: 3, 7, 18;
+  --cleen-accent: 255, 255, 255;
+
+  .rdp-root {
+    --rdp-range_middle-color: rgb(var(--cleen-black));
+  }
+}

package/tailwind.config.js

@@ -1,10 +1,10 @@
-import preset from './tailwind.preset.js';
-
-/** @type {import('tailwindcss').Config} */
-export default {
-  presets: [preset],
-  content: [
-    '../cleen-ui-free/src/**/*.{ts,tsx,js,jsx}',
-    '../cleen-ui-pro/src/**/*.{ts,tsx,js,jsx}',
-  ],
-};
+import preset from './tailwind.preset.js';
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  presets: [preset],
+  content: [
+    '../cleen-ui-free/src/**/*.{ts,tsx,js,jsx}',
+    '../cleen-ui-pro/src/**/*.{ts,tsx,js,jsx}',
+  ],
+};

package/tailwind.preset.js

@@ -1,30 +1,30 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-  important: '.cleen',
-  prefix: 'cleen-',
-  darkMode: ['class', '[class*="dark"]'],
-  theme: {
-    extend: {
-      colors: {
-        white: 'rgba(var(--cleen-white))',
-        black: 'rgba(var(--cleen-black))',
-        gray: 'rgba(var(--cleen-gray))',
-        pink: 'rgba(var(--cleen-pink))',
-        purple: 'rgba(var(--cleen-purple))',
-        indigo: 'rgba(var(--cleen-indigo))',
-        blue: 'rgba(var(--cleen-blue))',
-
-        primary: 'rgba(var(--cleen-primary))',
-        success: 'rgba(var(--cleen-success))',
-        warning: 'rgba(var(--cleen-warning))',
-        error: 'rgba(var(--cleen-error))',
-
-        brand: 'rgba(var(--cleen-brand))',
-        sidebar: 'rgba(var(--cleen-sidebar))',
-        background: 'rgba(var(--cleen-background))',
-        accent: 'rgba(var(--cleen-accent))',
-      },
-    },
-  },
-  plugins: [],
-};
+/** @type {import('tailwindcss').Config} */
+export default {
+  important: '.cleen',
+  prefix: 'cleen-',
+  darkMode: ['class', '[class*="dark"]'],
+  theme: {
+    extend: {
+      colors: {
+        white: 'rgba(var(--cleen-white))',
+        black: 'rgba(var(--cleen-black))',
+        gray: 'rgba(var(--cleen-gray))',
+        pink: 'rgba(var(--cleen-pink))',
+        purple: 'rgba(var(--cleen-purple))',
+        indigo: 'rgba(var(--cleen-indigo))',
+        blue: 'rgba(var(--cleen-blue))',
+
+        primary: 'rgba(var(--cleen-primary))',
+        success: 'rgba(var(--cleen-success))',
+        warning: 'rgba(var(--cleen-warning))',
+        error: 'rgba(var(--cleen-error))',
+
+        brand: 'rgba(var(--cleen-brand))',
+        sidebar: 'rgba(var(--cleen-sidebar))',
+        background: 'rgba(var(--cleen-background))',
+        accent: 'rgba(var(--cleen-accent))',
+      },
+    },
+  },
+  plugins: [],
+};

package/src/hooks/useAnimateNumber.ts

@@ -1,56 +0,0 @@
-import { useEffect, useState } from 'react';
-
-interface UseAnimateNumberProps {
-  targetNumber: number;
-  defaultNumber?: number;
-  duration?: number;
-  disabled?: boolean;
-  easeOut?: boolean;
-}
-
-// Easing function for smooth deceleration
-const easeOutQuad = (progress: number): number => {
-  return 1 - (1 - progress) * (1 - progress);
-};
-
-export const useAnimateNumber = ({
-  targetNumber,
-  defaultNumber = 0,
-  duration = 1000,
-  disabled = false,
-  easeOut = true,
-}: UseAnimateNumberProps): number => {
-  const [animatedNumber, setAnimatedNumber] = useState(defaultNumber);
-
-  useEffect(() => {
-    if (disabled) {
-      return;
-    }
-
-    let start: number | null = null;
-
-    const animate = (timestamp: number) => {
-      if (!start) start = timestamp;
-      const progressTime = timestamp - start;
-      let progress = Math.min(progressTime / duration, 1);
-
-      if (easeOut) {
-        progress = easeOutQuad(progress);
-      }
-
-      const progressValue = progress * targetNumber;
-      setAnimatedNumber(progressValue);
-      if (progressValue < targetNumber) {
-        requestAnimationFrame(animate);
-      }
-    };
-
-    requestAnimationFrame(animate);
-  }, [targetNumber, duration, disabled, easeOut]);
-
-  if (disabled) {
-    return targetNumber;
-  }
-
-  return animatedNumber;
-};

package/src/hooks/useControlled.ts

@@ -1,40 +0,0 @@
-import { useEffect, useState } from 'react';
-
-interface UseControlledProps<T> {
-  value?: T;
-  defaultValue?: T;
-  onChange?: (value: T) => void;
-}
-
-export const useControlled = <T>({
-  value,
-  defaultValue,
-  onChange,
-}: UseControlledProps<T>) => {
-  const isControlled = value !== undefined;
-  const [internalValue, setInternalValue] = useState<T | undefined>(
-    defaultValue
-  );
-
-  const currentValue = isControlled ? value : internalValue;
-
-  const handleChange = (newValue: T) => {
-    if (!isControlled) {
-      setInternalValue(newValue);
-    }
-
-    onChange?.(newValue);
-  };
-
-  useEffect(() => {
-    if (!isControlled) {
-      setInternalValue(value ?? defaultValue ?? undefined);
-    }
-  }, [value, defaultValue, isControlled]);
-
-  return {
-    value: currentValue,
-    isControlled,
-    handleChange,
-  };
-};

package/src/hooks/useDebounce.ts

@@ -1,17 +0,0 @@
-import { useEffect, useState } from 'react';
-
-export const useDebounce = <T>(value: T, delay: number): T => {
-  const [debouncedValue, setDebouncedValue] = useState<T>(value);
-
-  useEffect(() => {
-    const handler = setTimeout(() => {
-      setDebouncedValue(value);
-    }, delay);
-
-    return () => {
-      clearTimeout(handler);
-    };
-  }, [value, delay]);
-
-  return debouncedValue;
-};

package/src/hooks/useDisclosure.ts

@@ -1,33 +0,0 @@
-import { useState } from 'react';
-
-interface UseDisclosureProps {
-  value?: boolean;
-  setValue?: (value: boolean) => void;
-}
-
-export const useDisclosure = (props?: UseDisclosureProps) => {
-  const [isOpenInternal, setIsOpenInternal] = useState(false);
-  const isOpen = props?.value !== undefined ? props.value : isOpenInternal;
-
-  const open = () => {
-    setIsOpenInternal(true);
-    props?.setValue?.(true);
-  };
-
-  const close = () => {
-    setIsOpenInternal(false);
-    props?.setValue?.(false);
-  };
-
-  const toggle = () => {
-    setIsOpenInternal(prev => !prev);
-    props?.setValue?.(!isOpen);
-  };
-
-  return {
-    isOpen,
-    open,
-    close,
-    toggle,
-  };
-};

package/src/hooks/useForm.ts

@@ -1,38 +0,0 @@
-import { useEffect, useMemo, useState } from 'react';
-
-interface UseFormProps<T> {
-  defaultValue: T | null;
-  resetOnDefaultValueChange?: boolean;
-}
-
-export const useForm = <T extends Record<string, unknown>>({
-  defaultValue,
-  resetOnDefaultValueChange = true,
-}: UseFormProps<T>) => {
-  const [form, setForm] = useState<T | null>(defaultValue);
-
-  const reset = () => setForm(defaultValue);
-
-  const setField = (field: keyof T, value: T[keyof T]) => {
-    setForm(prev => ({ ...prev, [field]: value }) as T);
-  };
-
-  const isDirty = useMemo(
-    () => JSON.stringify(form) !== JSON.stringify(defaultValue),
-    [form, defaultValue]
-  );
-
-  useEffect(() => {
-    if (defaultValue && resetOnDefaultValueChange) {
-      setForm(defaultValue);
-    }
-  }, [defaultValue, resetOnDefaultValueChange]);
-
-  return {
-    form,
-    isDirty,
-    setForm,
-    setField,
-    reset,
-  };
-};

package/src/hooks/useOutsideClick.ts

@@ -1,42 +0,0 @@
-import { useEffect, type RefObject } from 'react';
-
-interface UseOutsideClickProps {
-  refs: RefObject<HTMLElement | null>[];
-  handler: (event: MouseEvent | TouchEvent) => void;
-  enabled?: boolean;
-}
-
-export function useOutsideClick({
-  refs,
-  handler,
-  enabled = true,
-}: UseOutsideClickProps) {
-  useEffect(() => {
-    if (!enabled) return;
-
-    const listener = (event: MouseEvent | TouchEvent) => {
-      // Check if click is inside any of the referenced elements
-      const clickedInside = refs.some(ref => {
-        const el = ref.current;
-        if (!el) return false;
-        return el.contains(event.target as Node);
-      });
-
-      // If click is inside at least one element — ignore
-      if (clickedInside) return;
-
-      // Defer handler to next tick to allow all listeners to evaluate
-      // before any DOM mutations occur (prevents conflicts when multiple
-      // components use this hook simultaneously)
-      setTimeout(() => handler(event), 0);
-    };
-
-    document.addEventListener('mousedown', listener);
-    document.addEventListener('touchstart', listener);
-
-    return () => {
-      document.removeEventListener('mousedown', listener);
-      document.removeEventListener('touchstart', listener);
-    };
-  }, [refs, handler, enabled]);
-}

package/src/hooks/usePaginationState.ts

@@ -1,39 +0,0 @@
-import { useState } from 'react';
-
-interface PaginationOptions {
-  initialPage?: number;
-  initialPageSize?: number;
-}
-
-interface PaginationState {
-  page: number;
-  setPage: (page: number) => void;
-  pageSize: number;
-  setPageSize: (size: number) => void;
-  handleNextPage: (page: number) => void;
-  handlePreviousPage: (page: number) => void;
-  handlePageChange: (page: number) => void;
-}
-
-export function usePaginationState(
-  options: PaginationOptions = {}
-): PaginationState {
-  const { initialPage = 1, initialPageSize = 10 } = options;
-
-  const [page, setPage] = useState<number>(initialPage);
-  const [pageSize, setPageSize] = useState<number>(initialPageSize);
-
-  const handleNextPage = (nextPage: number) => setPage(nextPage);
-  const handlePreviousPage = (prevPage: number) => setPage(prevPage);
-  const handlePageChange = (newPage: number) => setPage(newPage);
-
-  return {
-    page,
-    setPage,
-    pageSize,
-    setPageSize,
-    handleNextPage,
-    handlePreviousPage,
-    handlePageChange,
-  };
-}

package/src/hooks/usePositionClose.ts

@@ -1,69 +0,0 @@
-import type { Position } from '@/types/position';
-import {
-  calculateOptimalPosition,
-  calculatePositionValues,
-} from '@/utils/position';
-import type { RefObject } from 'react';
-import { useEffect, useMemo, useState } from 'react';
-
-interface UsePositionCloseProps {
-  triggerRef: RefObject<HTMLElement | null>;
-  targetRef: RefObject<HTMLElement | null>;
-  position?: Position;
-  offset?: number;
-  isOpen: boolean;
-}
-
-/**
- * Hook to calculate fixed positioning for overlays relative to trigger elements.
- * Handles viewport-aware position optimization and click-outside detection.
- */
-export const usePositionClose = ({
-  triggerRef,
-  targetRef,
-  position = 'bottom-left',
-  offset = 8,
-  isOpen,
-}: UsePositionCloseProps) => {
-  const [isMounted, setIsMounted] = useState(false);
-
-  // Calculate optimal position based on viewport constraints
-  const { positionStyles, optimalPosition } = useMemo(() => {
-    if (isMounted && targetRef.current && triggerRef.current) {
-      const overlayRect = targetRef.current.getBoundingClientRect();
-      const triggerRect = triggerRef.current.getBoundingClientRect();
-
-      // Find the best position to avoid viewport overflow
-      const optimalPosition = calculateOptimalPosition(
-        overlayRect,
-        triggerRect,
-        position
-      );
-
-      const coords = calculatePositionValues(
-        overlayRect,
-        triggerRect,
-        optimalPosition,
-        offset
-      );
-
-      return { positionStyles: coords, optimalPosition };
-    }
-    return { positionStyles: { top: 0, left: 0 }, optimal: position };
-  }, [triggerRef, targetRef, position, offset, isMounted]);
-
-  // Track mounting state for smooth positioning
-  useEffect(() => {
-    if (isOpen) {
-      setIsMounted(true);
-    } else {
-      setIsMounted(false);
-    }
-  }, [isOpen]);
-
-  return {
-    positionStyles,
-    optimalPosition,
-    isMounted,
-  };
-};

package/src/hooks/useValidation.ts

@@ -1,33 +0,0 @@
-import { useCallback, useState } from 'react';
-
-export const useValidation = <T>(defaultValue: Partial<T>) => {
-  const [errors, setErrors] = useState<Partial<T>>(defaultValue);
-
-  const setError = useCallback((field: keyof T, value: Partial<T>[keyof T]) => {
-    setErrors(prev => {
-      prev[field] = value;
-
-      return { ...prev };
-    });
-  }, []);
-
-  const clearErrors = useCallback(() => {
-    setErrors(defaultValue);
-  }, [defaultValue]);
-
-  const clearError = useCallback((field: keyof T) => {
-    setErrors(prev => {
-      delete prev[field];
-
-      return { ...prev };
-    });
-  }, []);
-
-  return {
-    errors,
-    setError,
-    setErrors,
-    clearError,
-    clearErrors,
-  };
-};

package/src/hooks/useWatchResize.ts

@@ -1,52 +0,0 @@
-import { useEffect, type RefObject } from 'react';
-
-interface UseWidthDynamicResizeParams<T> {
-  ref: RefObject<T>;
-  skip?: boolean;
-}
-
-export const useWidthDynamicResize = <T extends HTMLElement | null>(
-  { ref, skip }: UseWidthDynamicResizeParams<T>,
-  deps: unknown[]
-) => {
-  useEffect(() => {
-    const node = ref.current;
-
-    if (!node || skip) {
-      return;
-    }
-
-    // Capture current width before content changes
-    const currentWidth = node.offsetWidth;
-
-    // Set explicit width to enable smooth transitions
-    node.style.width = `${currentWidth}px`;
-
-    // Use requestAnimationFrame to allow DOM to update with new content
-    requestAnimationFrame(() => {
-      // Measure the natural width with new content
-      node.style.width = 'auto';
-      const newWidth = node.offsetWidth;
-
-      // Set back to old width momentarily
-      node.style.width = `${currentWidth}px`;
-
-      // Force reflow
-      void node.offsetHeight;
-
-      // Transition to new width
-      node.style.width = `${newWidth}px`;
-
-      // After transition, set to auto for flexibility
-      const handleTransitionEnd = () => {
-        if (node) {
-          node.style.width = 'auto';
-        }
-
-        node?.removeEventListener('transitionend', handleTransitionEnd);
-      };
-
-      node.addEventListener('transitionend', handleTransitionEnd);
-    });
-  }, deps);
-};