@cleen/ui 0.1.0 → 0.1.2

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 };

package/dist/charts/index.js

@@ -0,0 +1 @@
+import{cn as U}from"@cleen/ui-core";import{forwardRef as W}from"react";import Y from"react-apexcharts";var S={chart:{toolbar:{show:!0,tools:{download:!0,selection:!0,zoom:!0,zoomin:!0,zoomout:!0,pan:!0,reset:!0}},animations:{enabled:!0}},dataLabels:{enabled:!1},stroke:{curve:"smooth",width:2},xaxis:{labels:{style:{fontSize:"12px"}}},yaxis:{labels:{style:{fontSize:"12px"}}},legend:{position:"top",horizontalAlign:"left"},tooltip:{enabled:!0,theme:"light"}};import{jsx as T}from"react/jsx-runtime";var v=W(function({type:e="line",series:t,options:o={},width:f="100%",height:h=350,className:i,style:s},y){let d={...S,...o,chart:{...S.chart,...o.chart,type:e}};return T("div",{className:U("cleen",i),style:s,children:T(Y,{options:d,series:t,type:e,width:f,height:h,ref:y})})}),g=v;import{applyDefaults as b}from"@cleen/ui-core";import{forwardRef as K,useMemo as A}from"react";import{ColorHelpers as u}from"@cleen/ui-core";var R={marker:{size:2,fillColor:"rgba(var(--cleen-gray), 0.8)",strokeColor:"rgba(var(--cleen-gray), 0.8)",offsetY:-16,shape:"triangle"},label:{borderWidth:0,offsetY:-20,style:{color:"rgba(var(--cleen-gray), 0.8)",background:"transparent",fontSize:"11px"}}},N={label:{borderColor:"transparent",style:{color:"rgba(var(--cleen-white))",background:"rgba(var(--cleen-primary))"}},fillColor:"rgba(var(--cleen-primary))"},w={label:{borderWidth:0,offsetY:-15,orientation:"horizontal",style:{color:"rgba(var(--cleen-primary))",background:"transparent",fontSize:"16px",fontWeight:700}},borderColor:"rgba(var(--cleen-primary))"},_={marker:{size:8,fillColor:"rgba(var(--cleen-primary))",strokeColor:"rgba(var(--cleen-white))"}},k={chart:{zoom:{enabled:!1},toolbar:{show:!1},animations:{enabled:!1}},stroke:{curve:"monotoneCubic",width:2.5},colors:[u.getComputedColor("var(--cleen-error)"),u.getComputedColor("var(--cleen-primary)"),u.getComputedColor("var(--cleen-success)")],fill:{type:"gradient",gradient:{shade:"light",type:"vertical",shadeIntensity:.6,gradientToColors:[u.getComputedColor("var(--cleen-error)")||"",u.getComputedColor("var(--cleen-primary)")||"",u.getComputedColor("var(--cleen-success)")||""],inverseColors:!1,opacityFrom:.95,opacityTo:.6}},yaxis:{show:!1},tooltip:{enabled:!0,x:{formatter:function(r){return`Score: ${typeof r=="string"?Number(r):r}`}},y:{formatter:function(r){return`${Number(r).toFixed(4)}`}}},grid:{show:!1},legend:{show:!1}};var I=(r,e)=>({middle:r,leftSigma:r-e,left2Sigma:r-2*e,left:r-3*e,rightSigma:r+2*e,right2Sigma:r+2*e,right:r+3*e}),H=(r,e,t,o)=>({middle:r,leftSigma:r-e,left2Sigma:r-2*e,left:t,rightSigma:r+e,right2Sigma:r+2*e,right:o}),L=(r,e)=>{let t={};switch(r.type){case"range":t={x:e[r.x],x2:e[r.x2]};break;case"offset":t={x:r.x-r.offset,x2:r.x+r.offset};break;case"region":r.x>=e.left&&r.x<e.left2Sigma?t={x:e.left,x2:e.left2Sigma}:r.x>=e.left2Sigma&&r.x<e.leftSigma?t={x:e.left2Sigma,x2:e.leftSigma}:r.x>=e.leftSigma&&r.x<e.middle?t={x:e.leftSigma,x2:e.middle}:r.x>=e.middle&&r.x<e.rightSigma?t={x:e.middle,x2:e.rightSigma}:r.x>=e.rightSigma&&r.x<e.right2Sigma?t={x:e.rightSigma,x2:e.right2Sigma}:r.x>=e.right2Sigma&&r.x<e.right&&(t={x:e.right2Sigma,x2:e.right});break;default:t={x:r.x,x2:r.x2};break}return t};import{jsx as J}from"react/jsx-runtime";var q=K(function({serie:e,labels:t,sigma:o,pointAnnotations:f,rangeAnnotations:h,highlightAnnotations:i,options:s,height:y=360,...d},X){let x=A(()=>e.sort((l,n)=>l.x-n.x),[e]),P=A(()=>{let l=new Map;return e.forEach(n=>l.set(n.x,n.y)),l},[e]),c=x[Math.floor(x.length/2)],E=A(()=>{let{below:l,middle:n,above:m}=e.reduce((p,a)=>(a.x<c.x-2*o?p.below.push(a):a.x>=c.x+2*o?(a.x===c.x+2*o&&p.middle.push(a),p.above.push(a)):(a.x===c.x-2*o&&p.below.push(a),p.middle.push(a)),p),{below:[],middle:[],above:[]});return[{name:t?.below||"Below threshold",data:l},{name:t?.middle||"Middle grounds",data:n},{name:t?.above||"Above threshold",data:m}]},[o,e,t,c]),D=A(()=>{if(!f)return[];let l=I(c.x,o);return Object.entries(f).map(([n,m])=>{let p=l[n];return{x:p,y:P.get(p)||0,...b(R,m)}})},[f,o,P]),G=A(()=>{if(!h)return[];let l=H(c.x,o,x[0].x,x[x.length-1].x);return h.map(n=>{let m=L(n,l);return{...b(N,n),...m}})},[h,o,x]),{highlightPointAnnotations:$,highlightLineAnnotations:F}=A(()=>{if(!i)return{highlightLineAnnotations:[],highlightPointAnnotations:[]};let l=[],n=[],m=({x:a,line:C})=>{n.push(b(w,{x:a,...C}))},p=({x:a,y:C,point:M})=>{l.push(b(_,{x:a,y:C,...M}))};return i?.forEach(a=>{switch(a.show){case"line":m(a);break;case"point":p(a);break;case"both":m(a),p(a);break;default:break}}),{highlightPointAnnotations:l,highlightLineAnnotations:n}},[i]);return J(g,{series:E,options:{...b(k,s),annotations:{...s?.annotations,points:[...D,...$,...s?.annotations?.points||[]],xaxis:[...G,...F,...s?.annotations?.xaxis||[]]}},height:y,ref:X,type:"area",...d})});import{applyDefaults as Q}from"@cleen/ui-core";import{forwardRef as V}from"react";var B={chart:{type:"radar",zoom:{enabled:!1},toolbar:{show:!1}},stroke:{width:2},fill:{opacity:.25},markers:{size:4,colors:"transparent",strokeColors:"transparent"},tooltip:{marker:{show:!1}},legend:{show:!1}};import{jsx as j}from"react/jsx-runtime";var Z=V(function({options:e,...t},o){return j(g,{type:"radar",ref:o,options:Q(B,e),...t})});import{applyDefaults as ee}from"@cleen/ui-core";import{forwardRef as re}from"react";var z={chart:{type:"scatter",zoom:{enabled:!1},toolbar:{show:!1}},markers:{shape:"square",size:8,strokeWidth:0},grid:{strokeDashArray:8},legend:{show:!0,horizontalAlign:"right",position:"top",labels:{colors:"rgba(var(--cleen-gray), 0.8)"}},yaxis:{axisBorder:{show:!0,color:"rgba(var(--cleen-gray), .2)"},labels:{style:{colors:"rgba(var(--cleen-gray), 0.8)"}}},xaxis:{axisBorder:{show:!0,color:"rgba(var(--cleen-gray), .2)"},labels:{style:{colors:"rgba(var(--cleen-gray), 0.8)"}}},title:{align:"left",floating:!0,style:{color:"rgba(var(--cleen-black))"}}};import{jsx as oe}from"react/jsx-runtime";var te=re(function({options:e,...t},o){return oe(g,{type:"scatter",ref:o,options:ee(z,e),...t})});import"react";import{jsx as O,jsxs as ne}from"react/jsx-runtime";var ae=({width:r=240,height:e=80,data:t=[12,28,18,30,24,36],className:o="",style:f})=>{let h=Math.max(...t,1),i=t.map((s,y)=>`${y/(t.length-1)*r},${e-s/h*e}`).join(" ");return ne("svg",{width:r,height:e,viewBox:`0 0 ${r} ${e}`,className:o,style:f,role:"img","aria-label":"Simple line chart",children:[O("rect",{width:"100%",height:"100%",fill:"transparent"}),O("polyline",{fill:"none",stroke:"rgba(59,130,246,0.9)",strokeWidth:2,points:i,strokeLinecap:"round",strokeLinejoin:"round"}),O("polygon",{points:`${i} ${r},${e} 0,${e}`,fill:"rgba(59,130,246,0.08)"})]})};export{q as BellCurve,v as Chart,Z as RadarChart,te as ScatterChart,ae as SimpleChart};

