rte-utils 1.2.20 → 1.2.22
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/ProductionUnitContainer.d.ts +8 -0
- package/dist/components/ProductionUnitContainer.stories.d.ts +12 -0
- package/dist/index.css +1 -1
- package/dist/index.esm.css +1 -1
- package/dist/index.esm.js +1 -1
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import "./ProductionUnitContainer.css";
|
|
2
|
+
interface ProductionUnitContainerProps {
|
|
3
|
+
bgColor?: string;
|
|
4
|
+
children: React.ReactNode;
|
|
5
|
+
height?: string;
|
|
6
|
+
}
|
|
7
|
+
export declare const ProductionUnitContainer: ({ bgColor, children, height, }: ProductionUnitContainerProps) => import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export {};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from "@storybook/react";
|
|
2
|
+
import { ProductionUnitContainer } from "./ProductionUnitContainer";
|
|
3
|
+
declare const meta: Meta<typeof ProductionUnitContainer>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof meta>;
|
|
6
|
+
export declare const Default: Story;
|
|
7
|
+
export declare const WithCustomBackground: Story;
|
|
8
|
+
export declare const DarkTheme: Story;
|
|
9
|
+
export declare const AutoHeight: Story;
|
|
10
|
+
export declare const WithMultipleItems: Story;
|
|
11
|
+
export declare const LargeContainer: Story;
|
|
12
|
+
export declare const MinimalContainer: Story;
|
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.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:8px 0 8px 12px;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}.input-element[type=number]::-webkit-inner-spin-button,.input-element[type=number]::-webkit-outer-spin-button{-webkit-appearance:auto;cursor:pointer;margin:0;opacity:1}.input-element[type=number]{-moz-appearance:textfield}.input-element[type=number]:hover::-webkit-inner-spin-button,.input-element[type=number]:hover::-webkit-outer-spin-button{opacity:1}.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;
|
|
1
|
+
.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:8px 0 8px 12px;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}.input-element[type=number]::-webkit-inner-spin-button,.input-element[type=number]::-webkit-outer-spin-button{-webkit-appearance:auto;cursor:pointer;margin:0;opacity:1}.input-element[type=number]{-moz-appearance:textfield}.input-element[type=number]:hover::-webkit-inner-spin-button,.input-element[type=number]:hover::-webkit-outer-spin-button{opacity:1}.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;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}.production-unit-container-box{border-radius:64px;box-shadow:0 2px 16px 0 rgba(0,0,0,.16);box-sizing:border-box}@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;justify-content:center;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:1px solid #f5f3ed;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
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.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:8px 0 8px 12px;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}.input-element[type=number]::-webkit-inner-spin-button,.input-element[type=number]::-webkit-outer-spin-button{-webkit-appearance:auto;cursor:pointer;margin:0;opacity:1}.input-element[type=number]{-moz-appearance:textfield}.input-element[type=number]:hover::-webkit-inner-spin-button,.input-element[type=number]:hover::-webkit-outer-spin-button{opacity:1}.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;
|
|
1
|
+
.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:8px 0 8px 12px;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}.input-element[type=number]::-webkit-inner-spin-button,.input-element[type=number]::-webkit-outer-spin-button{-webkit-appearance:auto;cursor:pointer;margin:0;opacity:1}.input-element[type=number]{-moz-appearance:textfield}.input-element[type=number]:hover::-webkit-inner-spin-button,.input-element[type=number]:hover::-webkit-outer-spin-button{opacity:1}.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;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}.production-unit-container-box{border-radius:64px;box-shadow:0 2px 16px 0 rgba(0,0,0,.16);box-sizing:border-box}@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;justify-content:center;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:1px solid #f5f3ed;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
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as t,jsxs as i}from"react/jsx-runtime";import{useState as n,useRef as
|
|
1
|
+
import{jsx as t,jsxs as i}from"react/jsx-runtime";import{useState as n,useRef as e,useEffect as a}from"react";var o=function(o){var c=o.label,l=o.value,r=void 0===l?"":l,d=o.onChange,h=o.type,s=void 0===h?"text":h,v=o.disabled,u=void 0!==v&&v,m=o.className,f=void 0===m?"":m,p=o.required,b=void 0!==p&&p,g=o.min,N=void 0===g?{value:0,label:"Pmin"}:g,w=o.max,C=void 0===w?{value:100,label:"Pmax"}:w,x=n(r),L=x[0],R=x[1],k=n(!1),y=k[0],z=k[1],M=n(!1),F=M[0],B=M[1],P=e(null);a(function(){R(r)},[r]);var q=["input-container",y?"input-container--focused":"",y||L.length>0?"input-container--floating":"",u?"input-container--disabled":"",F?"input-container--error":"",f].filter(Boolean).join(" ");return t("div",{className:q,children:i("div",{className:"input-constraints",children:[i("div",{className:"input-min",children:[N.label,t("br",{}),N.value]}),i("div",{className:"input-field",children:[t("input",{ref:P,type:s,value:L,onChange:function(t){var i=t.target.value;if("number"===s&&""!==i){var n=parseFloat(i);if(isNaN(n))B(!1);else{var e=n<N.value||n>C.value;B(e)}}else B(!1);R(i),null==d||d(i)},onFocus:function(){z(!0)},onBlur:function(){if(z(!1),"number"===s&&""!==L){var t=parseFloat(L);if(!isNaN(t)){var i=Math.max(N.value,Math.min(C.value,t));if(i!==t){var n=i.toString();R(n),null==d||d(n)}B(!1)}}},disabled:u,required:b,className:"input-element","aria-label":c,min:"number"===s?N.value:void 0,max:"number"===s?C.value:void 0,step:"number"===s?1:void 0}),i("label",{className:"input-label",children:[c,b&&t("span",{className:"input-required",children:"*"})]})]}),i("div",{className:"input-max",children:[C.label,t("br",{})," ",C.value]})]})})},c=function(i){var n=i.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:n?"#999FA1":"#009CDF"})})},l=function(i){var n=i.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:n?"white":"#009cdf"})})},r=function(e){var a=e.checked,o=void 0!==a&&a,r=e.onChange,d=e.disabled,h=void 0!==d&&d,s=e.showIcon,v=void 0===s||s,u=n(o),m=u[0],f=u[1],p=void 0!==o?o:m,b=["switch",p?"switch--checked":"",h?"switch--disabled":""].filter(Boolean).join(" ");return t("div",{className:"switch-container",children:i("div",{className:"switch-wrapper",children:[v&&t("div",{className:"switch-icon",children:t(c,{isOff:!p})}),t("button",{type:"button",role:"switch","aria-checked":p,className:b,onClick:function(){if(!h){var t=!p;void 0===o&&f(t),null==r||r(t)}},disabled:h,children:t("span",{className:"switch-track",children:t("span",{className:"switch-thumb",children:t(l,{isOff:!p})})})})]})})},d=function(i){var n=i.label,e=i.bgColor,a=i.textColor,o=i.width,c=["chip-container","full-width"===(void 0===o?"fit-content":o)?"chip-container--full-width":"chip-container--fit-content"].join(" ");return t("div",{className:c,style:{backgroundColor:e},children:t("div",{className:"chip-content",children:t("p",{className:"chip-label",style:{color:a},children:n})})})},h=function(i){var n=i.bgColor,e=void 0===n?"#fff":n,a=i.children,o=i.height;return t("div",{className:"production-unit-container-box",style:{backgroundColor:e,height:o},children:a})},s=function(e){var a=e.onChangeInput,c=e.onChangeSwitch,l=e.defaultValue,s=e.defaultChecked,v=void 0!==s&&s,u=e.value,m=e.checked,f=e.unitName,p=void 0===f?"Production Unit":f,b=e.energyCost,g=void 0===b?0:b,N=e.checkedImage,w=e.uncheckedImage,C=e.readonly,x=void 0!==C&&C,L=e.min,R=void 0===L?{value:10,label:"Pmin"}:L,k=e.max,y=void 0===k?{value:100,label:"Pmax"}:k,z=n(v),M=z[0],F=z[1],B=n(l),P=B[0],q=B[1],O=void 0!==m?m:M,j=void 0!==u?u:P;return t(h,{children:i("div",{className:"production-unit-container",children:[i("div",{className:"production-unit-content",children:[t("div",{className:"image-preview-container",children:O?N:w}),i("div",{className:"production-unit-chip",children:[t("div",{className:"production-unit-chip-name",children:p}),t(d,{label:"".concat(g," MW"),width:"fit-content",bgColor:"#E1F5FD",textColor:"#005896"})]}),i("div",{className:"production-unit-switch-container",children:[t(o,{label:"PA",type:"number",onChange:function(t){var i=Number(t);void 0===u&&q(i),a&&a(i)},value:void 0!==j?j.toString():void 0,disabled:!O||x,min:{value:R.value,label:R.label},max:{value:y.value,label:y.label}})," "]})]}),t(r,{checked:O,onChange:function(t){void 0===m&&F(t),c&&c(t)},disabled:x})]})})},v=function(e){var o,c,l,r,d=e.max,h=e.relative,s=e.barHeight,v=void 0===s?103:s,u=e.barWidth,m=void 0===u?32:u,f=e.orientation,p=void 0===f?"vertical":f,b=e.cornerRadius,g=e.children,N=n(0),w=N[0],C=N[1],x=n(0),L=x[0],R=x[1],k=Math.min(h.value/d.value*100,100)/100*v,y=Math.min(h.value/d.value*100,100)/100*m;a(function(){C(0),R(0);var t=Date.now(),i=function(){var n=Date.now()-t,e=Math.min(n/1e3,1),a=1-Math.pow(1-e,4);C(k*a),R(y*a),e<1&&requestAnimationFrame(i)};requestAnimationFrame(i)},[k,y]);var z="horizontal"===p?v:m,M="horizontal"===p?m:v,F="horizontal"===p?v:m,B="horizontal"===p?m:v,P=function(t,i,n,e,a){var o=a.topLeft,c=a.topRight,l=a.bottomLeft,r=a.bottomRight;return"\n M ".concat(t+o," ").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-r,"\n Q ").concat(t+n," ").concat(i+e," ").concat(t+n-r," ").concat(i+e,"\n L ").concat(t+l," ").concat(i+e,"\n Q ").concat(t," ").concat(i+e," ").concat(t," ").concat(i+e-l,"\n L ").concat(t," ").concat(i+o,"\n Q ").concat(t," ").concat(i," ").concat(t+o," ").concat(i,"\n Z\n ").trim().replace(/\s+/g," ")},q={topLeft:2,topRight:2,bottomLeft:2,bottomRight:2},O=b?{topLeft:null!==(o=b.topLeft)&&void 0!==o?o:q.topLeft,topRight:null!==(c=b.topRight)&&void 0!==c?c: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 t("div",{className:"histogram-container ".concat("horizontal"===p?"histogram-container--horizontal":""),children:i("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:i("svg",{width:F,height:B,viewBox:"0 0 ".concat(F," ").concat(B),className:"histogram-svg",children:[t("path",{d:P(0,0,F,B,O),fill:d.color,fillOpacity:d.opacity||1}),t("path","vertical"===p?{d:P(0,B-w,F,w,{topLeft:w>=B?O.topLeft:0,topRight:w>=B?O.topRight:0,bottomLeft:O.bottomLeft,bottomRight:O.bottomRight}),fill:h.color}:{d:P(0,0,L,B,{topLeft:O.topLeft,topRight:L>=F?O.topRight:0,bottomLeft:O.bottomLeft,bottomRight:L>=F?O.bottomRight:0}),fill:h.color})]})}),g&&t("div",{className:"histogram-text-container ".concat("horizontal"===p?"histogram-text-container--horizontal":""),children:g})]})})},u=function(i){var n=i.children;return t("div",{className:"avatar-container avatar-container--clickable",children:t("div",{className:"avatar-content",children:n})})};export{u as Avatar,d as Chip,v as Histogram,o as Input,s as ProductionUnit,r as Switch};
|
|
2
2
|
//# sourceMappingURL=index.esm.js.map
|
package/dist/index.esm.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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 [isOutOfRange, setIsOutOfRange] = 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 \n // Check if value is out of range for visual feedback (but don't clamp yet)\n if (type === \"number\" && newValue !== \"\") {\n const numValue = parseFloat(newValue);\n if (!isNaN(numValue)) {\n const outOfRange = numValue < min.value || numValue > max.value;\n setIsOutOfRange(outOfRange);\n } else {\n setIsOutOfRange(false);\n }\n } else {\n setIsOutOfRange(false);\n }\n \n // Allow typing without immediate validation\n // Validation will happen on blur\n setInternalValue(newValue);\n onChange?.(newValue);\n };\n\n const handleFocus = () => {\n setIsFocused(true);\n };\n\n const handleBlur = () => {\n setIsFocused(false);\n\n // Validate and clamp value on blur for number inputs\n if (type === \"number\" && internalValue !== \"\") {\n const numValue = parseFloat(internalValue);\n if (!isNaN(numValue)) {\n const clampedValue = Math.max(min.value, Math.min(max.value, numValue));\n if (clampedValue !== numValue) {\n const clampedString = clampedValue.toString();\n setInternalValue(clampedString);\n onChange?.(clampedString);\n }\n setIsOutOfRange(false); // Reset out-of-range state after clamping\n }\n }\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 isOutOfRange ? \"input-container--error\" : \"\",\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 min={type === \"number\" ? min.value : undefined}\n max={type === \"number\" ? max.value : undefined}\n step={type === \"number\" ? 1 : undefined}\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 // Use controlled value if provided, otherwise use internal state\n const isChecked = checked !== undefined ? checked : internalChecked;\n\n const handleToggle = () => {\n if (disabled) return;\n\n const newChecked = !isChecked;\n // Only update internal state if uncontrolled\n if (checked === undefined) {\n setInternalChecked(newChecked);\n }\n onChange?.(newChecked);\n };\n\n const switchClasses = [\n \"switch\",\n isChecked ? \"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={!isChecked} />\n </div>\n )}\n <button\n type=\"button\"\n role=\"switch\"\n aria-checked={isChecked}\n className={switchClasses}\n onClick={handleToggle}\n disabled={disabled}\n >\n <span className=\"switch-track\">\n <span className=\"switch-thumb\">\n <SwitchThumb isOff={!isChecked} />\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\ntype ProductionUnitLimit = {\n value: number;\n label?: string;\n};\ninterface ProductionUnitProps {\n onChangeInput?: (value: number) => void;\n onChangeSwitch?: (checked: boolean) => void;\n defaultValue?: number;\n defaultChecked?: boolean;\n value?: number;\n checked?: boolean;\n unitName?: string;\n energyCost?: number;\n checkedImage?: React.ReactNode;\n uncheckedImage?: React.ReactNode;\n readonly?: boolean;\n min?: ProductionUnitLimit;\n max?: ProductionUnitLimit;\n}\nexport const ProductionUnit = ({\n onChangeInput,\n onChangeSwitch,\n defaultValue,\n defaultChecked = false,\n value,\n checked,\n unitName = \"Production Unit\",\n energyCost = 0,\n checkedImage,\n uncheckedImage,\n readonly = false,\n min = { value: 10, label: \"Pmin\" },\n max = { value: 100, label: \"Pmax\" },\n}: ProductionUnitProps) => {\n // Internal state management for uncontrolled mode\n const [internalChecked, setInternalChecked] = useState(defaultChecked);\n const [internalValue, setInternalValue] = useState(defaultValue);\n\n // Use controlled props if provided, otherwise use internal state\n const isChecked = checked !== undefined ? checked : internalChecked;\n const currentValue = value !== undefined ? value : internalValue;\n\n const handleSwitchChange = (newChecked: boolean) => {\n // Update internal state only if uncontrolled\n if (checked === undefined) {\n setInternalChecked(newChecked);\n }\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 only if uncontrolled\n if (value === undefined) {\n setInternalValue(numValue);\n }\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 {isChecked ? 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 currentValue !== undefined ? currentValue.toString() : undefined\n }\n disabled={!isChecked || readonly}\n min={{ value: min.value, label: min.label }}\n max={{ value: max.value, label: max.label }}\n />{\" \"}\n </div>\n </div>\n\n <Switch\n checked={isChecked}\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","_l","isOutOfRange","setIsOutOfRange","inputRef","useRef","useEffect","containerClasses","length","filter","Boolean","join","_jsx","children","_jsxs","ref","e","newValue","target","numValue","parseFloat","isNaN","outOfRange","onFocus","onBlur","clampedValue","Math","clampedString","toString","undefined","step","ImgOn","isOff","width","height","viewBox","fill","xmlns","d","SwitchThumb","cx","cy","r","Switch","checked","showIcon","internalChecked","setInternalChecked","isChecked","switchClasses","role","onClick","newChecked","Chip","bgColor","textColor","chipClasses","style","backgroundColor","color","ProductionUnit","onChangeInput","onChangeSwitch","defaultValue","defaultChecked","unitName","energyCost","checkedImage","uncheckedImage","readonly","currentValue","concat","val","Number","Histogram","relative","barHeight","barWidth","orientation","cornerRadius","animatedHeight","setAnimatedHeight","animatedWidth","setAnimatedWidth","targetHeight","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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"}
|
|
1
|
+
{"version":3,"file":"index.esm.js","sources":["../src/components/Input.tsx","../src/components/Switch.tsx","../src/components/Chip.tsx","../src/components/ProductionUnitContainer.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 [isOutOfRange, setIsOutOfRange] = 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 \n // Check if value is out of range for visual feedback (but don't clamp yet)\n if (type === \"number\" && newValue !== \"\") {\n const numValue = parseFloat(newValue);\n if (!isNaN(numValue)) {\n const outOfRange = numValue < min.value || numValue > max.value;\n setIsOutOfRange(outOfRange);\n } else {\n setIsOutOfRange(false);\n }\n } else {\n setIsOutOfRange(false);\n }\n \n // Allow typing without immediate validation\n // Validation will happen on blur\n setInternalValue(newValue);\n onChange?.(newValue);\n };\n\n const handleFocus = () => {\n setIsFocused(true);\n };\n\n const handleBlur = () => {\n setIsFocused(false);\n\n // Validate and clamp value on blur for number inputs\n if (type === \"number\" && internalValue !== \"\") {\n const numValue = parseFloat(internalValue);\n if (!isNaN(numValue)) {\n const clampedValue = Math.max(min.value, Math.min(max.value, numValue));\n if (clampedValue !== numValue) {\n const clampedString = clampedValue.toString();\n setInternalValue(clampedString);\n onChange?.(clampedString);\n }\n setIsOutOfRange(false); // Reset out-of-range state after clamping\n }\n }\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 isOutOfRange ? \"input-container--error\" : \"\",\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 min={type === \"number\" ? min.value : undefined}\n max={type === \"number\" ? max.value : undefined}\n step={type === \"number\" ? 1 : undefined}\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 // Use controlled value if provided, otherwise use internal state\n const isChecked = checked !== undefined ? checked : internalChecked;\n\n const handleToggle = () => {\n if (disabled) return;\n\n const newChecked = !isChecked;\n // Only update internal state if uncontrolled\n if (checked === undefined) {\n setInternalChecked(newChecked);\n }\n onChange?.(newChecked);\n };\n\n const switchClasses = [\n \"switch\",\n isChecked ? \"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={!isChecked} />\n </div>\n )}\n <button\n type=\"button\"\n role=\"switch\"\n aria-checked={isChecked}\n className={switchClasses}\n onClick={handleToggle}\n disabled={disabled}\n >\n <span className=\"switch-track\">\n <span className=\"switch-thumb\">\n <SwitchThumb isOff={!isChecked} />\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 \"./ProductionUnitContainer.css\";\n\ninterface ProductionUnitContainerProps {\n bgColor?: string;\n children: React.ReactNode;\n height?: string;\n}\nexport const ProductionUnitContainer = ({\n bgColor = \"#fff\",\n children,\n height,\n}: ProductionUnitContainerProps) => {\n return (\n <div\n className=\"production-unit-container-box\"\n style={{ backgroundColor: bgColor, height }}\n >\n {children}\n </div>\n );\n};\n","import { useState } from \"react\";\nimport { Input } from \"./Input\";\nimport { Switch } from \"./Switch\";\nimport \"./ProductionUnit.css\";\nimport { Chip } from \"./Chip\";\nimport { ProductionUnitContainer } from \"./ProductionUnitContainer\";\n\ntype ProductionUnitLimit = {\n value: number;\n label?: string;\n};\ninterface ProductionUnitProps {\n onChangeInput?: (value: number) => void;\n onChangeSwitch?: (checked: boolean) => void;\n defaultValue?: number;\n defaultChecked?: boolean;\n value?: number;\n checked?: boolean;\n unitName?: string;\n energyCost?: number;\n checkedImage?: React.ReactNode;\n uncheckedImage?: React.ReactNode;\n readonly?: boolean;\n min?: ProductionUnitLimit;\n max?: ProductionUnitLimit;\n}\nexport const ProductionUnit = ({\n onChangeInput,\n onChangeSwitch,\n defaultValue,\n defaultChecked = false,\n value,\n checked,\n unitName = \"Production Unit\",\n energyCost = 0,\n checkedImage,\n uncheckedImage,\n readonly = false,\n min = { value: 10, label: \"Pmin\" },\n max = { value: 100, label: \"Pmax\" },\n}: ProductionUnitProps) => {\n // Internal state management for uncontrolled mode\n const [internalChecked, setInternalChecked] = useState(defaultChecked);\n const [internalValue, setInternalValue] = useState(defaultValue);\n\n // Use controlled props if provided, otherwise use internal state\n const isChecked = checked !== undefined ? checked : internalChecked;\n const currentValue = value !== undefined ? value : internalValue;\n\n const handleSwitchChange = (newChecked: boolean) => {\n // Update internal state only if uncontrolled\n if (checked === undefined) {\n setInternalChecked(newChecked);\n }\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 only if uncontrolled\n if (value === undefined) {\n setInternalValue(numValue);\n }\n\n // Notify parent component if handler provided\n if (onChangeInput) {\n onChangeInput(numValue);\n }\n };\n\n return (\n <ProductionUnitContainer>\n <div className=\"production-unit-container\">\n <div className=\"production-unit-content\">\n <div className=\"image-preview-container\">\n {isChecked ? 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 currentValue !== undefined ? currentValue.toString() : undefined\n }\n disabled={!isChecked || readonly}\n min={{ value: min.value, label: min.label }}\n max={{ value: max.value, label: max.label }}\n />{\" \"}\n </div>\n </div>\n\n <Switch\n checked={isChecked}\n onChange={handleSwitchChange}\n disabled={readonly}\n />\n </div>\n </ProductionUnitContainer>\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","_l","isOutOfRange","setIsOutOfRange","inputRef","useRef","useEffect","containerClasses","length","filter","Boolean","join","_jsx","children","_jsxs","ref","e","newValue","target","numValue","parseFloat","isNaN","outOfRange","onFocus","onBlur","clampedValue","Math","clampedString","toString","undefined","step","ImgOn","isOff","width","height","viewBox","fill","xmlns","d","SwitchThumb","cx","cy","r","Switch","checked","showIcon","internalChecked","setInternalChecked","isChecked","switchClasses","role","onClick","newChecked","Chip","bgColor","textColor","chipClasses","style","backgroundColor","color","ProductionUnitContainer","ProductionUnit","onChangeInput","onChangeSwitch","defaultValue","defaultChecked","unitName","energyCost","checkedImage","uncheckedImage","readonly","currentValue","concat","val","Number","Histogram","relative","barHeight","barWidth","orientation","cornerRadius","animatedHeight","setAnimatedHeight","animatedWidth","setAnimatedWidth","targetHeight","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
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var t=require("react/jsx-runtime"),e=require("react"),i=function(i){var
|
|
1
|
+
"use strict";var t=require("react/jsx-runtime"),e=require("react"),i=function(i){var n=i.label,a=i.value,o=void 0===a?"":a,c=i.onChange,l=i.type,r=void 0===l?"text":l,s=i.disabled,d=void 0!==s&&s,h=i.className,u=void 0===h?"":h,v=i.required,m=void 0!==v&&v,f=i.min,p=void 0===f?{value:0,label:"Pmin"}:f,x=i.max,b=void 0===x?{value:100,label:"Pmax"}:x,g=e.useState(o),j=g[0],w=g[1],N=e.useState(!1),C=N[0],L=N[1],R=e.useState(!1),k=R[0],y=R[1],S=e.useRef(null);e.useEffect(function(){w(o)},[o]);var z=["input-container",C?"input-container--focused":"",C||j.length>0?"input-container--floating":"",d?"input-container--disabled":"",k?"input-container--error":"",u].filter(Boolean).join(" ");return t.jsx("div",{className:z,children:t.jsxs("div",{className:"input-constraints",children:[t.jsxs("div",{className:"input-min",children:[p.label,t.jsx("br",{}),p.value]}),t.jsxs("div",{className:"input-field",children:[t.jsx("input",{ref:S,type:r,value:j,onChange:function(t){var e=t.target.value;if("number"===r&&""!==e){var i=parseFloat(e);if(isNaN(i))y(!1);else{var n=i<p.value||i>b.value;y(n)}}else y(!1);w(e),null==c||c(e)},onFocus:function(){L(!0)},onBlur:function(){if(L(!1),"number"===r&&""!==j){var t=parseFloat(j);if(!isNaN(t)){var e=Math.max(p.value,Math.min(b.value,t));if(e!==t){var i=e.toString();w(i),null==c||c(i)}y(!1)}}},disabled:d,required:m,className:"input-element","aria-label":n,min:"number"===r?p.value:void 0,max:"number"===r?b.value:void 0,step:"number"===r?1:void 0}),t.jsxs("label",{className:"input-label",children:[n,m&&t.jsx("span",{className:"input-required",children:"*"})]})]}),t.jsxs("div",{className:"input-max",children:[b.label,t.jsx("br",{})," ",b.value]})]})})},n=function(e){var i=e.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:i?"#999FA1":"#009CDF"})})},a=function(e){var i=e.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:i?"white":"#009cdf"})})},o=function(i){var o=i.checked,c=void 0!==o&&o,l=i.onChange,r=i.disabled,s=void 0!==r&&r,d=i.showIcon,h=void 0===d||d,u=e.useState(c),v=u[0],m=u[1],f=void 0!==c?c:v,p=["switch",f?"switch--checked":"",s?"switch--disabled":""].filter(Boolean).join(" ");return t.jsx("div",{className:"switch-container",children:t.jsxs("div",{className:"switch-wrapper",children:[h&&t.jsx("div",{className:"switch-icon",children:t.jsx(n,{isOff:!f})}),t.jsx("button",{type:"button",role:"switch","aria-checked":f,className:p,onClick:function(){if(!s){var t=!f;void 0===c&&m(t),null==l||l(t)}},disabled:s,children:t.jsx("span",{className:"switch-track",children:t.jsx("span",{className:"switch-thumb",children:t.jsx(a,{isOff:!f})})})})]})})},c=function(e){var i=e.label,n=e.bgColor,a=e.textColor,o=e.width,c=["chip-container","full-width"===(void 0===o?"fit-content":o)?"chip-container--full-width":"chip-container--fit-content"].join(" ");return t.jsx("div",{className:c,style:{backgroundColor:n},children:t.jsx("div",{className:"chip-content",children:t.jsx("p",{className:"chip-label",style:{color:a},children:i})})})},l=function(e){var i=e.bgColor,n=void 0===i?"#fff":i,a=e.children,o=e.height;return t.jsx("div",{className:"production-unit-container-box",style:{backgroundColor:n,height:o},children:a})};exports.Avatar=function(e){var i=e.children;return t.jsx("div",{className:"avatar-container avatar-container--clickable",children:t.jsx("div",{className:"avatar-content",children:i})})},exports.Chip=c,exports.Histogram=function(i){var n,a,o,c,l=i.max,r=i.relative,s=i.barHeight,d=void 0===s?103:s,h=i.barWidth,u=void 0===h?32:h,v=i.orientation,m=void 0===v?"vertical":v,f=i.cornerRadius,p=i.children,x=e.useState(0),b=x[0],g=x[1],j=e.useState(0),w=j[0],N=j[1],C=Math.min(r.value/l.value*100,100)/100*d,L=Math.min(r.value/l.value*100,100)/100*u;e.useEffect(function(){g(0),N(0);var t=Date.now(),e=function(){var i=Date.now()-t,n=Math.min(i/1e3,1),a=1-Math.pow(1-n,4);g(C*a),N(L*a),n<1&&requestAnimationFrame(e)};requestAnimationFrame(e)},[C,L]);var R="horizontal"===m?d:u,k="horizontal"===m?u:d,y="horizontal"===m?d:u,S="horizontal"===m?u:d,z=function(t,e,i,n,a){var o=a.topLeft,c=a.topRight,l=a.bottomLeft,r=a.bottomRight;return"\n M ".concat(t+o," ").concat(e,"\n L ").concat(t+i-c," ").concat(e,"\n Q ").concat(t+i," ").concat(e," ").concat(t+i," ").concat(e+c,"\n L ").concat(t+i," ").concat(e+n-r,"\n Q ").concat(t+i," ").concat(e+n," ").concat(t+i-r," ").concat(e+n,"\n L ").concat(t+l," ").concat(e+n,"\n Q ").concat(t," ").concat(e+n," ").concat(t," ").concat(e+n-l,"\n L ").concat(t," ").concat(e+o,"\n Q ").concat(t," ").concat(e," ").concat(t+o," ").concat(e,"\n Z\n ").trim().replace(/\s+/g," ")},M={topLeft:2,topRight:2,bottomLeft:2,bottomRight:2},F=f?{topLeft:null!==(n=f.topLeft)&&void 0!==n?n:M.topLeft,topRight:null!==(a=f.topRight)&&void 0!==a?a:M.topRight,bottomLeft:null!==(o=f.bottomLeft)&&void 0!==o?o:M.bottomLeft,bottomRight:null!==(c=f.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(k,"px"),width:"".concat(R,"px")},children:t.jsxs("svg",{width:y,height:S,viewBox:"0 0 ".concat(y," ").concat(S),className:"histogram-svg",children:[t.jsx("path",{d:z(0,0,y,S,F),fill:l.color,fillOpacity:l.opacity||1}),"vertical"===m?t.jsx("path",{d:z(0,S-b,y,b,{topLeft:b>=S?F.topLeft:0,topRight:b>=S?F.topRight:0,bottomLeft:F.bottomLeft,bottomRight:F.bottomRight}),fill:r.color}):t.jsx("path",{d:z(0,0,w,S,{topLeft:F.topLeft,topRight:w>=y?F.topRight:0,bottomLeft:F.bottomLeft,bottomRight:w>=y?F.bottomRight:0}),fill:r.color})]})}),p&&t.jsx("div",{className:"histogram-text-container ".concat("horizontal"===m?"histogram-text-container--horizontal":""),children:p})]})})},exports.Input=i,exports.ProductionUnit=function(n){var a=n.onChangeInput,r=n.onChangeSwitch,s=n.defaultValue,d=n.defaultChecked,h=void 0!==d&&d,u=n.value,v=n.checked,m=n.unitName,f=void 0===m?"Production Unit":m,p=n.energyCost,x=void 0===p?0:p,b=n.checkedImage,g=n.uncheckedImage,j=n.readonly,w=void 0!==j&&j,N=n.min,C=void 0===N?{value:10,label:"Pmin"}:N,L=n.max,R=void 0===L?{value:100,label:"Pmax"}:L,k=e.useState(h),y=k[0],S=k[1],z=e.useState(s),M=z[0],F=z[1],q=void 0!==v?v:y,P=void 0!==u?u:M;return t.jsx(l,{children:t.jsxs("div",{className:"production-unit-container",children:[t.jsxs("div",{className:"production-unit-content",children:[t.jsx("div",{className:"image-preview-container",children:q?b:g}),t.jsxs("div",{className:"production-unit-chip",children:[t.jsx("div",{className:"production-unit-chip-name",children:f}),t.jsx(c,{label:"".concat(x," MW"),width:"fit-content",bgColor:"#E1F5FD",textColor:"#005896"})]}),t.jsxs("div",{className:"production-unit-switch-container",children:[t.jsx(i,{label:"PA",type:"number",onChange:function(t){var e=Number(t);void 0===u&&F(e),a&&a(e)},value:void 0!==P?P.toString():void 0,disabled:!q||w,min:{value:C.value,label:C.label},max:{value:R.value,label:R.label}})," "]})]}),t.jsx(o,{checked:q,onChange:function(t){void 0===v&&S(t),r&&r(t)},disabled:w})]})})},exports.Switch=o;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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 [isOutOfRange, setIsOutOfRange] = 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 \n // Check if value is out of range for visual feedback (but don't clamp yet)\n if (type === \"number\" && newValue !== \"\") {\n const numValue = parseFloat(newValue);\n if (!isNaN(numValue)) {\n const outOfRange = numValue < min.value || numValue > max.value;\n setIsOutOfRange(outOfRange);\n } else {\n setIsOutOfRange(false);\n }\n } else {\n setIsOutOfRange(false);\n }\n \n // Allow typing without immediate validation\n // Validation will happen on blur\n setInternalValue(newValue);\n onChange?.(newValue);\n };\n\n const handleFocus = () => {\n setIsFocused(true);\n };\n\n const handleBlur = () => {\n setIsFocused(false);\n\n // Validate and clamp value on blur for number inputs\n if (type === \"number\" && internalValue !== \"\") {\n const numValue = parseFloat(internalValue);\n if (!isNaN(numValue)) {\n const clampedValue = Math.max(min.value, Math.min(max.value, numValue));\n if (clampedValue !== numValue) {\n const clampedString = clampedValue.toString();\n setInternalValue(clampedString);\n onChange?.(clampedString);\n }\n setIsOutOfRange(false); // Reset out-of-range state after clamping\n }\n }\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 isOutOfRange ? \"input-container--error\" : \"\",\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 min={type === \"number\" ? min.value : undefined}\n max={type === \"number\" ? max.value : undefined}\n step={type === \"number\" ? 1 : undefined}\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 // Use controlled value if provided, otherwise use internal state\n const isChecked = checked !== undefined ? checked : internalChecked;\n\n const handleToggle = () => {\n if (disabled) return;\n\n const newChecked = !isChecked;\n // Only update internal state if uncontrolled\n if (checked === undefined) {\n setInternalChecked(newChecked);\n }\n onChange?.(newChecked);\n };\n\n const switchClasses = [\n \"switch\",\n isChecked ? \"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={!isChecked} />\n </div>\n )}\n <button\n type=\"button\"\n role=\"switch\"\n aria-checked={isChecked}\n className={switchClasses}\n onClick={handleToggle}\n disabled={disabled}\n >\n <span className=\"switch-track\">\n <span className=\"switch-thumb\">\n <SwitchThumb isOff={!isChecked} />\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\ntype ProductionUnitLimit = {\n value: number;\n label?: string;\n};\ninterface ProductionUnitProps {\n onChangeInput?: (value: number) => void;\n onChangeSwitch?: (checked: boolean) => void;\n defaultValue?: number;\n defaultChecked?: boolean;\n value?: number;\n checked?: boolean;\n unitName?: string;\n energyCost?: number;\n checkedImage?: React.ReactNode;\n uncheckedImage?: React.ReactNode;\n readonly?: boolean;\n min?: ProductionUnitLimit;\n max?: ProductionUnitLimit;\n}\nexport const ProductionUnit = ({\n onChangeInput,\n onChangeSwitch,\n defaultValue,\n defaultChecked = false,\n value,\n checked,\n unitName = \"Production Unit\",\n energyCost = 0,\n checkedImage,\n uncheckedImage,\n readonly = false,\n min = { value: 10, label: \"Pmin\" },\n max = { value: 100, label: \"Pmax\" },\n}: ProductionUnitProps) => {\n // Internal state management for uncontrolled mode\n const [internalChecked, setInternalChecked] = useState(defaultChecked);\n const [internalValue, setInternalValue] = useState(defaultValue);\n\n // Use controlled props if provided, otherwise use internal state\n const isChecked = checked !== undefined ? checked : internalChecked;\n const currentValue = value !== undefined ? value : internalValue;\n\n const handleSwitchChange = (newChecked: boolean) => {\n // Update internal state only if uncontrolled\n if (checked === undefined) {\n setInternalChecked(newChecked);\n }\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 only if uncontrolled\n if (value === undefined) {\n setInternalValue(numValue);\n }\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 {isChecked ? 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 currentValue !== undefined ? currentValue.toString() : undefined\n }\n disabled={!isChecked || readonly}\n min={{ value: min.value, label: min.label }}\n max={{ value: max.value, label: max.label }}\n />{\" \"}\n </div>\n </div>\n\n <Switch\n checked={isChecked}\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","_l","isOutOfRange","setIsOutOfRange","inputRef","useRef","useEffect","containerClasses","length","filter","Boolean","join","_jsx","jsx","children","_jsxs","jsxs","ref","e","newValue","target","numValue","parseFloat","isNaN","outOfRange","onFocus","onBlur","clampedValue","Math","clampedString","toString","undefined","step","ImgOn","isOff","width","height","viewBox","fill","xmlns","d","SwitchThumb","cx","cy","r","Switch","checked","showIcon","internalChecked","setInternalChecked","isChecked","switchClasses","role","onClick","newChecked","Chip","bgColor","textColor","chipClasses","style","backgroundColor","color","relative","barHeight","barWidth","orientation","cornerRadius","animatedHeight","setAnimatedHeight","animatedWidth","setAnimatedWidth","targetHeight","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","currentValue","val","Number"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../src/components/Input.tsx","../src/components/Switch.tsx","../src/components/Chip.tsx","../src/components/ProductionUnitContainer.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 [isOutOfRange, setIsOutOfRange] = 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 \n // Check if value is out of range for visual feedback (but don't clamp yet)\n if (type === \"number\" && newValue !== \"\") {\n const numValue = parseFloat(newValue);\n if (!isNaN(numValue)) {\n const outOfRange = numValue < min.value || numValue > max.value;\n setIsOutOfRange(outOfRange);\n } else {\n setIsOutOfRange(false);\n }\n } else {\n setIsOutOfRange(false);\n }\n \n // Allow typing without immediate validation\n // Validation will happen on blur\n setInternalValue(newValue);\n onChange?.(newValue);\n };\n\n const handleFocus = () => {\n setIsFocused(true);\n };\n\n const handleBlur = () => {\n setIsFocused(false);\n\n // Validate and clamp value on blur for number inputs\n if (type === \"number\" && internalValue !== \"\") {\n const numValue = parseFloat(internalValue);\n if (!isNaN(numValue)) {\n const clampedValue = Math.max(min.value, Math.min(max.value, numValue));\n if (clampedValue !== numValue) {\n const clampedString = clampedValue.toString();\n setInternalValue(clampedString);\n onChange?.(clampedString);\n }\n setIsOutOfRange(false); // Reset out-of-range state after clamping\n }\n }\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 isOutOfRange ? \"input-container--error\" : \"\",\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 min={type === \"number\" ? min.value : undefined}\n max={type === \"number\" ? max.value : undefined}\n step={type === \"number\" ? 1 : undefined}\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 // Use controlled value if provided, otherwise use internal state\n const isChecked = checked !== undefined ? checked : internalChecked;\n\n const handleToggle = () => {\n if (disabled) return;\n\n const newChecked = !isChecked;\n // Only update internal state if uncontrolled\n if (checked === undefined) {\n setInternalChecked(newChecked);\n }\n onChange?.(newChecked);\n };\n\n const switchClasses = [\n \"switch\",\n isChecked ? \"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={!isChecked} />\n </div>\n )}\n <button\n type=\"button\"\n role=\"switch\"\n aria-checked={isChecked}\n className={switchClasses}\n onClick={handleToggle}\n disabled={disabled}\n >\n <span className=\"switch-track\">\n <span className=\"switch-thumb\">\n <SwitchThumb isOff={!isChecked} />\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 \"./ProductionUnitContainer.css\";\n\ninterface ProductionUnitContainerProps {\n bgColor?: string;\n children: React.ReactNode;\n height?: string;\n}\nexport const ProductionUnitContainer = ({\n bgColor = \"#fff\",\n children,\n height,\n}: ProductionUnitContainerProps) => {\n return (\n <div\n className=\"production-unit-container-box\"\n style={{ backgroundColor: bgColor, height }}\n >\n {children}\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\";\nimport { ProductionUnitContainer } from \"./ProductionUnitContainer\";\n\ntype ProductionUnitLimit = {\n value: number;\n label?: string;\n};\ninterface ProductionUnitProps {\n onChangeInput?: (value: number) => void;\n onChangeSwitch?: (checked: boolean) => void;\n defaultValue?: number;\n defaultChecked?: boolean;\n value?: number;\n checked?: boolean;\n unitName?: string;\n energyCost?: number;\n checkedImage?: React.ReactNode;\n uncheckedImage?: React.ReactNode;\n readonly?: boolean;\n min?: ProductionUnitLimit;\n max?: ProductionUnitLimit;\n}\nexport const ProductionUnit = ({\n onChangeInput,\n onChangeSwitch,\n defaultValue,\n defaultChecked = false,\n value,\n checked,\n unitName = \"Production Unit\",\n energyCost = 0,\n checkedImage,\n uncheckedImage,\n readonly = false,\n min = { value: 10, label: \"Pmin\" },\n max = { value: 100, label: \"Pmax\" },\n}: ProductionUnitProps) => {\n // Internal state management for uncontrolled mode\n const [internalChecked, setInternalChecked] = useState(defaultChecked);\n const [internalValue, setInternalValue] = useState(defaultValue);\n\n // Use controlled props if provided, otherwise use internal state\n const isChecked = checked !== undefined ? checked : internalChecked;\n const currentValue = value !== undefined ? value : internalValue;\n\n const handleSwitchChange = (newChecked: boolean) => {\n // Update internal state only if uncontrolled\n if (checked === undefined) {\n setInternalChecked(newChecked);\n }\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 only if uncontrolled\n if (value === undefined) {\n setInternalValue(numValue);\n }\n\n // Notify parent component if handler provided\n if (onChangeInput) {\n onChangeInput(numValue);\n }\n };\n\n return (\n <ProductionUnitContainer>\n <div className=\"production-unit-container\">\n <div className=\"production-unit-content\">\n <div className=\"image-preview-container\">\n {isChecked ? 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 currentValue !== undefined ? currentValue.toString() : undefined\n }\n disabled={!isChecked || readonly}\n min={{ value: min.value, label: min.label }}\n max={{ value: max.value, label: max.label }}\n />{\" \"}\n </div>\n </div>\n\n <Switch\n checked={isChecked}\n onChange={handleSwitchChange}\n disabled={readonly}\n />\n </div>\n </ProductionUnitContainer>\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","_l","isOutOfRange","setIsOutOfRange","inputRef","useRef","useEffect","containerClasses","length","filter","Boolean","join","_jsx","jsx","children","_jsxs","jsxs","ref","e","newValue","target","numValue","parseFloat","isNaN","outOfRange","onFocus","onBlur","clampedValue","Math","clampedString","toString","undefined","step","ImgOn","isOff","width","height","viewBox","fill","xmlns","d","SwitchThumb","cx","cy","r","Switch","checked","showIcon","internalChecked","setInternalChecked","isChecked","switchClasses","role","onClick","newChecked","Chip","bgColor","textColor","chipClasses","style","backgroundColor","color","ProductionUnitContainer","relative","barHeight","barWidth","orientation","cornerRadius","animatedHeight","setAnimatedHeight","animatedWidth","setAnimatedWidth","targetHeight","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","currentValue","val","Number"],"mappings":"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"}
|