@cleen/ui 0.1.0 → 0.1.1

package/README.md

@@ -0,0 +1,37 @@
+# @cleen/ui
+
+Core React component library for Cleen — includes UI components, chart wrappers, and icon utilities. Built with TypeScript, Tailwind CSS, and fully typed.
+
+## Installation
+
+```bash
+npm install @cleen/ui @cleen/ui-core
+```
+
+Import the stylesheet in your app entry point:
+
+```js
+import '@cleen/ui-core/styles.css';
+```
+
+## Usage
+
+```tsx
+import { Button, Input, Modal } from '@cleen/ui';
+import { Chart } from '@cleen/ui/charts';
+import { CleenIcon } from '@cleen/ui/icons';
+```
+
+## Entry Points
+
+| Import             | Contents                                    |
+| ------------------ | ------------------------------------------- |
+| `@cleen/ui`        | All UI components                           |
+| `@cleen/ui/charts` | ApexCharts-based chart components           |
+| `@cleen/ui/icons`  | Icon utilities and `react-icons` re-exports |
+
+## Peer Dependencies
+
+- `react` ^18.3.1
+- `react-dom` ^18.3.1
+- `react-router-dom` ^6.23.1

package/dist/charts/index.d.ts

@@ -0,0 +1,118 @@
+import * as react from 'react';
+import react__default, { CSSProperties } from 'react';
+import { ApexOptions } from 'apexcharts';
+import ReactApexChart from 'react-apexcharts';
+
+interface ChartProps {
+    /**
+     * Type of chart to render. [Apexcharts API Reference](https://apexcharts.com/docs/options/chart/type/)
+     */
+    type?: ReactApexChart['props']['type'];
+    /**
+     * Chart data series. [Apexcharts API Reference](https://apexcharts.com/docs/options/series/)
+     */
+    series: ApexOptions['series'];
+    /**
+     * Chart options. [Apexcharts API Reference](https://apexcharts.com/docs/options/annotations/)
+     */
+    options?: ApexOptions;
+    /**
+     * Chart width. [Apexcharts API Reference](https://apexcharts.com/docs/options/chart/width/)
+     */
+    width?: string | number;
+    /**
+     * Chart height. [Apexcharts API Reference](https://apexcharts.com/docs/options/chart/height/)
+     */
+    height?: string | number;
+    /**
+     * Additional CSS class names applied to the wrapper of the chart
+     */
+    className?: string;
+    /**
+     * Additional CSS style props applied to the wrapper of the chart
+     */
+    style?: CSSProperties;
+}
+/**
+ * Chart component built on ApexCharts
+ * Provides a flexible wrapper for various chart types
+ */
+declare const Chart: react.ForwardRefExoticComponent<ChartProps & react.RefAttributes<ReactApexChart>>;
+
+type ApexAnnotations = NonNullable<ApexOptions['annotations']>;
+type PointAnnotations = NonNullable<ApexAnnotations['points']>;
+type PointAnnotation = PointAnnotations[number];
+type XAxisAnnotations = NonNullable<ApexAnnotations['xaxis']>;
+type XAxisAnnotation = XAxisAnnotations[number];
+
+type BellPoints = 'middle' | 'leftSigma' | 'left2Sigma' | 'left' | 'rightSigma' | 'right2Sigma' | 'right';
+type BellCurveSerie = {
+    x: number;
+    y: number;
+}[];
+interface HighlightAnnotation {
+    x: number;
+    y?: number;
+    show?: 'line' | 'point' | 'both';
+    line?: XAxisAnnotation;
+    point?: PointAnnotation;
+}
+type RangeAnnotation = Omit<XAxisAnnotation, 'x' | 'x2'>;
+type BellCurveRangeAnnotation = (RangeAnnotation & {
+    type: 'range';
+    x: BellPoints;
+    x2: BellPoints;
+}) | (RangeAnnotation & {
+    type: 'region';
+    x: number;
+}) | (RangeAnnotation & {
+    type: 'offset';
+    x: number;
+    offset: number;
+}) | (XAxisAnnotation & {
+    type: 'custom';
+});
+
+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[];
+}
+
+/**
+ * BellCurve component built on ApexCharts
+ * Provides a custom BellCurve chart with annotations and series segmentation
+ */
+declare const BellCurve: react.ForwardRefExoticComponent<BellCurveProps & react.RefAttributes<ReactApexChart>>;
+
+/**
+ * Radar chart component built on ApexCharts
+ * Provides a flexible wrapper for radar chart visualizations using a predefined set of default styling options.
+ */
+declare const RadarChart: react.ForwardRefExoticComponent<Omit<ChartProps, "type"> & react.RefAttributes<ReactApexChart>>;
+
+/**
+ * Scatter chart component built on ApexCharts
+ * Provides a flexible wrapper for scatter chart visualizations using a predefined set of default styling options.
+ */
+declare const ScatterChart: react.ForwardRefExoticComponent<Omit<ChartProps, "type"> & react.RefAttributes<ReactApexChart>>;
+
+type SimpleChartProps = {
+    width?: number;
+    height?: number;
+    data?: number[];
+    className?: string;
+    style?: CSSProperties;
+};
+declare const SimpleChart: react__default.FC<SimpleChartProps>;
+
+export { BellCurve, type BellCurveProps, Chart, type ChartProps, RadarChart, ScatterChart, SimpleChart, type SimpleChartProps };