package/dist/icons/index.d.ts

@@ -0,0 +1,35 @@
+import react__default from 'react';
+import { IconBaseProps, IconType } from 'react-icons/lib';
+export * from 'react-icons/fa';
+export * from 'react-icons/md';
+export * from 'react-icons/ai';
+export * from 'react-icons/bi';
+export * from 'react-icons/bs';
+export * from 'react-icons/fi';
+export * from 'react-icons/hi';
+export * from 'react-icons/io';
+export * from 'react-icons/ri';
+
+interface IconFromLibraryProps extends IconBaseProps {
+    icon: IconType;
+}
+declare const IconFromLibrary: react__default.FC<IconFromLibraryProps>;
+
+/**
+ * Maps icon names to their corresponding icon components from react-icons.
+ * This allows you to dynamically load icons by name string without importing the entire library.
+ *
+ * @param iconName - The full icon name (e.g., 'FaHome', 'MdSettings', 'AiFillHeart')
+ * @returns The icon component, or null if not found
+ *
+ * @example
+ * ```tsx
+ * const HomeIcon = getIconByName('FaHome');
+ * if (HomeIcon) {
+ *   return <IconFromLibrary icon={HomeIcon} size={24} />;
+ * }
+ * ```
+ */
+declare const getIconByName: (iconName: string) => Promise<IconType | null>;
+
+export { IconFromLibrary, type IconFromLibraryProps, getIconByName };

