rte-utils 1.2.2 → 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>
@@ -84,6 +84,121 @@ function EnergyDashboard() {
 }
 ```
 
+### Horizontal Orientation Example
+
+```tsx
+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" }}>
+      <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
+        orientation="horizontal"
+      >
+        <div className="histogram-value-container">
+          <p className="histogram-value">75</p>
+          <p className="histogram-unit">%</p>
+        </div>
+        <div>
+          <p className="histogram-label">Progress</p>
+        </div>
+      </Histogram>
+    </div>
+  );
+}
+```
+
+### Custom Corner Radius Example
+
+```tsx
+import React from "react";
+import { Histogram } from "rte-utils";
+import "rte-utils/dist/index.css";
+
+function CustomCornerChart() {
+  return (
+    <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,
+        }}
+      />
+
+      {/* 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,
+        }}
+      />
+
+      {/* 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,
+        }}
+      />
+    </div>
+  );
+}
+```
+
+### Opacity and Advanced Styling Example
+
+```tsx
+import React from "react";
+import { Histogram } from "rte-utils";
+import "rte-utils/dist/index.css";
+
+function AdvancedStylingChart() {
+  return (
+    <Histogram
+      max={{ value: 100, color: "#000000", opacity: 0.1 }}
+      relative={{ value: 65, color: "#E91E63" }}
+      barWidth={40}
+      barHeight={150}
+      orientation="vertical"
+      cornerRadius={{ topLeft: 8, topRight: 8, bottomLeft: 4, bottomRight: 4 }}
+    >
+      <div className="histogram-value-container">
+        <p className="histogram-value">65</p>
+        <p className="histogram-unit">kW</p>
+      </div>
+      <div>
+        <p className="histogram-label">Power Usage</p>
+      </div>
+    </Histogram>
+  );
+}
+```
+
 ## Components
 
 ### Histogram
@@ -92,22 +207,27 @@ A histogram component with smooth animations for energy data visualization.
 
 #### Props
 
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `max` | `{ value: number; color: string }` | ✅ | - | Maximum value configuration with value and color |
-| `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 |
-| `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**: 2-second Chart.js-style transitions
-- **Incremental updates**: Animations from previous to new values (not from 0)
-- **Dynamic two-color visualization**: 
+- **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**:
   - Background bar color defined by `max.color` represents the maximum value
   - Foreground bar color defined by `relative.color` represents the relative value
-- **Customizable**: Colors, dimensions, and styling options
+- **Opacity control**: Optional opacity setting for background bars
+- **Smart corner rendering**: Foreground bars intelligently apply corner radii based on fill level
+- **Customizable**: Colors, dimensions, orientations, and styling options
 - **TypeScript support**: Full type definitions included
 
 ## Styling
@@ -115,21 +235,96 @@ 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:
 
-- `.histogram-container`
-- `.histogram-content`
-- `.histogram-bar`
-- `.histogram-svg`
-- `.histogram-text-container`
-- `.histogram-value-container`
-- `.histogram-value`
-- `.histogram-unit`
-- `.histogram-label`
+- `.histogram-container` - Main container
+- `.histogram-container--horizontal` - Horizontal layout modifier
+- `.histogram-content` - Content wrapper
+- `.histogram-content--horizontal` - Horizontal content modifier
+- `.histogram-bar` - Bar container
+- `.histogram-svg` - SVG element
+- `.histogram-text-container` - Text content container
+- `.histogram-text-container--horizontal` - Horizontal text layout modifier
+- `.histogram-value-container` - Value display wrapper
+- `.histogram-value` - Main value text
+- `.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/Histogram.d.ts

@@ -5,6 +5,7 @@ interface HistogramProps {
     max: {
         value: number;
         color: string;
+        opacity?: number;
     };
     /** Relative/current value configuration with value and color */
     relative: {
@@ -15,6 +16,15 @@ interface HistogramProps {
     barHeight?: number;
     /** Width of the histogram bar in pixels */
     barWidth?: number;
+    /** Orientation of the histogram - 'vertical' or 'horizontal' */
+    orientation?: 'vertical' | 'horizontal';
+    /** Corner radius configuration for individual corners */
+    cornerRadius?: {
+        topLeft?: number;
+        topRight?: number;
+        bottomLeft?: number;
+        bottomRight?: number;
+    };
     /** Child components (typically text content) */
     children?: React.ReactNode;
 }

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{border:3px solid #2c2f33;height:auto;max-width:54px;position:relative}.histogram-content{align-items:center;display:flex;flex-direction:column;gap:8px;width: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-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{border:3px solid #2c2f33;height:auto;max-width:54px;position:relative}.histogram-content{align-items:center;display:flex;flex-direction:column;gap:8px;width: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-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 i}from"react/jsx-runtime";import{useState as a,useEffect as e}from"react";var r=function(r){var n=r.max,o=r.relative,c=r.barHeight,h=void 0===c?103:c,m=r.barWidth,l=void 0===m?32:m,s=r.children,d=a(0),v=d[0],g=d[1],x=Math.min(o.value/n.value*100,100)/100*h;return e(function(){g(0);var t=Date.now(),i=function(){var a=Date.now()-t,e=Math.min(a/1e3,1),r=1-Math.pow(1-e,4);g(x*r),e<1&&requestAnimationFrame(i)};requestAnimationFrame(i)},[x]),t("div",{className:"histogram-container",children:i("div",{className:"histogram-content",children:[t("div",{className:"histogram-bar",style:{height:"".concat(h,"px"),width:"".concat(l,"px")},children:i("svg",{width:l,height:h,viewBox:"0 0 ".concat(l," ").concat(h),className:"histogram-svg",children:[t("rect",{x:"0",y:"0",width:l,height:h,fill:n.color,rx:"2"}),t("rect",{x:"0",y:h-v,width:l,height:v,fill:o.color,rx:"2"})]})}),s&&t("div",{className:"histogram-text-container",children:s})]})})};export{r 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  };\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  /** 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  children,\n}) => {\n  const [animatedHeight, setAnimatedHeight] = useState(0);\n\n  // Calculate target height\n  const targetHeight = (Math.min((relative.value / max.value) * 100, 100) / 100) * barHeight;\n\n  // Simple Chart.js-like animation: always animate from 0 to target\n  useEffect(() => {\n    setAnimatedHeight(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\n      if (progress < 1) {\n        requestAnimationFrame(animate);\n      }\n    };\n\n    requestAnimationFrame(animate);\n  }, [targetHeight]);\n\n  return (\n    <div className=\"histogram-container\">\n      <div className=\"histogram-content\">\n        <div \n          className=\"histogram-bar\"\n          style={{\n            height: `${barHeight}px`,\n            width: `${barWidth}px`\n          }}\n        >\n          <svg\n            width={barWidth}\n            height={barHeight}\n            viewBox={`0 0 ${barWidth} ${barHeight}`}\n            className=\"histogram-svg\"\n          >\n            {/* Background bar (max value) */}\n            <rect\n              x=\"0\"\n              y=\"0\"\n              width={barWidth}\n              height={barHeight}\n              fill={max.color}\n              rx=\"2\"\n            />\n            {/* Foreground bar (relative value) with animation */}\n            <rect\n              x=\"0\"\n              y={barHeight - animatedHeight}\n              width={barWidth}\n              height={animatedHeight}\n              fill={relative.color}\n              rx=\"2\"\n            />\n          </svg>\n        </div>\n        {children && (\n          <div className=\"histogram-text-container\">\n            {children}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":["Histogram","_a","max","relative","_b","barHeight","_c","barWidth","children","_d","useState","animatedHeight","setAnimatedHeight","targetHeight","Math","min","value","useEffect","startTime","Date","now","animate","elapsed","progress","easeOutQuart","pow","requestAnimationFrame","_jsx","className","_jsxs","style","height","concat","width","viewBox","x","y","fill","color","rx"],"mappings":"kGAsBO,IAAMA,EAAsC,SAACC,OAClDC,EAAGD,EAAAC,IACHC,EAAQF,EAAAE,SACRC,EAAeH,EAAAI,UAAfA,OAAY,IAAAD,EAAA,MACZE,EAAAL,EAAAM,SAAAA,OAAQ,IAAAD,EAAG,GAAEA,EACbE,EAAQP,EAAAO,SAEFC,EAAsCC,EAAS,GAA9CC,EAAcF,EAAA,GAAEG,EAAiBH,EAAA,GAGlCI,EAAgBC,KAAKC,IAAKZ,EAASa,MAAQd,EAAIc,MAAS,IAAK,KAAO,IAAOX,EA0BjF,OAvBAY,EAAU,WACRL,EAAkB,GAElB,IAAMM,EAAYC,KAAKC,MAGjBC,EAAU,WACd,IAAMC,EAAUH,KAAKC,MAAQF,EACvBK,EAAWT,KAAKC,IAAIO,EAJX,IAI+B,GAGxCE,EAAe,EAAIV,KAAKW,IAAI,EAAIF,EAAU,GAEhDX,EAAkBC,EAAeW,GAE7BD,EAAW,GACbG,sBAAsBL,EAE1B,EAEAK,sBAAsBL,EACxB,EAAG,CAACR,IAGFc,EAAK,MAAA,CAAAC,UAAU,+BACbC,EAAK,MAAA,CAAAD,UAAU,8BACbD,EACE,MAAA,CAAAC,UAAU,gBACVE,MAAO,CACLC,OAAQ,GAAGC,OAAA3B,EAAa,MACxB4B,MAAO,GAAGD,OAAAzB,EAAY,OAGxBC,SAAAqB,EAAA,MAAA,CACEI,MAAO1B,EACPwB,OAAQ1B,EACR6B,QAAS,OAAOF,OAAAzB,cAAYF,GAC5BuB,UAAU,gBAGVpB,SAAA,CAAAmB,EAAA,OAAA,CACEQ,EAAE,IACFC,EAAE,IACFH,MAAO1B,EACPwB,OAAQ1B,EACRgC,KAAMnC,EAAIoC,MACVC,GAAG,MAGLZ,EAAA,OAAA,CACEQ,EAAE,IACFC,EAAG/B,EAAYM,EACfsB,MAAO1B,EACPwB,OAAQpB,EACR0B,KAAMlC,EAASmC,MACfC,GAAG,WAIR/B,GACCmB,SAAKC,UAAU,2BACZpB,SAAAA,QAMb"}
+{"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"),e=require("react");exports.Histogram=function(i){var a=i.max,r=i.relative,s=i.barHeight,c=void 0===s?103:s,n=i.barWidth,o=void 0===n?32:n,h=i.children,l=e.useState(0),m=l[0],x=l[1],d=Math.min(r.value/a.value*100,100)/100*c;return e.useEffect(function(){x(0);var t=Date.now(),e=function(){var i=Date.now()-t,a=Math.min(i/1e3,1),r=1-Math.pow(1-a,4);x(d*r),a<1&&requestAnimationFrame(e)};requestAnimationFrame(e)},[d]),t.jsx("div",{className:"histogram-container",children:t.jsxs("div",{className:"histogram-content",children:[t.jsx("div",{className:"histogram-bar",style:{height:"".concat(c,"px"),width:"".concat(o,"px")},children:t.jsxs("svg",{width:o,height:c,viewBox:"0 0 ".concat(o," ").concat(c),className:"histogram-svg",children:[t.jsx("rect",{x:"0",y:"0",width:o,height:c,fill:a.color,rx:"2"}),t.jsx("rect",{x:"0",y:c-m,width:o,height:m,fill:r.color,rx:"2"})]})}),h&&t.jsx("div",{className:"histogram-text-container",children:h})]})})};
+"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  };\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  /** 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  children,\n}) => {\n  const [animatedHeight, setAnimatedHeight] = useState(0);\n\n  // Calculate target height\n  const targetHeight = (Math.min((relative.value / max.value) * 100, 100) / 100) * barHeight;\n\n  // Simple Chart.js-like animation: always animate from 0 to target\n  useEffect(() => {\n    setAnimatedHeight(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\n      if (progress < 1) {\n        requestAnimationFrame(animate);\n      }\n    };\n\n    requestAnimationFrame(animate);\n  }, [targetHeight]);\n\n  return (\n    <div className=\"histogram-container\">\n      <div className=\"histogram-content\">\n        <div \n          className=\"histogram-bar\"\n          style={{\n            height: `${barHeight}px`,\n            width: `${barWidth}px`\n          }}\n        >\n          <svg\n            width={barWidth}\n            height={barHeight}\n            viewBox={`0 0 ${barWidth} ${barHeight}`}\n            className=\"histogram-svg\"\n          >\n            {/* Background bar (max value) */}\n            <rect\n              x=\"0\"\n              y=\"0\"\n              width={barWidth}\n              height={barHeight}\n              fill={max.color}\n              rx=\"2\"\n            />\n            {/* Foreground bar (relative value) with animation */}\n            <rect\n              x=\"0\"\n              y={barHeight - animatedHeight}\n              width={barWidth}\n              height={animatedHeight}\n              fill={relative.color}\n              rx=\"2\"\n            />\n          </svg>\n        </div>\n        {children && (\n          <div className=\"histogram-text-container\">\n            {children}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":["_a","max","relative","_b","barHeight","_c","barWidth","children","_d","useState","animatedHeight","setAnimatedHeight","targetHeight","Math","min","value","useEffect","startTime","Date","now","animate","elapsed","progress","easeOutQuart","pow","requestAnimationFrame","_jsx","className","_jsxs","jsxs","jsx","style","height","concat","width","viewBox","x","y","fill","color","rx"],"mappings":"qFAsBmD,SAACA,OAClDC,EAAGD,EAAAC,IACHC,EAAQF,EAAAE,SACRC,EAAeH,EAAAI,UAAfA,OAAY,IAAAD,EAAA,MACZE,EAAAL,EAAAM,SAAAA,OAAQ,IAAAD,EAAG,GAAEA,EACbE,EAAQP,EAAAO,SAEFC,EAAsCC,EAAAA,SAAS,GAA9CC,EAAcF,EAAA,GAAEG,EAAiBH,EAAA,GAGlCI,EAAgBC,KAAKC,IAAKZ,EAASa,MAAQd,EAAIc,MAAS,IAAK,KAAO,IAAOX,EA0BjF,OAvBAY,EAAAA,UAAU,WACRL,EAAkB,GAElB,IAAMM,EAAYC,KAAKC,MAGjBC,EAAU,WACd,IAAMC,EAAUH,KAAKC,MAAQF,EACvBK,EAAWT,KAAKC,IAAIO,EAJX,IAI+B,GAGxCE,EAAe,EAAIV,KAAKW,IAAI,EAAIF,EAAU,GAEhDX,EAAkBC,EAAeW,GAE7BD,EAAW,GACbG,sBAAsBL,EAE1B,EAEAK,sBAAsBL,EACxB,EAAG,CAACR,IAGFc,EAAAA,IAAK,MAAA,CAAAC,UAAU,+BACbC,EAAKC,KAAA,MAAA,CAAAF,UAAU,8BACbD,EACEI,IAAA,MAAA,CAAAH,UAAU,gBACVI,MAAO,CACLC,OAAQ,GAAGC,OAAA7B,EAAa,MACxB8B,MAAO,GAAGD,OAAA3B,EAAY,OAGxBC,SAAAqB,EAAAA,KAAA,MAAA,CACEM,MAAO5B,EACP0B,OAAQ5B,EACR+B,QAAS,OAAOF,OAAA3B,cAAYF,GAC5BuB,UAAU,gBAGVpB,SAAA,CAAAmB,EAAAA,IAAA,OAAA,CACEU,EAAE,IACFC,EAAE,IACFH,MAAO5B,EACP0B,OAAQ5B,EACRkC,KAAMrC,EAAIsC,MACVC,GAAG,MAGLd,EAAAA,IAAA,OAAA,CACEU,EAAE,IACFC,EAAGjC,EAAYM,EACfwB,MAAO5B,EACP0B,OAAQtB,EACR4B,KAAMpC,EAASqC,MACfC,GAAG,WAIRjC,GACCmB,EAAAA,WAAKC,UAAU,2BACZpB,SAAAA,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.2",
+  "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"