@cleen/ui 0.1.0 → 0.1.2

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

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

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

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

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

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

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

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

package/src/components/slider/Slider.tsx

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

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