rte-utils 1.2.7 → 1.2.9

package/README.md

@@ -253,6 +253,131 @@ You can override the default styles by targeting the CSS classes:
 - `.histogram-unit` - Unit text
 - `.histogram-label` - Label text
 
+### ProductionUnit
+
+A comprehensive production unit component that combines an image display, status chip, input field, and switch control. Perfect for energy management dashboards and industrial control interfaces.
+
+#### Props
+
+| Prop             | Type                      | Required | Default              | Description                                        |
+| ---------------- | ------------------------- | -------- | -------------------- | -------------------------------------------------- |
+| `onChangeInput`  | `(value: number) => void` | ❌       | -                    | Callback triggered when input value changes        |
+| `onChangeSwitch` | `(checked: boolean) => void` | ❌    | -                    | Callback triggered when switch state changes       |
+| `defaultValue`   | `number`                  | ❌       | -                    | Initial value for the input field                  |
+| `defaultChecked` | `boolean`                 | ❌       | `false`              | Initial state for the switch                       |
+| `unitName`       | `string`                  | ❌       | `"Production Unit"`  | Display name for the production unit               |
+| `energyCost`     | `number`                  | ❌       | `0`                  | Energy cost value displayed in the chip (MW)       |
+| `checkedImage`   | `React.ReactNode`         | ❌       | -                    | Custom image/component displayed when switch is ON |
+| `uncheckedImage` | `React.ReactNode`         | ❌       | -                    | Custom image/component displayed when switch is OFF |
+
+#### Example Usage
+
+```tsx
+import React from "react";
+import { ProductionUnit } from "rte-utils";
+import "rte-utils/dist/index.css";
+
+function ProductionUnitExample() {
+  const handleInputChange = (value: number) => {
+    console.log("Production value changed:", value);
+  };
+
+  const handleSwitchChange = (checked: boolean) => {
+    console.log("Production unit is now:", checked ? "ON" : "OFF");
+  };
+
+  return (
+    <div style={{ display: "flex", gap: "1rem", flexWrap: "wrap" }}>
+      {/* Basic usage */}
+      <ProductionUnit
+        unitName="Solar Panel"
+        energyCost={25}
+        defaultChecked={true}
+        defaultValue={100}
+        onChangeInput={handleInputChange}
+        onChangeSwitch={handleSwitchChange}
+      />
+
+      {/* With custom images */}
+      <ProductionUnit
+        unitName="Wind Turbine"
+        energyCost={50}
+        defaultChecked={false}
+        defaultValue={75}
+        checkedImage={
+          <img 
+            src="https://placehold.co/60x60/4CAF50/FFFFFF/png?text=ON" 
+            alt="Wind Turbine On" 
+          />
+        }
+        uncheckedImage={
+          <img 
+            src="https://placehold.co/60x60/F44336/FFFFFF/png?text=OFF" 
+            alt="Wind Turbine Off" 
+          />
+        }
+        onChangeInput={handleInputChange}
+        onChangeSwitch={handleSwitchChange}
+      />
+
+      {/* With icon components */}
+      <ProductionUnit
+        unitName="Nuclear Plant"
+        energyCost={1000}
+        defaultChecked={true}
+        checkedImage={
+          <div style={{
+            width: 60,
+            height: 60,
+            borderRadius: '50%',
+            backgroundColor: '#4CAF50',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            color: 'white',
+            fontWeight: 'bold'
+          }}>
+            ⚡
+          </div>
+        }
+        uncheckedImage={
+          <div style={{
+            width: 60,
+            height: 60,
+            borderRadius: '50%',
+            backgroundColor: '#F44336',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            color: 'white',
+            fontWeight: 'bold'
+          }}>
+            ⚠️
+          </div>
+        }
+      />
+    </div>
+  );
+}
+```
+
+#### Features
+
+- **Self-contained state management**: Component manages its own input value and switch state
+- **Callback communication**: Parent components receive updates through callback functions
+- **Automatic input disabling**: Input field is disabled when switch is OFF
+- **Flexible image display**: Support for custom images, icons, or React components
+- **Energy cost display**: Built-in chip showing energy cost in MW
+- **TypeScript support**: Full type definitions included
+
+#### CSS Classes
+
+The ProductionUnit component uses the following CSS classes:
+
+- `.production-unit-container` - Main container
+- `.image-preview-container` - Image display wrapper
+- `.production-unit-switch` - Switch component styling
+
 ### Chip
 
 A customizable chip component for displaying labels, tags, or status indicators.

package/dist/components/Avatar.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import "./Avatar.css";
+interface AvatarProps {
+    children: React.ReactNode;
+}
+export declare const Avatar: React.FC<AvatarProps>;
+export {};

package/dist/components/Chip.d.ts

@@ -4,6 +4,7 @@ interface ChipProps {
     label?: string;
     bgColor?: string;
     textColor?: string;
+    width?: "fit-content" | "full-width";
 }
 export declare const Chip: React.FC<ChipProps>;
 export {};

package/dist/components/Input.d.ts

@@ -1,14 +1,21 @@
-import React from 'react';
-import './Input.css';
+import React from "react";
+import "./Input.css";
 interface InputProps {
     label: string;
     value?: string;
     onChange?: (value: string) => void;
-    type?: 'text' | 'email' | 'password' | 'number';
+    type?: "text" | "number";
     disabled?: boolean;
-    error?: string;
     className?: string;
     required?: boolean;
+    min?: {
+        value: number;
+        label?: string;
+    };
+    max?: {
+        value: number;
+        label?: string;
+    };
 }
 export declare const Input: React.FC<InputProps>;
 export {};

package/dist/components/ProductionUnit.d.ts

@@ -1,8 +1,14 @@
+import "./ProductionUnit.css";
 interface ProductionUnitProps {
     onChangeInput?: (value: number) => void;
     onChangeSwitch?: (checked: boolean) => void;
-    value?: number;
-    checked?: boolean;
+    defaultValue?: number;
+    defaultChecked?: boolean;
+    unitName?: string;
+    energyCost?: number;
+    checkedImage?: React.ReactNode;
+    uncheckedImage?: React.ReactNode;
+    readonly?: boolean;
 }