package/dist/icons/index.js

@@ -0,0 +1 @@
+import"react";import{jsx as a}from"react/jsx-runtime";var n=({icon:o,...e})=>a(o,{...e});var i=async o=>{if(!o||typeof o!="string")return null;let e=o.substring(0,2);try{let r;switch(e){case"Fa":r=await import("react-icons/fa");break;case"Md":r=await import("react-icons/md");break;case"Ai":r=await import("react-icons/ai");break;case"Bi":r=await import("react-icons/bi");break;case"Bs":r=await import("react-icons/bs");break;case"Fi":r=await import("react-icons/fi");break;case"Hi":r=await import("react-icons/hi");break;case"Io":r=await import("react-icons/io");break;case"Ri":r=await import("react-icons/ri");break;default:return console.warn(`Unknown icon library prefix: ${e} in icon name: ${o}`),null}let t=r[o];return!t||typeof t!="function"?null:t}catch(r){return console.error(`Error loading icon "${o}":`,r),null}};export*from"react-icons/fa";export*from"react-icons/md";export*from"react-icons/ai";export*from"react-icons/bi";export*from"react-icons/bs";export*from"react-icons/fi";export*from"react-icons/hi";export*from"react-icons/io";export*from"react-icons/ri";export{n as IconFromLibrary,i as getIconByName};