@cleen/ui 0.1.0 → 0.1.1

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

@@ -1,47 +0,0 @@
-import type {
-  PointAnnotation,
-  XAxisAnnotation,
-} from '@/charts/chart/types/apexcharts';
-
-export type BellPoints =
-  | 'middle'
-  | 'leftSigma'
-  | 'left2Sigma'
-  | 'left'
-  | 'rightSigma'
-  | 'right2Sigma'
-  | 'right';
-
-export type BellCurveSerie = {
-  x: number;
-  y: number;
-}[];
-
-export interface HighlightAnnotation {
-  x: number;
-  y?: number;
-  show?: 'line' | 'point' | 'both';
-  line?: XAxisAnnotation;
-  point?: PointAnnotation;
-}
-
-type RangeAnnotation = Omit<XAxisAnnotation, 'x' | 'x2'>;
-
-export type BellCurveRangeAnnotation =
-  | (RangeAnnotation & {
-      type: 'range';
-      x: BellPoints;
-      x2: BellPoints;
-    })
-  | (RangeAnnotation & {
-      type: 'region';
-      x: number;
-    })
-  | (RangeAnnotation & {
-      type: 'offset';
-      x: number;
-      offset: number;
-    })
-  | (XAxisAnnotation & {
-      type: 'custom';
-    });

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

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

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

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

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

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

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

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

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

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

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

package/src/charts/index.ts

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

package/src/charts/simpleChart/SimpleChart.tsx

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

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

package/src/components/advancedProgressBar/AdvancedProgressBar.tsx

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

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

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

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

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

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