-export declare const ProductionUnit: ({ onChangeInput, onChangeSwitch, value, checked, }: ProductionUnitProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ProductionUnit: ({ onChangeInput, onChangeSwitch, defaultValue, defaultChecked, unitName, energyCost, checkedImage, uncheckedImage, readonly, }: ProductionUnitProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Switch.d.ts

@@ -1,12 +1,9 @@
-import React from 'react';
-import './Switch.css';
+import React from "react";
+import "./Switch.css";
 interface SwitchProps {
     checked?: boolean;
     onChange?: (checked: boolean) => void;
     disabled?: boolean;
-    size?: 'small' | 'medium' | 'large';
-    label?: string;
-    className?: string;
     showIcon?: boolean;
 }
 export declare const Switch: React.FC<SwitchProps>;

package/dist/components/index.d.ts

@@ -3,3 +3,4 @@ export { Histogram } from "./Histogram";
 export { Chip } from "./Chip";
 export { Switch } from "./Switch";
 export { Input } from "./Input";
+export { Avatar } from "./Avatar";

package/dist/index.css

@@ -1 +1 @@
-.input-container{margin-bottom:16px}.input-container,.input-field{position:relative;width:100%}.input-element{background-color:#fff;border:2px solid #e0e0e0;border-radius:4px;font-size:16px;outline:none;padding:16px 12px 8px;transition:border-color .2s ease,box-shadow .2s ease;width:100%}.input-element:focus{border-color:#009cdf;box-shadow:0 0 0 2px rgba(0,156,223,.1)}.input-label{background-color:#fff;color:#999;font-size:16px;left:12px;padding:0 4px;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%);transition:all .2s ease;white-space:nowrap}.input-required{color:#e74c3c;margin-left:2px}.input-container--floating .input-label,.input-container--focused .input-label{color:#009cdf;font-size:12px;font-weight:500;top:0;transform:translateY(-50%)}.input-container--focused .input-element{border-color:#009cdf;box-shadow:0 0 0 2px rgba(0,156,223,.1)}.input-container--focused .input-label{color:#009cdf}.input-container--error .input-element{border-color:#e74c3c}.input-container--error .input-element:focus{border-color:#e74c3c;box-shadow:0 0 0 2px rgba(231,76,60,.1)}.input-container--error .input-label,.input-error{color:#e74c3c}.input-error{font-size:12px;margin-top:4px;padding-left:12px}.input-container--disabled .input-element{background-color:#f5f5f5;border-color:#d0d0d0;color:#999;cursor:not-allowed}.input-container--disabled .input-label{color:#999}.input-element:not(:disabled):hover{border-color:#009cdf}.input-container--error .input-element:not(:disabled):hover{border-color:#e74c3c}.input-element:-webkit-autofill{-webkit-text-fill-color:inherit!important}.input-element:-webkit-autofill,.input-element:-webkit-autofill:focus{-webkit-box-shadow:inset 0 0 0 30px #fff!important}.input-container--small .input-element{font-size:14px;padding:12px 8px 6px}.input-container--small .input-label{font-size:14px;left:8px}.input-container--small.input-container--floating .input-label,.input-container--small.input-container--focused .input-label{font-size:10px}.input-container--large .input-element{font-size:18px;padding:20px 16px 10px}.input-container--large .input-label{font-size:18px;left:16px}.input-container--large.input-container--floating .input-label,.input-container--large.input-container--focused .input-label{font-size:14px}.switch-container{align-items:center;display:flex;gap:8px}.switch-label{color:#333;font-size:14px;font-weight:500}.switch-wrapper{flex-direction:column;gap:4px}.switch-icon,.switch-wrapper{align-items:center;display:flex}.switch-icon{height:16px;justify-content:center;width:16px}.switch-power-icon{height:100%;object-fit:contain;width:100%}.switch{background:none;border:none;cursor:pointer;outline:none;padding:0;transition:all .2s ease}.switch:focus-visible{outline:2px solid #009cdf;outline-offset:2px}.switch--disabled{cursor:not-allowed;opacity:.5}.switch-track{background-color:#999fa1;border-radius:60px;display:block;position:relative;transition:background-color .2s ease}.switch--checked .switch-track{background-color:#009cdf}.switch-thumb{align-items:center;background-color:#fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2);display:flex;justify-content:center;left:2px;position:absolute;top:2px;transition:transform .2s ease}.switch-thumb-icon{height:100%;object-fit:contain;width:100%}.switch--small .switch-track{height:12px;width:24px}.switch--small .switch-thumb{height:8px;width:8px}.switch--small.switch--checked .switch-thumb{transform:translateX(12px)}.switch--medium .switch-track{height:16px;width:32px}.switch--medium .switch-thumb{height:12px;width:12px}.switch--medium.switch--checked .switch-thumb{transform:translateX(16px)}.switch--large .switch-track{height:20px;width:40px}.switch--large .switch-thumb{height:16px;width:16px}.switch--large.switch--checked .switch-thumb{transform:translateX(20px)}.switch:not(.switch--disabled):hover .switch-track{filter:brightness(1.1)}.switch:not(.switch--disabled):active .switch-thumb{transform:scale(1.1)}.switch--checked:not(.switch--disabled):active .switch-thumb{transform:translateX(16px) scale(1.1)}.switch--small.switch--checked:not(.switch--disabled):active .switch-thumb{transform:translateX(12px) scale(1.1)}.switch--large.switch--checked:not(.switch--disabled):active .switch-thumb{transform:translateX(20px) scale(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}.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}
+.input-container,.input-field{position:relative;width:100%}.input-element{background-color:#fff;border:2px solid #e0e0e0;border-radius:4px;box-sizing:border-box;font-size:16px;outline:none;padding:16px 12px 8px;transition:border-color .2s ease,box-shadow .2s ease;width:100%}.input-element:focus{border-color:#009cdf;box-shadow:0 0 0 2px rgba(0,156,223,.1)}.input-label{background-color:#fff;color:#999;font-size:16px;left:12px;padding:0 4px;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%);transition:all .2s ease;white-space:nowrap}.input-required{color:#e74c3c;margin-left:2px}.input-container--floating .input-label,.input-container--focused .input-label{font-size:12px;font-weight:500;top:0;transform:translateY(-50%)}.input-container--focused .input-element{border-color:#009cdf;box-shadow:0 0 0 2px rgba(0,156,223,.1)}.input-container--focused .input-label{color:#009cdf}.input-container--error .input-element{border-color:#e74c3c}.input-container--error .input-element:focus{border-color:#e74c3c;box-shadow:0 0 0 2px rgba(231,76,60,.1)}.input-container--error .input-label,.input-error{color:#e74c3c}.input-error{font-size:12px;margin-top:4px;padding-left:12px}.input-container--disabled .input-element{background-color:#f5f5f5;border-color:#d0d0d0;color:#999;cursor:not-allowed}.input-container--disabled .input-label{color:#999}.input-element:not(:disabled):hover{border-color:#009cdf}.input-container--error .input-element:not(:disabled):hover{border-color:#e74c3c}.input-element:-webkit-autofill{-webkit-text-fill-color:inherit!important}.input-element:-webkit-autofill,.input-element:-webkit-autofill:focus{-webkit-box-shadow:inset 0 0 0 30px #fff!important}.input-container--small .input-element{font-size:14px;padding:12px 8px 6px}.input-container--small .input-label{font-size:14px;left:8px}.input-container--small.input-container--floating .input-label,.input-container--small.input-container--focused .input-label{font-size:10px}.input-container--large .input-element{font-size:18px;padding:20px 16px 10px}.input-container--large .input-label{font-size:18px;left:16px}.input-container--large.input-container--floating .input-label,.input-container--large.input-container--focused .input-label{font-size:14px}.input-constraints{align-items:center;display:flex;gap:8px;justify-content:space-between}.input-max,.input-min{color:#999;font-size:12px;text-align:center}.input-container--focused .input-max,.input-container--focused .input-min{color:#009cdf;font-weight:500}.switch-container{align-items:center;display:flex;gap:8px}.switch-wrapper{flex-direction:column;gap:4px}.switch-icon,.switch-wrapper{align-items:center;display:flex}.switch-icon{height:16px;justify-content:center;width:16px}.switch-power-icon{height:100%;object-fit:contain;width:100%}.switch{background:none;border:none;cursor:pointer;outline:none;padding:0;transition:all .2s ease}.switch:focus-visible{outline:2px solid #009cdf;outline-offset:2px}.switch--disabled{cursor:not-allowed;opacity:.5}.switch-track{background-color:#999fa1;border-radius:60px;display:block;position:relative;transition:background-color .2s ease}.switch--checked .switch-track{background-color:#82d4f6}.switch-thumb{align-items:center;background-color:#fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2);display:flex;justify-content:center;left:0;position:absolute;top:-3px;transition:transform .2s ease}.switch-thumb-icon{height:100%;object-fit:contain;width:100%}.switch-track{height:10px;width:32px}.switch-thumb{height:16px;width:16px}.switch--checked .switch-thumb{transform:translateX(16px)}.switch:not(.switch--disabled):hover .switch-track{filter:brightness(1.1)}.switch:not(.switch--disabled):active .switch-thumb{transform:scale(1.1)}.switch--checked:not(.switch--disabled):active .switch-thumb{transform:translateX(16px) scale(1.1)}.switch--small.switch--checked:not(.switch--disabled):active .switch-thumb{transform:translateX(12px) scale(1.1)}.switch--large.switch--checked:not(.switch--disabled):active .switch-thumb{transform:translateX(20px) scale(1.1)}.production-unit-container{align-items:center;background-color:#fff;border-radius:64px;box-shadow:0 2px 16px 0 rgba(0,0,0,.16);box-sizing:border-box;display:flex;height:64px;justify-content:space-between;padding-right:24px}.production-unit-content{align-items:center;display:flex;gap:16px}.production-unit-chip{display:flex;flex-direction:column;flex-shrink:0}.production-unit-chip-name{word-wrap:break-word;color:#11161a;font-size:16px;font-weight:600;line-height:24px}.production-unit-switch-container{width:156px}.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:4px 8px}.chip-container--fit-content{width:fit-content}.chip-container--full-width{width:100%}.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}@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}.avatar-container{align-items:center;border-radius:50%;color:#333;display:inline-flex;font-size:20px;font-weight:500;height:64px;justify-content:center;overflow:hidden;position:relative;user-select:none;width:64px}.avatar-container--clickable{cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.avatar-container--clickable:hover{box-shadow:0 2px 8px rgba(0,0,0,.15);transform:scale(1.05)}.avatar-container--clickable:active{transform:scale(.95)}.avatar-content{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.avatar-content img{height:100%;object-fit:cover;width:100%}.avatar-content{line-height:1;text-transform:uppercase}

package/dist/index.esm.css

@@ -1 +1 @@
-.input-container{margin-bottom:16px}.input-container,.input-field{position:relative;width:100%}.input-element{background-color:#fff;border:2px solid #e0e0e0;border-radius:4px;font-size:16px;outline:none;padding:16px 12px 8px;transition:border-color .2s ease,box-shadow .2s ease;width:100%}.input-element:focus{border-color:#009cdf;box-shadow:0 0 0 2px rgba(0,156,223,.1)}.input-label{background-color:#fff;color:#999;font-size:16px;left:12px;padding:0 4px;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%);transition:all .2s ease;white-space:nowrap}.input-required{color:#e74c3c;margin-left:2px}.input-container--floating .input-label,.input-container--focused .input-label{color:#009cdf;font-size:12px;font-weight:500;top:0;transform:translateY(-50%)}.input-container--focused .input-element{border-color:#009cdf;box-shadow:0 0 0 2px rgba(0,156,223,.1)}.input-container--focused .input-label{color:#009cdf}.input-container--error .input-element{border-color:#e74c3c}.input-container--error .input-element:focus{border-color:#e74c3c;box-shadow:0 0 0 2px rgba(231,76,60,.1)}.input-container--error .input-label,.input-error{color:#e74c3c}.input-error{font-size:12px;margin-top:4px;padding-left:12px}.input-container--disabled .input-element{background-color:#f5f5f5;border-color:#d0d0d0;color:#999;cursor:not-allowed}.input-container--disabled .input-label{color:#999}.input-element:not(:disabled):hover{border-color:#009cdf}.input-container--error .input-element:not(:disabled):hover{border-color:#e74c3c}.input-element:-webkit-autofill{-webkit-text-fill-color:inherit!important}.input-element:-webkit-autofill,.input-element:-webkit-autofill:focus{-webkit-box-shadow:inset 0 0 0 30px #fff!important}.input-container--small .input-element{font-size:14px;padding:12px 8px 6px}.input-container--small .input-label{font-size:14px;left:8px}.input-container--small.input-container--floating .input-label,.input-container--small.input-container--focused .input-label{font-size:10px}.input-container--large .input-element{font-size:18px;padding:20px 16px 10px}.input-container--large .input-label{font-size:18px;left:16px}.input-container--large.input-container--floating .input-label,.input-container--large.input-container--focused .input-label{font-size:14px}.switch-container{align-items:center;display:flex;gap:8px}.switch-label{color:#333;font-size:14px;font-weight:500}.switch-wrapper{flex-direction:column;gap:4px}.switch-icon,.switch-wrapper{align-items:center;display:flex}.switch-icon{height:16px;justify-content:center;width:16px}.switch-power-icon{height:100%;object-fit:contain;width:100%}.switch{background:none;border:none;cursor:pointer;outline:none;padding:0;transition:all .2s ease}.switch:focus-visible{outline:2px solid #009cdf;outline-offset:2px}.switch--disabled{cursor:not-allowed;opacity:.5}.switch-track{background-color:#999fa1;border-radius:60px;display:block;position:relative;transition:background-color .2s ease}.switch--checked .switch-track{background-color:#009cdf}.switch-thumb{align-items:center;background-color:#fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2);display:flex;justify-content:center;left:2px;position:absolute;top:2px;transition:transform .2s ease}.switch-thumb-icon{height:100%;object-fit:contain;width:100%}.switch--small .switch-track{height:12px;width:24px}.switch--small .switch-thumb{height:8px;width:8px}.switch--small.switch--checked .switch-thumb{transform:translateX(12px)}.switch--medium .switch-track{height:16px;width:32px}.switch--medium .switch-thumb{height:12px;width:12px}.switch--medium.switch--checked .switch-thumb{transform:translateX(16px)}.switch--large .switch-track{height:20px;width:40px}.switch--large .switch-thumb{height:16px;width:16px}.switch--large.switch--checked .switch-thumb{transform:translateX(20px)}.switch:not(.switch--disabled):hover .switch-track{filter:brightness(1.1)}.switch:not(.switch--disabled):active .switch-thumb{transform:scale(1.1)}.switch--checked:not(.switch--disabled):active .switch-thumb{transform:translateX(16px) scale(1.1)}.switch--small.switch--checked:not(.switch--disabled):active .switch-thumb{transform:translateX(12px) scale(1.1)}.switch--large.switch--checked:not(.switch--disabled):active .switch-thumb{transform:translateX(20px) scale(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}.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}
+.input-container,.input-field{position:relative;width:100%}.input-element{background-color:#fff;border:2px solid #e0e0e0;border-radius:4px;box-sizing:border-box;font-size:16px;outline:none;padding:16px 12px 8px;transition:border-color .2s ease,box-shadow .2s ease;width:100%}.input-element:focus{border-color:#009cdf;box-shadow:0 0 0 2px rgba(0,156,223,.1)}.input-label{background-color:#fff;color:#999;font-size:16px;left:12px;padding:0 4px;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%);transition:all .2s ease;white-space:nowrap}.input-required{color:#e74c3c;margin-left:2px}.input-container--floating .input-label,.input-container--focused .input-label{font-size:12px;font-weight:500;top:0;transform:translateY(-50%)}.input-container--focused .input-element{border-color:#009cdf;box-shadow:0 0 0 2px rgba(0,156,223,.1)}.input-container--focused .input-label{color:#009cdf}.input-container--error .input-element{border-color:#e74c3c}.input-container--error .input-element:focus{border-color:#e74c3c;box-shadow:0 0 0 2px rgba(231,76,60,.1)}.input-container--error .input-label,.input-error{color:#e74c3c}.input-error{font-size:12px;margin-top:4px;padding-left:12px}.input-container--disabled .input-element{background-color:#f5f5f5;border-color:#d0d0d0;color:#999;cursor:not-allowed}.input-container--disabled .input-label{color:#999}.input-element:not(:disabled):hover{border-color:#009cdf}.input-container--error .input-element:not(:disabled):hover{border-color:#e74c3c}.input-element:-webkit-autofill{-webkit-text-fill-color:inherit!important}.input-element:-webkit-autofill,.input-element:-webkit-autofill:focus{-webkit-box-shadow:inset 0 0 0 30px #fff!important}.input-container--small .input-element{font-size:14px;padding:12px 8px 6px}.input-container--small .input-label{font-size:14px;left:8px}.input-container--small.input-container--floating .input-label,.input-container--small.input-container--focused .input-label{font-size:10px}.input-container--large .input-element{font-size:18px;padding:20px 16px 10px}.input-container--large .input-label{font-size:18px;left:16px}.input-container--large.input-container--floating .input-label,.input-container--large.input-container--focused .input-label{font-size:14px}.input-constraints{align-items:center;display:flex;gap:8px;justify-content:space-between}.input-max,.input-min{color:#999;font-size:12px;text-align:center}.input-container--focused .input-max,.input-container--focused .input-min{color:#009cdf;font-weight:500}.switch-container{align-items:center;display:flex;gap:8px}.switch-wrapper{flex-direction:column;gap:4px}.switch-icon,.switch-wrapper{align-items:center;display:flex}.switch-icon{height:16px;justify-content:center;width:16px}.switch-power-icon{height:100%;object-fit:contain;width:100%}.switch{background:none;border:none;cursor:pointer;outline:none;padding:0;transition:all .2s ease}.switch:focus-visible{outline:2px solid #009cdf;outline-offset:2px}.switch--disabled{cursor:not-allowed;opacity:.5}.switch-track{background-color:#999fa1;border-radius:60px;display:block;position:relative;transition:background-color .2s ease}.switch--checked .switch-track{background-color:#82d4f6}.switch-thumb{align-items:center;background-color:#fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2);display:flex;justify-content:center;left:0;position:absolute;top:-3px;transition:transform .2s ease}.switch-thumb-icon{height:100%;object-fit:contain;width:100%}.switch-track{height:10px;width:32px}.switch-thumb{height:16px;width:16px}.switch--checked .switch-thumb{transform:translateX(16px)}.switch:not(.switch--disabled):hover .switch-track{filter:brightness(1.1)}.switch:not(.switch--disabled):active .switch-thumb{transform:scale(1.1)}.switch--checked:not(.switch--disabled):active .switch-thumb{transform:translateX(16px) scale(1.1)}.switch--small.switch--checked:not(.switch--disabled):active .switch-thumb{transform:translateX(12px) scale(1.1)}.switch--large.switch--checked:not(.switch--disabled):active .switch-thumb{transform:translateX(20px) scale(1.1)}.production-unit-container{align-items:center;background-color:#fff;border-radius:64px;box-shadow:0 2px 16px 0 rgba(0,0,0,.16);box-sizing:border-box;display:flex;height:64px;justify-content:space-between;padding-right:24px}.production-unit-content{align-items:center;display:flex;gap:16px}.production-unit-chip{display:flex;flex-direction:column;flex-shrink:0}.production-unit-chip-name{word-wrap:break-word;color:#11161a;font-size:16px;font-weight:600;line-height:24px}.production-unit-switch-container{width:156px}.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:4px 8px}.chip-container--fit-content{width:fit-content}.chip-container--full-width{width:100%}.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}@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}.avatar-container{align-items:center;border-radius:50%;color:#333;display:inline-flex;font-size:20px;font-weight:500;height:64px;justify-content:center;overflow:hidden;position:relative;user-select:none;width:64px}.avatar-container--clickable{cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.avatar-container--clickable:hover{box-shadow:0 2px 8px rgba(0,0,0,.15);transform:scale(1.05)}.avatar-container--clickable:active{transform:scale(.95)}.avatar-content{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.avatar-content img{height:100%;object-fit:cover;width:100%}.avatar-content{line-height:1;text-transform:uppercase}

package/dist/index.esm.js

@@ -1,2 +1,2 @@
-import{jsxs as t,jsx as o}from"react/jsx-runtime";import{useState as a,useRef as c,useEffect as n}from"react";var i=function(i){var e=i.label,l=i.value,r=void 0===l?"":l,s=i.onChange,h=i.type,d=void 0===h?"text":h,m=i.disabled,u=void 0!==m&&m,v=i.error,p=i.className,f=void 0===p?"":p,b=i.required,g=void 0!==b&&b,N=a(r),w=N[0],L=N[1],R=a(!1),z=R[0],C=R[1],x=c(null);n(function(){L(r)},[r]);var y=["input-container",z?"input-container--focused":"",z||w.length>0?"input-container--floating":"",v?"input-container--error":"",u?"input-container--disabled":"",f].filter(Boolean).join(" ");return t("div",{className:y,children:[t("div",{className:"input-field",children:[o("input",{ref:x,type:d,value:w,onChange:function(t){var o=t.target.value;L(o),null==s||s(o)},onFocus:function(){C(!0)},onBlur:function(){C(!1)},disabled:u,required:g,className:"input-element","aria-label":e}),t("label",{className:"input-label",children:[e,g&&o("span",{className:"input-required",children:"*"})]})]}),v&&o("div",{className:"input-error",children:v})]})},e=function(c){var n=c.checked,i=void 0!==n&&n,e=c.onChange,l=c.disabled,r=void 0!==l&&l,s=c.size,h=void 0===s?"medium":s,d=c.label,m=c.className,u=void 0===m?"":m,v=c.showIcon,p=void 0===v||v,f=a(i),b=f[0],g=f[1],N=["switch","switch--".concat(h),b?"switch--checked":"",r?"switch--disabled":"",u].filter(Boolean).join(" ");return t("div",{className:"switch-container",children:[d&&o("label",{className:"switch-label",htmlFor:"switch-".concat(Math.random()),children:d}),t("div",{className:"switch-wrapper",children:[p&&o("div",{className:"switch-icon",children:o("img",{alt:"Power icon",src:b?"http://localhost:3845/assets/86c15ca80cb444eb8cc1db3e8335b63ac51c31a9.svg":"http://localhost:3845/assets/ad7677e073e42d60a4ed84f42b17c5e56222a75d.svg",className:"switch-power-icon"})}),o("button",{type:"button",role:"switch","aria-checked":b,className:N,onClick:function(){if(!r){var t=!b;g(t),null==e||e(t)}},disabled:r,children:o("span",{className:"switch-track",children:t("span",{className:"switch-thumb",children:[b&&o("img",{alt:"",src:"http://localhost:3845/assets/25f95806464af11dea630fdf68fa80d5415c7da4.svg",className:"switch-thumb-icon"}),!b&&o("img",{alt:"",src:"http://localhost:3845/assets/164245110dc3649da31e9ff08005286a44c3c907.svg",className:"switch-thumb-icon"})]})})})]})]})},l=function(a){var c=a.onChangeInput,n=a.onChangeSwitch,l=a.value,r=a.checked;return t("div",{className:"production-unit-container",children:[o(i,{label:"Production Unit",type:"number",onChange:c?function(t){return c(Number(t))}:void 0,value:void 0!==l?l.toString():void 0}),o(e,{label:"Production Unit",checked:r,onChange:n,className:"production-unit-switch"})]})},r=function(c){var i,e,l,r,s=c.max,h=c.relative,d=c.barHeight,m=void 0===d?103:d,u=c.barWidth,v=void 0===u?32:u,p=c.orientation,f=void 0===p?"vertical":p,b=c.cornerRadius,g=c.children,N=a(0),w=N[0],L=N[1],R=a(0),z=R[0],C=R[1],x=Math.min(h.value/s.value*100,100)/100*m,y=Math.min(h.value/s.value*100,100)/100*v;n(function(){L(0),C(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(x*n),C(y*n),c<1&&requestAnimationFrame(o)};requestAnimationFrame(o)},[x,y]);var k="horizontal"===f?m:v,M="horizontal"===f?v:m,q="horizontal"===f?m:v,B="horizontal"===f?v:m,F=function(t,o,a,c,n){var i=n.topLeft,e=n.topRight,l=n.bottomLeft,r=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-r,"\n      Q ").concat(t+a," ").concat(o+c," ").concat(t+a-r," ").concat(o+c,"\n      L ").concat(t+l," ").concat(o+c,"\n      Q ").concat(t," ").concat(o+c," ").concat(t," ").concat(o+c-l,"\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},j=b?{topLeft:null!==(i=b.topLeft)&&void 0!==i?i:Q.topLeft,topRight:null!==(e=b.topRight)&&void 0!==e?e:Q.topRight,bottomLeft:null!==(l=b.bottomLeft)&&void 0!==l?l:Q.bottomLeft,bottomRight:null!==(r=b.bottomRight)&&void 0!==r?r:Q.bottomRight}:Q;return o("div",{className:"histogram-container ".concat("horizontal"===f?"histogram-container--horizontal":""),children:t("div",{className:"histogram-content ".concat("horizontal"===f?"histogram-content--horizontal":""),children:[o("div",{className:"histogram-bar",style:{height:"".concat(M,"px"),width:"".concat(k,"px")},children:t("svg",{width:q,height:B,viewBox:"0 0 ".concat(q," ").concat(B),className:"histogram-svg",children:[o("path",{d:F(0,0,q,B,j),fill:s.color,fillOpacity:s.opacity||1}),o("path","vertical"===f?{d:F(0,B-w,q,w,{topLeft:w>=B?j.topLeft:0,topRight:w>=B?j.topRight:0,bottomLeft:j.bottomLeft,bottomRight:j.bottomRight}),fill:h.color}:{d:F(0,0,z,B,{topLeft:j.topLeft,topRight:z>=q?j.topRight:0,bottomLeft:j.bottomLeft,bottomRight:z>=q?j.bottomRight:0}),fill:h.color})]})}),g&&o("div",{className:"histogram-text-container ".concat("horizontal"===f?"histogram-text-container--horizontal":""),children:g})]})})},s=function(t){var a=t.label,c=t.bgColor,n=t.textColor;return o("div",{className:"chip-container",style:{backgroundColor:c},children:o("div",{className:"chip-content",children:o("p",{className:"chip-label",style:{color:n},children:a})})})};export{s as Chip,r as Histogram,i as Input,l as ProductionUnit,e as Switch};
+import{jsx as t,jsxs as n}from"react/jsx-runtime";import{useState as i,useRef as o,useEffect as a}from"react";var e=function(e){var c=e.label,l=e.value,r=void 0===l?"":l,d=e.onChange,h=e.type,s=void 0===h?"text":h,u=e.disabled,v=void 0!==u&&u,m=e.className,f=void 0===m?"":m,p=e.required,g=void 0!==p&&p,b=e.min,w=void 0===b?{value:0,label:"Pmin"}:b,N=e.max,C=void 0===N?{value:100,label:"Pmax"}:N,L=i(r),x=L[0],R=L[1],y=i(!1),k=y[0],z=y[1],M=o(null);a(function(){R(r)},[r]);var F=["input-container",k?"input-container--focused":"",k||x.length>0?"input-container--floating":"",v?"input-container--disabled":"",f].filter(Boolean).join(" ");return t("div",{className:F,children:n("div",{className:"input-constraints",children:[n("div",{className:"input-min",children:[w.label,t("br",{}),w.value]}),n("div",{className:"input-field",children:[t("input",{ref:M,type:s,value:x,onChange:function(t){var n=t.target.value;R(n),null==d||d(n)},onFocus:function(){z(!0)},onBlur:function(){z(!1)},disabled:v,required:g,className:"input-element","aria-label":c}),n("label",{className:"input-label",children:[c,g&&t("span",{className:"input-required",children:"*"})]})]}),n("div",{className:"input-max",children:[C.label,t("br",{})," ",C.value]})]})})},c=function(n){var i=n.isOff;return t("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t("path",{d:"M9.56529 2.85352C9.66365 2.57607 9.96837 2.43116 10.246 2.5293C13.4295 3.65507 15.3392 6.91015 14.7684 10.2383C14.1974 13.5667 11.3114 16 7.93443 16C4.55739 16 1.67151 13.5667 1.10045 10.2383C0.5296 6.91011 2.4393 3.65504 5.62291 2.5293C5.9005 2.43115 6.20523 2.57605 6.30357 2.85352C6.40176 3.13124 6.2561 3.43599 5.97838 3.53418C3.28438 4.48672 1.669 7.2423 2.1522 10.0586C2.63557 12.8747 5.07706 14.9336 7.93443 14.9336C10.7918 14.9336 13.2333 12.8747 13.7167 10.0586C14.1999 7.24233 12.5844 4.48676 9.89049 3.53418C9.61276 3.43599 9.4671 3.13124 9.56529 2.85352ZM7.93443 0C8.22892 3.10447e-05 8.46754 0.238727 8.46763 0.533203V7.4668C8.46763 7.76135 8.22898 8.00095 7.93443 8.00098C7.63986 8.00098 7.40123 7.76137 7.40123 7.4668V0.533203C7.40132 0.238707 7.63991 0 7.93443 0Z",fill:i?"#999FA1":"#009CDF"})})},l=function(n){var i=n.isOff;return t("svg",{width:"32",height:"32",viewBox:"0 0 32 32",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t("circle",{cx:"16",cy:"16",r:"16",fill:i?"white":"#009cdf"})})},r=function(o){var a=o.checked,e=void 0!==a&&a,r=o.onChange,d=o.disabled,h=void 0!==d&&d,s=o.showIcon,u=void 0===s||s,v=i(e),m=v[0],f=v[1],p=["switch",m?"switch--checked":"",h?"switch--disabled":""].filter(Boolean).join(" ");return t("div",{className:"switch-container",children:n("div",{className:"switch-wrapper",children:[u&&t("div",{className:"switch-icon",children:t(c,{isOff:!m})}),t("button",{type:"button",role:"switch","aria-checked":m,className:p,onClick:function(){if(!h){var t=!m;f(t),null==r||r(t)}},disabled:h,children:t("span",{className:"switch-track",children:t("span",{className:"switch-thumb",children:t(l,{isOff:!m})})})})]})})},d=function(n){var i=n.label,o=n.bgColor,a=n.textColor,e=n.width,c=["chip-container","full-width"===(void 0===e?"fit-content":e)?"chip-container--full-width":"chip-container--fit-content"].join(" ");return t("div",{className:c,style:{backgroundColor:o},children:t("div",{className:"chip-content",children:t("p",{className:"chip-label",style:{color:a},children:i})})})},h=function(o){var a=o.onChangeInput,c=o.onChangeSwitch,l=o.defaultValue,h=o.defaultChecked,s=void 0!==h&&h,u=o.unitName,v=void 0===u?"Production Unit":u,m=o.energyCost,f=void 0===m?0:m,p=o.checkedImage,g=o.uncheckedImage,b=o.readonly,w=void 0!==b&&b,N=i(s),C=N[0],L=N[1],x=i(l),R=x[0],y=x[1];return n("div",{className:"production-unit-container",children:[n("div",{className:"production-unit-content",children:[t("div",{className:"image-preview-container",children:C?p:g}),n("div",{className:"production-unit-chip",children:[t("div",{className:"production-unit-chip-name",children:v}),t(d,{label:"".concat(f," MW"),width:"fit-content",bgColor:"#E1F5FD",textColor:"#005896"})]}),n("div",{className:"production-unit-switch-container",children:[t(e,{label:"PA",type:"number",onChange:function(t){var n=Number(t);y(n),a&&a(n)},value:void 0!==R?R.toString():void 0,disabled:!C||w})," "]})]}),t(r,{checked:C,onChange:function(t){L(t),c&&c(t)},disabled:w})]})},s=function(o){var e,c,l,r,d=o.max,h=o.relative,s=o.barHeight,u=void 0===s?103:s,v=o.barWidth,m=void 0===v?32:v,f=o.orientation,p=void 0===f?"vertical":f,g=o.cornerRadius,b=o.children,w=i(0),N=w[0],C=w[1],L=i(0),x=L[0],R=L[1],y=Math.min(h.value/d.value*100,100)/100*u,k=Math.min(h.value/d.value*100,100)/100*m;a(function(){C(0),R(0);var t=Date.now(),n=function(){var i=Date.now()-t,o=Math.min(i/1e3,1),a=1-Math.pow(1-o,4);C(y*a),R(k*a),o<1&&requestAnimationFrame(n)};requestAnimationFrame(n)},[y,k]);var z="horizontal"===p?u:m,M="horizontal"===p?m:u,F="horizontal"===p?u:m,B="horizontal"===p?m:u,q=function(t,n,i,o,a){var e=a.topLeft,c=a.topRight,l=a.bottomLeft,r=a.bottomRight;return"\n      M ".concat(t+e," ").concat(n,"\n      L ").concat(t+i-c," ").concat(n,"\n      Q ").concat(t+i," ").concat(n," ").concat(t+i," ").concat(n+c,"\n      L ").concat(t+i," ").concat(n+o-r,"\n      Q ").concat(t+i," ").concat(n+o," ").concat(t+i-r," ").concat(n+o,"\n      L ").concat(t+l," ").concat(n+o,"\n      Q ").concat(t," ").concat(n+o," ").concat(t," ").concat(n+o-l,"\n      L ").concat(t," ").concat(n+e,"\n      Q ").concat(t," ").concat(n," ").concat(t+e," ").concat(n,"\n      Z\n    ").trim().replace(/\s+/g," ")},O={topLeft:2,topRight:2,bottomLeft:2,bottomRight:2},j=g?{topLeft:null!==(e=g.topLeft)&&void 0!==e?e:O.topLeft,topRight:null!==(c=g.topRight)&&void 0!==c?c:O.topRight,bottomLeft:null!==(l=g.bottomLeft)&&void 0!==l?l:O.bottomLeft,bottomRight:null!==(r=g.bottomRight)&&void 0!==r?r:O.bottomRight}:O;return t("div",{className:"histogram-container ".concat("horizontal"===p?"histogram-container--horizontal":""),children:n("div",{className:"histogram-content ".concat("horizontal"===p?"histogram-content--horizontal":""),children:[t("div",{className:"histogram-bar",style:{height:"".concat(M,"px"),width:"".concat(z,"px")},children:n("svg",{width:F,height:B,viewBox:"0 0 ".concat(F," ").concat(B),className:"histogram-svg",children:[t("path",{d:q(0,0,F,B,j),fill:d.color,fillOpacity:d.opacity||1}),t("path","vertical"===p?{d:q(0,B-N,F,N,{topLeft:N>=B?j.topLeft:0,topRight:N>=B?j.topRight:0,bottomLeft:j.bottomLeft,bottomRight:j.bottomRight}),fill:h.color}:{d:q(0,0,x,B,{topLeft:j.topLeft,topRight:x>=F?j.topRight:0,bottomLeft:j.bottomLeft,bottomRight:x>=F?j.bottomRight:0}),fill:h.color})]})}),b&&t("div",{className:"histogram-text-container ".concat("horizontal"===p?"histogram-text-container--horizontal":""),children:b})]})})},u=function(n){var i=n.children;return t("div",{className:"avatar-container avatar-container--clickable",children:t("div",{className:"avatar-content",children:i})})};export{u as Avatar,d as Chip,s as Histogram,e as Input,h as ProductionUnit,r as Switch};
 //# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../src/components/Input.tsx","../src/components/Switch.tsx","../src/components/ProductionUnit.tsx","../src/components/Histogram.tsx","../src/components/Chip.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react';\nimport './Input.css';\n\ninterface InputProps {\n  label: string;\n  value?: string;\n  onChange?: (value: string) => void;\n  type?: 'text' | 'email' | 'password' | 'number';\n  disabled?: boolean;\n  error?: string;\n  className?: string;\n  required?: boolean;\n}\n\nexport const Input: React.FC<InputProps> = ({\n  label,\n  value = '',\n  onChange,\n  type = 'text',\n  disabled = false,\n  error,\n  className = '',\n  required = false,\n}) => {\n  const [internalValue, setInternalValue] = useState(value);\n  const [isFocused, setIsFocused] = useState(false);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    setInternalValue(value);\n  }, [value]);\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const newValue = e.target.value;\n    setInternalValue(newValue);\n    onChange?.(newValue);\n  };\n\n  const handleFocus = () => {\n    setIsFocused(true);\n  };\n\n  const handleBlur = () => {\n    setIsFocused(false);\n  };\n\n  const isLabelFloating = isFocused || internalValue.length > 0;\n\n  const containerClasses = [\n    'input-container',\n    isFocused ? 'input-container--focused' : '',\n    isLabelFloating ? 'input-container--floating' : '',\n    error ? 'input-container--error' : '',\n    disabled ? 'input-container--disabled' : '',\n    className,\n  ].filter(Boolean).join(' ');\n\n  return (\n    <div className={containerClasses}>\n      <div className=\"input-field\">\n        <input\n          ref={inputRef}\n          type={type}\n          value={internalValue}\n          onChange={handleChange}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          disabled={disabled}\n          required={required}\n          className=\"input-element\"\n          aria-label={label}\n        />\n        <label className=\"input-label\">\n          {label}\n          {required && <span className=\"input-required\">*</span>}\n        </label>\n      </div>\n      {error && <div className=\"input-error\">{error}</div>}\n    </div>\n  );\n};","import React, { useState } from 'react';\nimport './Switch.css';\n\nconst imgOn = \"http://localhost:3845/assets/86c15ca80cb444eb8cc1db3e8335b63ac51c31a9.svg\";\nconst imgOff = \"http://localhost:3845/assets/ad7677e073e42d60a4ed84f42b17c5e56222a75d.svg\";\nconst imgGroupOn = \"http://localhost:3845/assets/25f95806464af11dea630fdf68fa80d5415c7da4.svg\";\nconst imgGroupOff = \"http://localhost:3845/assets/164245110dc3649da31e9ff08005286a44c3c907.svg\";\n\ninterface SwitchProps {\n  checked?: boolean;\n  onChange?: (checked: boolean) => void;\n  disabled?: boolean;\n  size?: 'small' | 'medium' | 'large';\n  label?: string;\n  className?: string;\n  showIcon?: boolean;\n}\n\nexport const Switch: React.FC<SwitchProps> = ({\n  checked = false,\n  onChange,\n  disabled = false,\n  size = 'medium',\n  label,\n  className = '',\n  showIcon = true,\n}) => {\n  const [internalChecked, setInternalChecked] = useState(checked);\n\n  const handleToggle = () => {\n    if (disabled) return;\n    \n    const newChecked = !internalChecked;\n    setInternalChecked(newChecked);\n    onChange?.(newChecked);\n  };\n\n  const switchClasses = [\n    'switch',\n    `switch--${size}`,\n    internalChecked ? 'switch--checked' : '',\n    disabled ? 'switch--disabled' : '',\n    className,\n  ].filter(Boolean).join(' ');\n\n  return (\n    <div className=\"switch-container\">\n      {label && (\n        <label className=\"switch-label\" htmlFor={`switch-${Math.random()}`}>\n          {label}\n        </label>\n      )}\n      <div className=\"switch-wrapper\">\n        {showIcon && (\n          <div className=\"switch-icon\">\n            <img \n              alt=\"Power icon\" \n              src={internalChecked ? imgOn : imgOff}\n              className=\"switch-power-icon\"\n            />\n          </div>\n        )}\n        <button\n          type=\"button\"\n          role=\"switch\"\n          aria-checked={internalChecked}\n          className={switchClasses}\n          onClick={handleToggle}\n          disabled={disabled}\n        >\n          <span className=\"switch-track\">\n            <span className=\"switch-thumb\">\n              {internalChecked && (\n                <img \n                  alt=\"\" \n                  src={imgGroupOn} \n                  className=\"switch-thumb-icon\"\n                />\n              )}\n              {!internalChecked && (\n                <img \n                  alt=\"\" \n                  src={imgGroupOff} \n                  className=\"switch-thumb-icon\"\n                />\n              )}\n            </span>\n          </span>\n        </button>\n      </div>\n    </div>\n  );\n};","import { Input } from \"./Input\";\nimport { Switch } from \"./Switch\";\ninterface ProductionUnitProps {\n  onChangeInput?: (value: number) => void;\n  onChangeSwitch?: (checked: boolean) => void;\n  value?: number;\n  checked?: boolean;\n}\nexport const ProductionUnit = ({\n  onChangeInput,\n  onChangeSwitch,\n  value,\n  checked,\n}: ProductionUnitProps) => {\n  return (\n    <div className=\"production-unit-container\">\n      <Input\n        label=\"Production Unit\"\n        type=\"number\"\n        onChange={\n          onChangeInput\n            ? (val: string) => onChangeInput(Number(val))\n            : undefined\n        }\n        value={value !== undefined ? value.toString() : undefined}\n      />\n      <Switch\n        label=\"Production Unit\"\n        checked={checked}\n        onChange={onChangeSwitch}\n        className=\"production-unit-switch\"\n      />\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","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":["Input","_a","label","_b","value","onChange","_c","type","_d","disabled","error","_e","className","_f","required","_g","useState","internalValue","setInternalValue","_h","isFocused","setIsFocused","inputRef","useRef","useEffect","containerClasses","length","filter","Boolean","join","_jsxs","_jsx","ref","e","newValue","target","onFocus","onBlur","children","Switch","checked","size","showIcon","internalChecked","setInternalChecked","switchClasses","concat","htmlFor","Math","random","alt","src","role","onClick","newChecked","ProductionUnit","onChangeInput","onChangeSwitch","val","Number","undefined","toString","Histogram","max","relative","barHeight","barWidth","orientation","cornerRadius","_j","animatedHeight","setAnimatedHeight","_k","animatedWidth","setAnimatedWidth","targetHeight","min","targetWidth","startTime","Date","now","animate","elapsed","progress","easeOutQuart","pow","requestAnimationFrame","displayWidth","displayHeight","svgWidth","svgHeight","createRoundedRectPath","x","y","width","height","radii","topLeft","topRight","bottomLeft","bottomRight","trim","replace","defaultCornerRadius","corners","style","viewBox","d","fill","color","fillOpacity","opacity","Chip","bgColor","textColor","backgroundColor"],"mappings":"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"}
+{"version":3,"file":"index.esm.js","sources":["../src/components/Input.tsx","../src/components/Switch.tsx","../src/components/Chip.tsx","../src/components/ProductionUnit.tsx","../src/components/Histogram.tsx","../src/components/Avatar.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from \"react\";\nimport \"./Input.css\";\n\ninterface InputProps {\n  label: string;\n  value?: string;\n  onChange?: (value: string) => void;\n  type?: \"text\" | \"number\";\n  disabled?: boolean;\n  className?: string;\n  required?: boolean;\n  min?: { value: number; label?: string };\n  max?: { value: number; label?: string };\n}\n\nexport const Input: React.FC<InputProps> = ({\n  label,\n  value = \"\",\n  onChange,\n  type = \"text\",\n  disabled = false,\n  className = \"\",\n  required = false,\n  min = { value: 0, label: \"Pmin\" },\n  max = { value: 100, label: \"Pmax\" },\n}) => {\n  const [internalValue, setInternalValue] = useState(value);\n  const [isFocused, setIsFocused] = useState(false);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    setInternalValue(value);\n  }, [value]);\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const newValue = e.target.value;\n    setInternalValue(newValue);\n    onChange?.(newValue);\n  };\n\n  const handleFocus = () => {\n    setIsFocused(true);\n  };\n\n  const handleBlur = () => {\n    setIsFocused(false);\n  };\n\n  const isLabelFloating = isFocused || internalValue.length > 0;\n\n  const containerClasses = [\n    \"input-container\",\n    isFocused ? \"input-container--focused\" : \"\",\n    isLabelFloating ? \"input-container--floating\" : \"\",\n    disabled ? \"input-container--disabled\" : \"\",\n    className,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <div className={containerClasses}>\n      <div className=\"input-constraints\">\n        <div className=\"input-min\">\n          {min.label}\n          <br />\n          {min.value}\n        </div>\n\n        <div className=\"input-field\">\n          <input\n            ref={inputRef}\n            type={type}\n            value={internalValue}\n            onChange={handleChange}\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n            disabled={disabled}\n            required={required}\n            className=\"input-element\"\n            aria-label={label}\n          />\n          <label className=\"input-label\">\n            {label}\n            {required && <span className=\"input-required\">*</span>}\n          </label>\n        </div>\n        <div className=\"input-max\">\n          {max.label}\n          <br /> {max.value}\n        </div>\n      </div>\n    </div>\n  );\n};\n","import React, { useState } from \"react\";\nimport \"./Switch.css\";\n\ninterface OnProps {\n  isOff?: boolean;\n}\nconst ImgOn = ({ isOff }: OnProps) => (\n  <svg\n    width=\"16\"\n    height=\"16\"\n    viewBox=\"0 0 16 16\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      d=\"M9.56529 2.85352C9.66365 2.57607 9.96837 2.43116 10.246 2.5293C13.4295 3.65507 15.3392 6.91015 14.7684 10.2383C14.1974 13.5667 11.3114 16 7.93443 16C4.55739 16 1.67151 13.5667 1.10045 10.2383C0.5296 6.91011 2.4393 3.65504 5.62291 2.5293C5.9005 2.43115 6.20523 2.57605 6.30357 2.85352C6.40176 3.13124 6.2561 3.43599 5.97838 3.53418C3.28438 4.48672 1.669 7.2423 2.1522 10.0586C2.63557 12.8747 5.07706 14.9336 7.93443 14.9336C10.7918 14.9336 13.2333 12.8747 13.7167 10.0586C14.1999 7.24233 12.5844 4.48676 9.89049 3.53418C9.61276 3.43599 9.4671 3.13124 9.56529 2.85352ZM7.93443 0C8.22892 3.10447e-05 8.46754 0.238727 8.46763 0.533203V7.4668C8.46763 7.76135 8.22898 8.00095 7.93443 8.00098C7.63986 8.00098 7.40123 7.76137 7.40123 7.4668V0.533203C7.40132 0.238707 7.63991 0 7.93443 0Z\"\n      fill={isOff ? \"#999FA1\" : \"#009CDF\"}\n    />\n  </svg>\n);\nconst SwitchThumb = ({ isOff }: OnProps) => (\n  <svg\n    width=\"32\"\n    height=\"32\"\n    viewBox=\"0 0 32 32\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <circle cx=\"16\" cy=\"16\" r=\"16\" fill={isOff ? \"white\" : \"#009cdf\"} />\n  </svg>\n);\n\ninterface SwitchProps {\n  checked?: boolean;\n  onChange?: (checked: boolean) => void;\n  disabled?: boolean;\n  showIcon?: boolean;\n}\n\nexport const Switch: React.FC<SwitchProps> = ({\n  checked = false,\n  onChange,\n  disabled = false,\n  showIcon = true,\n}) => {\n  const [internalChecked, setInternalChecked] = useState(checked);\n\n  const handleToggle = () => {\n    if (disabled) return;\n\n    const newChecked = !internalChecked;\n    setInternalChecked(newChecked);\n    onChange?.(newChecked);\n  };\n\n  const switchClasses = [\n    \"switch\",\n    internalChecked ? \"switch--checked\" : \"\",\n    disabled ? \"switch--disabled\" : \"\",\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <div className=\"switch-container\">\n      <div className=\"switch-wrapper\">\n        {showIcon && (\n          <div className=\"switch-icon\">\n            <ImgOn isOff={!internalChecked} />\n          </div>\n        )}\n        <button\n          type=\"button\"\n          role=\"switch\"\n          aria-checked={internalChecked}\n          className={switchClasses}\n          onClick={handleToggle}\n          disabled={disabled}\n        >\n          <span className=\"switch-track\">\n            <span className=\"switch-thumb\">\n              <SwitchThumb isOff={!internalChecked} />\n            </span>\n          </span>\n        </button>\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  width?: \"fit-content\" | \"full-width\";\n}\n\nexport const Chip: React.FC<ChipProps> = ({ \n  label, \n  bgColor, \n  textColor, \n  width = \"fit-content\" \n}) => {\n  const chipClasses = [\n    \"chip-container\",\n    width === \"full-width\" ? \"chip-container--full-width\" : \"chip-container--fit-content\"\n  ].join(\" \");\n\n  return (\n    <div className={chipClasses} 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 { useState } from \"react\";\nimport { Input } from \"./Input\";\nimport { Switch } from \"./Switch\";\nimport \"./ProductionUnit.css\";\nimport { Chip } from \"./Chip\";\n\ninterface ProductionUnitProps {\n  onChangeInput?: (value: number) => void;\n  onChangeSwitch?: (checked: boolean) => void;\n  defaultValue?: number;\n  defaultChecked?: boolean;\n  unitName?: string;\n  energyCost?: number;\n  checkedImage?: React.ReactNode;\n  uncheckedImage?: React.ReactNode;\n  readonly?: boolean;\n}\nexport const ProductionUnit = ({\n  onChangeInput,\n  onChangeSwitch,\n  defaultValue,\n  defaultChecked = false,\n  unitName = \"Production Unit\",\n  energyCost = 0,\n  checkedImage,\n  uncheckedImage,\n  readonly = false,\n}: ProductionUnitProps) => {\n  // Internal state management\n  const [internalChecked, setInternalChecked] = useState(defaultChecked);\n  const [internalValue, setInternalValue] = useState(defaultValue);\n\n  const handleSwitchChange = (newChecked: boolean) => {\n    // Update internal state\n    setInternalChecked(newChecked);\n\n    // Notify parent component if handler provided\n    if (onChangeSwitch) {\n      onChangeSwitch(newChecked);\n    }\n  };\n\n  const handleInputChange = (val: string) => {\n    const numValue = Number(val);\n    // Update internal state\n    setInternalValue(numValue);\n\n    // Notify parent component if handler provided\n    if (onChangeInput) {\n      onChangeInput(numValue);\n    }\n  };\n\n  return (\n    <div className=\"production-unit-container\">\n      <div className=\"production-unit-content\">\n        <div className=\"image-preview-container\">\n          {internalChecked ? checkedImage : uncheckedImage}\n        </div>\n        <div className=\"production-unit-chip\">\n          <div className=\"production-unit-chip-name\">{unitName}</div>\n\n          <Chip\n            label={`${energyCost} MW`}\n            width=\"fit-content\"\n            bgColor=\"#E1F5FD\"\n            textColor=\"#005896\"\n          />\n        </div>\n        <div className=\"production-unit-switch-container\">\n          <Input\n            label=\"PA\"\n            type=\"number\"\n            onChange={handleInputChange}\n            value={\n              internalValue !== undefined ? internalValue.toString() : undefined\n            }\n            disabled={!internalChecked || readonly}\n          />{\" \"}\n        </div>\n      </div>\n\n      <Switch\n        checked={internalChecked}\n        onChange={handleSwitchChange}\n        disabled={readonly}\n      />\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","import React from \"react\";\nimport \"./Avatar.css\";\n\ninterface AvatarProps {\n  children: React.ReactNode;\n}\n\nexport const Avatar: React.FC<AvatarProps> = ({ children }) => {\n  return (\n    <div className=\"avatar-container avatar-container--clickable\">\n      <div className=\"avatar-content\">{children}</div>\n    </div>\n  );\n};\n"],"names":["Input","_a","label","_b","value","onChange","_c","type","_d","disabled","_e","className","_f","required","_g","min","_h","max","_j","useState","internalValue","setInternalValue","_k","isFocused","setIsFocused","inputRef","useRef","useEffect","containerClasses","length","filter","Boolean","join","_jsx","children","_jsxs","ref","e","newValue","target","onFocus","onBlur","ImgOn","isOff","width","height","viewBox","fill","xmlns","d","SwitchThumb","cx","cy","r","Switch","checked","showIcon","internalChecked","setInternalChecked","switchClasses","role","onClick","newChecked","Chip","bgColor","textColor","chipClasses","style","backgroundColor","color","ProductionUnit","onChangeInput","onChangeSwitch","defaultValue","defaultChecked","unitName","energyCost","checkedImage","uncheckedImage","readonly","concat","val","numValue","Number","undefined","toString","Histogram","relative","barHeight","barWidth","orientation","cornerRadius","animatedHeight","setAnimatedHeight","animatedWidth","setAnimatedWidth","targetHeight","Math","targetWidth","startTime","Date","now","animate","elapsed","progress","easeOutQuart","pow","requestAnimationFrame","displayWidth","displayHeight","svgWidth","svgHeight","createRoundedRectPath","x","y","radii","topLeft","topRight","bottomLeft","bottomRight","trim","replace","defaultCornerRadius","corners","fillOpacity","opacity","Avatar"],"mappings":"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"}

package/dist/index.js

@@ -1,2 +1,2 @@
-"use strict";var t=require("react/jsx-runtime"),o=require("react"),a=function(a){var e=a.label,c=a.value,n=void 0===c?"":c,i=a.onChange,s=a.type,r=void 0===s?"text":s,l=a.disabled,h=void 0!==l&&l,d=a.error,u=a.className,m=void 0===u?"":u,p=a.required,v=void 0!==p&&p,f=o.useState(n),g=f[0],b=f[1],x=o.useState(!1),j=x[0],N=x[1],w=o.useRef(null);o.useEffect(function(){b(n)},[n]);var L=["input-container",j?"input-container--focused":"",j||g.length>0?"input-container--floating":"",d?"input-container--error":"",h?"input-container--disabled":"",m].filter(Boolean).join(" ");return t.jsxs("div",{className:L,children:[t.jsxs("div",{className:"input-field",children:[t.jsx("input",{ref:w,type:r,value:g,onChange:function(t){var o=t.target.value;b(o),null==i||i(o)},onFocus:function(){N(!0)},onBlur:function(){N(!1)},disabled:h,required:v,className:"input-element","aria-label":e}),t.jsxs("label",{className:"input-label",children:[e,v&&t.jsx("span",{className:"input-required",children:"*"})]})]}),d&&t.jsx("div",{className:"input-error",children:d})]})},e=function(a){var e=a.checked,c=void 0!==e&&e,n=a.onChange,i=a.disabled,s=void 0!==i&&i,r=a.size,l=void 0===r?"medium":r,h=a.label,d=a.className,u=void 0===d?"":d,m=a.showIcon,p=void 0===m||m,v=o.useState(c),f=v[0],g=v[1],b=["switch","switch--".concat(l),f?"switch--checked":"",s?"switch--disabled":"",u].filter(Boolean).join(" ");return t.jsxs("div",{className:"switch-container",children:[h&&t.jsx("label",{className:"switch-label",htmlFor:"switch-".concat(Math.random()),children:h}),t.jsxs("div",{className:"switch-wrapper",children:[p&&t.jsx("div",{className:"switch-icon",children:t.jsx("img",{alt:"Power icon",src:f?"http://localhost:3845/assets/86c15ca80cb444eb8cc1db3e8335b63ac51c31a9.svg":"http://localhost:3845/assets/ad7677e073e42d60a4ed84f42b17c5e56222a75d.svg",className:"switch-power-icon"})}),t.jsx("button",{type:"button",role:"switch","aria-checked":f,className:b,onClick:function(){if(!s){var t=!f;g(t),null==n||n(t)}},disabled:s,children:t.jsx("span",{className:"switch-track",children:t.jsxs("span",{className:"switch-thumb",children:[f&&t.jsx("img",{alt:"",src:"http://localhost:3845/assets/25f95806464af11dea630fdf68fa80d5415c7da4.svg",className:"switch-thumb-icon"}),!f&&t.jsx("img",{alt:"",src:"http://localhost:3845/assets/164245110dc3649da31e9ff08005286a44c3c907.svg",className:"switch-thumb-icon"})]})})})]})]})};exports.Chip=function(o){var a=o.label,e=o.bgColor,c=o.textColor;return t.jsx("div",{className:"chip-container",style:{backgroundColor:e},children:t.jsx("div",{className:"chip-content",children:t.jsx("p",{className:"chip-label",style:{color:c},children:a})})})},exports.Histogram=function(a){var e,c,n,i,s=a.max,r=a.relative,l=a.barHeight,h=void 0===l?103:l,d=a.barWidth,u=void 0===d?32:d,m=a.orientation,p=void 0===m?"vertical":m,v=a.cornerRadius,f=a.children,g=o.useState(0),b=g[0],x=g[1],j=o.useState(0),N=j[0],w=j[1],L=Math.min(r.value/s.value*100,100)/100*h,R=Math.min(r.value/s.value*100,100)/100*u;o.useEffect(function(){x(0),w(0);var t=Date.now(),o=function(){var a=Date.now()-t,e=Math.min(a/1e3,1),c=1-Math.pow(1-e,4);x(L*c),w(R*c),e<1&&requestAnimationFrame(o)};requestAnimationFrame(o)},[L,R]);var C="horizontal"===p?h:u,z="horizontal"===p?u:h,y="horizontal"===p?h:u,k="horizontal"===p?u:h,S=function(t,o,a,e,c){var n=c.topLeft,i=c.topRight,s=c.bottomLeft,r=c.bottomRight;return"\n      M ".concat(t+n," ").concat(o,"\n      L ").concat(t+a-i," ").concat(o,"\n      Q ").concat(t+a," ").concat(o," ").concat(t+a," ").concat(o+i,"\n      L ").concat(t+a," ").concat(o+e-r,"\n      Q ").concat(t+a," ").concat(o+e," ").concat(t+a-r," ").concat(o+e,"\n      L ").concat(t+s," ").concat(o+e,"\n      Q ").concat(t," ").concat(o+e," ").concat(t," ").concat(o+e-s,"\n      L ").concat(t," ").concat(o+n,"\n      Q ").concat(t," ").concat(o," ").concat(t+n," ").concat(o,"\n      Z\n    ").trim().replace(/\s+/g," ")},q={topLeft:2,topRight:2,bottomLeft:2,bottomRight:2},M=v?{topLeft:null!==(e=v.topLeft)&&void 0!==e?e:q.topLeft,topRight:null!==(c=v.topRight)&&void 0!==c?c:q.topRight,bottomLeft:null!==(n=v.bottomLeft)&&void 0!==n?n:q.bottomLeft,bottomRight:null!==(i=v.bottomRight)&&void 0!==i?i:q.bottomRight}:q;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(z,"px"),width:"".concat(C,"px")},children:t.jsxs("svg",{width:y,height:k,viewBox:"0 0 ".concat(y," ").concat(k),className:"histogram-svg",children:[t.jsx("path",{d:S(0,0,y,k,M),fill:s.color,fillOpacity:s.opacity||1}),"vertical"===p?t.jsx("path",{d:S(0,k-b,y,b,{topLeft:b>=k?M.topLeft:0,topRight:b>=k?M.topRight:0,bottomLeft:M.bottomLeft,bottomRight:M.bottomRight}),fill:r.color}):t.jsx("path",{d:S(0,0,N,k,{topLeft:M.topLeft,topRight:N>=y?M.topRight:0,bottomLeft:M.bottomLeft,bottomRight:N>=y?M.bottomRight:0}),fill:r.color})]})}),f&&t.jsx("div",{className:"histogram-text-container ".concat("horizontal"===p?"histogram-text-container--horizontal":""),children:f})]})})},exports.Input=a,exports.ProductionUnit=function(o){var c=o.onChangeInput,n=o.onChangeSwitch,i=o.value,s=o.checked;return t.jsxs("div",{className:"production-unit-container",children:[t.jsx(a,{label:"Production Unit",type:"number",onChange:c?function(t){return c(Number(t))}:void 0,value:void 0!==i?i.toString():void 0}),t.jsx(e,{label:"Production Unit",checked:s,onChange:n,className:"production-unit-switch"})]})},exports.Switch=e;
+"use strict";var t=require("react/jsx-runtime"),i=require("react"),n=function(n){var e=n.label,o=n.value,a=void 0===o?"":o,c=n.onChange,s=n.type,l=void 0===s?"text":s,r=n.disabled,h=void 0!==r&&r,d=n.className,u=void 0===d?"":d,v=n.required,m=void 0!==v&&v,p=n.min,f=void 0===p?{value:0,label:"Pmin"}:p,x=n.max,g=void 0===x?{value:100,label:"Pmax"}:x,b=i.useState(a),j=b[0],w=b[1],C=i.useState(!1),N=C[0],L=C[1],R=i.useRef(null);i.useEffect(function(){w(a)},[a]);var y=["input-container",N?"input-container--focused":"",N||j.length>0?"input-container--floating":"",h?"input-container--disabled":"",u].filter(Boolean).join(" ");return t.jsx("div",{className:y,children:t.jsxs("div",{className:"input-constraints",children:[t.jsxs("div",{className:"input-min",children:[f.label,t.jsx("br",{}),f.value]}),t.jsxs("div",{className:"input-field",children:[t.jsx("input",{ref:R,type:l,value:j,onChange:function(t){var i=t.target.value;w(i),null==c||c(i)},onFocus:function(){L(!0)},onBlur:function(){L(!1)},disabled:h,required:m,className:"input-element","aria-label":e}),t.jsxs("label",{className:"input-label",children:[e,m&&t.jsx("span",{className:"input-required",children:"*"})]})]}),t.jsxs("div",{className:"input-max",children:[g.label,t.jsx("br",{})," ",g.value]})]})})},e=function(i){var n=i.isOff;return t.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t.jsx("path",{d:"M9.56529 2.85352C9.66365 2.57607 9.96837 2.43116 10.246 2.5293C13.4295 3.65507 15.3392 6.91015 14.7684 10.2383C14.1974 13.5667 11.3114 16 7.93443 16C4.55739 16 1.67151 13.5667 1.10045 10.2383C0.5296 6.91011 2.4393 3.65504 5.62291 2.5293C5.9005 2.43115 6.20523 2.57605 6.30357 2.85352C6.40176 3.13124 6.2561 3.43599 5.97838 3.53418C3.28438 4.48672 1.669 7.2423 2.1522 10.0586C2.63557 12.8747 5.07706 14.9336 7.93443 14.9336C10.7918 14.9336 13.2333 12.8747 13.7167 10.0586C14.1999 7.24233 12.5844 4.48676 9.89049 3.53418C9.61276 3.43599 9.4671 3.13124 9.56529 2.85352ZM7.93443 0C8.22892 3.10447e-05 8.46754 0.238727 8.46763 0.533203V7.4668C8.46763 7.76135 8.22898 8.00095 7.93443 8.00098C7.63986 8.00098 7.40123 7.76137 7.40123 7.4668V0.533203C7.40132 0.238707 7.63991 0 7.93443 0Z",fill:n?"#999FA1":"#009CDF"})})},o=function(i){var n=i.isOff;return t.jsx("svg",{width:"32",height:"32",viewBox:"0 0 32 32",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t.jsx("circle",{cx:"16",cy:"16",r:"16",fill:n?"white":"#009cdf"})})},a=function(n){var a=n.checked,c=void 0!==a&&a,s=n.onChange,l=n.disabled,r=void 0!==l&&l,h=n.showIcon,d=void 0===h||h,u=i.useState(c),v=u[0],m=u[1],p=["switch",v?"switch--checked":"",r?"switch--disabled":""].filter(Boolean).join(" ");return t.jsx("div",{className:"switch-container",children:t.jsxs("div",{className:"switch-wrapper",children:[d&&t.jsx("div",{className:"switch-icon",children:t.jsx(e,{isOff:!v})}),t.jsx("button",{type:"button",role:"switch","aria-checked":v,className:p,onClick:function(){if(!r){var t=!v;m(t),null==s||s(t)}},disabled:r,children:t.jsx("span",{className:"switch-track",children:t.jsx("span",{className:"switch-thumb",children:t.jsx(o,{isOff:!v})})})})]})})},c=function(i){var n=i.label,e=i.bgColor,o=i.textColor,a=i.width,c=["chip-container","full-width"===(void 0===a?"fit-content":a)?"chip-container--full-width":"chip-container--fit-content"].join(" ");return t.jsx("div",{className:c,style:{backgroundColor:e},children:t.jsx("div",{className:"chip-content",children:t.jsx("p",{className:"chip-label",style:{color:o},children:n})})})};exports.Avatar=function(i){var n=i.children;return t.jsx("div",{className:"avatar-container avatar-container--clickable",children:t.jsx("div",{className:"avatar-content",children:n})})},exports.Chip=c,exports.Histogram=function(n){var e,o,a,c,s=n.max,l=n.relative,r=n.barHeight,h=void 0===r?103:r,d=n.barWidth,u=void 0===d?32:d,v=n.orientation,m=void 0===v?"vertical":v,p=n.cornerRadius,f=n.children,x=i.useState(0),g=x[0],b=x[1],j=i.useState(0),w=j[0],C=j[1],N=Math.min(l.value/s.value*100,100)/100*h,L=Math.min(l.value/s.value*100,100)/100*u;i.useEffect(function(){b(0),C(0);var t=Date.now(),i=function(){var n=Date.now()-t,e=Math.min(n/1e3,1),o=1-Math.pow(1-e,4);b(N*o),C(L*o),e<1&&requestAnimationFrame(i)};requestAnimationFrame(i)},[N,L]);var R="horizontal"===m?h:u,y="horizontal"===m?u:h,k="horizontal"===m?h:u,z="horizontal"===m?u:h,S=function(t,i,n,e,o){var a=o.topLeft,c=o.topRight,s=o.bottomLeft,l=o.bottomRight;return"\n      M ".concat(t+a," ").concat(i,"\n      L ").concat(t+n-c," ").concat(i,"\n      Q ").concat(t+n," ").concat(i," ").concat(t+n," ").concat(i+c,"\n      L ").concat(t+n," ").concat(i+e-l,"\n      Q ").concat(t+n," ").concat(i+e," ").concat(t+n-l," ").concat(i+e,"\n      L ").concat(t+s," ").concat(i+e,"\n      Q ").concat(t," ").concat(i+e," ").concat(t," ").concat(i+e-s,"\n      L ").concat(t," ").concat(i+a,"\n      Q ").concat(t," ").concat(i," ").concat(t+a," ").concat(i,"\n      Z\n    ").trim().replace(/\s+/g," ")},M={topLeft:2,topRight:2,bottomLeft:2,bottomRight:2},q=p?{topLeft:null!==(e=p.topLeft)&&void 0!==e?e:M.topLeft,topRight:null!==(o=p.topRight)&&void 0!==o?o:M.topRight,bottomLeft:null!==(a=p.bottomLeft)&&void 0!==a?a:M.bottomLeft,bottomRight:null!==(c=p.bottomRight)&&void 0!==c?c:M.bottomRight}:M;return t.jsx("div",{className:"histogram-container ".concat("horizontal"===m?"histogram-container--horizontal":""),children:t.jsxs("div",{className:"histogram-content ".concat("horizontal"===m?"histogram-content--horizontal":""),children:[t.jsx("div",{className:"histogram-bar",style:{height:"".concat(y,"px"),width:"".concat(R,"px")},children:t.jsxs("svg",{width:k,height:z,viewBox:"0 0 ".concat(k," ").concat(z),className:"histogram-svg",children:[t.jsx("path",{d:S(0,0,k,z,q),fill:s.color,fillOpacity:s.opacity||1}),"vertical"===m?t.jsx("path",{d:S(0,z-g,k,g,{topLeft:g>=z?q.topLeft:0,topRight:g>=z?q.topRight:0,bottomLeft:q.bottomLeft,bottomRight:q.bottomRight}),fill:l.color}):t.jsx("path",{d:S(0,0,w,z,{topLeft:q.topLeft,topRight:w>=k?q.topRight:0,bottomLeft:q.bottomLeft,bottomRight:w>=k?q.bottomRight:0}),fill:l.color})]})}),f&&t.jsx("div",{className:"histogram-text-container ".concat("horizontal"===m?"histogram-text-container--horizontal":""),children:f})]})})},exports.Input=n,exports.ProductionUnit=function(e){var o=e.onChangeInput,s=e.onChangeSwitch,l=e.defaultValue,r=e.defaultChecked,h=void 0!==r&&r,d=e.unitName,u=void 0===d?"Production Unit":d,v=e.energyCost,m=void 0===v?0:v,p=e.checkedImage,f=e.uncheckedImage,x=e.readonly,g=void 0!==x&&x,b=i.useState(h),j=b[0],w=b[1],C=i.useState(l),N=C[0],L=C[1];return t.jsxs("div",{className:"production-unit-container",children:[t.jsxs("div",{className:"production-unit-content",children:[t.jsx("div",{className:"image-preview-container",children:j?p:f}),t.jsxs("div",{className:"production-unit-chip",children:[t.jsx("div",{className:"production-unit-chip-name",children:u}),t.jsx(c,{label:"".concat(m," MW"),width:"fit-content",bgColor:"#E1F5FD",textColor:"#005896"})]}),t.jsxs("div",{className:"production-unit-switch-container",children:[t.jsx(n,{label:"PA",type:"number",onChange:function(t){var i=Number(t);L(i),o&&o(i)},value:void 0!==N?N.toString():void 0,disabled:!j||g})," "]})]}),t.jsx(a,{checked:j,onChange:function(t){w(t),s&&s(t)},disabled:g})]})},exports.Switch=a;
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/components/Input.tsx","../src/components/Switch.tsx","../src/components/Chip.tsx","../src/components/Histogram.tsx","../src/components/ProductionUnit.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react';\nimport './Input.css';\n\ninterface InputProps {\n  label: string;\n  value?: string;\n  onChange?: (value: string) => void;\n  type?: 'text' | 'email' | 'password' | 'number';\n  disabled?: boolean;\n  error?: string;\n  className?: string;\n  required?: boolean;\n}\n\nexport const Input: React.FC<InputProps> = ({\n  label,\n  value = '',\n  onChange,\n  type = 'text',\n  disabled = false,\n  error,\n  className = '',\n  required = false,\n}) => {\n  const [internalValue, setInternalValue] = useState(value);\n  const [isFocused, setIsFocused] = useState(false);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    setInternalValue(value);\n  }, [value]);\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const newValue = e.target.value;\n    setInternalValue(newValue);\n    onChange?.(newValue);\n  };\n\n  const handleFocus = () => {\n    setIsFocused(true);\n  };\n\n  const handleBlur = () => {\n    setIsFocused(false);\n  };\n\n  const isLabelFloating = isFocused || internalValue.length > 0;\n\n  const containerClasses = [\n    'input-container',\n    isFocused ? 'input-container--focused' : '',\n    isLabelFloating ? 'input-container--floating' : '',\n    error ? 'input-container--error' : '',\n    disabled ? 'input-container--disabled' : '',\n    className,\n  ].filter(Boolean).join(' ');\n\n  return (\n    <div className={containerClasses}>\n      <div className=\"input-field\">\n        <input\n          ref={inputRef}\n          type={type}\n          value={internalValue}\n          onChange={handleChange}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          disabled={disabled}\n          required={required}\n          className=\"input-element\"\n          aria-label={label}\n        />\n        <label className=\"input-label\">\n          {label}\n          {required && <span className=\"input-required\">*</span>}\n        </label>\n      </div>\n      {error && <div className=\"input-error\">{error}</div>}\n    </div>\n  );\n};","import React, { useState } from 'react';\nimport './Switch.css';\n\nconst imgOn = \"http://localhost:3845/assets/86c15ca80cb444eb8cc1db3e8335b63ac51c31a9.svg\";\nconst imgOff = \"http://localhost:3845/assets/ad7677e073e42d60a4ed84f42b17c5e56222a75d.svg\";\nconst imgGroupOn = \"http://localhost:3845/assets/25f95806464af11dea630fdf68fa80d5415c7da4.svg\";\nconst imgGroupOff = \"http://localhost:3845/assets/164245110dc3649da31e9ff08005286a44c3c907.svg\";\n\ninterface SwitchProps {\n  checked?: boolean;\n  onChange?: (checked: boolean) => void;\n  disabled?: boolean;\n  size?: 'small' | 'medium' | 'large';\n  label?: string;\n  className?: string;\n  showIcon?: boolean;\n}\n\nexport const Switch: React.FC<SwitchProps> = ({\n  checked = false,\n  onChange,\n  disabled = false,\n  size = 'medium',\n  label,\n  className = '',\n  showIcon = true,\n}) => {\n  const [internalChecked, setInternalChecked] = useState(checked);\n\n  const handleToggle = () => {\n    if (disabled) return;\n    \n    const newChecked = !internalChecked;\n    setInternalChecked(newChecked);\n    onChange?.(newChecked);\n  };\n\n  const switchClasses = [\n    'switch',\n    `switch--${size}`,\n    internalChecked ? 'switch--checked' : '',\n    disabled ? 'switch--disabled' : '',\n    className,\n  ].filter(Boolean).join(' ');\n\n  return (\n    <div className=\"switch-container\">\n      {label && (\n        <label className=\"switch-label\" htmlFor={`switch-${Math.random()}`}>\n          {label}\n        </label>\n      )}\n      <div className=\"switch-wrapper\">\n        {showIcon && (\n          <div className=\"switch-icon\">\n            <img \n              alt=\"Power icon\" \n              src={internalChecked ? imgOn : imgOff}\n              className=\"switch-power-icon\"\n            />\n          </div>\n        )}\n        <button\n          type=\"button\"\n          role=\"switch\"\n          aria-checked={internalChecked}\n          className={switchClasses}\n          onClick={handleToggle}\n          disabled={disabled}\n        >\n          <span className=\"switch-track\">\n            <span className=\"switch-thumb\">\n              {internalChecked && (\n                <img \n                  alt=\"\" \n                  src={imgGroupOn} \n                  className=\"switch-thumb-icon\"\n                />\n              )}\n              {!internalChecked && (\n                <img \n                  alt=\"\" \n                  src={imgGroupOff} \n                  className=\"switch-thumb-icon\"\n                />\n              )}\n            </span>\n          </span>\n        </button>\n      </div>\n    </div>\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","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 { Input } from \"./Input\";\nimport { Switch } from \"./Switch\";\ninterface ProductionUnitProps {\n  onChangeInput?: (value: number) => void;\n  onChangeSwitch?: (checked: boolean) => void;\n  value?: number;\n  checked?: boolean;\n}\nexport const ProductionUnit = ({\n  onChangeInput,\n  onChangeSwitch,\n  value,\n  checked,\n}: ProductionUnitProps) => {\n  return (\n    <div className=\"production-unit-container\">\n      <Input\n        label=\"Production Unit\"\n        type=\"number\"\n        onChange={\n          onChangeInput\n            ? (val: string) => onChangeInput(Number(val))\n            : undefined\n        }\n        value={value !== undefined ? value.toString() : undefined}\n      />\n      <Switch\n        label=\"Production Unit\"\n        checked={checked}\n        onChange={onChangeSwitch}\n        className=\"production-unit-switch\"\n      />\n    </div>\n  );\n};\n"],"names":["Input","_a","label","_b","value","onChange","_c","type","_d","disabled","error","_e","className","_f","required","_g","useState","internalValue","setInternalValue","_h","isFocused","setIsFocused","inputRef","useRef","useEffect","containerClasses","length","filter","Boolean","join","_jsxs","_jsx","ref","e","newValue","target","onFocus","onBlur","children","jsx","Switch","checked","size","showIcon","internalChecked","setInternalChecked","switchClasses","concat","htmlFor","Math","random","alt","src","role","onClick","newChecked","bgColor","textColor","style","backgroundColor","color","max","relative","barHeight","barWidth","orientation","cornerRadius","_j","animatedHeight","setAnimatedHeight","_k","animatedWidth","setAnimatedWidth","targetHeight","min","targetWidth","startTime","Date","now","animate","elapsed","progress","easeOutQuart","pow","requestAnimationFrame","displayWidth","displayHeight","svgWidth","svgHeight","createRoundedRectPath","x","y","width","height","radii","topLeft","topRight","bottomLeft","bottomRight","trim","replace","defaultCornerRadius","corners","viewBox","d","fill","fillOpacity","opacity","onChangeInput","onChangeSwitch","val","Number","undefined","toString"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../src/components/Input.tsx","../src/components/Switch.tsx","../src/components/Chip.tsx","../src/components/Avatar.tsx","../src/components/Histogram.tsx","../src/components/ProductionUnit.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from \"react\";\nimport \"./Input.css\";\n\ninterface InputProps {\n  label: string;\n  value?: string;\n  onChange?: (value: string) => void;\n  type?: \"text\" | \"number\";\n  disabled?: boolean;\n  className?: string;\n  required?: boolean;\n  min?: { value: number; label?: string };\n  max?: { value: number; label?: string };\n}\n\nexport const Input: React.FC<InputProps> = ({\n  label,\n  value = \"\",\n  onChange,\n  type = \"text\",\n  disabled = false,\n  className = \"\",\n  required = false,\n  min = { value: 0, label: \"Pmin\" },\n  max = { value: 100, label: \"Pmax\" },\n}) => {\n  const [internalValue, setInternalValue] = useState(value);\n  const [isFocused, setIsFocused] = useState(false);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    setInternalValue(value);\n  }, [value]);\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const newValue = e.target.value;\n    setInternalValue(newValue);\n    onChange?.(newValue);\n  };\n\n  const handleFocus = () => {\n    setIsFocused(true);\n  };\n\n  const handleBlur = () => {\n    setIsFocused(false);\n  };\n\n  const isLabelFloating = isFocused || internalValue.length > 0;\n\n  const containerClasses = [\n    \"input-container\",\n    isFocused ? \"input-container--focused\" : \"\",\n    isLabelFloating ? \"input-container--floating\" : \"\",\n    disabled ? \"input-container--disabled\" : \"\",\n    className,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <div className={containerClasses}>\n      <div className=\"input-constraints\">\n        <div className=\"input-min\">\n          {min.label}\n          <br />\n          {min.value}\n        </div>\n\n        <div className=\"input-field\">\n          <input\n            ref={inputRef}\n            type={type}\n            value={internalValue}\n            onChange={handleChange}\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n            disabled={disabled}\n            required={required}\n            className=\"input-element\"\n            aria-label={label}\n          />\n          <label className=\"input-label\">\n            {label}\n            {required && <span className=\"input-required\">*</span>}\n          </label>\n        </div>\n        <div className=\"input-max\">\n          {max.label}\n          <br /> {max.value}\n        </div>\n      </div>\n    </div>\n  );\n};\n","import React, { useState } from \"react\";\nimport \"./Switch.css\";\n\ninterface OnProps {\n  isOff?: boolean;\n}\nconst ImgOn = ({ isOff }: OnProps) => (\n  <svg\n    width=\"16\"\n    height=\"16\"\n    viewBox=\"0 0 16 16\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      d=\"M9.56529 2.85352C9.66365 2.57607 9.96837 2.43116 10.246 2.5293C13.4295 3.65507 15.3392 6.91015 14.7684 10.2383C14.1974 13.5667 11.3114 16 7.93443 16C4.55739 16 1.67151 13.5667 1.10045 10.2383C0.5296 6.91011 2.4393 3.65504 5.62291 2.5293C5.9005 2.43115 6.20523 2.57605 6.30357 2.85352C6.40176 3.13124 6.2561 3.43599 5.97838 3.53418C3.28438 4.48672 1.669 7.2423 2.1522 10.0586C2.63557 12.8747 5.07706 14.9336 7.93443 14.9336C10.7918 14.9336 13.2333 12.8747 13.7167 10.0586C14.1999 7.24233 12.5844 4.48676 9.89049 3.53418C9.61276 3.43599 9.4671 3.13124 9.56529 2.85352ZM7.93443 0C8.22892 3.10447e-05 8.46754 0.238727 8.46763 0.533203V7.4668C8.46763 7.76135 8.22898 8.00095 7.93443 8.00098C7.63986 8.00098 7.40123 7.76137 7.40123 7.4668V0.533203C7.40132 0.238707 7.63991 0 7.93443 0Z\"\n      fill={isOff ? \"#999FA1\" : \"#009CDF\"}\n    />\n  </svg>\n);\nconst SwitchThumb = ({ isOff }: OnProps) => (\n  <svg\n    width=\"32\"\n    height=\"32\"\n    viewBox=\"0 0 32 32\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <circle cx=\"16\" cy=\"16\" r=\"16\" fill={isOff ? \"white\" : \"#009cdf\"} />\n  </svg>\n);\n\ninterface SwitchProps {\n  checked?: boolean;\n  onChange?: (checked: boolean) => void;\n  disabled?: boolean;\n  showIcon?: boolean;\n}\n\nexport const Switch: React.FC<SwitchProps> = ({\n  checked = false,\n  onChange,\n  disabled = false,\n  showIcon = true,\n}) => {\n  const [internalChecked, setInternalChecked] = useState(checked);\n\n  const handleToggle = () => {\n    if (disabled) return;\n\n    const newChecked = !internalChecked;\n    setInternalChecked(newChecked);\n    onChange?.(newChecked);\n  };\n\n  const switchClasses = [\n    \"switch\",\n    internalChecked ? \"switch--checked\" : \"\",\n    disabled ? \"switch--disabled\" : \"\",\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <div className=\"switch-container\">\n      <div className=\"switch-wrapper\">\n        {showIcon && (\n          <div className=\"switch-icon\">\n            <ImgOn isOff={!internalChecked} />\n          </div>\n        )}\n        <button\n          type=\"button\"\n          role=\"switch\"\n          aria-checked={internalChecked}\n          className={switchClasses}\n          onClick={handleToggle}\n          disabled={disabled}\n        >\n          <span className=\"switch-track\">\n            <span className=\"switch-thumb\">\n              <SwitchThumb isOff={!internalChecked} />\n            </span>\n          </span>\n        </button>\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  width?: \"fit-content\" | \"full-width\";\n}\n\nexport const Chip: React.FC<ChipProps> = ({ \n  label, \n  bgColor, \n  textColor, \n  width = \"fit-content\" \n}) => {\n  const chipClasses = [\n    \"chip-container\",\n    width === \"full-width\" ? \"chip-container--full-width\" : \"chip-container--fit-content\"\n  ].join(\" \");\n\n  return (\n    <div className={chipClasses} 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 from \"react\";\nimport \"./Avatar.css\";\n\ninterface AvatarProps {\n  children: React.ReactNode;\n}\n\nexport const Avatar: React.FC<AvatarProps> = ({ children }) => {\n  return (\n    <div className=\"avatar-container avatar-container--clickable\">\n      <div className=\"avatar-content\">{children}</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","import { useState } from \"react\";\nimport { Input } from \"./Input\";\nimport { Switch } from \"./Switch\";\nimport \"./ProductionUnit.css\";\nimport { Chip } from \"./Chip\";\n\ninterface ProductionUnitProps {\n  onChangeInput?: (value: number) => void;\n  onChangeSwitch?: (checked: boolean) => void;\n  defaultValue?: number;\n  defaultChecked?: boolean;\n  unitName?: string;\n  energyCost?: number;\n  checkedImage?: React.ReactNode;\n  uncheckedImage?: React.ReactNode;\n  readonly?: boolean;\n}\nexport const ProductionUnit = ({\n  onChangeInput,\n  onChangeSwitch,\n  defaultValue,\n  defaultChecked = false,\n  unitName = \"Production Unit\",\n  energyCost = 0,\n  checkedImage,\n  uncheckedImage,\n  readonly = false,\n}: ProductionUnitProps) => {\n  // Internal state management\n  const [internalChecked, setInternalChecked] = useState(defaultChecked);\n  const [internalValue, setInternalValue] = useState(defaultValue);\n\n  const handleSwitchChange = (newChecked: boolean) => {\n    // Update internal state\n    setInternalChecked(newChecked);\n\n    // Notify parent component if handler provided\n    if (onChangeSwitch) {\n      onChangeSwitch(newChecked);\n    }\n  };\n\n  const handleInputChange = (val: string) => {\n    const numValue = Number(val);\n    // Update internal state\n    setInternalValue(numValue);\n\n    // Notify parent component if handler provided\n    if (onChangeInput) {\n      onChangeInput(numValue);\n    }\n  };\n\n  return (\n    <div className=\"production-unit-container\">\n      <div className=\"production-unit-content\">\n        <div className=\"image-preview-container\">\n          {internalChecked ? checkedImage : uncheckedImage}\n        </div>\n        <div className=\"production-unit-chip\">\n          <div className=\"production-unit-chip-name\">{unitName}</div>\n\n          <Chip\n            label={`${energyCost} MW`}\n            width=\"fit-content\"\n            bgColor=\"#E1F5FD\"\n            textColor=\"#005896\"\n          />\n        </div>\n        <div className=\"production-unit-switch-container\">\n          <Input\n            label=\"PA\"\n            type=\"number\"\n            onChange={handleInputChange}\n            value={\n              internalValue !== undefined ? internalValue.toString() : undefined\n            }\n            disabled={!internalChecked || readonly}\n          />{\" \"}\n        </div>\n      </div>\n\n      <Switch\n        checked={internalChecked}\n        onChange={handleSwitchChange}\n        disabled={readonly}\n      />\n    </div>\n  );\n};\n"],"names":["Input","_a","label","_b","value","onChange","_c","type","_d","disabled","_e","className","_f","required","_g","min","_h","max","_j","useState","internalValue","setInternalValue","_k","isFocused","setIsFocused","inputRef","useRef","useEffect","containerClasses","length","filter","Boolean","join","_jsx","children","_jsxs","jsx","ref","e","newValue","target","onFocus","onBlur","jsxs","ImgOn","isOff","width","height","viewBox","fill","xmlns","d","SwitchThumb","cx","cy","r","Switch","checked","showIcon","internalChecked","setInternalChecked","switchClasses","role","onClick","newChecked","Chip","bgColor","textColor","chipClasses","style","backgroundColor","color","relative","barHeight","barWidth","orientation","cornerRadius","animatedHeight","setAnimatedHeight","animatedWidth","setAnimatedWidth","targetHeight","Math","targetWidth","startTime","Date","now","animate","elapsed","progress","easeOutQuart","pow","requestAnimationFrame","displayWidth","displayHeight","svgWidth","svgHeight","createRoundedRectPath","x","y","radii","topLeft","topRight","bottomLeft","bottomRight","concat","trim","replace","defaultCornerRadius","corners","fillOpacity","opacity","onChangeInput","onChangeSwitch","defaultValue","defaultChecked","unitName","energyCost","checkedImage","uncheckedImage","readonly","val","numValue","Number","undefined","toString"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rte-utils",
-  "version": "1.2.7",
+  "version": "1.2.9",
   "description": "React components library in TypeScript for agigox projects",
   "type": "module",
   "main": "dist/index.js",