rte-utils 1.2.3 → 1.2.4

package/README.md

@@ -15,16 +15,16 @@ npm install rte-utils
 You need to import both the component and its CSS styles:
 
 ```tsx
-import { Histogramme } from 'rte-utils';
-import 'rte-utils/dist/index.css'; // Import the CSS styles
+import { Histogram, Chip } from "rte-utils";
+import "rte-utils/dist/index.css"; // Import the CSS styles
 ```
 
 ### Basic Example
 
 ```tsx
-import React from 'react';
-import { Histogram } from 'rte-utils';
-import 'rte-utils/dist/index.css';
+import React from "react";
+import { Histogram } from "rte-utils";
+import "rte-utils/dist/index.css";
 
 function App() {
   return (
@@ -52,15 +52,15 @@ export default App;
 ### Advanced Example with Animation
 
 ```tsx
-import React, { useState } from 'react';
-import { Histogram } from 'rte-utils';
-import 'rte-utils/dist/index.css';
+import React, { useState } from "react";
+import { Histogram } from "rte-utils";
+import "rte-utils/dist/index.css";
 
 function EnergyDashboard() {
   const [currentValue, setCurrentValue] = useState(45);
 
   return (
-    <div style={{ display: 'flex', gap: '1rem' }}>
+    <div style={{ display: "flex", gap: "1rem" }}>
       <Histogram
         max={{ value: 100, color: "#D3D64E" }}
         relative={{ value: currentValue, color: "#C0C402" }}
@@ -75,8 +75,8 @@ function EnergyDashboard() {
           <p className="histogram-label">Consommation</p>
         </div>
       </Histogram>
-      
-      <button onClick={() => setCurrentValue(prev => prev + 10)}>
+
+      <button onClick={() => setCurrentValue((prev) => prev + 10)}>
         Increase (+10)
       </button>
     </div>
@@ -87,18 +87,18 @@ function EnergyDashboard() {
 ### Horizontal Orientation Example
 
 ```tsx
-import React from 'react';
-import { Histogram } from 'rte-utils';
-import 'rte-utils/dist/index.css';
+import React from "react";
+import { Histogram } from "rte-utils";
+import "rte-utils/dist/index.css";
 
 function HorizontalChart() {
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+    <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
       <Histogram
         max={{ value: 100, color: "#D3D64E" }}
         relative={{ value: 75, color: "#C0C402" }}
-        barWidth={200}  // This becomes height in horizontal mode
-        barHeight={24}  // This becomes width in horizontal mode
+        barWidth={200} // This becomes height in horizontal mode
+        barHeight={24} // This becomes width in horizontal mode
         orientation="horizontal"
       >
         <div className="histogram-value-container">
@@ -117,38 +117,53 @@ function HorizontalChart() {
 ### Custom Corner Radius Example
 
 ```tsx
-import React from 'react';
-import { Histogram } from 'rte-utils';
-import 'rte-utils/dist/index.css';
+import React from "react";
+import { Histogram } from "rte-utils";
+import "rte-utils/dist/index.css";
 
 function CustomCornerChart() {
   return (
-    <div style={{ display: 'flex', gap: '1rem' }}>
+    <div style={{ display: "flex", gap: "1rem" }}>
       {/* Rounded top corners only */}
       <Histogram
         max={{ value: 100, color: "#E0E0E0" }}
         relative={{ value: 60, color: "#4CAF50" }}
         barWidth={32}
         barHeight={120}
-        cornerRadius={{ topLeft: 16, topRight: 16, bottomLeft: 0, bottomRight: 0 }}
+        cornerRadius={{
+          topLeft: 16,
+          topRight: 16,
+          bottomLeft: 0,
+          bottomRight: 0,
+        }}
       />
-      
+
       {/* Fully rounded corners */}
       <Histogram
         max={{ value: 100, color: "#F0F0F0", opacity: 0.5 }}
         relative={{ value: 80, color: "#2196F3" }}
         barWidth={32}
         barHeight={120}
-        cornerRadius={{ topLeft: 16, topRight: 16, bottomLeft: 16, bottomRight: 16 }}
+        cornerRadius={{
+          topLeft: 16,
+          topRight: 16,
+          bottomLeft: 16,
+          bottomRight: 16,
+        }}
       />
-      
+
       {/* Asymmetric corners */}
       <Histogram
         max={{ value: 100, color: "#FFECB3" }}
         relative={{ value: 45, color: "#FF9800" }}
         barWidth={32}
         barHeight={120}
-        cornerRadius={{ topLeft: 20, topRight: 4, bottomLeft: 4, bottomRight: 20 }}
+        cornerRadius={{
+          topLeft: 20,
+          topRight: 4,
+          bottomLeft: 4,
+          bottomRight: 20,
+        }}
       />
     </div>
   );
@@ -158,9 +173,9 @@ function CustomCornerChart() {
 ### Opacity and Advanced Styling Example
 
 ```tsx
-import React from 'react';
-import { Histogram } from 'rte-utils';
-import 'rte-utils/dist/index.css';
+import React from "react";
+import { Histogram } from "rte-utils";
+import "rte-utils/dist/index.css";
 
 function AdvancedStylingChart() {
   return (
@@ -192,22 +207,22 @@ A histogram component with smooth animations for energy data visualization.
 
 #### Props
 
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `max` | `{ value: number; color: string; opacity?: number }` | ✅ | - | Maximum value configuration with value, color, and optional opacity |
-| `relative` | `{ value: number; color: string }` | ✅ | - | Relative/current value configuration with value and color |
-| `barHeight` | `number` | ❌ | `103` | Height of the histogram bar in pixels |
-| `barWidth` | `number` | ❌ | `32` | Width of the histogram bar in pixels |
-| `orientation` | `'vertical' \| 'horizontal'` | ❌ | `'vertical'` | Orientation of the histogram bars |
-| `cornerRadius` | `{ topLeft?: number; topRight?: number; bottomLeft?: number; bottomRight?: number }` | ❌ | `{ topLeft: 2, topRight: 2, bottomLeft: 2, bottomRight: 2 }` | Individual corner radius configuration |
-| `children` | `React.ReactNode` | ❌ | - | Child components (typically text content) |
+| Prop           | Type                                                                                 | Required | Default                                                      | Description                                                         |
+| -------------- | ------------------------------------------------------------------------------------ | -------- | ------------------------------------------------------------ | ------------------------------------------------------------------- |
+| `max`          | `{ value: number; color: string; opacity?: number }`                                 | ✅       | -                                                            | Maximum value configuration with value, color, and optional opacity |
+| `relative`     | `{ value: number; color: string }`                                                   | ✅       | -                                                            | Relative/current value configuration with value and color           |
+| `barHeight`    | `number`                                                                             | ❌       | `103`                                                        | Height of the histogram bar in pixels                               |
+| `barWidth`     | `number`                                                                             | ❌       | `32`                                                         | Width of the histogram bar in pixels                                |
+| `orientation`  | `'vertical' \| 'horizontal'`                                                         | ❌       | `'vertical'`                                                 | Orientation of the histogram bars                                   |
+| `cornerRadius` | `{ topLeft?: number; topRight?: number; bottomLeft?: number; bottomRight?: number }` | ❌       | `{ topLeft: 2, topRight: 2, bottomLeft: 2, bottomRight: 2 }` | Individual corner radius configuration                              |
+| `children`     | `React.ReactNode`                                                                    | ❌       | -                                                            | Child components (typically text content)                           |
 
 #### Features
 
 - **Smooth animations**: 1-second Chart.js-style transitions with easeOutQuart easing
 - **Multiple orientations**: Support for both vertical and horizontal layouts
 - **Individual corner control**: Customize each corner radius independently
-- **Dynamic two-color visualization**: 
+- **Dynamic two-color visualization**:
   - Background bar color defined by `max.color` represents the maximum value
   - Foreground bar color defined by `relative.color` represents the relative value
 - **Opacity control**: Optional opacity setting for background bars
@@ -220,7 +235,7 @@ A histogram component with smooth animations for energy data visualization.
 The component uses external CSS classes for styling. Make sure to import the CSS file:
 
 ```tsx
-import 'rte-utils/dist/index.css';
+import "rte-utils/dist/index.css";
 ```
 
 You can override the default styles by targeting the CSS classes:
@@ -238,6 +253,78 @@ You can override the default styles by targeting the CSS classes:
 - `.histogram-unit` - Unit text
 - `.histogram-label` - Label text
 
+### Chip
+
+A customizable chip component for displaying labels, tags, or status indicators.
+
+#### Props
+
+| Prop        | Type     | Required | Default | Description                                    |
+| ----------- | -------- | -------- | ------- | ---------------------------------------------- |
+| `label`     | `string` | ❌       | -       | Text content to display inside the chip        |
+| `bgColor`   | `string` | ❌       | -       | Background color of the chip (CSS color value) |
+| `textColor` | `string` | ❌       | -       | Text color of the chip (CSS color value)       |
+
+#### Example Usage
+
+```tsx
+import React from "react";
+import { Chip } from "rte-utils";
+import "rte-utils/dist/index.css";
+
+function ChipExample() {
+  return (
+    <div style={{ display: "flex", gap: "0.5rem" }}>
+      {/* Default chip */}
+      <Chip label="Default" />
+
+      {/* Success status chip */}
+      <Chip label="Success" bgColor="#d4edda" textColor="#155724" />
+
+      {/* Warning status chip */}
+      <Chip label="Warning" bgColor="#fff3cd" textColor="#856404" />
+
+      {/* Error status chip */}
+      <Chip label="Error" bgColor="#f8d7da" textColor="#721c24" />
+
+      {/* Custom branded chip */}
+      <Chip label="Custom" bgColor="#007bff" textColor="#ffffff" />
+    </div>
+  );
+}
+```
+
+#### Features
+
+- **Flexible styling**: Customize background and text colors
+- **Simple API**: Minimal props for easy integration
+- **TypeScript support**: Full type definitions included
+- **CSS classes**: Uses external CSS for consistent styling
+
+#### CSS Classes
+
+The Chip component uses the following CSS classes:
+
+- `.chip-container` - Main chip container
+- `.chip-content` - Content wrapper
+- `.chip-label` - Label text styling
+
+## Demo Application
+
+This package includes a demo application that showcases all available components with interactive examples. The demo is located in the `/demo` folder and includes:
+
+- **Interactive Histogram examples** with dynamic value controls
+- **Chip component variations** with different colors and styles
+- **Live examples** of all component features
+
+To run the demo application:
+
+```bash
+cd demo
+npm install
+npm run dev
+```
+
 ## License
 
-MIT
+MIT

package/dist/components/Chip.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import "./Chip.css";
+interface ChipProps {
+    label?: string;
+    bgColor?: string;
+    textColor?: string;
+}
+export declare const Chip: React.FC<ChipProps>;
+export {};

package/dist/components/Histogramme.d.ts

@@ -1,22 +1,22 @@
 import React from "react";
 import "./Histogramme.css";
-interface HistogramProps {
-    /** Maximum value configuration with value and color */
-    max: {
-        value: number;
-        color: string;
-    };
-    /** Relative/current value configuration with value and color */
-    relative: {
-        value: number;
-        color: string;
-    };
+interface HistogrammeProps {
+    /** Maximum value for the bar chart */
+    maxValue: number;
+    /** Relative/current value to compare against max */
+    relativeValue: number;
+    /** Value to display in text */
+    value: number;
+    /** Unit label (e.g., "MWh") */
+    unit: string;
+    /** Description label (e.g., "Soutirage") */
+    label: string;
+    /** Background color of the container */
+    backgroundColor?: string;
     /** Height of the histogram bar in pixels */
     barHeight?: number;
-    /** Width of the histogram bar in pixels */
-    barWidth?: number;
-    /** Child components (typically text content) */
-    children?: React.ReactNode;
+    /** Width of the component in pixels */
+    width?: number;
 }
-export declare const Histogram: React.FC<HistogramProps>;
+export declare const Histogramme: React.FC<HistogrammeProps>;
 export {};

package/dist/components/index.d.ts

@@ -1 +1,2 @@
-export { Histogram } from './Histogram';
+export { Histogram } from "./Histogram";
+export { Chip } from "./Chip";

package/dist/index.css

@@ -1 +1 @@
-@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap");*{font-family:Open Sans,sans-serif}.histogram-container{height:auto;max-width:54px;position:relative}.histogram-container--horizontal{max-width:none;width:auto}.histogram-content{align-items:center;display:flex;flex-direction:column;gap:8px;width:100%}.histogram-content--horizontal{align-items:center;flex-direction:row;height:100%}.histogram-bar{position:relative}.histogram-svg{display:block}.histogram-text-container{align-items:center;display:flex;flex-direction:column;gap:0;width:100%}.histogram-text-container--horizontal{align-items:flex-start;margin-left:8px}.histogram-value-container{text-align:center;width:40px}.histogram-value{font-size:16px;line-height:14px}.histogram-unit,.histogram-value{color:#000;display:block;font-weight:600;margin:0}.histogram-unit{font-size:12px}.histogram-label{color:#6f6f6f;font-size:12px;font-style:normal;font-weight:400;line-height:18px;margin:0;text-align:left;white-space:nowrap}
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap");*{font-family:Open Sans,sans-serif}.histogram-container{height:auto;max-width:54px;position:relative}.histogram-container--horizontal{max-width:none;width:auto}.histogram-content{align-items:center;display:flex;flex-direction:column;gap:8px;width:100%}.histogram-content--horizontal{align-items:center;flex-direction:row;height:100%}.histogram-bar{position:relative}.histogram-svg{display:block}.histogram-text-container{align-items:center;display:flex;flex-direction:column;gap:0;width:100%}.histogram-text-container--horizontal{align-items:flex-start;margin-left:8px}.histogram-value-container{text-align:center;width:40px}.histogram-value{font-size:16px;line-height:14px}.histogram-unit,.histogram-value{color:#000;display:block;font-weight:600;margin:0}.histogram-unit{font-size:12px}.histogram-label{color:#6f6f6f;font-size:12px;font-style:normal;font-weight:400;line-height:18px;margin:0;text-align:left;white-space:nowrap}.chip-container{align-items:center;background-color:var(--chip-bg-color,#e0e0e0);border-radius:60px;color:var(--chip-text-color,#000);display:inline-flex;min-width:84px;padding:8px}.chip-content{align-items:center;display:flex;flex-grow:1;gap:.5rem;justify-content:center}.chip-label{font-size:14px;font-weight:600;margin:0}

package/dist/index.esm.css

@@ -1 +1 @@
-@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap");*{font-family:Open Sans,sans-serif}.histogram-container{height:auto;max-width:54px;position:relative}.histogram-container--horizontal{max-width:none;width:auto}.histogram-content{align-items:center;display:flex;flex-direction:column;gap:8px;width:100%}.histogram-content--horizontal{align-items:center;flex-direction:row;height:100%}.histogram-bar{position:relative}.histogram-svg{display:block}.histogram-text-container{align-items:center;display:flex;flex-direction:column;gap:0;width:100%}.histogram-text-container--horizontal{align-items:flex-start;margin-left:8px}.histogram-value-container{text-align:center;width:40px}.histogram-value{font-size:16px;line-height:14px}.histogram-unit,.histogram-value{color:#000;display:block;font-weight:600;margin:0}.histogram-unit{font-size:12px}.histogram-label{color:#6f6f6f;font-size:12px;font-style:normal;font-weight:400;line-height:18px;margin:0;text-align:left;white-space:nowrap}
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap");*{font-family:Open Sans,sans-serif}.histogram-container{height:auto;max-width:54px;position:relative}.histogram-container--horizontal{max-width:none;width:auto}.histogram-content{align-items:center;display:flex;flex-direction:column;gap:8px;width:100%}.histogram-content--horizontal{align-items:center;flex-direction:row;height:100%}.histogram-bar{position:relative}.histogram-svg{display:block}.histogram-text-container{align-items:center;display:flex;flex-direction:column;gap:0;width:100%}.histogram-text-container--horizontal{align-items:flex-start;margin-left:8px}.histogram-value-container{text-align:center;width:40px}.histogram-value{font-size:16px;line-height:14px}.histogram-unit,.histogram-value{color:#000;display:block;font-weight:600;margin:0}.histogram-unit{font-size:12px}.histogram-label{color:#6f6f6f;font-size:12px;font-style:normal;font-weight:400;line-height:18px;margin:0;text-align:left;white-space:nowrap}.chip-container{align-items:center;background-color:var(--chip-bg-color,#e0e0e0);border-radius:60px;color:var(--chip-text-color,#000);display:inline-flex;min-width:84px;padding:8px}.chip-content{align-items:center;display:flex;flex-grow:1;gap:.5rem;justify-content:center}.chip-label{font-size:14px;font-weight:600;margin:0}

package/dist/index.esm.js

@@ -1,2 +1,2 @@
-import{jsx as t,jsxs as o}from"react/jsx-runtime";import{useState as a,useEffect as n}from"react";var c=function(c){var i,e,r,h,l=c.max,m=c.relative,g=c.barHeight,p=void 0===g?103:g,f=c.barWidth,v=void 0===f?32:f,s=c.orientation,d=void 0===s?"vertical":s,L=c.cornerRadius,b=c.children,R=a(0),u=R[0],z=R[1],x=a(0),w=x[0],M=x[1],N=Math.min(m.value/l.value*100,100)/100*p,Q=Math.min(m.value/l.value*100,100)/100*v;n(function(){z(0),M(0);var t=Date.now(),o=function(){var a=Date.now()-t,n=Math.min(a/1e3,1),c=1-Math.pow(1-n,4);z(N*c),M(Q*c),n<1&&requestAnimationFrame(o)};requestAnimationFrame(o)},[N,Q]);var y="horizontal"===d?p:v,q="horizontal"===d?v:p,A="horizontal"===d?p:v,D="horizontal"===d?v:p,F=function(t,o,a,n,c){var i=c.topLeft,e=c.topRight,r=c.bottomLeft,h=c.bottomRight;return"\n      M ".concat(t+i," ").concat(o,"\n      L ").concat(t+a-e," ").concat(o,"\n      Q ").concat(t+a," ").concat(o," ").concat(t+a," ").concat(o+e,"\n      L ").concat(t+a," ").concat(o+n-h,"\n      Q ").concat(t+a," ").concat(o+n," ").concat(t+a-h," ").concat(o+n,"\n      L ").concat(t+r," ").concat(o+n,"\n      Q ").concat(t," ").concat(o+n," ").concat(t," ").concat(o+n-r,"\n      L ").concat(t," ").concat(o+i,"\n      Q ").concat(t," ").concat(o," ").concat(t+i," ").concat(o,"\n      Z\n    ").trim().replace(/\s+/g," ")},j={topLeft:2,topRight:2,bottomLeft:2,bottomRight:2},B=L?{topLeft:null!==(i=L.topLeft)&&void 0!==i?i:j.topLeft,topRight:null!==(e=L.topRight)&&void 0!==e?e:j.topRight,bottomLeft:null!==(r=L.bottomLeft)&&void 0!==r?r:j.bottomLeft,bottomRight:null!==(h=L.bottomRight)&&void 0!==h?h:j.bottomRight}:j;return t("div",{className:"histogram-container ".concat("horizontal"===d?"histogram-container--horizontal":""),children:o("div",{className:"histogram-content ".concat("horizontal"===d?"histogram-content--horizontal":""),children:[t("div",{className:"histogram-bar",style:{height:"".concat(q,"px"),width:"".concat(y,"px")},children:o("svg",{width:A,height:D,viewBox:"0 0 ".concat(A," ").concat(D),className:"histogram-svg",children:[t("path",{d:F(0,0,A,D,B),fill:l.color,fillOpacity:l.opacity||1}),t("path","vertical"===d?{d:F(0,D-u,A,u,{topLeft:u>=D?B.topLeft:0,topRight:u>=D?B.topRight:0,bottomLeft:B.bottomLeft,bottomRight:B.bottomRight}),fill:m.color}:{d:F(0,0,w,D,{topLeft:B.topLeft,topRight:w>=A?B.topRight:0,bottomLeft:B.bottomLeft,bottomRight:w>=A?B.bottomRight:0}),fill:m.color})]})}),b&&t("div",{className:"histogram-text-container ".concat("horizontal"===d?"histogram-text-container--horizontal":""),children:b})]})})};export{c as Histogram};
+import{jsx as t,jsxs as o}from"react/jsx-runtime";import{useState as a,useEffect as c}from"react";var n=function(n){var i,e,r,l,h=n.max,m=n.relative,g=n.barHeight,s=void 0===g?103:g,p=n.barWidth,d=void 0===p?32:p,v=n.orientation,f=void 0===v?"vertical":v,b=n.cornerRadius,L=n.children,u=a(0),R=u[0],z=u[1],x=a(0),N=x[0],w=x[1],y=Math.min(m.value/h.value*100,100)/100*s,M=Math.min(m.value/h.value*100,100)/100*d;c(function(){z(0),w(0);var t=Date.now(),o=function(){var a=Date.now()-t,c=Math.min(a/1e3,1),n=1-Math.pow(1-c,4);z(y*n),w(M*n),c<1&&requestAnimationFrame(o)};requestAnimationFrame(o)},[y,M]);var Q="horizontal"===f?s:d,C="horizontal"===f?d:s,q="horizontal"===f?s:d,A="horizontal"===f?d:s,D=function(t,o,a,c,n){var i=n.topLeft,e=n.topRight,r=n.bottomLeft,l=n.bottomRight;return"\n      M ".concat(t+i," ").concat(o,"\n      L ").concat(t+a-e," ").concat(o,"\n      Q ").concat(t+a," ").concat(o," ").concat(t+a," ").concat(o+e,"\n      L ").concat(t+a," ").concat(o+c-l,"\n      Q ").concat(t+a," ").concat(o+c," ").concat(t+a-l," ").concat(o+c,"\n      L ").concat(t+r," ").concat(o+c,"\n      Q ").concat(t," ").concat(o+c," ").concat(t," ").concat(o+c-r,"\n      L ").concat(t," ").concat(o+i,"\n      Q ").concat(t," ").concat(o," ").concat(t+i," ").concat(o,"\n      Z\n    ").trim().replace(/\s+/g," ")},F={topLeft:2,topRight:2,bottomLeft:2,bottomRight:2},j=b?{topLeft:null!==(i=b.topLeft)&&void 0!==i?i:F.topLeft,topRight:null!==(e=b.topRight)&&void 0!==e?e:F.topRight,bottomLeft:null!==(r=b.bottomLeft)&&void 0!==r?r:F.bottomLeft,bottomRight:null!==(l=b.bottomRight)&&void 0!==l?l:F.bottomRight}:F;return t("div",{className:"histogram-container ".concat("horizontal"===f?"histogram-container--horizontal":""),children:o("div",{className:"histogram-content ".concat("horizontal"===f?"histogram-content--horizontal":""),children:[t("div",{className:"histogram-bar",style:{height:"".concat(C,"px"),width:"".concat(Q,"px")},children:o("svg",{width:q,height:A,viewBox:"0 0 ".concat(q," ").concat(A),className:"histogram-svg",children:[t("path",{d:D(0,0,q,A,j),fill:h.color,fillOpacity:h.opacity||1}),t("path","vertical"===f?{d:D(0,A-R,q,R,{topLeft:R>=A?j.topLeft:0,topRight:R>=A?j.topRight:0,bottomLeft:j.bottomLeft,bottomRight:j.bottomRight}),fill:m.color}:{d:D(0,0,N,A,{topLeft:j.topLeft,topRight:N>=q?j.topRight:0,bottomLeft:j.bottomLeft,bottomRight:N>=q?j.bottomRight:0}),fill:m.color})]})}),L&&t("div",{className:"histogram-text-container ".concat("horizontal"===f?"histogram-text-container--horizontal":""),children:L})]})})},i=function(o){var a=o.label,c=o.bgColor,n=o.textColor;return t("div",{className:"chip-container",style:{backgroundColor:c},children:t("div",{className:"chip-content",children:t("p",{className:"chip-label",style:{color:n},children:a})})})};export{i as Chip,n as Histogram};
 //# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../src/components/Histogram.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport \"./Histogram.css\";\n\ninterface HistogramProps {\n  /** Maximum value configuration with value and color */\n  max: {\n    value: number;\n    color: string;\n    opacity?: number;\n  };\n  /** Relative/current value configuration with value and color */\n  relative: {\n    value: number;\n    color: string;\n  };\n  /** Height of the histogram bar in pixels */\n  barHeight?: number;\n  /** Width of the histogram bar in pixels */\n  barWidth?: number;\n  /** Orientation of the histogram - 'vertical' or 'horizontal' */\n  orientation?: 'vertical' | 'horizontal';\n  /** Corner radius configuration for individual corners */\n  cornerRadius?: {\n    topLeft?: number;\n    topRight?: number;\n    bottomLeft?: number;\n    bottomRight?: number;\n  };\n  /** Child components (typically text content) */\n  children?: React.ReactNode;\n}\n\nexport const Histogram: React.FC<HistogramProps> = ({\n  max,\n  relative,\n  barHeight = 103,\n  barWidth = 32,\n  orientation = 'vertical',\n  cornerRadius,\n  children,\n}) => {\n  const [animatedHeight, setAnimatedHeight] = useState(0);\n  const [animatedWidth, setAnimatedWidth] = useState(0);\n\n  // Calculate target dimensions based on orientation\n  const targetHeight = (Math.min((relative.value / max.value) * 100, 100) / 100) * barHeight;\n  const targetWidth = (Math.min((relative.value / max.value) * 100, 100) / 100) * barWidth;\n\n  // Simple Chart.js-like animation: always animate from 0 to target\n  useEffect(() => {\n    setAnimatedHeight(0);\n    setAnimatedWidth(0);\n    \n    const startTime = Date.now();\n    const duration = 1000;\n\n    const animate = () => {\n      const elapsed = Date.now() - startTime;\n      const progress = Math.min(elapsed / duration, 1);\n\n      // Chart.js-like easing (easeOutQuart)\n      const easeOutQuart = 1 - Math.pow(1 - progress, 4);\n      \n      setAnimatedHeight(targetHeight * easeOutQuart);\n      setAnimatedWidth(targetWidth * easeOutQuart);\n\n      if (progress < 1) {\n        requestAnimationFrame(animate);\n      }\n    };\n\n    requestAnimationFrame(animate);\n  }, [targetHeight, targetWidth]);\n\n  const displayWidth = orientation === 'horizontal' ? barHeight : barWidth;\n  const displayHeight = orientation === 'horizontal' ? barWidth : barHeight;\n  const svgWidth = orientation === 'horizontal' ? barHeight : barWidth;\n  const svgHeight = orientation === 'horizontal' ? barWidth : barHeight;\n\n  // Helper function to create rounded rectangle path\n  const createRoundedRectPath = (\n    x: number,\n    y: number,\n    width: number,\n    height: number,\n    radii: { topLeft: number; topRight: number; bottomLeft: number; bottomRight: number }\n  ) => {\n    const { topLeft, topRight, bottomLeft, bottomRight } = radii;\n    \n    return `\n      M ${x + topLeft} ${y}\n      L ${x + width - topRight} ${y}\n      Q ${x + width} ${y} ${x + width} ${y + topRight}\n      L ${x + width} ${y + height - bottomRight}\n      Q ${x + width} ${y + height} ${x + width - bottomRight} ${y + height}\n      L ${x + bottomLeft} ${y + height}\n      Q ${x} ${y + height} ${x} ${y + height - bottomLeft}\n      L ${x} ${y + topLeft}\n      Q ${x} ${y} ${x + topLeft} ${y}\n      Z\n    `.trim().replace(/\\s+/g, ' ');\n  };\n\n  // Default corner radius values\n  const defaultCornerRadius = { topLeft: 2, topRight: 2, bottomLeft: 2, bottomRight: 2 };\n  const corners = cornerRadius ? {\n    topLeft: cornerRadius.topLeft ?? defaultCornerRadius.topLeft,\n    topRight: cornerRadius.topRight ?? defaultCornerRadius.topRight,\n    bottomLeft: cornerRadius.bottomLeft ?? defaultCornerRadius.bottomLeft,\n    bottomRight: cornerRadius.bottomRight ?? defaultCornerRadius.bottomRight,\n  } : defaultCornerRadius;\n\n  return (\n    <div className={`histogram-container ${orientation === 'horizontal' ? 'histogram-container--horizontal' : ''}`}>\n      <div className={`histogram-content ${orientation === 'horizontal' ? 'histogram-content--horizontal' : ''}`}>\n        <div \n          className=\"histogram-bar\"\n          style={{\n            height: `${displayHeight}px`,\n            width: `${displayWidth}px`\n          }}\n        >\n          <svg\n            width={svgWidth}\n            height={svgHeight}\n            viewBox={`0 0 ${svgWidth} ${svgHeight}`}\n            className=\"histogram-svg\"\n          >\n            {/* Background bar (max value) */}\n            <path\n              d={createRoundedRectPath(0, 0, svgWidth, svgHeight, corners)}\n              fill={max.color}\n              fillOpacity={max.opacity || 1}\n            />\n            {/* Foreground bar (relative value) with animation */}\n            {orientation === 'vertical' ? (\n              <path\n                d={createRoundedRectPath(\n                  0,\n                  svgHeight - animatedHeight,\n                  svgWidth,\n                  animatedHeight,\n                  {\n                    topLeft: animatedHeight >= svgHeight ? corners.topLeft : 0,\n                    topRight: animatedHeight >= svgHeight ? corners.topRight : 0,\n                    bottomLeft: corners.bottomLeft,\n                    bottomRight: corners.bottomRight,\n                  }\n                )}\n                fill={relative.color}\n              />\n            ) : (\n              <path\n                d={createRoundedRectPath(\n                  0,\n                  0,\n                  animatedWidth,\n                  svgHeight,\n                  {\n                    topLeft: corners.topLeft,\n                    topRight: animatedWidth >= svgWidth ? corners.topRight : 0,\n                    bottomLeft: corners.bottomLeft,\n                    bottomRight: animatedWidth >= svgWidth ? corners.bottomRight : 0,\n                  }\n                )}\n                fill={relative.color}\n              />\n            )}\n          </svg>\n        </div>\n        {children && (\n          <div className={`histogram-text-container ${orientation === 'horizontal' ? 'histogram-text-container--horizontal' : ''}`}>\n            {children}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":["Histogram","_a","max","relative","_f","barHeight","_g","barWidth","_h","orientation","cornerRadius","children","_j","useState","animatedHeight","setAnimatedHeight","_k","animatedWidth","setAnimatedWidth","targetHeight","Math","min","value","targetWidth","useEffect","startTime","Date","now","animate","elapsed","progress","easeOutQuart","pow","requestAnimationFrame","displayWidth","displayHeight","svgWidth","svgHeight","createRoundedRectPath","x","y","width","height","radii","topLeft","topRight","bottomLeft","bottomRight","concat","trim","replace","defaultCornerRadius","corners","_b","_c","_d","_e","_jsx","className","_jsxs","style","viewBox","d","fill","color","fillOpacity","opacity"],"mappings":"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"}
+{"version":3,"file":"index.esm.js","sources":["../src/components/Histogram.tsx","../src/components/Chip.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport \"./Histogram.css\";\n\ninterface HistogramProps {\n  /** Maximum value configuration with value and color */\n  max: {\n    value: number;\n    color: string;\n    opacity?: number;\n  };\n  /** Relative/current value configuration with value and color */\n  relative: {\n    value: number;\n    color: string;\n  };\n  /** Height of the histogram bar in pixels */\n  barHeight?: number;\n  /** Width of the histogram bar in pixels */\n  barWidth?: number;\n  /** Orientation of the histogram - 'vertical' or 'horizontal' */\n  orientation?: 'vertical' | 'horizontal';\n  /** Corner radius configuration for individual corners */\n  cornerRadius?: {\n    topLeft?: number;\n    topRight?: number;\n    bottomLeft?: number;\n    bottomRight?: number;\n  };\n  /** Child components (typically text content) */\n  children?: React.ReactNode;\n}\n\nexport const Histogram: React.FC<HistogramProps> = ({\n  max,\n  relative,\n  barHeight = 103,\n  barWidth = 32,\n  orientation = 'vertical',\n  cornerRadius,\n  children,\n}) => {\n  const [animatedHeight, setAnimatedHeight] = useState(0);\n  const [animatedWidth, setAnimatedWidth] = useState(0);\n\n  // Calculate target dimensions based on orientation\n  const targetHeight = (Math.min((relative.value / max.value) * 100, 100) / 100) * barHeight;\n  const targetWidth = (Math.min((relative.value / max.value) * 100, 100) / 100) * barWidth;\n\n  // Simple Chart.js-like animation: always animate from 0 to target\n  useEffect(() => {\n    setAnimatedHeight(0);\n    setAnimatedWidth(0);\n    \n    const startTime = Date.now();\n    const duration = 1000;\n\n    const animate = () => {\n      const elapsed = Date.now() - startTime;\n      const progress = Math.min(elapsed / duration, 1);\n\n      // Chart.js-like easing (easeOutQuart)\n      const easeOutQuart = 1 - Math.pow(1 - progress, 4);\n      \n      setAnimatedHeight(targetHeight * easeOutQuart);\n      setAnimatedWidth(targetWidth * easeOutQuart);\n\n      if (progress < 1) {\n        requestAnimationFrame(animate);\n      }\n    };\n\n    requestAnimationFrame(animate);\n  }, [targetHeight, targetWidth]);\n\n  const displayWidth = orientation === 'horizontal' ? barHeight : barWidth;\n  const displayHeight = orientation === 'horizontal' ? barWidth : barHeight;\n  const svgWidth = orientation === 'horizontal' ? barHeight : barWidth;\n  const svgHeight = orientation === 'horizontal' ? barWidth : barHeight;\n\n  // Helper function to create rounded rectangle path\n  const createRoundedRectPath = (\n    x: number,\n    y: number,\n    width: number,\n    height: number,\n    radii: { topLeft: number; topRight: number; bottomLeft: number; bottomRight: number }\n  ) => {\n    const { topLeft, topRight, bottomLeft, bottomRight } = radii;\n    \n    return `\n      M ${x + topLeft} ${y}\n      L ${x + width - topRight} ${y}\n      Q ${x + width} ${y} ${x + width} ${y + topRight}\n      L ${x + width} ${y + height - bottomRight}\n      Q ${x + width} ${y + height} ${x + width - bottomRight} ${y + height}\n      L ${x + bottomLeft} ${y + height}\n      Q ${x} ${y + height} ${x} ${y + height - bottomLeft}\n      L ${x} ${y + topLeft}\n      Q ${x} ${y} ${x + topLeft} ${y}\n      Z\n    `.trim().replace(/\\s+/g, ' ');\n  };\n\n  // Default corner radius values\n  const defaultCornerRadius = { topLeft: 2, topRight: 2, bottomLeft: 2, bottomRight: 2 };\n  const corners = cornerRadius ? {\n    topLeft: cornerRadius.topLeft ?? defaultCornerRadius.topLeft,\n    topRight: cornerRadius.topRight ?? defaultCornerRadius.topRight,\n    bottomLeft: cornerRadius.bottomLeft ?? defaultCornerRadius.bottomLeft,\n    bottomRight: cornerRadius.bottomRight ?? defaultCornerRadius.bottomRight,\n  } : defaultCornerRadius;\n\n  return (\n    <div className={`histogram-container ${orientation === 'horizontal' ? 'histogram-container--horizontal' : ''}`}>\n      <div className={`histogram-content ${orientation === 'horizontal' ? 'histogram-content--horizontal' : ''}`}>\n        <div \n          className=\"histogram-bar\"\n          style={{\n            height: `${displayHeight}px`,\n            width: `${displayWidth}px`\n          }}\n        >\n          <svg\n            width={svgWidth}\n            height={svgHeight}\n            viewBox={`0 0 ${svgWidth} ${svgHeight}`}\n            className=\"histogram-svg\"\n          >\n            {/* Background bar (max value) */}\n            <path\n              d={createRoundedRectPath(0, 0, svgWidth, svgHeight, corners)}\n              fill={max.color}\n              fillOpacity={max.opacity || 1}\n            />\n            {/* Foreground bar (relative value) with animation */}\n            {orientation === 'vertical' ? (\n              <path\n                d={createRoundedRectPath(\n                  0,\n                  svgHeight - animatedHeight,\n                  svgWidth,\n                  animatedHeight,\n                  {\n                    topLeft: animatedHeight >= svgHeight ? corners.topLeft : 0,\n                    topRight: animatedHeight >= svgHeight ? corners.topRight : 0,\n                    bottomLeft: corners.bottomLeft,\n                    bottomRight: corners.bottomRight,\n                  }\n                )}\n                fill={relative.color}\n              />\n            ) : (\n              <path\n                d={createRoundedRectPath(\n                  0,\n                  0,\n                  animatedWidth,\n                  svgHeight,\n                  {\n                    topLeft: corners.topLeft,\n                    topRight: animatedWidth >= svgWidth ? corners.topRight : 0,\n                    bottomLeft: corners.bottomLeft,\n                    bottomRight: animatedWidth >= svgWidth ? corners.bottomRight : 0,\n                  }\n                )}\n                fill={relative.color}\n              />\n            )}\n          </svg>\n        </div>\n        {children && (\n          <div className={`histogram-text-container ${orientation === 'horizontal' ? 'histogram-text-container--horizontal' : ''}`}>\n            {children}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n","import React from \"react\";\nimport \"./Chip.css\";\n\ninterface ChipProps {\n  // Define any props you want to pass to the Chip component\n  label?: string;\n  bgColor?: string;\n  textColor?: string;\n}\n\nexport const Chip: React.FC<ChipProps> = ({ label, bgColor, textColor }) => {\n  return (\n    <div className=\"chip-container\" style={{ backgroundColor: bgColor }}>\n      <div className=\"chip-content\">\n        <p className=\"chip-label\" style={{ color: textColor }}>\n          {label}\n        </p>\n      </div>\n    </div>\n  );\n};\n"],"names":["Histogram","_a","max","relative","_f","barHeight","_g","barWidth","_h","orientation","cornerRadius","children","_j","useState","animatedHeight","setAnimatedHeight","_k","animatedWidth","setAnimatedWidth","targetHeight","Math","min","value","targetWidth","useEffect","startTime","Date","now","animate","elapsed","progress","easeOutQuart","pow","requestAnimationFrame","displayWidth","displayHeight","svgWidth","svgHeight","createRoundedRectPath","x","y","width","height","radii","topLeft","topRight","bottomLeft","bottomRight","concat","trim","replace","defaultCornerRadius","corners","_b","_c","_d","_e","_jsx","className","_jsxs","style","viewBox","d","fill","color","fillOpacity","opacity","Chip","label","bgColor","textColor","backgroundColor"],"mappings":"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"}

package/dist/index.js

@@ -1,2 +1,2 @@
-"use strict";var t=require("react/jsx-runtime"),o=require("react");exports.Histogram=function(a){var c,n,i,e,r=a.max,h=a.relative,l=a.barHeight,s=void 0===l?103:l,m=a.barWidth,g=void 0===m?32:m,f=a.orientation,p=void 0===f?"vertical":f,v=a.cornerRadius,d=a.children,u=o.useState(0),L=u[0],b=u[1],R=o.useState(0),x=R[0],z=R[1],j=Math.min(h.value/r.value*100,100)/100*s,w=Math.min(h.value/r.value*100,100)/100*g;o.useEffect(function(){b(0),z(0);var t=Date.now(),o=function(){var a=Date.now()-t,c=Math.min(a/1e3,1),n=1-Math.pow(1-c,4);b(j*n),z(w*n),c<1&&requestAnimationFrame(o)};requestAnimationFrame(o)},[j,w]);var M="horizontal"===p?s:g,N="horizontal"===p?g:s,q="horizontal"===p?s:g,Q="horizontal"===p?g:s,y=function(t,o,a,c,n){var i=n.topLeft,e=n.topRight,r=n.bottomLeft,h=n.bottomRight;return"\n      M ".concat(t+i," ").concat(o,"\n      L ").concat(t+a-e," ").concat(o,"\n      Q ").concat(t+a," ").concat(o," ").concat(t+a," ").concat(o+e,"\n      L ").concat(t+a," ").concat(o+c-h,"\n      Q ").concat(t+a," ").concat(o+c," ").concat(t+a-h," ").concat(o+c,"\n      L ").concat(t+r," ").concat(o+c,"\n      Q ").concat(t," ").concat(o+c," ").concat(t," ").concat(o+c-r,"\n      L ").concat(t," ").concat(o+i,"\n      Q ").concat(t," ").concat(o," ").concat(t+i," ").concat(o,"\n      Z\n    ").trim().replace(/\s+/g," ")},A={topLeft:2,topRight:2,bottomLeft:2,bottomRight:2},D=v?{topLeft:null!==(c=v.topLeft)&&void 0!==c?c:A.topLeft,topRight:null!==(n=v.topRight)&&void 0!==n?n:A.topRight,bottomLeft:null!==(i=v.bottomLeft)&&void 0!==i?i:A.bottomLeft,bottomRight:null!==(e=v.bottomRight)&&void 0!==e?e:A.bottomRight}:A;return t.jsx("div",{className:"histogram-container ".concat("horizontal"===p?"histogram-container--horizontal":""),children:t.jsxs("div",{className:"histogram-content ".concat("horizontal"===p?"histogram-content--horizontal":""),children:[t.jsx("div",{className:"histogram-bar",style:{height:"".concat(N,"px"),width:"".concat(M,"px")},children:t.jsxs("svg",{width:q,height:Q,viewBox:"0 0 ".concat(q," ").concat(Q),className:"histogram-svg",children:[t.jsx("path",{d:y(0,0,q,Q,D),fill:r.color,fillOpacity:r.opacity||1}),"vertical"===p?t.jsx("path",{d:y(0,Q-L,q,L,{topLeft:L>=Q?D.topLeft:0,topRight:L>=Q?D.topRight:0,bottomLeft:D.bottomLeft,bottomRight:D.bottomRight}),fill:h.color}):t.jsx("path",{d:y(0,0,x,Q,{topLeft:D.topLeft,topRight:x>=q?D.topRight:0,bottomLeft:D.bottomLeft,bottomRight:x>=q?D.bottomRight:0}),fill:h.color})]})}),d&&t.jsx("div",{className:"histogram-text-container ".concat("horizontal"===p?"histogram-text-container--horizontal":""),children:d})]})})};
+"use strict";var t=require("react/jsx-runtime"),o=require("react");exports.Chip=function(o){var a=o.label,c=o.bgColor,n=o.textColor;return t.jsx("div",{className:"chip-container",style:{backgroundColor:c},children:t.jsx("div",{className:"chip-content",children:t.jsx("p",{className:"chip-label",style:{color:n},children:a})})})},exports.Histogram=function(a){var c,n,i,e,r=a.max,l=a.relative,h=a.barHeight,s=void 0===h?103:h,m=a.barWidth,g=void 0===m?32:m,p=a.orientation,d=void 0===p?"vertical":p,v=a.cornerRadius,f=a.children,u=o.useState(0),b=u[0],L=u[1],x=o.useState(0),R=x[0],j=x[1],z=Math.min(l.value/r.value*100,100)/100*s,N=Math.min(l.value/r.value*100,100)/100*g;o.useEffect(function(){L(0),j(0);var t=Date.now(),o=function(){var a=Date.now()-t,c=Math.min(a/1e3,1),n=1-Math.pow(1-c,4);L(z*n),j(N*n),c<1&&requestAnimationFrame(o)};requestAnimationFrame(o)},[z,N]);var w="horizontal"===d?s:g,y="horizontal"===d?g:s,M="horizontal"===d?s:g,q="horizontal"===d?g:s,C=function(t,o,a,c,n){var i=n.topLeft,e=n.topRight,r=n.bottomLeft,l=n.bottomRight;return"\n      M ".concat(t+i," ").concat(o,"\n      L ").concat(t+a-e," ").concat(o,"\n      Q ").concat(t+a," ").concat(o," ").concat(t+a," ").concat(o+e,"\n      L ").concat(t+a," ").concat(o+c-l,"\n      Q ").concat(t+a," ").concat(o+c," ").concat(t+a-l," ").concat(o+c,"\n      L ").concat(t+r," ").concat(o+c,"\n      Q ").concat(t," ").concat(o+c," ").concat(t," ").concat(o+c-r,"\n      L ").concat(t," ").concat(o+i,"\n      Q ").concat(t," ").concat(o," ").concat(t+i," ").concat(o,"\n      Z\n    ").trim().replace(/\s+/g," ")},Q={topLeft:2,topRight:2,bottomLeft:2,bottomRight:2},A=v?{topLeft:null!==(c=v.topLeft)&&void 0!==c?c:Q.topLeft,topRight:null!==(n=v.topRight)&&void 0!==n?n:Q.topRight,bottomLeft:null!==(i=v.bottomLeft)&&void 0!==i?i:Q.bottomLeft,bottomRight:null!==(e=v.bottomRight)&&void 0!==e?e:Q.bottomRight}:Q;return t.jsx("div",{className:"histogram-container ".concat("horizontal"===d?"histogram-container--horizontal":""),children:t.jsxs("div",{className:"histogram-content ".concat("horizontal"===d?"histogram-content--horizontal":""),children:[t.jsx("div",{className:"histogram-bar",style:{height:"".concat(y,"px"),width:"".concat(w,"px")},children:t.jsxs("svg",{width:M,height:q,viewBox:"0 0 ".concat(M," ").concat(q),className:"histogram-svg",children:[t.jsx("path",{d:C(0,0,M,q,A),fill:r.color,fillOpacity:r.opacity||1}),"vertical"===d?t.jsx("path",{d:C(0,q-b,M,b,{topLeft:b>=q?A.topLeft:0,topRight:b>=q?A.topRight:0,bottomLeft:A.bottomLeft,bottomRight:A.bottomRight}),fill:l.color}):t.jsx("path",{d:C(0,0,R,q,{topLeft:A.topLeft,topRight:R>=M?A.topRight:0,bottomLeft:A.bottomLeft,bottomRight:R>=M?A.bottomRight:0}),fill:l.color})]})}),f&&t.jsx("div",{className:"histogram-text-container ".concat("horizontal"===d?"histogram-text-container--horizontal":""),children:f})]})})};
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/components/Histogram.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport \"./Histogram.css\";\n\ninterface HistogramProps {\n  /** Maximum value configuration with value and color */\n  max: {\n    value: number;\n    color: string;\n    opacity?: number;\n  };\n  /** Relative/current value configuration with value and color */\n  relative: {\n    value: number;\n    color: string;\n  };\n  /** Height of the histogram bar in pixels */\n  barHeight?: number;\n  /** Width of the histogram bar in pixels */\n  barWidth?: number;\n  /** Orientation of the histogram - 'vertical' or 'horizontal' */\n  orientation?: 'vertical' | 'horizontal';\n  /** Corner radius configuration for individual corners */\n  cornerRadius?: {\n    topLeft?: number;\n    topRight?: number;\n    bottomLeft?: number;\n    bottomRight?: number;\n  };\n  /** Child components (typically text content) */\n  children?: React.ReactNode;\n}\n\nexport const Histogram: React.FC<HistogramProps> = ({\n  max,\n  relative,\n  barHeight = 103,\n  barWidth = 32,\n  orientation = 'vertical',\n  cornerRadius,\n  children,\n}) => {\n  const [animatedHeight, setAnimatedHeight] = useState(0);\n  const [animatedWidth, setAnimatedWidth] = useState(0);\n\n  // Calculate target dimensions based on orientation\n  const targetHeight = (Math.min((relative.value / max.value) * 100, 100) / 100) * barHeight;\n  const targetWidth = (Math.min((relative.value / max.value) * 100, 100) / 100) * barWidth;\n\n  // Simple Chart.js-like animation: always animate from 0 to target\n  useEffect(() => {\n    setAnimatedHeight(0);\n    setAnimatedWidth(0);\n    \n    const startTime = Date.now();\n    const duration = 1000;\n\n    const animate = () => {\n      const elapsed = Date.now() - startTime;\n      const progress = Math.min(elapsed / duration, 1);\n\n      // Chart.js-like easing (easeOutQuart)\n      const easeOutQuart = 1 - Math.pow(1 - progress, 4);\n      \n      setAnimatedHeight(targetHeight * easeOutQuart);\n      setAnimatedWidth(targetWidth * easeOutQuart);\n\n      if (progress < 1) {\n        requestAnimationFrame(animate);\n      }\n    };\n\n    requestAnimationFrame(animate);\n  }, [targetHeight, targetWidth]);\n\n  const displayWidth = orientation === 'horizontal' ? barHeight : barWidth;\n  const displayHeight = orientation === 'horizontal' ? barWidth : barHeight;\n  const svgWidth = orientation === 'horizontal' ? barHeight : barWidth;\n  const svgHeight = orientation === 'horizontal' ? barWidth : barHeight;\n\n  // Helper function to create rounded rectangle path\n  const createRoundedRectPath = (\n    x: number,\n    y: number,\n    width: number,\n    height: number,\n    radii: { topLeft: number; topRight: number; bottomLeft: number; bottomRight: number }\n  ) => {\n    const { topLeft, topRight, bottomLeft, bottomRight } = radii;\n    \n    return `\n      M ${x + topLeft} ${y}\n      L ${x + width - topRight} ${y}\n      Q ${x + width} ${y} ${x + width} ${y + topRight}\n      L ${x + width} ${y + height - bottomRight}\n      Q ${x + width} ${y + height} ${x + width - bottomRight} ${y + height}\n      L ${x + bottomLeft} ${y + height}\n      Q ${x} ${y + height} ${x} ${y + height - bottomLeft}\n      L ${x} ${y + topLeft}\n      Q ${x} ${y} ${x + topLeft} ${y}\n      Z\n    `.trim().replace(/\\s+/g, ' ');\n  };\n\n  // Default corner radius values\n  const defaultCornerRadius = { topLeft: 2, topRight: 2, bottomLeft: 2, bottomRight: 2 };\n  const corners = cornerRadius ? {\n    topLeft: cornerRadius.topLeft ?? defaultCornerRadius.topLeft,\n    topRight: cornerRadius.topRight ?? defaultCornerRadius.topRight,\n    bottomLeft: cornerRadius.bottomLeft ?? defaultCornerRadius.bottomLeft,\n    bottomRight: cornerRadius.bottomRight ?? defaultCornerRadius.bottomRight,\n  } : defaultCornerRadius;\n\n  return (\n    <div className={`histogram-container ${orientation === 'horizontal' ? 'histogram-container--horizontal' : ''}`}>\n      <div className={`histogram-content ${orientation === 'horizontal' ? 'histogram-content--horizontal' : ''}`}>\n        <div \n          className=\"histogram-bar\"\n          style={{\n            height: `${displayHeight}px`,\n            width: `${displayWidth}px`\n          }}\n        >\n          <svg\n            width={svgWidth}\n            height={svgHeight}\n            viewBox={`0 0 ${svgWidth} ${svgHeight}`}\n            className=\"histogram-svg\"\n          >\n            {/* Background bar (max value) */}\n            <path\n              d={createRoundedRectPath(0, 0, svgWidth, svgHeight, corners)}\n              fill={max.color}\n              fillOpacity={max.opacity || 1}\n            />\n            {/* Foreground bar (relative value) with animation */}\n            {orientation === 'vertical' ? (\n              <path\n                d={createRoundedRectPath(\n                  0,\n                  svgHeight - animatedHeight,\n                  svgWidth,\n                  animatedHeight,\n                  {\n                    topLeft: animatedHeight >= svgHeight ? corners.topLeft : 0,\n                    topRight: animatedHeight >= svgHeight ? corners.topRight : 0,\n                    bottomLeft: corners.bottomLeft,\n                    bottomRight: corners.bottomRight,\n                  }\n                )}\n                fill={relative.color}\n              />\n            ) : (\n              <path\n                d={createRoundedRectPath(\n                  0,\n                  0,\n                  animatedWidth,\n                  svgHeight,\n                  {\n                    topLeft: corners.topLeft,\n                    topRight: animatedWidth >= svgWidth ? corners.topRight : 0,\n                    bottomLeft: corners.bottomLeft,\n                    bottomRight: animatedWidth >= svgWidth ? corners.bottomRight : 0,\n                  }\n                )}\n                fill={relative.color}\n              />\n            )}\n          </svg>\n        </div>\n        {children && (\n          <div className={`histogram-text-container ${orientation === 'horizontal' ? 'histogram-text-container--horizontal' : ''}`}>\n            {children}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":["_a","max","relative","_f","barHeight","_g","barWidth","_h","orientation","cornerRadius","children","_j","useState","animatedHeight","setAnimatedHeight","_k","animatedWidth","setAnimatedWidth","targetHeight","Math","min","value","targetWidth","useEffect","startTime","Date","now","animate","elapsed","progress","easeOutQuart","pow","requestAnimationFrame","displayWidth","displayHeight","svgWidth","svgHeight","createRoundedRectPath","x","y","width","height","radii","topLeft","topRight","bottomLeft","bottomRight","concat","trim","replace","defaultCornerRadius","corners","_b","_c","_d","_e","_jsx","jsx","className","_jsxs","style","viewBox","d","fill","color","fillOpacity","opacity"],"mappings":"qFAgCmD,SAACA,eAClDC,EAAGD,EAAAC,IACHC,EAAQF,EAAAE,SACRC,EAAAH,EAAAI,UAAAA,OAAY,IAAAD,EAAA,IAAGA,EACfE,aAAAC,OAAW,IAAAD,EAAA,GAAEA,EACbE,EAAwBP,EAAAQ,YAAxBA,OAAW,IAAAD,EAAG,WAAUA,EACxBE,EAAYT,EAAAS,aACZC,EAAQV,EAAAU,SAEFC,EAAsCC,EAAAA,SAAS,GAA9CC,EAAcF,EAAA,GAAEG,EAAiBH,EAAA,GAClCI,EAAoCH,EAAAA,SAAS,GAA5CI,EAAaD,EAAA,GAAEE,EAAgBF,EAAA,GAGhCG,EAAgBC,KAAKC,IAAKlB,EAASmB,MAAQpB,EAAIoB,MAAS,IAAK,KAAO,IAAOjB,EAC3EkB,EAAeH,KAAKC,IAAKlB,EAASmB,MAAQpB,EAAIoB,MAAS,IAAK,KAAO,IAAOf,EAGhFiB,EAAAA,UAAU,WACRT,EAAkB,GAClBG,EAAiB,GAEjB,IAAMO,EAAYC,KAAKC,MAGjBC,EAAU,WACd,IAAMC,EAAUH,KAAKC,MAAQF,EACvBK,EAAWV,KAAKC,IAAIQ,EAJX,IAI+B,GAGxCE,EAAe,EAAIX,KAAKY,IAAI,EAAIF,EAAU,GAEhDf,EAAkBI,EAAeY,GACjCb,EAAiBK,EAAcQ,GAE3BD,EAAW,GACbG,sBAAsBL,EAE1B,EAEAK,sBAAsBL,EACxB,EAAG,CAACT,EAAcI,IAElB,IAAMW,EAA+B,eAAhBzB,EAA+BJ,EAAYE,EAC1D4B,EAAgC,eAAhB1B,EAA+BF,EAAWF,EAC1D+B,EAA2B,eAAhB3B,EAA+BJ,EAAYE,EACtD8B,EAA4B,eAAhB5B,EAA+BF,EAAWF,EAGtDiC,EAAwB,SAC5BC,EACAC,EACAC,EACAC,EACAC,GAEQ,IAAAC,EAA+CD,UAAtCE,EAAsCF,EAAKE,SAAjCC,EAA4BH,EAAlBG,WAAEC,EAAgBJ,cAEvD,MAAO,aAAAK,OACDT,EAAIK,cAAWJ,EAAC,cAAAQ,OAChBT,EAAIE,EAAQI,EAAY,KAAAG,OAAAR,EACxB,cAAAQ,OAAAT,EAAIE,cAASD,EAAC,KAAAQ,OAAIT,EAAIE,EAAK,KAAAO,OAAIR,EAAIK,uBACnCN,EAAIE,EAAS,KAAAO,OAAAR,EAAIE,EAASK,uBAC1BR,EAAIE,EAAK,KAAAO,OAAIR,EAAIE,EAAU,KAAAM,OAAAT,EAAIE,EAAQM,cAAeP,EAAIE,EAC1D,cAAAM,OAAAT,EAAIO,EAAU,KAAAE,OAAIR,EAAIE,EAAM,cAAAM,OAC5BT,EAAK,KAAAS,OAAAR,EAAIE,EAAU,KAAAM,OAAAT,cAAKC,EAAIE,EAASI,EAAU,cAAAE,OAC/CT,EAAK,KAAAS,OAAAR,EAAII,EACT,cAAAI,OAAAT,cAAKC,EAAC,KAAAQ,OAAIT,EAAIK,EAAO,KAAAI,OAAIR,EAE9B,mBAACS,OAAOC,QAAQ,OAAQ,IAC3B,EAGMC,EAAsB,CAAEP,QAAS,EAAGC,SAAU,EAAGC,WAAY,EAAGC,YAAa,GAC7EK,EAAU1C,EAAe,CAC7BkC,QAAiC,UAAxBlC,EAAakC,eAAW,IAAAS,EAAAA,EAAAF,EAAoBP,QACrDC,SAAmC,UAAzBnC,EAAamC,gBAAY,IAAAS,EAAAA,EAAAH,EAAoBN,SACvDC,WAAuC,UAA3BpC,EAAaoC,kBAAc,IAAAS,EAAAA,EAAAJ,EAAoBL,WAC3DC,YAAyC,UAA5BrC,EAAaqC,mBAAe,IAAAS,EAAAA,EAAAL,EAAoBJ,aAC3DI,EAEJ,OACEM,EAAKC,IAAA,MAAA,CAAAC,UAAW,uBAAuBX,OAAgB,eAAhBvC,EAA+B,kCAAoC,aACxGmD,EAAAA,KAAK,MAAA,CAAAD,UAAW,qBAAAX,OAAqC,eAAhBvC,EAA+B,gCAAkC,cACpGgD,EACEC,IAAA,MAAA,CAAAC,UAAU,gBACVE,MAAO,CACLnB,OAAQ,GAAGM,OAAAb,EAAiB,MAC5BM,MAAO,GAAGO,OAAAd,EAAgB,OAC3BvB,SAEDiD,EAAAA,KACE,MAAA,CAAAnB,MAAOL,EACPM,OAAQL,EACRyB,QAAS,OAAAd,OAAOZ,EAAQ,KAAAY,OAAIX,GAC5BsB,UAAU,gBAAehD,SAAA,CAGzB8C,EACEC,IAAA,OAAA,CAAAK,EAAGzB,EAAsB,EAAG,EAAGF,EAAUC,EAAWe,GACpDY,KAAM9D,EAAI+D,MACVC,YAAahE,EAAIiE,SAAW,IAGb,aAAhB1D,EACCgD,MAAA,OAAA,CACEM,EAAGzB,EACD,EACAD,EAAYvB,EACZsB,EACAtB,EACA,CACE8B,QAAS9B,GAAkBuB,EAAYe,EAAQR,QAAU,EACzDC,SAAU/B,GAAkBuB,EAAYe,EAAQP,SAAW,EAC3DC,WAAYM,EAAQN,WACpBC,YAAaK,EAAQL,cAGzBiB,KAAM7D,EAAS8D,QAGjBR,EAAAA,YACEM,EAAGzB,EACD,EACA,EACArB,EACAoB,EACA,CACEO,QAASQ,EAAQR,QACjBC,SAAU5B,GAAiBmB,EAAWgB,EAAQP,SAAW,EACzDC,WAAYM,EAAQN,WACpBC,YAAa9B,GAAiBmB,EAAWgB,EAAQL,YAAc,IAGnEiB,KAAM7D,EAAS8D,aAKtBtD,GACC8C,EAAAC,IAAA,MAAA,CAAKC,UAAW,4BAAAX,OAA4C,eAAhBvC,EAA+B,uCAAyC,aACjHE,QAMb"}
+{"version":3,"file":"index.js","sources":["../src/components/Chip.tsx","../src/components/Histogram.tsx"],"sourcesContent":["import React from \"react\";\nimport \"./Chip.css\";\n\ninterface ChipProps {\n  // Define any props you want to pass to the Chip component\n  label?: string;\n  bgColor?: string;\n  textColor?: string;\n}\n\nexport const Chip: React.FC<ChipProps> = ({ label, bgColor, textColor }) => {\n  return (\n    <div className=\"chip-container\" style={{ backgroundColor: bgColor }}>\n      <div className=\"chip-content\">\n        <p className=\"chip-label\" style={{ color: textColor }}>\n          {label}\n        </p>\n      </div>\n    </div>\n  );\n};\n","import React, { useEffect, useState } from \"react\";\nimport \"./Histogram.css\";\n\ninterface HistogramProps {\n  /** Maximum value configuration with value and color */\n  max: {\n    value: number;\n    color: string;\n    opacity?: number;\n  };\n  /** Relative/current value configuration with value and color */\n  relative: {\n    value: number;\n    color: string;\n  };\n  /** Height of the histogram bar in pixels */\n  barHeight?: number;\n  /** Width of the histogram bar in pixels */\n  barWidth?: number;\n  /** Orientation of the histogram - 'vertical' or 'horizontal' */\n  orientation?: 'vertical' | 'horizontal';\n  /** Corner radius configuration for individual corners */\n  cornerRadius?: {\n    topLeft?: number;\n    topRight?: number;\n    bottomLeft?: number;\n    bottomRight?: number;\n  };\n  /** Child components (typically text content) */\n  children?: React.ReactNode;\n}\n\nexport const Histogram: React.FC<HistogramProps> = ({\n  max,\n  relative,\n  barHeight = 103,\n  barWidth = 32,\n  orientation = 'vertical',\n  cornerRadius,\n  children,\n}) => {\n  const [animatedHeight, setAnimatedHeight] = useState(0);\n  const [animatedWidth, setAnimatedWidth] = useState(0);\n\n  // Calculate target dimensions based on orientation\n  const targetHeight = (Math.min((relative.value / max.value) * 100, 100) / 100) * barHeight;\n  const targetWidth = (Math.min((relative.value / max.value) * 100, 100) / 100) * barWidth;\n\n  // Simple Chart.js-like animation: always animate from 0 to target\n  useEffect(() => {\n    setAnimatedHeight(0);\n    setAnimatedWidth(0);\n    \n    const startTime = Date.now();\n    const duration = 1000;\n\n    const animate = () => {\n      const elapsed = Date.now() - startTime;\n      const progress = Math.min(elapsed / duration, 1);\n\n      // Chart.js-like easing (easeOutQuart)\n      const easeOutQuart = 1 - Math.pow(1 - progress, 4);\n      \n      setAnimatedHeight(targetHeight * easeOutQuart);\n      setAnimatedWidth(targetWidth * easeOutQuart);\n\n      if (progress < 1) {\n        requestAnimationFrame(animate);\n      }\n    };\n\n    requestAnimationFrame(animate);\n  }, [targetHeight, targetWidth]);\n\n  const displayWidth = orientation === 'horizontal' ? barHeight : barWidth;\n  const displayHeight = orientation === 'horizontal' ? barWidth : barHeight;\n  const svgWidth = orientation === 'horizontal' ? barHeight : barWidth;\n  const svgHeight = orientation === 'horizontal' ? barWidth : barHeight;\n\n  // Helper function to create rounded rectangle path\n  const createRoundedRectPath = (\n    x: number,\n    y: number,\n    width: number,\n    height: number,\n    radii: { topLeft: number; topRight: number; bottomLeft: number; bottomRight: number }\n  ) => {\n    const { topLeft, topRight, bottomLeft, bottomRight } = radii;\n    \n    return `\n      M ${x + topLeft} ${y}\n      L ${x + width - topRight} ${y}\n      Q ${x + width} ${y} ${x + width} ${y + topRight}\n      L ${x + width} ${y + height - bottomRight}\n      Q ${x + width} ${y + height} ${x + width - bottomRight} ${y + height}\n      L ${x + bottomLeft} ${y + height}\n      Q ${x} ${y + height} ${x} ${y + height - bottomLeft}\n      L ${x} ${y + topLeft}\n      Q ${x} ${y} ${x + topLeft} ${y}\n      Z\n    `.trim().replace(/\\s+/g, ' ');\n  };\n\n  // Default corner radius values\n  const defaultCornerRadius = { topLeft: 2, topRight: 2, bottomLeft: 2, bottomRight: 2 };\n  const corners = cornerRadius ? {\n    topLeft: cornerRadius.topLeft ?? defaultCornerRadius.topLeft,\n    topRight: cornerRadius.topRight ?? defaultCornerRadius.topRight,\n    bottomLeft: cornerRadius.bottomLeft ?? defaultCornerRadius.bottomLeft,\n    bottomRight: cornerRadius.bottomRight ?? defaultCornerRadius.bottomRight,\n  } : defaultCornerRadius;\n\n  return (\n    <div className={`histogram-container ${orientation === 'horizontal' ? 'histogram-container--horizontal' : ''}`}>\n      <div className={`histogram-content ${orientation === 'horizontal' ? 'histogram-content--horizontal' : ''}`}>\n        <div \n          className=\"histogram-bar\"\n          style={{\n            height: `${displayHeight}px`,\n            width: `${displayWidth}px`\n          }}\n        >\n          <svg\n            width={svgWidth}\n            height={svgHeight}\n            viewBox={`0 0 ${svgWidth} ${svgHeight}`}\n            className=\"histogram-svg\"\n          >\n            {/* Background bar (max value) */}\n            <path\n              d={createRoundedRectPath(0, 0, svgWidth, svgHeight, corners)}\n              fill={max.color}\n              fillOpacity={max.opacity || 1}\n            />\n            {/* Foreground bar (relative value) with animation */}\n            {orientation === 'vertical' ? (\n              <path\n                d={createRoundedRectPath(\n                  0,\n                  svgHeight - animatedHeight,\n                  svgWidth,\n                  animatedHeight,\n                  {\n                    topLeft: animatedHeight >= svgHeight ? corners.topLeft : 0,\n                    topRight: animatedHeight >= svgHeight ? corners.topRight : 0,\n                    bottomLeft: corners.bottomLeft,\n                    bottomRight: corners.bottomRight,\n                  }\n                )}\n                fill={relative.color}\n              />\n            ) : (\n              <path\n                d={createRoundedRectPath(\n                  0,\n                  0,\n                  animatedWidth,\n                  svgHeight,\n                  {\n                    topLeft: corners.topLeft,\n                    topRight: animatedWidth >= svgWidth ? corners.topRight : 0,\n                    bottomLeft: corners.bottomLeft,\n                    bottomRight: animatedWidth >= svgWidth ? corners.bottomRight : 0,\n                  }\n                )}\n                fill={relative.color}\n              />\n            )}\n          </svg>\n        </div>\n        {children && (\n          <div className={`histogram-text-container ${orientation === 'horizontal' ? 'histogram-text-container--horizontal' : ''}`}>\n            {children}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":["_a","label","bgColor","textColor","_jsx","jsx","className","style","backgroundColor","children","color","max","relative","_f","barHeight","_g","barWidth","_h","orientation","cornerRadius","_j","useState","animatedHeight","setAnimatedHeight","_k","animatedWidth","setAnimatedWidth","targetHeight","Math","min","value","targetWidth","useEffect","startTime","Date","now","animate","elapsed","progress","easeOutQuart","pow","requestAnimationFrame","displayWidth","displayHeight","svgWidth","svgHeight","createRoundedRectPath","x","y","width","height","radii","topLeft","topRight","bottomLeft","bottomRight","concat","trim","replace","defaultCornerRadius","corners","_b","_c","_d","_e","_jsxs","viewBox","d","fill","fillOpacity","opacity"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rte-utils",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "description": "React components library in TypeScript for agigox projects",
   "type": "module",
   "main": "dist/index.js",
@@ -49,9 +49,9 @@
     "tslib": "^2.8.1",
     "typescript": "^5.1.0"
   },
-   "optionalDependencies": {
-      "fsevents": "^2.3.3"
-    },
+  "optionalDependencies": {
+    "fsevents": "^2.3.3"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/agigox/rte-utils.git"