@cleen/ui 0.1.0

package/src/charts/chart/variants/BellCurve/types/props.ts

@@ -0,0 +1,21 @@
+import type { PointAnnotation } from '@/charts/chart/types/apexcharts';
+import type { ChartProps } from '@/charts/chart/Chart';
+import type {
+  BellCurveRangeAnnotation,
+  BellCurveSerie,
+  BellPoints,
+  HighlightAnnotation,
+} from './bellCurve';
+
+export interface BellCurveProps extends Omit<ChartProps, 'series'> {
+  serie: BellCurveSerie;
+  sigma: number;
+  labels?: {
+    below?: string;
+    middle?: string;
+    above?: string;
+  };
+  pointAnnotations?: { [K in BellPoints]?: PointAnnotation };
+  rangeAnnotations?: BellCurveRangeAnnotation[];
+  highlightAnnotations?: HighlightAnnotation[];
+}

package/src/charts/chart/variants/RadarChart/RadarChart.tsx

@@ -0,0 +1,22 @@
+import Chart, { type ChartProps } from '@/charts/chart/Chart';
+import { applyDefaults } from '@cleen/ui-core';
+import { forwardRef } from 'react';
+import type ReactApexChart from 'react-apexcharts';
+import { DEFAULT_CHART_OPTIONS } from './constant';
+
+/**
+ * Radar chart component built on ApexCharts
+ * Provides a flexible wrapper for radar chart visualizations using a predefined set of default styling options.
+ */
+export const RadarChart = forwardRef<ReactApexChart, Omit<ChartProps, 'type'>>(
+  function RadarChart({ options, ...props }, ref) {
+    return (
+      <Chart
+        type="radar"
+        ref={ref}
+        options={applyDefaults(DEFAULT_CHART_OPTIONS, options)}
+        {...props}
+      />
+    );
+  }
+);

package/src/charts/chart/variants/RadarChart/constant.ts

@@ -0,0 +1,28 @@
+import type { ApexOptions } from 'apexcharts';
+
+export const DEFAULT_CHART_OPTIONS: ApexOptions = {
+  chart: {
+    type: 'radar',
+    zoom: { enabled: false },
+    toolbar: { show: false },
+  },
+  stroke: {
+    width: 2,
+  },
+  fill: {
+    opacity: 0.25,
+  },
+  markers: {
+    size: 4,
+    colors: 'transparent',
+    strokeColors: 'transparent',
+  },
+  tooltip: {
+    marker: {
+      show: false,
+    },
+  },
+  legend: {
+    show: false,
+  },
+};

package/src/charts/chart/variants/RadarChart/index.ts

@@ -0,0 +1 @@
+export { RadarChart } from './RadarChart';

package/src/charts/chart/variants/ScatterChart/ScatterChart.tsx

@@ -0,0 +1,23 @@
+import Chart, { type ChartProps } from '@/charts/chart/Chart';
+import { applyDefaults } from '@cleen/ui-core';
+import { forwardRef } from 'react';
+import type ReactApexChart from 'react-apexcharts';
+import { DEFAULT_CHART_OPTIONS } from './constant';
+
+/**
+ * Scatter chart component built on ApexCharts
+ * Provides a flexible wrapper for scatter chart visualizations using a predefined set of default styling options.
+ */
+export const ScatterChart = forwardRef<
+  ReactApexChart,
+  Omit<ChartProps, 'type'>
+>(function ScatterChart({ options, ...props }, ref) {
+  return (
+    <Chart
+      type="scatter"
+      ref={ref}
+      options={applyDefaults(DEFAULT_CHART_OPTIONS, options)}
+      {...props}
+    />
+  );
+});

package/src/charts/chart/variants/ScatterChart/constant.ts

