@cleen/ui 0.1.0

package/src/components/skeletons/blocks/SkeletonVideo.tsx

@@ -0,0 +1,71 @@
+import { getPulseAnimationClass } from '@/components/skeletons/styles/skeleton';
+import type { SkeletonComponentProps } from '@/components/skeletons/types/skeleton';
+import { cn } from '@cleen/ui-core';
+import { forwardRef } from 'react';
+
+// Video card placeholder - big 16:9 box with a play button in the middle
+export const SkeletonVideo = forwardRef<HTMLDivElement, SkeletonComponentProps>(
+  function SkeletonVideo({ className, style, variant = 'default' }, ref) {
+    const pulseClass = getPulseAnimationClass(variant);
+
+    return (
+      <div ref={ref} className={cn('cleen', className)} style={style}>
+        <div className="cleen-flex cleen-flex-col cleen-gap-3 cleen-w-full">
+          {/* Video box with play circle */}
+          <div
+            className={cn(
+              'cleen-relative cleen-bg-gray/10 cleen-rounded-xl cleen-w-full cleen-aspect-video cleen-overflow-hidden',
+              pulseClass
+            )}
+          >
+            <div className="cleen-absolute cleen-inset-0 cleen-flex cleen-items-center cleen-justify-center">
+              <div className="cleen-bg-gray/20 cleen-rounded-full cleen-size-14 cleen-flex cleen-items-center cleen-justify-center">
+                {/* Play triangle hint - a tiny right-pointing wedge via borders */}
+                <div className="cleen-w-0 cleen-h-0 cleen-ml-1 cleen-border-y-[8px] cleen-border-y-transparent cleen-border-l-[14px] cleen-border-l-gray/40" />
+              </div>
+            </div>
+          </div>
+
+          {/* Title */}
+          <div className="cleen-flex cleen-gap-3">
+            <div
+              className={cn(
+                'cleen-bg-gray/10 cleen-rounded-lg cleen-size-10 cleen-shrink-0',
+                pulseClass
+              )}
+            />
+            <div className="cleen-flex cleen-flex-col cleen-flex-1 cleen-gap-2">
+              <div
+                className={cn(
+                  'cleen-bg-gray/10 cleen-rounded cleen-w-full cleen-h-4',
+                  pulseClass
+                )}
+              />
+              <div
+                className={cn(
+                  'cleen-bg-gray/10 cleen-rounded cleen-w-3/4 cleen-h-3',
+                  pulseClass
+                )}
+              />
+              {/* Duration + views row */}
+              <div className="cleen-flex cleen-items-center cleen-gap-3">
+                <div
+                  className={cn(
+                    'cleen-bg-gray/10 cleen-rounded cleen-w-14 cleen-h-3',
+                    pulseClass
+                  )}
+                />
+                <div
+                  className={cn(
+                    'cleen-bg-gray/10 cleen-rounded cleen-w-10 cleen-h-3',
+                    pulseClass
+                  )}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+);

package/src/components/skeletons/blocks/SkeletonWidgetCard.tsx

@@ -0,0 +1,56 @@
+import { getPulseAnimationClass } from '@/components/skeletons/styles/skeleton';
+import type { SkeletonComponentProps } from '@/components/skeletons/types/skeleton';
+import { cn } from '@cleen/ui-core';
+import type { CSSProperties } from 'react';
+import { forwardRef } from 'react';
+
+export interface SkeletonWidgetCardProps {
+  skeleton?: 'pulse' | 'default';
+  className?: string;
+  style?: CSSProperties;
+}
+
+export const SkeletonWidgetCard = forwardRef<
+  HTMLDivElement,
+  SkeletonComponentProps
+>(function SkeletonWidgetCard({ variant = 'default', className, style }, ref) {
+  const pulseClass = getPulseAnimationClass(variant);
+
+  return (
+    <div ref={ref} className={cn('cleen', className)} style={style}>
+      <div className="cleen-flex cleen-flex-col cleen-justify-between cleen-items-start cleen-gap-3 cleen-bg-white cleen-px-4 cleen-py-4 cleen-border cleen-border-gray/15 cleen-rounded-xl cleen-w-full cleen-h-full">
+        <div className="cleen-flex cleen-justify-between cleen-items-center cleen-gap-2 cleen-px-2 cleen-py-0.5 cleen-border cleen-border-gray/15 cleen-rounded-full">
+          <div
+            className={cn(
+              'cleen-bg-gray/10 cleen-rounded-full cleen-size-1.5',
+              pulseClass
+            )}
+          />
+          <div
+            className={cn(
+              'cleen-bg-gray/10 cleen-rounded cleen-w-20 cleen-h-3',
+              pulseClass
+            )}
+          />
+        </div>
+
+        <div className="cleen-flex cleen-justify-between cleen-items-center cleen-w-full">
+          <div
+            className={cn(
+              'cleen-bg-gray/10 cleen-rounded cleen-w-24 cleen-h-8',
+              pulseClass
+            )}
+          />
+          <div
+            className={cn(
+              'cleen-bg-gray/10 cleen-rounded cleen-w-12 cleen-h-4',
+              pulseClass
+            )}
+          />
+        </div>
+      </div>
+    </div>
+  );
+});
+
+SkeletonWidgetCard.displayName = 'SkeletonBadgeCard';

package/src/components/skeletons/blocks/SkeletonWrapper.tsx

@@ -0,0 +1,140 @@
+import type { SkeletonComponentProps } from '@/components/skeletons/types/skeleton';
+import { forwardRef, type ReactNode } from 'react';
+import { SkeletonAvatar } from './SkeletonAvatar';
+import { SkeletonBadge } from './SkeletonBadge';
+import { SkeletonBanner } from './SkeletonBanner';
+import { SkeletonButton } from './SkeletonButton';
+import { SkeletonCard } from './SkeletonCard';
+import { SkeletonCard2 } from './SkeletonCard2';
+import { SkeletonCard3 } from './SkeletonCard3';
+import { SkeletonCardStack } from './SkeletonCardStack';
+import { SkeletonChart } from './SkeletonChart';
+import { SkeletonContentCard } from './SkeletonContentCard';
+import { SkeletonDataGrid } from './SkeletonDataGrid';
+import { SkeletonForm } from './SkeletonForm';
+import { SkeletonImage } from './SkeletonImage';
+import { SkeletonInfoCard } from './SkeletonInfoCard';
+import { SkeletonInput } from './SkeletonInput';
+import { SkeletonList } from './SkeletonList';
+import { SkeletonParagraph } from './SkeletonParagraph';
+import { SkeletonText } from './SkeletonText';
+import { SkeletonVideo } from './SkeletonVideo';
+import { SkeletonWidgetCard } from './SkeletonWidgetCard';
+
+export type SkeletonType =
+  | 'card'
+  | 'card2'
+  | 'card3'
+  | 'cardStack'
+  | 'contentCard'
+  | 'infoCard'
+  | 'widgetCard'
+  | 'image'
+  | 'video'
+  | 'avatar'
+  | 'dataGrid'
+  | 'text'
+  | 'paragraph'
+  | 'list'
+  | 'form'
+  | 'banner'
+  | 'chart'
+  | 'button'
+  | 'badge'
+  | 'input';
+
+export interface SkeletonWrapperProps extends SkeletonComponentProps {
+  skeleton?: SkeletonType;
+  isShowing?: boolean;
+  children?: ReactNode;
+}
+
+export const SkeletonWrapper = forwardRef<HTMLDivElement, SkeletonWrapperProps>(
+  function SkeletonWrapper(
+    {
+      className,
+      style,
+      variant = 'default',
+      itemCount = 3,
+      skeleton = 'card',
+      isShowing = false,
+      children,
+    },
+    ref
+  ) {
+    if (!isShowing) {
+      return children;
+    }
+
+    const skeletonProps = {
+      ref: ref,
+      variant: variant,
+      itemCount: itemCount,
+      className,
+      style,
+    };
+
+    switch (skeleton) {
+      case 'card2':
+        return <SkeletonCard2 {...skeletonProps} />;
+
+      case 'card3':
+        return <SkeletonCard3 {...skeletonProps} />;
+
+      case 'cardStack':
+        return <SkeletonCardStack {...skeletonProps} />;
+
+      case 'contentCard':
+        return <SkeletonContentCard {...skeletonProps} />;
+
+      case 'infoCard':
+        return <SkeletonInfoCard {...skeletonProps} />;
+
+      case 'widgetCard':
+        return <SkeletonWidgetCard {...skeletonProps} />;
+
+      case 'image':
+        return <SkeletonImage {...skeletonProps} />;
+
+      case 'video':
+        return <SkeletonVideo {...skeletonProps} />;
+
+      case 'avatar':
+        return <SkeletonAvatar {...skeletonProps} />;
+
+      case 'dataGrid':
+        return <SkeletonDataGrid {...skeletonProps} />;
+
+      case 'text':
+        return <SkeletonText {...skeletonProps} />;
+
+      case 'paragraph':
+        return <SkeletonParagraph {...skeletonProps} />;
+
+      case 'list':
+        return <SkeletonList {...skeletonProps} />;
+
+      case 'form':
+        return <SkeletonForm {...skeletonProps} />;
+
+      case 'banner':
+        return <SkeletonBanner {...skeletonProps} />;
+
+      case 'chart':
+        return <SkeletonChart {...skeletonProps} />;
+
+      case 'button':
+        return <SkeletonButton {...skeletonProps} />;
+
+      case 'badge':
+        return <SkeletonBadge {...skeletonProps} />;
+
+      case 'input':
+        return <SkeletonInput {...skeletonProps} />;
+
+      case 'card':
+      default:
+        return <SkeletonCard {...skeletonProps} />;
+    }
+  }
+);

package/src/components/skeletons/index.ts

@@ -0,0 +1,24 @@
+export { Skeleton } from './blocks/Skeleton';
+export type { SkeletonProps, SkeletonRoundness } from './blocks/Skeleton';
+export { SkeletonAvatar } from './blocks/SkeletonAvatar';
+export { SkeletonBadge } from './blocks/SkeletonBadge';
+export { SkeletonBanner } from './blocks/SkeletonBanner';
+export { SkeletonButton } from './blocks/SkeletonButton';
+export { SkeletonCard } from './blocks/SkeletonCard';
+export { SkeletonCard2 } from './blocks/SkeletonCard2';
+export { SkeletonCard3 } from './blocks/SkeletonCard3';
+export { SkeletonCardStack } from './blocks/SkeletonCardStack';
+export { SkeletonChart } from './blocks/SkeletonChart';
+export { SkeletonContentCard } from './blocks/SkeletonContentCard';
+export { SkeletonDataGrid } from './blocks/SkeletonDataGrid';
+export { SkeletonForm } from './blocks/SkeletonForm';
+export { SkeletonImage } from './blocks/SkeletonImage';
+export { SkeletonInfoCard } from './blocks/SkeletonInfoCard';
+export { SkeletonInput } from './blocks/SkeletonInput';
+export { SkeletonList } from './blocks/SkeletonList';
+export { SkeletonParagraph } from './blocks/SkeletonParagraph';
+export { SkeletonText } from './blocks/SkeletonText';
+export { SkeletonVideo } from './blocks/SkeletonVideo';
+export { SkeletonWidgetCard } from './blocks/SkeletonWidgetCard';
+export { SkeletonWrapper, type SkeletonType } from './blocks/SkeletonWrapper';
+export type { SkeletonComponentProps } from './types/skeleton';

package/src/components/skeletons/styles/skeleton.ts

@@ -0,0 +1,2 @@
+export const getPulseAnimationClass = (skeleton: 'default' | 'pulse') =>
+  skeleton === 'pulse' ? 'cleen-animate-pulse' : '';

package/src/components/skeletons/types/skeleton.ts

@@ -0,0 +1,8 @@
+import type { CSSProperties } from 'react';
+
+export interface SkeletonComponentProps {
+  variant?: 'pulse' | 'default';
+  itemCount?: number;
+  className?: string;
+  style?: CSSProperties;
+}

package/src/components/slider/Slider.tsx

@@ -0,0 +1,298 @@
+import React, {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type CSSProperties,
+  type ReactNode,
+} from 'react';
+import { cn } from '@cleen/ui-core';
+import { Tooltip, type TooltipProps } from '@/components/tooltip/Tooltip';
+import {
+  InfoLabels,
+  type InfoLabelsProps,
+} from '@/components/infoLabels/InfoLabels';
+
+export interface SliderProps {
+  minValue?: number;
+  maxValue?: number;
+  step?: number;
+  value?: number;
+  defaultValue?: number;
+  onChange?: (value: number) => void;
+  onChangeEnd?: (value: number) => void;
+  className?: string;
+  classNames?: {
+    container?: string;
+    track?: string;
+    path?: string;
+    filledTrack?: string;
+    thumb?: string;
+  };
+  style?: CSSProperties;
+  styles?: {
+    container?: CSSProperties;
+    track?: CSSProperties;
+    path?: CSSProperties;
+    filledTrack?: CSSProperties;
+    thumb?: CSSProperties;
+  };
+  disabled?: boolean;
+  label?: ReactNode;
+  labels?: {
+    minLabel?: ReactNode;
+    maxLabel?: ReactNode;
+  };
+  tooltip?: TooltipProps;
+  infoLabels?: InfoLabelsProps;
+}
+
+/**
+ * Single-handle slider for selecting a numeric value within a range.
+ *
+ * - Supports controlled mode via `value` + `onChange`, and uncontrolled via `defaultValue`.
+ * - Configure bounds with `minValue` / `maxValue` and increment with `step`.
+ * - Attach a tooltip to the thumb via the `tooltip` prop (forwarded to the Tooltip component).
+ * - Accepts `classNames` and `styles` for keys: `container`, `track`, `path`, `filledTrack`, `thumb`, `infoLabels`.
+ */
+export const Slider: React.FC<SliderProps> = ({
+  minValue = 0,
+  maxValue = 100,
+  step = 1,
+  defaultValue = 0,
+  value,
+  onChange,
+  onChangeEnd,
+  className,
+  classNames,
+  style,
+  styles,
+  disabled = false,
+  label,
+  labels,
+  tooltip,
+  infoLabels,
+}) => {
+  const [internalValue, setInternalValue] = useState<number>(
+    defaultValue ?? minValue
+  );
+
+  const sliderValue = value !== undefined ? value : internalValue;
+  const trackRef = useRef<HTMLDivElement>(null);
+  const dragging = useRef(false);
+  const hasDragged = useRef(false); // To avoid track click event firing after dragging
+
+  const percent = ((sliderValue - minValue) / (maxValue - minValue)) * 100;
+
+  const clamp = (val: number) => {
+    const stepped = Math.round((val - minValue) / step) * step + minValue;
+    return Math.min(maxValue, Math.max(minValue, stepped));
+  };
+
+  const setValue = useCallback(
+    (val: number, triggerEnd?: boolean) => {
+      const clamped = clamp(val);
+
+      if (value === undefined) {
+        setInternalValue(clamped);
+      }
+
+      onChange?.(clamped);
+
+      if (triggerEnd) {
+        onChangeEnd?.(clamped);
+      }
+    },
+    [minValue, maxValue, step, value, onChange, onChangeEnd]
+  );
+
+  // Mouse/touch event handlers
+  const getValueFromPosition = (clientX: number) => {
+    const track = trackRef.current;
+
+    if (!track) {
+      return minValue;
+    }
+
+    const rect = track.getBoundingClientRect();
+    const ratio = (clientX - rect.left) / rect.width;
+    return clamp(minValue + ratio * (maxValue - minValue));
+  };
+
+  const handleThumbMouseDown = (e: React.MouseEvent) => {
+    if (disabled) {
+      return;
+    }
+
+    e.preventDefault();
+
+    dragging.current = true;
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+  };
+
+  const handleMouseMove = (e: MouseEvent) => {
+    if (!dragging.current) {
+      return;
+    }
+
+    setValue(getValueFromPosition(e.clientX));
+  };
+
+  const handleMouseUp = (e: MouseEvent) => {
+    dragging.current = false;
+    hasDragged.current = true;
+    onChangeEnd?.(clamp(getValueFromPosition(e.clientX)));
+    document.removeEventListener('mousemove', handleMouseMove);
+    document.removeEventListener('mouseup', handleMouseUp);
+  };
+
+  const handleTrackClick = (e: React.MouseEvent) => {
+    if (disabled || hasDragged.current) {
+      hasDragged.current = false;
+      return;
+    }
+
+    setValue(getValueFromPosition(e.clientX), true);
+  };
+
+  // Touch support
+  const handleThumbTouchStart = (e: React.TouchEvent) => {
+    if (disabled) {
+      return;
+    }
+
+    e.preventDefault();
+
+    dragging.current = true;
+    document.addEventListener('touchmove', handleTouchMove);
+    document.addEventListener('touchend', handleTouchEnd);
+  };
+
+  const handleTouchMove = (e: TouchEvent) => {
+    if (!dragging.current) {
+      return;
+    }
+
+    if (e.touches.length > 0) {
+      setValue(getValueFromPosition(e.touches[0].clientX));
+    }
+  };
+
+  const handleTouchEnd = (e: TouchEvent) => {
+    dragging.current = false;
+    hasDragged.current = true;
+    onChangeEnd?.(clamp(getValueFromPosition(e.touches[0].clientX)));
+    document.removeEventListener('touchmove', handleTouchMove);
+    document.removeEventListener('touchend', handleTouchEnd);
+  };
+
+  useEffect(() => {
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+      document.removeEventListener('touchmove', handleTouchMove);
+      document.removeEventListener('touchend', handleTouchEnd);
+    };
+  }, []);
+
+  return (
+    <div className={cn('cleen', className)} style={style}>
+      <div
+        className={cn('cleen-w-full', classNames?.container)}
+        style={styles?.container}
+      >
+        {label && (
+          <span className="cleen-font-medium cleen-text-sm cleen-text-gray">
+            {label}
+          </span>
+        )}
+
+        <div
+          ref={trackRef}
+          className={cn(
+            'cleen-relative cleen-w-full cleen-h-8 cleen-touch-none',
+            {
+              'cleen-opacity-60': disabled,
+            },
+            classNames?.track
+          )}
+          style={styles?.track}
+          aria-disabled={disabled}
+          onClick={handleTrackClick}
+        >
+          <div
+            className={cn(
+              'cleen-absolute cleen-left-0 cleen-right-0 cleen-top-1/2 cleen-h-1 cleen-bg-gray/20 dark:cleen-bg-black cleen-rounded-sm -cleen-translate-y-1/2',
+              disabled ? 'cleen-cursor-not-allowed' : 'cleen-cursor-pointer',
+              classNames?.path
+            )}
+            style={styles?.path}
+          >
+            <div
+              className={cn(
+                'cleen-absolute cleen-left-0 cleen-top-0 cleen-h-full cleen-bg-primary cleen-rounded-sm',
+                classNames?.filledTrack
+              )}
+              style={{
+                width: `${percent}%`,
+                ...styles?.filledTrack,
+              }}
+            />
+          </div>
+
+          <Tooltip
+            invertColors
+            label={sliderValue}
+            {...tooltip}
+            className={cn(
+              'cleen-absolute cleen-top-1/2 -cleen-translate-y-1/2',
+              tooltip?.className
+            )}
+            style={{
+              left: `calc(${percent}% - 8px)`,
+              ...tooltip?.style,
+            }}
+          >
+            <div
+              className={cn(
+                'cleen-size-4 cleen-bg-white dark:cleen-bg-black cleen-border cleen-border-gray/60 cleen-rounded-full cleen-transition-all cleen-duration-200 hover:cleen-scale-125 hover:cleen-border-primary',
+                disabled ? 'cleen-cursor-not-allowed' : 'cleen-cursor-pointer',
+                classNames?.thumb
+              )}
+              style={styles?.thumb}
+              tabIndex={disabled ? -1 : 0}
+              role="slider"
+              aria-valuenow={sliderValue}
+              aria-valuemin={minValue}
+              aria-valuemax={maxValue}
+              aria-disabled={disabled}
+              onMouseDown={handleThumbMouseDown}
+              onTouchStart={handleThumbTouchStart}
+            />
+          </Tooltip>
+        </div>
+
+        {(labels?.minLabel || labels?.maxLabel) && (
+          <div className="cleen-flex cleen-items-center cleen-justify-between cleen-w-full">
+            {labels?.minLabel && (
+              <span className="cleen-font-medium cleen-text-xs cleen-text-gray">
+                {labels?.minLabel}
+              </span>
+            )}
+
+            {labels?.maxLabel && (
+              <span className="cleen-font-medium cleen-text-xs cleen-text-gray">
+                {labels?.maxLabel}
+              </span>
+            )}
+          </div>
+        )}
+
+        {(infoLabels?.errorMessage ||
+          infoLabels?.infoMessage ||
+          infoLabels?.subtitle) && <InfoLabels {...infoLabels} />}
+      </div>
+    </div>
+  );
+};

package/src/components/slider/index.ts

@@ -0,0 +1 @@
+export { Slider, type SliderProps } from './Slider';