@@ -0,0 +1,54 @@
+import type { ApexOptions } from 'apexcharts';
+
+export const DEFAULT_CHART_OPTIONS: ApexOptions = {
+  chart: {
+    type: 'scatter',
+    zoom: { enabled: false },
+    toolbar: { show: false },
+  },
+  markers: {
+    shape: 'square',
+    size: 8,
+    strokeWidth: 0,
+  },
+  grid: {
+    strokeDashArray: 8,
+  },
+  legend: {
+    show: true,
+    horizontalAlign: 'right',
+    position: 'top',
+    labels: {
+      colors: 'rgba(var(--cleen-gray), 0.8)',
+    },
+  },
+  yaxis: {
+    axisBorder: {
+      show: true,
+      color: 'rgba(var(--cleen-gray), .2)',
+    },
+    labels: {
+      style: {
+        colors: 'rgba(var(--cleen-gray), 0.8)',
+      },
+    },
+  },
+  xaxis: {
+    axisBorder: {
+      show: true,
+      color: 'rgba(var(--cleen-gray), .2)',
+    },
+    labels: {
+      style: {
+        colors: 'rgba(var(--cleen-gray), 0.8)',
+      },
+    },
+  },
+  title: {
+    align: 'left',
+    floating: true,
+    style: {
+      color: 'rgba(var(--cleen-black))',
+    },
+  },
+};

package/src/charts/chart/variants/ScatterChart/index.ts

@@ -0,0 +1 @@
+export { ScatterChart } from './ScatterChart';

package/src/charts/chart/variants/index.ts

@@ -0,0 +1,3 @@
+export * from './BellCurve';
+export * from './RadarChart';
+export * from './ScatterChart';

package/src/charts/index.ts

@@ -0,0 +1,2 @@
+export * from './chart';
+export * from './simpleChart';

package/src/charts/simpleChart/SimpleChart.tsx

@@ -0,0 +1,54 @@
+import React, { type CSSProperties } from 'react';
+
+export type SimpleChartProps = {
+  width?: number;
+  height?: number;
+  data?: number[];
+  className?: string;
+  style?: CSSProperties;
+};
+
+export const SimpleChart: React.FC<SimpleChartProps> = ({
+  width = 240,
+  height = 80,
+  data = [12, 28, 18, 30, 24, 36],
+  className = '',
+  style,
+}) => {
+  const max = Math.max(...data, 1);
+  const points = data
+    .map(
+      (d, i) =>
+        `${(i / (data.length - 1)) * width},${height - (d / max) * height}`
+    )
+    .join(' ');
+
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox={`0 0 ${width} ${height}`}
+      className={className}
+      style={style}
+      role="img"
+      aria-label="Simple line chart"
+    >
+      <rect width="100%" height="100%" fill="transparent" />
+      <polyline
+        fill="none"
+        stroke="rgba(59,130,246,0.9)"
+        strokeWidth={2}
+        points={points}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      {/* area under line */}
+      <polygon
+        points={`${points} ${width},${height} 0,${height}`}
+        fill="rgba(59,130,246,0.08)"
+      />
+    </svg>
+  );
+};
+
+export default SimpleChart;

package/src/charts/simpleChart/index.ts

@@ -0,0 +1 @@
+export { SimpleChart, type SimpleChartProps } from './SimpleChart';

package/src/components/advancedProgressBar/AdvancedProgressBar.tsx

@@ -0,0 +1,156 @@
+import { forwardRef, useMemo } from 'react';
+import { Bar } from './blocks/Bar';
+import { BlockLabel } from './blocks/BlockLabel';
+import { Clamp } from './blocks/Clamp';
+import { DEFAULT_TRACK_CONFIG } from './constants';
+import type { AdvancedProgressBarProps } from './types/props';
+import { cn, useAnimateNumber } from '@cleen/ui-core';
+
+/**
+ * The `AdvancedProgressBar` component renders a customizable progress track with support for multiple overlapping bars and clamp markers.
+ *
+ * - Each item in `series` is either a `bar` (with `start`/`end` range) or a `clamp` (a single `value` marker).
+ * - Supports optional labels and tooltips per series item.
+ * - The `track` prop controls the track's background color and height.
+ * - Use `minValue`/`maxValue` to define the scale range (defaults to 0–100).
+ * - Set `renderAnimated` to animate bars from their start to end values; control speed via `renderAnimatedDuration`.
+ * - Accepts `classNames` and `styles` to customize: `container`, `track`, `bar`, `clamp`, `labels`, `label`.
+ */
+export const AdvancedProgressBar = forwardRef<
+  HTMLDivElement,
+  AdvancedProgressBarProps
+>(function AdvancedProgressBar(
+  {
+    series = [],
+    track,
+    renderAnimated,
+    renderAnimatedDuration = 1000,
+    className,
+    classNames,
+    style,
+    styles,
+    minValue = 0,
+    maxValue = 100,
+    ...props
+  },
+  ref
+) {
+  const trackConfig = useMemo(
+    () => ({ ...DEFAULT_TRACK_CONFIG, ...track }),
+    [track]
+  );
+
+  const animationTargetValue = useMemo(() => {
+    return series.reduce((acc, serie) => {
+      if (serie.type === 'bar') {
+        const rawEnd = typeof serie.end === 'number' ? serie.end : maxValue;
+        const end = Math.max(minValue, Math.min(rawEnd, maxValue));
+
+        if (end > acc) {
+          return end;
+        }
+      }
+
+      return acc;
+    }, 0);
+  }, [series, minValue, maxValue]);
+
+  const animatedGlobal = useAnimateNumber({
+    targetNumber: animationTargetValue,
+    defaultNumber: minValue,
+    duration: renderAnimatedDuration,
+    disabled: !renderAnimated,
+  });
+
+  return (
+    <div className={cn('cleen', className)} style={style} ref={ref} {...props}>
+      <div
+        className={cn('cleen-w-full cleen-relative', classNames?.container)}
+        style={styles?.container}
+      >
+        {/* Track */}
+        <div
+          className={cn('cleen-relative cleen-w-full', classNames?.track)}
+          style={{
+            height: trackConfig.height,
+            backgroundColor: trackConfig.color,
+            borderRadius: trackConfig.height / 2,
+            ...styles?.track,
+          }}
+        >
+          {/* Bars and clamps are absolutely positioned inside the track */}
+          {series.map((serie, i) => {
+            if (serie == null || !serie.type) {
+              return null;
+            }
+
+            const color = serie.color ?? 'var(--cleen-primary)';
+
+            switch (serie.type) {
+              case 'clamp':
+                return (
+                  <Clamp
+                    key={`clamp-${i}`}
+                    serie={serie}
+                    color={color}
+                    trackHeight={trackConfig.height}
+                    minValue={minValue}
+                    maxValue={maxValue}
+                    className={classNames?.clamp}
+                    style={styles?.clamp}
+                  />
+                );
+
+              case 'bar':
+                return (
+                  <Bar
+                    key={`bar-${i}`}
+                    serie={serie}
+                    color={color}
+                    trackHeight={trackConfig.height}
+                    minValue={minValue}
+                    maxValue={maxValue}
+                    renderAnimated={renderAnimated}
+                    animatedGlobal={animatedGlobal}
+                    className={classNames?.bar}
+                    style={styles?.bar}
+                  />
+                );
+
+              default:
+                return null;
+            }
+          })}
+        </div>
+        {/* Labels row (positioned under the track) */}
+        {series.some(serie => !!serie.label) && (
+          <div
+            aria-hidden
+            className={cn(
+              'cleen-relative cleen-mt-2 cleen-h-5',
+              classNames?.labels
+            )}
+            style={styles?.labels}
+          >
+            {series.map((serie, i) => {
+              if (!serie || !serie.type || !serie.label) {
+                return null;
+              }
+
+              return (
+                <BlockLabel
+                  key={`label-${i}`}
+                  serie={serie}
+                  minValue={minValue}
+                  maxValue={maxValue}
+                  className={classNames?.label}
+                  style={styles?.label}
+                />
+              );
+            })}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+});

package/src/components/advancedProgressBar/blocks/Bar.tsx

@@ -0,0 +1,118 @@
+import { Tooltip } from '@/components/tooltip';
+import { cn } from '@cleen/ui-core';
+import type { CSSProperties } from 'react';
+import type { Serie } from '../types/props';
+import { clamp, valueToPercent } from '../utils';
+import { Clamp } from './Clamp';
+
+export interface BarProps {
+  serie: Serie;
+  minValue: number;
+  maxValue: number;
+  color: string;
+  trackHeight: number;
+  renderAnimated?: boolean;
+  animatedGlobal?: number;
+  className?: string;
+  style?: CSSProperties;
+}
+
+export const Bar = ({
+  serie,
+  minValue,
+  maxValue,
+  animatedGlobal = minValue,
+  renderAnimated,
+  color,
+  trackHeight,
+  className,
+  style,
+}: BarProps) => {
+  if (serie.type !== 'bar') {
+    return null;
+  }
+
+  // Range bar
+  const rawStart = typeof serie.start === 'number' ? serie.start : minValue;
+  const rawEnd = typeof serie.end === 'number' ? serie.end : maxValue;
+  let start = clamp(valueToPercent(rawStart, minValue, maxValue));
+  let end = clamp(valueToPercent(rawEnd, minValue, maxValue));
+
+  if (end < start) {
+    // swap to ensure positive width
+    [start, end] = [end, start];
+  }
+
+  const width = Math.max(
+    0,
+    renderAnimated ? animatedGlobal - start : end - start
+  );
+
+  // If width is extremely small, render as a thin marker so it's visible
+  if (
+    (width < 1 && !renderAnimated) ||
+    (renderAnimated && animatedGlobal >= end && width === 0)
+  ) {
+    return (
+      <Clamp
+        serie={{
+          ...serie,
+          type: 'clamp',
+          value: start,
+        }}
+        color={color}
+        trackHeight={trackHeight}
+        minValue={minValue}
+        maxValue={maxValue}
+        className={className}
+        style={style}
+      />
+    );
+  }
+
+  const posStyles = {
+    left: `${start}%`,
+    top: serie?.height ? (trackHeight - serie.height) / 2 : 0,
+    width: `${width}%`,
+    height: serie?.height ?? '100%',
+  };
+
+  return serie.tooltip ? (
+    <Tooltip
+      invertColors
+      {...serie.tooltip}
+      className={cn('cleen-absolute', serie.tooltip.className)}
+      style={{
+        ...posStyles,
+        ...serie.tooltip.style,
+      }}
+      classNames={{
+        container: cn('cleen-min-w-full', serie.tooltip.classNames?.container),
+        labelContainer: cn(
+          'cleen-z-10',
+          serie.tooltip.classNames?.labelContainer
+        ),
+      }}
+    >
+      <div
+        className={cn('cleen-min-w-full', className)}
+        style={{
+          backgroundColor: color,
+          borderRadius: (serie?.height ?? trackHeight) / 2,
+          ...posStyles,
+          ...style,
+        }}
+      />
+    </Tooltip>
+  ) : (
+    <div
+      className={cn('cleen-absolute cleen-pointer-events-none', className)}
+      style={{
+        ...posStyles,
+        backgroundColor: color,
+        borderRadius: (serie?.height ?? trackHeight) / 2,
+        ...style,
+      }}
+    />
+  );
+};

package/src/components/advancedProgressBar/blocks/BlockLabel.tsx

@@ -0,0 +1,49 @@
+import type { CSSProperties } from 'react';
+import type { Serie } from '../types/props';
+import { clamp, valueToPercent } from '../utils';
+import { cn } from '@cleen/ui-core';
+
+export interface BlockLabelProps {
+  serie: Serie;
+  minValue: number;
+  maxValue: number;
+  className?: string;
+  style?: CSSProperties;
+}
+
+export const BlockLabel = ({
+  serie,
+  minValue,
+  maxValue,
+  className,
+  style,
+}: BlockLabelProps) => {
+  let centerPercent = 0;
+
+  if (serie.type === 'clamp') {
+    const rawVal = typeof serie.value === 'number' ? serie.value : 0;
+    const raw = Number.isFinite(rawVal) ? rawVal : minValue;
+    centerPercent = clamp(valueToPercent(raw, minValue, maxValue));
+  } else {
+    const rawStart = typeof serie.start === 'number' ? serie.start : minValue;
+    const rawEnd = typeof serie.end === 'number' ? serie.end : maxValue;
+    const start = clamp(valueToPercent(rawStart, minValue, maxValue));
+    const end = clamp(valueToPercent(rawEnd, minValue, maxValue));
+    centerPercent = (start + end) / 2;
+  }
+
+  return (
+    <div
+      className={cn(
+        'cleen-absolute -cleen-translate-x-1/2 cleen-whitespace-nowrap',
+        className
+      )}
+      style={{
+        left: `${centerPercent}%`,
+        ...style,
+      }}
+    >
+      {serie.label}
+    </div>
+  );
+};

package/src/components/advancedProgressBar/blocks/Clamp.tsx

@@ -0,0 +1,85 @@
+import { Tooltip } from '@/components/tooltip';
+import { cn } from '@cleen/ui-core';
+import type { CSSProperties } from 'react';
+import type { Serie } from '../types/props';
+import { clamp, valueToPercent } from '../utils';
+
+export interface ClampProps {
+  serie: Serie;
+  minValue: number;
+  maxValue: number;
+  color: string;
+  trackHeight: number;
+  className?: string;
+  style?: CSSProperties;
+}
+
+export const Clamp = ({
+  serie,
+  minValue,
+  maxValue,
+  color,
+  trackHeight,
+  className,
+  style,
+}: ClampProps) => {
+  if (serie.type !== 'clamp') {
+    return null;
+  }
+
+  const rawVal = typeof serie.value === 'number' ? serie.value : 0;
+  const raw = Number.isFinite(rawVal) ? rawVal : minValue;
+  const left = clamp(valueToPercent(raw, minValue, maxValue));
+  const size = Math.max(2, serie?.height ?? trackHeight * 1.5);
+
+  const posStyles = {
+    left: `${left}%`,
+    top: '50%',
+  };
+
+  return serie.tooltip ? (
+    <Tooltip
+      invertColors
+      {...serie.tooltip}
+      className={cn(
+        'cleen-absolute cleen-z-10 -cleen-translate-x-1/2 -cleen-translate-y-1/2',
+        serie.tooltip.className
+      )}
+      style={{
+        ...posStyles,
+        ...serie.tooltip.style,
+      }}
+      classNames={{
+        ...serie.tooltip.classNames,
+        labelContainer: cn(
+          'cleen-z-10',
+          serie.tooltip.classNames?.labelContainer
+        ),
+      }}
+    >
+      <div
+        className={cn('cleen-rounded-full', className)}
+        style={{
+          width: size,
+          height: size,
+          backgroundColor: color,
+          ...style,
+        }}
+      />
+    </Tooltip>
+  ) : (
+    <div
+      className={cn(
+        'cleen-absolute cleen-rounded-full -cleen-translate-x-1/2 -cleen-translate-y-1/2 cleen-pointer-events-none',
+        className
+      )}
+      style={{
+        width: size,
+        height: size,
+        backgroundColor: color,
+        ...posStyles,
+        ...style,
+      }}
+    />
+  );
+};

package/src/components/advancedProgressBar/constants.ts

@@ -0,0 +1,6 @@
+export const DEFAULT_TRACK_CONFIG = {
+  color: 'rgb(var(--cleen-gray))',
+  height: 8,
+};
+
+export const DEFAULT_SERIE_COLOR = 'var(--cleen-primary)';

package/src/components/advancedProgressBar/index.ts

@@ -0,0 +1,2 @@
+export { AdvancedProgressBar } from './AdvancedProgressBar';
+export type { AdvancedProgressBarProps } from './types/props';