rte-utils 1.2.11 → 1.2.13

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.
Files changed (13) hide show
  1. package/dist/components/Avatar.stories.d.ts +11 -0
  2. package/dist/components/Chip.stories.d.ts +11 -0
  3. package/dist/components/Histogram.stories.d.ts +11 -0
  4. package/dist/components/Input.stories.d.ts +13 -0
  5. package/dist/components/ProductionUnit.stories.d.ts +11 -0
  6. package/dist/components/Switch.stories.d.ts +13 -0
  7. package/dist/index.css +1 -1
  8. package/dist/index.esm.css +1 -1
  9. package/dist/index.esm.js +1 -1
  10. package/dist/index.esm.js.map +1 -1
  11. package/dist/index.js +1 -1
  12. package/dist/index.js.map +1 -1
  13. package/package.json +17 -3
package/dist/components/Avatar.stories.d.ts ADDED
@@ -0,0 +1,11 @@
1
+ import type { Meta, StoryObj } from "@storybook/react";
2
+ import { Avatar } from "./Avatar";
3
+ declare const meta: Meta<typeof Avatar>;
4
+ export default meta;
5
+ type Story = StoryObj<typeof meta>;
6
+ export declare const Default: Story;
7
+ export declare const WithImage: Story;
8
+ export declare const WithIcon: Story;
9
+ export declare const WithInitials: Story;
10
+ export declare const WithEmoji: Story;
11
+ export declare const WithCustomContent: Story;
package/dist/components/Chip.stories.d.ts ADDED
@@ -0,0 +1,11 @@
1
+ import type { Meta, StoryObj } from '@storybook/react';
2
+ import { Chip } from './Chip';
3
+ declare const meta: Meta<typeof Chip>;
4
+ export default meta;
5
+ type Story = StoryObj<typeof meta>;
6
+ export declare const Default: Story;
7
+ export declare const CustomColors: Story;
8
+ export declare const FullWidth: Story;
9
+ export declare const Status: Story;
10
+ export declare const Warning: Story;
11
+ export declare const Error: Story;
package/dist/components/Histogram.stories.d.ts ADDED
@@ -0,0 +1,11 @@
1
+ import type { Meta, StoryObj } from "@storybook/react";
2
+ import { Histogram } from "./Histogram";
3
+ declare const meta: Meta<typeof Histogram>;
4
+ export default meta;
5
+ type Story = StoryObj<typeof meta>;
6
+ export declare const Default: Story;
7
+ export declare const WithoutText: Story;
8
+ export declare const Horizontal: Story;
9
+ export declare const CustomCorners: Story;
10
+ export declare const SmallSize: Story;
11
+ export declare const LargeSize: Story;
package/dist/components/Input.stories.d.ts ADDED
@@ -0,0 +1,13 @@
1
+ import type { Meta, StoryObj } from "@storybook/react";
2
+ import { Input } from "./Input";
3
+ declare const meta: Meta<typeof Input>;
4
+ export default meta;
5
+ type Story = StoryObj<typeof meta>;
6
+ export declare const Default: Story;
7
+ export declare const WithValue: Story;
8
+ export declare const Number: Story;
9
+ export declare const Required: Story;
10
+ export declare const Disabled: Story;
11
+ export declare const CustomConstraints: Story;
12
+ export declare const TextWithConstraints: Story;
13
+ export declare const LargeNumbers: Story;
package/dist/components/ProductionUnit.stories.d.ts ADDED
@@ -0,0 +1,11 @@
1
+ import type { Meta, StoryObj } from "@storybook/react";
2
+ import { ProductionUnit } from "./ProductionUnit";
3
+ declare const meta: Meta<typeof ProductionUnit>;
4
+ export default meta;
5
+ type Story = StoryObj<typeof meta>;
6
+ export declare const Default: Story;
7
+ export declare const Active: Story;
8
+ export declare const Readonly: Story;
9
+ export declare const Controlled: Story;
10
+ export declare const WithoutImages: Story;
11
+ export declare const SmallWind: Story;
package/dist/components/Switch.stories.d.ts ADDED
@@ -0,0 +1,13 @@
1
+ import type { Meta, StoryObj } from "@storybook/react";
2
+ import { Switch } from "./Switch";
3
+ declare const meta: Meta<typeof Switch>;
4
+ export default meta;
5
+ type Story = StoryObj<typeof meta>;
6
+ export declare const Default: Story;
7
+ export declare const Checked: Story;
8
+ export declare const Disabled: Story;
9
+ export declare const DisabledChecked: Story;
10
+ export declare const WithoutIcon: Story;
11
+ export declare const CheckedWithoutIcon: Story;
12
+ export declare const PowerControl: Story;
13
+ export declare const MinimalToggle: 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:16px 12px 8px;transition:border-color .2s ease,box-shadow .2s ease;width:100%}.input-element:focus{border-color:#009cdf;box-shadow:0 0 0 2px rgba(0,156,223,.1)}.input-label{background-color:#fff;color:#999;font-size:16px;left:12px;padding:0 4px;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%);transition:all .2s ease;white-space:nowrap}.input-required{color:#e74c3c;margin-left:2px}.input-container--floating .input-label,.input-container--focused .input-label{font-size:12px;font-weight:500;top:0;transform:translateY(-50%)}.input-container--focused .input-element{border-color:#009cdf;box-shadow:0 0 0 2px rgba(0,156,223,.1)}.input-container--focused .input-label{color:#009cdf}.input-container--error .input-element{border-color:#e74c3c}.input-container--error .input-element:focus{border-color:#e74c3c;box-shadow:0 0 0 2px rgba(231,76,60,.1)}.input-container--error .input-label,.input-error{color:#e74c3c}.input-error{font-size:12px;margin-top:4px;padding-left:12px}.input-container--disabled .input-element{background-color:#f5f5f5;border-color:#d0d0d0;color:#999;cursor:not-allowed}.input-container--disabled .input-label{color:#999}.input-element:not(:disabled):hover{border-color:#009cdf}.input-container--error .input-element:not(:disabled):hover{border-color:#e74c3c}.input-element:-webkit-autofill{-webkit-text-fill-color:inherit!important}.input-element:-webkit-autofill,.input-element:-webkit-autofill:focus{-webkit-box-shadow:inset 0 0 0 30px #fff!important}.input-container--small .input-element{font-size:14px;padding:12px 8px 6px}.input-container--small .input-label{font-size:14px;left:8px}.input-container--small.input-container--floating .input-label,.input-container--small.input-container--focused .input-label{font-size:10px}.input-container--large .input-element{font-size:18px;padding:20px 16px 10px}.input-container--large .input-label{font-size:18px;left:16px}.input-container--large.input-container--floating .input-label,.input-container--large.input-container--focused .input-label{font-size:14px}.input-constraints{align-items:center;display:flex;gap:8px;justify-content:space-between}.input-max,.input-min{color:#999;font-size:12px;text-align:center}.input-container--focused .input-max,.input-container--focused .input-min{color:#009cdf;font-weight:500}.switch-container{align-items:center;display:flex;gap:8px}.switch-wrapper{flex-direction:column;gap:4px}.switch-icon,.switch-wrapper{align-items:center;display:flex}.switch-icon{height:16px;justify-content:center;width:16px}.switch-power-icon{height:100%;object-fit:contain;width:100%}.switch{background:none;border:none;cursor:pointer;outline:none;padding:0;transition:all .2s ease}.switch:focus-visible{outline:2px solid #009cdf;outline-offset:2px}.switch--disabled{cursor:not-allowed;opacity:.5}.switch-track{background-color:#999fa1;border-radius:60px;display:block;position:relative;transition:background-color .2s ease}.switch--checked .switch-track{background-color:#82d4f6}.switch-thumb{align-items:center;background-color:#fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2);display:flex;justify-content:center;left:0;position:absolute;top:-3px;transition:transform .2s ease}.switch-thumb-icon{height:100%;object-fit:contain;width:100%}.switch-track{height:10px;width:32px}.switch-thumb{height:16px;width:16px}.switch--checked .switch-thumb{transform:translateX(16px)}.switch:not(.switch--disabled):hover .switch-track{filter:brightness(1.1)}.switch:not(.switch--disabled):active .switch-thumb{transform:scale(1.1)}.switch--checked:not(.switch--disabled):active .switch-thumb{transform:translateX(16px) scale(1.1)}.switch--small.switch--checked:not(.switch--disabled):active .switch-thumb{transform:translateX(12px) scale(1.1)}.switch--large.switch--checked:not(.switch--disabled):active .switch-thumb{transform:translateX(20px) scale(1.1)}.production-unit-container{align-items:center;background-color:#fff;border-radius:64px;box-shadow:0 2px 16px 0 rgba(0,0,0,.16);box-sizing:border-box;display:flex;height:64px;justify-content:space-between;padding-right:24px}.production-unit-content{align-items:center;display:flex;gap:16px}.production-unit-chip{display:flex;flex-direction:column;flex-shrink:0}.production-unit-chip-name{word-wrap:break-word;color:#11161a;font-size:16px;font-weight:600;line-height:24px}.production-unit-switch-container{width:156px}.chip-container{align-items:center;background-color:var(--chip-bg-color,#e0e0e0);border-radius:60px;color:var(--chip-text-color,#000);display:inline-flex;min-width:84px;padding:4px 8px}.chip-container--fit-content{width:fit-content}.chip-container--full-width{width:100%}.chip-content{align-items:center;display:flex;flex-grow:1;gap:.5rem;justify-content:center}.chip-label{font-size:14px;font-weight:600;margin:0}@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap");*{font-family:Open Sans,sans-serif}.histogram-container{height:auto;max-width:54px;position:relative}.histogram-container--horizontal{max-width:none;width:auto}.histogram-content{align-items:center;display:flex;flex-direction:column;gap:8px;width:100%}.histogram-content--horizontal{align-items:center;flex-direction:row;height:100%}.histogram-bar{position:relative}.histogram-svg{display:block}.histogram-text-container{align-items:center;display:flex;flex-direction:column;gap:0;width:100%}.histogram-text-container--horizontal{align-items:flex-start;margin-left:8px}.histogram-value-container{text-align:center;width:40px}.histogram-value{font-size:16px;line-height:14px}.histogram-unit,.histogram-value{color:#000;display:block;font-weight:600;margin:0}.histogram-unit{font-size:12px}.histogram-label{color:#6f6f6f;font-size:12px;font-style:normal;font-weight:400;line-height:18px;margin:0;text-align:left;white-space:nowrap}.avatar-container{align-items:center;border-radius:50%;color:#333;display:inline-flex;font-size:20px;font-weight:500;height:64px;justify-content:center;overflow:hidden;position:relative;user-select:none;width:64px}.avatar-container--clickable{cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.avatar-container--clickable:hover{box-shadow:0 2px 8px rgba(0,0,0,.15);transform:scale(1.05)}.avatar-container--clickable:active{transform:scale(.95)}.avatar-content{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.avatar-content img{height:100%;object-fit:cover;width:100%}.avatar-content{line-height:1;text-transform:uppercase}
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:16px 12px 8px;transition:border-color .2s ease,box-shadow .2s ease;width:100%}.input-element:focus{border-color:#009cdf;box-shadow:0 0 0 2px rgba(0,156,223,.1)}.input-label{background-color:#fff;color:#999;font-size:16px;left:12px;padding:0 4px;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%);transition:all .2s ease;white-space:nowrap}.input-required{color:#e74c3c;margin-left:2px}.input-container--floating .input-label,.input-container--focused .input-label{font-size:12px;font-weight:500;top:0;transform:translateY(-50%)}.input-container--focused .input-element{border-color:#009cdf;box-shadow:0 0 0 2px rgba(0,156,223,.1)}.input-container--focused .input-label{color:#009cdf}.input-container--error .input-element{border-color:#e74c3c}.input-container--error .input-element:focus{border-color:#e74c3c;box-shadow:0 0 0 2px rgba(231,76,60,.1)}.input-container--error .input-label,.input-error{color:#e74c3c}.input-error{font-size:12px;margin-top:4px;padding-left:12px}.input-container--disabled .input-element{background-color:#f5f5f5;border-color:#d0d0d0;color:#999;cursor:not-allowed}.input-container--disabled .input-label{color:#999}.input-element:not(:disabled):hover{border-color:#009cdf}.input-container--error .input-element:not(:disabled):hover{border-color:#e74c3c}.input-element:-webkit-autofill{-webkit-text-fill-color:inherit!important}.input-element:-webkit-autofill,.input-element:-webkit-autofill:focus{-webkit-box-shadow:inset 0 0 0 30px #fff!important}.input-container--small .input-element{font-size:14px;padding:12px 8px 6px}.input-container--small .input-label{font-size:14px;left:8px}.input-container--small.input-container--floating .input-label,.input-container--small.input-container--focused .input-label{font-size:10px}.input-container--large .input-element{font-size:18px;padding:20px 16px 10px}.input-container--large .input-label{font-size:18px;left:16px}.input-container--large.input-container--floating .input-label,.input-container--large.input-container--focused .input-label{font-size:14px}.input-constraints{align-items:center;display:flex;gap:8px;justify-content:space-between}.input-max,.input-min{color:#999;font-size:12px;text-align:center}.input-container--focused .input-max,.input-container--focused .input-min{color:#009cdf;font-weight:500}.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;background-color:#fff;border-radius:64px;box-shadow:0 2px 16px 0 rgba(0,0,0,.16);box-sizing:border-box;display:flex;height:64px;justify-content:space-between;padding-right:24px}.production-unit-content{align-items:center;display:flex;gap:16px}.production-unit-chip{display:flex;flex-direction:column;flex-shrink:0}.production-unit-chip-name{word-wrap:break-word;color:#11161a;font-size:16px;font-weight:600;line-height:24px}.production-unit-switch-container{width:156px}.chip-container{align-items:center;background-color:var(--chip-bg-color,#e0e0e0);border-radius:60px;color:var(--chip-text-color,#000);display:inline-flex;min-width:84px;padding:4px 8px}.chip-container--fit-content{width:fit-content}.chip-container--full-width{width:100%}.chip-content{align-items:center;display:flex;flex-grow:1;gap:.5rem;justify-content:center}.chip-label{font-size:14px;font-weight:600;margin:0}@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap");*{font-family:Open Sans,sans-serif}.histogram-container{height:auto;max-width:54px;position:relative}.histogram-container--horizontal{max-width:none;width:auto}.histogram-content{align-items:center;display:flex;flex-direction:column;gap:8px;width:100%}.histogram-content--horizontal{align-items:center;flex-direction:row;height:100%}.histogram-bar{position:relative}.histogram-svg{display:block}.histogram-text-container{align-items:center;display:flex;flex-direction:column;gap:0;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:16px 12px 8px;transition:border-color .2s ease,box-shadow .2s ease;width:100%}.input-element:focus{border-color:#009cdf;box-shadow:0 0 0 2px rgba(0,156,223,.1)}.input-label{background-color:#fff;color:#999;font-size:16px;left:12px;padding:0 4px;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%);transition:all .2s ease;white-space:nowrap}.input-required{color:#e74c3c;margin-left:2px}.input-container--floating .input-label,.input-container--focused .input-label{font-size:12px;font-weight:500;top:0;transform:translateY(-50%)}.input-container--focused .input-element{border-color:#009cdf;box-shadow:0 0 0 2px rgba(0,156,223,.1)}.input-container--focused .input-label{color:#009cdf}.input-container--error .input-element{border-color:#e74c3c}.input-container--error .input-element:focus{border-color:#e74c3c;box-shadow:0 0 0 2px rgba(231,76,60,.1)}.input-container--error .input-label,.input-error{color:#e74c3c}.input-error{font-size:12px;margin-top:4px;padding-left:12px}.input-container--disabled .input-element{background-color:#f5f5f5;border-color:#d0d0d0;color:#999;cursor:not-allowed}.input-container--disabled .input-label{color:#999}.input-element:not(:disabled):hover{border-color:#009cdf}.input-container--error .input-element:not(:disabled):hover{border-color:#e74c3c}.input-element:-webkit-autofill{-webkit-text-fill-color:inherit!important}.input-element:-webkit-autofill,.input-element:-webkit-autofill:focus{-webkit-box-shadow:inset 0 0 0 30px #fff!important}.input-container--small .input-element{font-size:14px;padding:12px 8px 6px}.input-container--small .input-label{font-size:14px;left:8px}.input-container--small.input-container--floating .input-label,.input-container--small.input-container--focused .input-label{font-size:10px}.input-container--large .input-element{font-size:18px;padding:20px 16px 10px}.input-container--large .input-label{font-size:18px;left:16px}.input-container--large.input-container--floating .input-label,.input-container--large.input-container--focused .input-label{font-size:14px}.input-constraints{align-items:center;display:flex;gap:8px;justify-content:space-between}.input-max,.input-min{color:#999;font-size:12px;text-align:center}.input-container--focused .input-max,.input-container--focused .input-min{color:#009cdf;font-weight:500}.switch-container{align-items:center;display:flex;gap:8px}.switch-wrapper{flex-direction:column;gap:4px}.switch-icon,.switch-wrapper{align-items:center;display:flex}.switch-icon{height:16px;justify-content:center;width:16px}.switch-power-icon{height:100%;object-fit:contain;width:100%}.switch{background:none;border:none;cursor:pointer;outline:none;padding:0;transition:all .2s ease}.switch:focus-visible{outline:2px solid #009cdf;outline-offset:2px}.switch--disabled{cursor:not-allowed;opacity:.5}.switch-track{background-color:#999fa1;border-radius:60px;display:block;position:relative;transition:background-color .2s ease}.switch--checked .switch-track{background-color:#82d4f6}.switch-thumb{align-items:center;background-color:#fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2);display:flex;justify-content:center;left:0;position:absolute;top:-3px;transition:transform .2s ease}.switch-thumb-icon{height:100%;object-fit:contain;width:100%}.switch-track{height:10px;width:32px}.switch-thumb{height:16px;width:16px}.switch--checked .switch-thumb{transform:translateX(16px)}.switch:not(.switch--disabled):hover .switch-track{filter:brightness(1.1)}.switch:not(.switch--disabled):active .switch-thumb{transform:scale(1.1)}.switch--checked:not(.switch--disabled):active .switch-thumb{transform:translateX(16px) scale(1.1)}.switch--small.switch--checked:not(.switch--disabled):active .switch-thumb{transform:translateX(12px) scale(1.1)}.switch--large.switch--checked:not(.switch--disabled):active .switch-thumb{transform:translateX(20px) scale(1.1)}.production-unit-container{align-items:center;background-color:#fff;border-radius:64px;box-shadow:0 2px 16px 0 rgba(0,0,0,.16);box-sizing:border-box;display:flex;height:64px;justify-content:space-between;padding-right:24px}.production-unit-content{align-items:center;display:flex;gap:16px}.production-unit-chip{display:flex;flex-direction:column;flex-shrink:0}.production-unit-chip-name{word-wrap:break-word;color:#11161a;font-size:16px;font-weight:600;line-height:24px}.production-unit-switch-container{width:156px}.chip-container{align-items:center;background-color:var(--chip-bg-color,#e0e0e0);border-radius:60px;color:var(--chip-text-color,#000);display:inline-flex;min-width:84px;padding:4px 8px}.chip-container--fit-content{width:fit-content}.chip-container--full-width{width:100%}.chip-content{align-items:center;display:flex;flex-grow:1;gap:.5rem;justify-content:center}.chip-label{font-size:14px;font-weight:600;margin:0}@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap");*{font-family:Open Sans,sans-serif}.histogram-container{height:auto;max-width:54px;position:relative}.histogram-container--horizontal{max-width:none;width:auto}.histogram-content{align-items:center;display:flex;flex-direction:column;gap:8px;width:100%}.histogram-content--horizontal{align-items:center;flex-direction:row;height:100%}.histogram-bar{position:relative}.histogram-svg{display:block}.histogram-text-container{align-items:center;display:flex;flex-direction:column;gap:0;width:100%}.histogram-text-container--horizontal{align-items:flex-start;margin-left:8px}.histogram-value-container{text-align:center;width:40px}.histogram-value{font-size:16px;line-height:14px}.histogram-unit,.histogram-value{color:#000;display:block;font-weight:600;margin:0}.histogram-unit{font-size:12px}.histogram-label{color:#6f6f6f;font-size:12px;font-style:normal;font-weight:400;line-height:18px;margin:0;text-align:left;white-space:nowrap}.avatar-container{align-items:center;border-radius:50%;color:#333;display:inline-flex;font-size:20px;font-weight:500;height:64px;justify-content:center;overflow:hidden;position:relative;user-select:none;width:64px}.avatar-container--clickable{cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.avatar-container--clickable:hover{box-shadow:0 2px 8px rgba(0,0,0,.15);transform:scale(1.05)}.avatar-container--clickable:active{transform:scale(.95)}.avatar-content{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.avatar-content img{height:100%;object-fit:cover;width:100%}.avatar-content{line-height:1;text-transform:uppercase}
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:16px 12px 8px;transition:border-color .2s ease,box-shadow .2s ease;width:100%}.input-element:focus{border-color:#009cdf;box-shadow:0 0 0 2px rgba(0,156,223,.1)}.input-label{background-color:#fff;color:#999;font-size:16px;left:12px;padding:0 4px;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%);transition:all .2s ease;white-space:nowrap}.input-required{color:#e74c3c;margin-left:2px}.input-container--floating .input-label,.input-container--focused .input-label{font-size:12px;font-weight:500;top:0;transform:translateY(-50%)}.input-container--focused .input-element{border-color:#009cdf;box-shadow:0 0 0 2px rgba(0,156,223,.1)}.input-container--focused .input-label{color:#009cdf}.input-container--error .input-element{border-color:#e74c3c}.input-container--error .input-element:focus{border-color:#e74c3c;box-shadow:0 0 0 2px rgba(231,76,60,.1)}.input-container--error .input-label,.input-error{color:#e74c3c}.input-error{font-size:12px;margin-top:4px;padding-left:12px}.input-container--disabled .input-element{background-color:#f5f5f5;border-color:#d0d0d0;color:#999;cursor:not-allowed}.input-container--disabled .input-label{color:#999}.input-element:not(:disabled):hover{border-color:#009cdf}.input-container--error .input-element:not(:disabled):hover{border-color:#e74c3c}.input-element:-webkit-autofill{-webkit-text-fill-color:inherit!important}.input-element:-webkit-autofill,.input-element:-webkit-autofill:focus{-webkit-box-shadow:inset 0 0 0 30px #fff!important}.input-container--small .input-element{font-size:14px;padding:12px 8px 6px}.input-container--small .input-label{font-size:14px;left:8px}.input-container--small.input-container--floating .input-label,.input-container--small.input-container--focused .input-label{font-size:10px}.input-container--large .input-element{font-size:18px;padding:20px 16px 10px}.input-container--large .input-label{font-size:18px;left:16px}.input-container--large.input-container--floating .input-label,.input-container--large.input-container--focused .input-label{font-size:14px}.input-constraints{align-items:center;display:flex;gap:8px;justify-content:space-between}.input-max,.input-min{color:#999;font-size:12px;text-align:center}.input-container--focused .input-max,.input-container--focused .input-min{color:#009cdf;font-weight:500}.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;background-color:#fff;border-radius:64px;box-shadow:0 2px 16px 0 rgba(0,0,0,.16);box-sizing:border-box;display:flex;height:64px;justify-content:space-between;padding-right:24px}.production-unit-content{align-items:center;display:flex;gap:16px}.production-unit-chip{display:flex;flex-direction:column;flex-shrink:0}.production-unit-chip-name{word-wrap:break-word;color:#11161a;font-size:16px;font-weight:600;line-height:24px}.production-unit-switch-container{width:156px}.chip-container{align-items:center;background-color:var(--chip-bg-color,#e0e0e0);border-radius:60px;color:var(--chip-text-color,#000);display:inline-flex;min-width:84px;padding:4px 8px}.chip-container--fit-content{width:fit-content}.chip-container--full-width{width:100%}.chip-content{align-items:center;display:flex;flex-grow:1;gap:.5rem;justify-content:center}.chip-label{font-size:14px;font-weight:600;margin:0}@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap");*{font-family:Open Sans,sans-serif}.histogram-container{height:auto;max-width:54px;position:relative}.histogram-container--horizontal{max-width:none;width:auto}.histogram-content{align-items:center;display:flex;flex-direction:column;gap:8px;width:100%}.histogram-content--horizontal{align-items:center;flex-direction:row;height:100%}.histogram-bar{position:relative}.histogram-svg{display:block}.histogram-text-container{align-items:center;display:flex;flex-direction:column;gap:0;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 o,useEffect as e}from"react";var a=function(a){var c=a.label,l=a.value,r=void 0===l?"":l,d=a.onChange,h=a.type,s=void 0===h?"text":h,v=a.disabled,u=void 0!==v&&v,m=a.className,f=void 0===m?"":m,p=a.required,g=void 0!==p&&p,b=a.min,w=void 0===b?{value:0,label:"Pmin"}:b,N=a.max,C=void 0===N?{value:100,label:"Pmax"}:N,L=n(r),x=L[0],R=L[1],k=n(!1),y=k[0],z=k[1],M=o(null);e(function(){R(r)},[r]);var F=["input-container",y?"input-container--focused":"",y||x.length>0?"input-container--floating":"",u?"input-container--disabled":"",f].filter(Boolean).join(" ");return t("div",{className:F,children:i("div",{className:"input-constraints",children:[i("div",{className:"input-min",children:[w.label,t("br",{}),w.value]}),i("div",{className:"input-field",children:[t("input",{ref:M,type:s,value:x,onChange:function(t){var i=t.target.value;R(i),null==d||d(i)},onFocus:function(){z(!0)},onBlur:function(){z(!1)},disabled:u,required:g,className:"input-element","aria-label":c}),i("label",{className:"input-label",children:[c,g&&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(o){var e=o.checked,a=void 0!==e&&e,r=o.onChange,d=o.disabled,h=void 0!==d&&d,s=o.showIcon,v=void 0===s||s,u=n(a),m=u[0],f=u[1],p=void 0!==a?a:m,g=["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:g,onClick:function(){if(!h){var t=!p;void 0===a&&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,o=i.bgColor,e=i.textColor,a=i.width,c=["chip-container","full-width"===(void 0===a?"fit-content":a)?"chip-container--full-width":"chip-container--fit-content"].join(" ");return t("div",{className:c,style:{backgroundColor:o},children:t("div",{className:"chip-content",children:t("p",{className:"chip-label",style:{color:e},children:n})})})},h=function(o){var e=o.onChangeInput,c=o.onChangeSwitch,l=o.defaultValue,h=o.defaultChecked,s=void 0!==h&&h,v=o.value,u=o.checked,m=o.unitName,f=void 0===m?"Production Unit":m,p=o.energyCost,g=void 0===p?0:p,b=o.checkedImage,w=o.uncheckedImage,N=o.readonly,C=void 0!==N&&N,L=n(s),x=L[0],R=L[1],k=n(l),y=k[0],z=k[1],M=void 0!==u?u:x,F=void 0!==v?v:y;return i("div",{className:"production-unit-container",children:[i("div",{className:"production-unit-content",children:[t("div",{className:"image-preview-container",children:M?b:w}),i("div",{className:"production-unit-chip",children:[t("div",{className:"production-unit-chip-name",children:f}),t(d,{label:"".concat(g," MW"),width:"fit-content",bgColor:"#E1F5FD",textColor:"#005896"})]}),i("div",{className:"production-unit-switch-container",children:[t(a,{label:"PA",type:"number",onChange:function(t){var i=Number(t);void 0===v&&z(i),e&&e(i)},value:void 0!==F?F.toString():void 0,disabled:!M||C})," "]})]}),t(r,{checked:M,onChange:function(t){void 0===u&&R(t),c&&c(t)},disabled:C})]})},s=function(o){var a,c,l,r,d=o.max,h=o.relative,s=o.barHeight,v=void 0===s?103:s,u=o.barWidth,m=void 0===u?32:u,f=o.orientation,p=void 0===f?"vertical":f,g=o.cornerRadius,b=o.children,w=n(0),N=w[0],C=w[1],L=n(0),x=L[0],R=L[1],k=Math.min(h.value/d.value*100,100)/100*v,y=Math.min(h.value/d.value*100,100)/100*m;e(function(){C(0),R(0);var t=Date.now(),i=function(){var n=Date.now()-t,o=Math.min(n/1e3,1),e=1-Math.pow(1-o,4);C(k*e),R(y*e),o<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,q=function(t,i,n,o,e){var a=e.topLeft,c=e.topRight,l=e.bottomLeft,r=e.bottomRight;return"\n M ".concat(t+a," ").concat(i,"\n L ").concat(t+n-c," ").concat(i,"\n Q ").concat(t+n," ").concat(i," ").concat(t+n," ").concat(i+c,"\n L ").concat(t+n," ").concat(i+o-r,"\n Q ").concat(t+n," ").concat(i+o," ").concat(t+n-r," ").concat(i+o,"\n L ").concat(t+l," ").concat(i+o,"\n Q ").concat(t," ").concat(i+o," ").concat(t," ").concat(i+o-l,"\n L ").concat(t," ").concat(i+a,"\n Q ").concat(t," ").concat(i," ").concat(t+a," ").concat(i,"\n Z\n ").trim().replace(/\s+/g," ")},O={topLeft:2,topRight:2,bottomLeft:2,bottomRight:2},j=g?{topLeft:null!==(a=g.topLeft)&&void 0!==a?a:O.topLeft,topRight:null!==(c=g.topRight)&&void 0!==c?c:O.topRight,bottomLeft:null!==(l=g.bottomLeft)&&void 0!==l?l:O.bottomLeft,bottomRight:null!==(r=g.bottomRight)&&void 0!==r?r:O.bottomRight}:O;return t("div",{className:"histogram-container ".concat("horizontal"===p?"histogram-container--horizontal":""),children: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:q(0,0,F,B,j),fill:d.color,fillOpacity:d.opacity||1}),t("path","vertical"===p?{d:q(0,B-N,F,N,{topLeft:N>=B?j.topLeft:0,topRight:N>=B?j.topRight:0,bottomLeft:j.bottomLeft,bottomRight:j.bottomRight}),fill:h.color}:{d:q(0,0,x,B,{topLeft:j.topLeft,topRight:x>=F?j.topRight:0,bottomLeft:j.bottomLeft,bottomRight:x>=F?j.bottomRight:0}),fill:h.color})]})}),b&&t("div",{className:"histogram-text-container ".concat("horizontal"===p?"histogram-text-container--horizontal":""),children:b})]})})},v=function(i){var n=i.children;return t("div",{className:"avatar-container avatar-container--clickable",children:t("div",{className:"avatar-content",children:n})})};export{v as Avatar,d as Chip,s as Histogram,a as Input,h as ProductionUnit,r as Switch};
1
+ import{jsx as t,jsxs as i}from"react/jsx-runtime";import{useState as n,useRef as o,useEffect as a}from"react";var e=function(e){var c=e.label,l=e.value,r=void 0===l?"":l,d=e.onChange,h=e.type,s=void 0===h?"text":h,v=e.disabled,u=void 0!==v&&v,m=e.className,f=void 0===m?"":m,p=e.required,g=void 0!==p&&p,b=e.min,w=void 0===b?{value:0,label:"Pmin"}:b,N=e.max,C=void 0===N?{value:100,label:"Pmax"}:N,x=n(r),L=x[0],R=x[1],y=n(!1),k=y[0],M=y[1],z=o(null);a(function(){R(r)},[r]);var F=["input-container",k?"input-container--focused":"",k||L.length>0?"input-container--floating":"",u?"input-container--disabled":"",f].filter(Boolean).join(" ");return t("div",{className:F,children:i("div",{className:"input-constraints",children:[i("div",{className:"input-min",children:[w.label,t("br",{}),w.value]}),i("div",{className:"input-field",children:[t("input",{ref:z,type:s,value:L,onChange:function(t){var i=t.target.value;if("number"===s&&""!==i){var n=parseFloat(i);if(!isNaN(n)){var o=Math.max(w.value,Math.min(C.value,n));if(o!==n){var a=o.toString();return R(a),void(null==d||d(a))}}}R(i),null==d||d(i)},onFocus:function(){M(!0)},onBlur:function(){if(M(!1),"number"===s&&""!==L){var t=parseFloat(L);if(!isNaN(t)){var i=Math.max(w.value,Math.min(C.value,t));if(i!==t){var n=i.toString();R(n),null==d||d(n)}}}},disabled:u,required:g,className:"input-element","aria-label":c,min:"number"===s?w.value:void 0,max:"number"===s?C.value:void 0,step:"number"===s?"any":void 0}),i("label",{className:"input-label",children:[c,g&&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(o){var a=o.checked,e=void 0!==a&&a,r=o.onChange,d=o.disabled,h=void 0!==d&&d,s=o.showIcon,v=void 0===s||s,u=n(e),m=u[0],f=u[1],p=void 0!==e?e:m,g=["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:g,onClick:function(){if(!h){var t=!p;void 0===e&&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,o=i.bgColor,a=i.textColor,e=i.width,c=["chip-container","full-width"===(void 0===e?"fit-content":e)?"chip-container--full-width":"chip-container--fit-content"].join(" ");return t("div",{className:c,style:{backgroundColor:o},children:t("div",{className:"chip-content",children:t("p",{className:"chip-label",style:{color:a},children:n})})})},h=function(o){var a=o.onChangeInput,c=o.onChangeSwitch,l=o.defaultValue,h=o.defaultChecked,s=void 0!==h&&h,v=o.value,u=o.checked,m=o.unitName,f=void 0===m?"Production Unit":m,p=o.energyCost,g=void 0===p?0:p,b=o.checkedImage,w=o.uncheckedImage,N=o.readonly,C=void 0!==N&&N,x=n(s),L=x[0],R=x[1],y=n(l),k=y[0],M=y[1],z=void 0!==u?u:L,F=void 0!==v?v:k;return i("div",{className:"production-unit-container",children:[i("div",{className:"production-unit-content",children:[t("div",{className:"image-preview-container",children:z?b:w}),i("div",{className:"production-unit-chip",children:[t("div",{className:"production-unit-chip-name",children:f}),t(d,{label:"".concat(g," MW"),width:"fit-content",bgColor:"#E1F5FD",textColor:"#005896"})]}),i("div",{className:"production-unit-switch-container",children:[t(e,{label:"PA",type:"number",onChange:function(t){var i=Number(t);void 0===v&&M(i),a&&a(i)},value:void 0!==F?F.toString():void 0,disabled:!z||C})," "]})]}),t(r,{checked:z,onChange:function(t){void 0===u&&R(t),c&&c(t)},disabled:C})]})},s=function(o){var e,c,l,r,d=o.max,h=o.relative,s=o.barHeight,v=void 0===s?103:s,u=o.barWidth,m=void 0===u?32:u,f=o.orientation,p=void 0===f?"vertical":f,g=o.cornerRadius,b=o.children,w=n(0),N=w[0],C=w[1],x=n(0),L=x[0],R=x[1],y=Math.min(h.value/d.value*100,100)/100*v,k=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,o=Math.min(n/1e3,1),a=1-Math.pow(1-o,4);C(y*a),R(k*a),o<1&&requestAnimationFrame(i)};requestAnimationFrame(i)},[y,k]);var M="horizontal"===p?v:m,z="horizontal"===p?m:v,F="horizontal"===p?v:m,B="horizontal"===p?m:v,q=function(t,i,n,o,a){var e=a.topLeft,c=a.topRight,l=a.bottomLeft,r=a.bottomRight;return"\n M ".concat(t+e," ").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+o-r,"\n Q ").concat(t+n," ").concat(i+o," ").concat(t+n-r," ").concat(i+o,"\n L ").concat(t+l," ").concat(i+o,"\n Q ").concat(t," ").concat(i+o," ").concat(t," ").concat(i+o-l,"\n L ").concat(t," ").concat(i+e,"\n Q ").concat(t," ").concat(i," ").concat(t+e," ").concat(i,"\n Z\n ").trim().replace(/\s+/g," ")},O={topLeft:2,topRight:2,bottomLeft:2,bottomRight:2},j=g?{topLeft:null!==(e=g.topLeft)&&void 0!==e?e:O.topLeft,topRight:null!==(c=g.topRight)&&void 0!==c?c:O.topRight,bottomLeft:null!==(l=g.bottomLeft)&&void 0!==l?l:O.bottomLeft,bottomRight:null!==(r=g.bottomRight)&&void 0!==r?r:O.bottomRight}:O;return t("div",{className:"histogram-container ".concat("horizontal"===p?"histogram-container--horizontal":""),children:i("div",{className:"histogram-content ".concat("horizontal"===p?"histogram-content--horizontal":""),children:[t("div",{className:"histogram-bar",style:{height:"".concat(z,"px"),width:"".concat(M,"px")},children:i("svg",{width:F,height:B,viewBox:"0 0 ".concat(F," ").concat(B),className:"histogram-svg",children:[t("path",{d:q(0,0,F,B,j),fill:d.color,fillOpacity:d.opacity||1}),t("path","vertical"===p?{d:q(0,B-N,F,N,{topLeft:N>=B?j.topLeft:0,topRight:N>=B?j.topRight:0,bottomLeft:j.bottomLeft,bottomRight:j.bottomRight}),fill:h.color}:{d:q(0,0,L,B,{topLeft:j.topLeft,topRight:L>=F?j.topRight:0,bottomLeft:j.bottomLeft,bottomRight:L>=F?j.bottomRight:0}),fill:h.color})]})}),b&&t("div",{className:"histogram-text-container ".concat("horizontal"===p?"histogram-text-container--horizontal":""),children:b})]})})},v=function(i){var n=i.children;return t("div",{className:"avatar-container avatar-container--clickable",children:t("div",{className:"avatar-content",children:n})})};export{v as Avatar,d as Chip,s as Histogram,e as Input,h 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 inputRef = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n setInternalValue(value);\n }, [value]);\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const newValue = e.target.value;\n setInternalValue(newValue);\n onChange?.(newValue);\n };\n\n const handleFocus = () => {\n setIsFocused(true);\n };\n\n const handleBlur = () => {\n setIsFocused(false);\n };\n\n const isLabelFloating = isFocused || internalValue.length > 0;\n\n const containerClasses = [\n \"input-container\",\n isFocused ? \"input-container--focused\" : \"\",\n isLabelFloating ? \"input-container--floating\" : \"\",\n disabled ? \"input-container--disabled\" : \"\",\n className,\n ]\n .filter(Boolean)\n .join(\" \");\n\n return (\n <div className={containerClasses}>\n <div className=\"input-constraints\">\n <div className=\"input-min\">\n {min.label}\n <br />\n {min.value}\n </div>\n\n <div className=\"input-field\">\n <input\n ref={inputRef}\n type={type}\n value={internalValue}\n onChange={handleChange}\n onFocus={handleFocus}\n onBlur={handleBlur}\n disabled={disabled}\n required={required}\n className=\"input-element\"\n aria-label={label}\n />\n <label className=\"input-label\">\n {label}\n {required && <span className=\"input-required\">*</span>}\n </label>\n </div>\n <div className=\"input-max\">\n {max.label}\n <br /> {max.value}\n </div>\n </div>\n </div>\n );\n};\n","import React, { useState } from \"react\";\nimport \"./Switch.css\";\n\ninterface OnProps {\n isOff?: boolean;\n}\nconst ImgOn = ({ isOff }: OnProps) => (\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M9.56529 2.85352C9.66365 2.57607 9.96837 2.43116 10.246 2.5293C13.4295 3.65507 15.3392 6.91015 14.7684 10.2383C14.1974 13.5667 11.3114 16 7.93443 16C4.55739 16 1.67151 13.5667 1.10045 10.2383C0.5296 6.91011 2.4393 3.65504 5.62291 2.5293C5.9005 2.43115 6.20523 2.57605 6.30357 2.85352C6.40176 3.13124 6.2561 3.43599 5.97838 3.53418C3.28438 4.48672 1.669 7.2423 2.1522 10.0586C2.63557 12.8747 5.07706 14.9336 7.93443 14.9336C10.7918 14.9336 13.2333 12.8747 13.7167 10.0586C14.1999 7.24233 12.5844 4.48676 9.89049 3.53418C9.61276 3.43599 9.4671 3.13124 9.56529 2.85352ZM7.93443 0C8.22892 3.10447e-05 8.46754 0.238727 8.46763 0.533203V7.4668C8.46763 7.76135 8.22898 8.00095 7.93443 8.00098C7.63986 8.00098 7.40123 7.76137 7.40123 7.4668V0.533203C7.40132 0.238707 7.63991 0 7.93443 0Z\"\n fill={isOff ? \"#999FA1\" : \"#009CDF\"}\n />\n </svg>\n);\nconst SwitchThumb = ({ isOff }: OnProps) => (\n <svg\n width=\"32\"\n height=\"32\"\n viewBox=\"0 0 32 32\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <circle cx=\"16\" cy=\"16\" r=\"16\" fill={isOff ? \"white\" : \"#009cdf\"} />\n </svg>\n);\n\ninterface SwitchProps {\n checked?: boolean;\n onChange?: (checked: boolean) => void;\n disabled?: boolean;\n showIcon?: boolean;\n}\n\nexport const Switch: React.FC<SwitchProps> = ({\n checked = false,\n onChange,\n disabled = false,\n showIcon = true,\n}) => {\n const [internalChecked, setInternalChecked] = useState(checked);\n\n // 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\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}\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}: 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 />{\" \"}\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","inputRef","useRef","useEffect","containerClasses","length","filter","Boolean","join","_jsx","children","_jsxs","ref","e","newValue","target","onFocus","onBlur","ImgOn","isOff","width","height","viewBox","fill","xmlns","d","SwitchThumb","cx","cy","r","Switch","checked","showIcon","internalChecked","setInternalChecked","isChecked","undefined","switchClasses","role","onClick","newChecked","Chip","bgColor","textColor","chipClasses","style","backgroundColor","color","ProductionUnit","onChangeInput","onChangeSwitch","defaultValue","defaultChecked","unitName","energyCost","checkedImage","uncheckedImage","readonly","currentValue","concat","val","numValue","Number","toString","Histogram","relative","barHeight","barWidth","orientation","cornerRadius","animatedHeight","setAnimatedHeight","animatedWidth","setAnimatedWidth","targetHeight","Math","targetWidth","startTime","Date","now","animate","elapsed","progress","easeOutQuart","pow","requestAnimationFrame","displayWidth","displayHeight","svgWidth","svgHeight","createRoundedRectPath","x","y","radii","topLeft","topRight","bottomLeft","bottomRight","trim","replace","defaultCornerRadius","corners","fillOpacity","opacity","Avatar"],"mappings":"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"}
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 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 // For number inputs, validate min/max constraints\n if (type === \"number\" && newValue !== \"\") {\n const numValue = parseFloat(newValue);\n if (!isNaN(numValue)) {\n // Clamp the value within min/max bounds\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 return;\n }\n }\n }\n \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 }\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 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\" ? \"any\" : 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\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}\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}: 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 />{\" \"}\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","inputRef","useRef","useEffect","containerClasses","length","filter","Boolean","join","_jsx","children","_jsxs","ref","e","newValue","target","numValue","parseFloat","isNaN","clampedValue","Math","clampedString","toString","onFocus","onBlur","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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"}
package/dist/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";var t=require("react/jsx-runtime"),i=require("react"),e=function(e){var n=e.label,o=e.value,a=void 0===o?"":o,c=e.onChange,s=e.type,l=void 0===s?"text":s,r=e.disabled,d=void 0!==r&&r,h=e.className,u=void 0===h?"":h,v=e.required,m=void 0!==v&&v,p=e.min,f=void 0===p?{value:0,label:"Pmin"}:p,x=e.max,g=void 0===x?{value:100,label:"Pmax"}:x,b=i.useState(a),j=b[0],w=b[1],C=i.useState(!1),N=C[0],L=C[1],R=i.useRef(null);i.useEffect(function(){w(a)},[a]);var k=["input-container",N?"input-container--focused":"",N||j.length>0?"input-container--floating":"",d?"input-container--disabled":"",u].filter(Boolean).join(" ");return t.jsx("div",{className:k,children:t.jsxs("div",{className:"input-constraints",children:[t.jsxs("div",{className:"input-min",children:[f.label,t.jsx("br",{}),f.value]}),t.jsxs("div",{className:"input-field",children:[t.jsx("input",{ref:R,type:l,value:j,onChange:function(t){var i=t.target.value;w(i),null==c||c(i)},onFocus:function(){L(!0)},onBlur:function(){L(!1)},disabled:d,required:m,className:"input-element","aria-label":n}),t.jsxs("label",{className:"input-label",children:[n,m&&t.jsx("span",{className:"input-required",children:"*"})]})]}),t.jsxs("div",{className:"input-max",children:[g.label,t.jsx("br",{})," ",g.value]})]})})},n=function(i){var e=i.isOff;return t.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t.jsx("path",{d:"M9.56529 2.85352C9.66365 2.57607 9.96837 2.43116 10.246 2.5293C13.4295 3.65507 15.3392 6.91015 14.7684 10.2383C14.1974 13.5667 11.3114 16 7.93443 16C4.55739 16 1.67151 13.5667 1.10045 10.2383C0.5296 6.91011 2.4393 3.65504 5.62291 2.5293C5.9005 2.43115 6.20523 2.57605 6.30357 2.85352C6.40176 3.13124 6.2561 3.43599 5.97838 3.53418C3.28438 4.48672 1.669 7.2423 2.1522 10.0586C2.63557 12.8747 5.07706 14.9336 7.93443 14.9336C10.7918 14.9336 13.2333 12.8747 13.7167 10.0586C14.1999 7.24233 12.5844 4.48676 9.89049 3.53418C9.61276 3.43599 9.4671 3.13124 9.56529 2.85352ZM7.93443 0C8.22892 3.10447e-05 8.46754 0.238727 8.46763 0.533203V7.4668C8.46763 7.76135 8.22898 8.00095 7.93443 8.00098C7.63986 8.00098 7.40123 7.76137 7.40123 7.4668V0.533203C7.40132 0.238707 7.63991 0 7.93443 0Z",fill:e?"#999FA1":"#009CDF"})})},o=function(i){var e=i.isOff;return t.jsx("svg",{width:"32",height:"32",viewBox:"0 0 32 32",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t.jsx("circle",{cx:"16",cy:"16",r:"16",fill:e?"white":"#009cdf"})})},a=function(e){var a=e.checked,c=void 0!==a&&a,s=e.onChange,l=e.disabled,r=void 0!==l&&l,d=e.showIcon,h=void 0===d||d,u=i.useState(c),v=u[0],m=u[1],p=void 0!==c?c:v,f=["switch",p?"switch--checked":"",r?"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:!p})}),t.jsx("button",{type:"button",role:"switch","aria-checked":p,className:f,onClick:function(){if(!r){var t=!p;void 0===c&&m(t),null==s||s(t)}},disabled:r,children:t.jsx("span",{className:"switch-track",children:t.jsx("span",{className:"switch-thumb",children:t.jsx(o,{isOff:!p})})})})]})})},c=function(i){var e=i.label,n=i.bgColor,o=i.textColor,a=i.width,c=["chip-container","full-width"===(void 0===a?"fit-content":a)?"chip-container--full-width":"chip-container--fit-content"].join(" ");return t.jsx("div",{className:c,style:{backgroundColor:n},children:t.jsx("div",{className:"chip-content",children:t.jsx("p",{className:"chip-label",style:{color:o},children:e})})})};exports.Avatar=function(i){var e=i.children;return t.jsx("div",{className:"avatar-container avatar-container--clickable",children:t.jsx("div",{className:"avatar-content",children:e})})},exports.Chip=c,exports.Histogram=function(e){var n,o,a,c,s=e.max,l=e.relative,r=e.barHeight,d=void 0===r?103:r,h=e.barWidth,u=void 0===h?32:h,v=e.orientation,m=void 0===v?"vertical":v,p=e.cornerRadius,f=e.children,x=i.useState(0),g=x[0],b=x[1],j=i.useState(0),w=j[0],C=j[1],N=Math.min(l.value/s.value*100,100)/100*d,L=Math.min(l.value/s.value*100,100)/100*u;i.useEffect(function(){b(0),C(0);var t=Date.now(),i=function(){var e=Date.now()-t,n=Math.min(e/1e3,1),o=1-Math.pow(1-n,4);b(N*o),C(L*o),n<1&&requestAnimationFrame(i)};requestAnimationFrame(i)},[N,L]);var R="horizontal"===m?d:u,k="horizontal"===m?u:d,y="horizontal"===m?d:u,z="horizontal"===m?u:d,S=function(t,i,e,n,o){var a=o.topLeft,c=o.topRight,s=o.bottomLeft,l=o.bottomRight;return"\n M ".concat(t+a," ").concat(i,"\n L ").concat(t+e-c," ").concat(i,"\n Q ").concat(t+e," ").concat(i," ").concat(t+e," ").concat(i+c,"\n L ").concat(t+e," ").concat(i+n-l,"\n Q ").concat(t+e," ").concat(i+n," ").concat(t+e-l," ").concat(i+n,"\n L ").concat(t+s," ").concat(i+n,"\n Q ").concat(t," ").concat(i+n," ").concat(t," ").concat(i+n-s,"\n L ").concat(t," ").concat(i+a,"\n Q ").concat(t," ").concat(i," ").concat(t+a," ").concat(i,"\n Z\n ").trim().replace(/\s+/g," ")},M={topLeft:2,topRight:2,bottomLeft:2,bottomRight:2},q=p?{topLeft:null!==(n=p.topLeft)&&void 0!==n?n:M.topLeft,topRight:null!==(o=p.topRight)&&void 0!==o?o:M.topRight,bottomLeft:null!==(a=p.bottomLeft)&&void 0!==a?a:M.bottomLeft,bottomRight:null!==(c=p.bottomRight)&&void 0!==c?c:M.bottomRight}:M;return t.jsx("div",{className:"histogram-container ".concat("horizontal"===m?"histogram-container--horizontal":""),children:t.jsxs("div",{className:"histogram-content ".concat("horizontal"===m?"histogram-content--horizontal":""),children:[t.jsx("div",{className:"histogram-bar",style:{height:"".concat(k,"px"),width:"".concat(R,"px")},children:t.jsxs("svg",{width:y,height:z,viewBox:"0 0 ".concat(y," ").concat(z),className:"histogram-svg",children:[t.jsx("path",{d:S(0,0,y,z,q),fill:s.color,fillOpacity:s.opacity||1}),"vertical"===m?t.jsx("path",{d:S(0,z-g,y,g,{topLeft:g>=z?q.topLeft:0,topRight:g>=z?q.topRight:0,bottomLeft:q.bottomLeft,bottomRight:q.bottomRight}),fill:l.color}):t.jsx("path",{d:S(0,0,w,z,{topLeft:q.topLeft,topRight:w>=y?q.topRight:0,bottomLeft:q.bottomLeft,bottomRight:w>=y?q.bottomRight:0}),fill:l.color})]})}),f&&t.jsx("div",{className:"histogram-text-container ".concat("horizontal"===m?"histogram-text-container--horizontal":""),children:f})]})})},exports.Input=e,exports.ProductionUnit=function(n){var o=n.onChangeInput,s=n.onChangeSwitch,l=n.defaultValue,r=n.defaultChecked,d=void 0!==r&&r,h=n.value,u=n.checked,v=n.unitName,m=void 0===v?"Production Unit":v,p=n.energyCost,f=void 0===p?0:p,x=n.checkedImage,g=n.uncheckedImage,b=n.readonly,j=void 0!==b&&b,w=i.useState(d),C=w[0],N=w[1],L=i.useState(l),R=L[0],k=L[1],y=void 0!==u?u:C,z=void 0!==h?h:R;return t.jsxs("div",{className:"production-unit-container",children:[t.jsxs("div",{className:"production-unit-content",children:[t.jsx("div",{className:"image-preview-container",children:y?x:g}),t.jsxs("div",{className:"production-unit-chip",children:[t.jsx("div",{className:"production-unit-chip-name",children:m}),t.jsx(c,{label:"".concat(f," MW"),width:"fit-content",bgColor:"#E1F5FD",textColor:"#005896"})]}),t.jsxs("div",{className:"production-unit-switch-container",children:[t.jsx(e,{label:"PA",type:"number",onChange:function(t){var i=Number(t);void 0===h&&k(i),o&&o(i)},value:void 0!==z?z.toString():void 0,disabled:!y||j})," "]})]}),t.jsx(a,{checked:y,onChange:function(t){void 0===u&&N(t),s&&s(t)},disabled:j})]})},exports.Switch=a;
1
+ "use strict";var t=require("react/jsx-runtime"),i=require("react"),e=function(e){var n=e.label,a=e.value,o=void 0===a?"":a,c=e.onChange,l=e.type,r=void 0===l?"text":l,s=e.disabled,d=void 0!==s&&s,h=e.className,u=void 0===h?"":h,v=e.required,m=void 0!==v&&v,f=e.min,p=void 0===f?{value:0,label:"Pmin"}:f,x=e.max,g=void 0===x?{value:100,label:"Pmax"}:x,b=i.useState(o),j=b[0],w=b[1],N=i.useState(!1),C=N[0],L=N[1],R=i.useRef(null);i.useEffect(function(){w(o)},[o]);var y=["input-container",C?"input-container--focused":"",C||j.length>0?"input-container--floating":"",d?"input-container--disabled":"",u].filter(Boolean).join(" ");return t.jsx("div",{className:y,children:t.jsxs("div",{className:"input-constraints",children:[t.jsxs("div",{className:"input-min",children:[p.label,t.jsx("br",{}),p.value]}),t.jsxs("div",{className:"input-field",children:[t.jsx("input",{ref:R,type:r,value:j,onChange:function(t){var i=t.target.value;if("number"===r&&""!==i){var e=parseFloat(i);if(!isNaN(e)){var n=Math.max(p.value,Math.min(g.value,e));if(n!==e){var a=n.toString();return w(a),void(null==c||c(a))}}}w(i),null==c||c(i)},onFocus:function(){L(!0)},onBlur:function(){if(L(!1),"number"===r&&""!==j){var t=parseFloat(j);if(!isNaN(t)){var i=Math.max(p.value,Math.min(g.value,t));if(i!==t){var e=i.toString();w(e),null==c||c(e)}}}},disabled:d,required:m,className:"input-element","aria-label":n,min:"number"===r?p.value:void 0,max:"number"===r?g.value:void 0,step:"number"===r?"any":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:[g.label,t.jsx("br",{})," ",g.value]})]})})},n=function(i){var e=i.isOff;return t.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t.jsx("path",{d:"M9.56529 2.85352C9.66365 2.57607 9.96837 2.43116 10.246 2.5293C13.4295 3.65507 15.3392 6.91015 14.7684 10.2383C14.1974 13.5667 11.3114 16 7.93443 16C4.55739 16 1.67151 13.5667 1.10045 10.2383C0.5296 6.91011 2.4393 3.65504 5.62291 2.5293C5.9005 2.43115 6.20523 2.57605 6.30357 2.85352C6.40176 3.13124 6.2561 3.43599 5.97838 3.53418C3.28438 4.48672 1.669 7.2423 2.1522 10.0586C2.63557 12.8747 5.07706 14.9336 7.93443 14.9336C10.7918 14.9336 13.2333 12.8747 13.7167 10.0586C14.1999 7.24233 12.5844 4.48676 9.89049 3.53418C9.61276 3.43599 9.4671 3.13124 9.56529 2.85352ZM7.93443 0C8.22892 3.10447e-05 8.46754 0.238727 8.46763 0.533203V7.4668C8.46763 7.76135 8.22898 8.00095 7.93443 8.00098C7.63986 8.00098 7.40123 7.76137 7.40123 7.4668V0.533203C7.40132 0.238707 7.63991 0 7.93443 0Z",fill:e?"#999FA1":"#009CDF"})})},a=function(i){var e=i.isOff;return t.jsx("svg",{width:"32",height:"32",viewBox:"0 0 32 32",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t.jsx("circle",{cx:"16",cy:"16",r:"16",fill:e?"white":"#009cdf"})})},o=function(e){var o=e.checked,c=void 0!==o&&o,l=e.onChange,r=e.disabled,s=void 0!==r&&r,d=e.showIcon,h=void 0===d||d,u=i.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(i){var e=i.label,n=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.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:e})})})};exports.Avatar=function(i){var e=i.children;return t.jsx("div",{className:"avatar-container avatar-container--clickable",children:t.jsx("div",{className:"avatar-content",children:e})})},exports.Chip=c,exports.Histogram=function(e){var n,a,o,c,l=e.max,r=e.relative,s=e.barHeight,d=void 0===s?103:s,h=e.barWidth,u=void 0===h?32:h,v=e.orientation,m=void 0===v?"vertical":v,f=e.cornerRadius,p=e.children,x=i.useState(0),g=x[0],b=x[1],j=i.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;i.useEffect(function(){b(0),N(0);var t=Date.now(),i=function(){var e=Date.now()-t,n=Math.min(e/1e3,1),a=1-Math.pow(1-n,4);b(C*a),N(L*a),n<1&&requestAnimationFrame(i)};requestAnimationFrame(i)},[C,L]);var R="horizontal"===m?d:u,y="horizontal"===m?u:d,k="horizontal"===m?d:u,M="horizontal"===m?u:d,S=function(t,i,e,n,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+e-c," ").concat(i,"\n Q ").concat(t+e," ").concat(i," ").concat(t+e," ").concat(i+c,"\n L ").concat(t+e," ").concat(i+n-r,"\n Q ").concat(t+e," ").concat(i+n," ").concat(t+e-r," ").concat(i+n,"\n L ").concat(t+l," ").concat(i+n,"\n Q ").concat(t," ").concat(i+n," ").concat(t," ").concat(i+n-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," ")},z={topLeft:2,topRight:2,bottomLeft:2,bottomRight:2},F=f?{topLeft:null!==(n=f.topLeft)&&void 0!==n?n:z.topLeft,topRight:null!==(a=f.topRight)&&void 0!==a?a:z.topRight,bottomLeft:null!==(o=f.bottomLeft)&&void 0!==o?o:z.bottomLeft,bottomRight:null!==(c=f.bottomRight)&&void 0!==c?c:z.bottomRight}:z;return t.jsx("div",{className:"histogram-container ".concat("horizontal"===m?"histogram-container--horizontal":""),children:t.jsxs("div",{className:"histogram-content ".concat("horizontal"===m?"histogram-content--horizontal":""),children:[t.jsx("div",{className:"histogram-bar",style:{height:"".concat(y,"px"),width:"".concat(R,"px")},children:t.jsxs("svg",{width:k,height:M,viewBox:"0 0 ".concat(k," ").concat(M),className:"histogram-svg",children:[t.jsx("path",{d:S(0,0,k,M,F),fill:l.color,fillOpacity:l.opacity||1}),"vertical"===m?t.jsx("path",{d:S(0,M-g,k,g,{topLeft:g>=M?F.topLeft:0,topRight:g>=M?F.topRight:0,bottomLeft:F.bottomLeft,bottomRight:F.bottomRight}),fill:r.color}):t.jsx("path",{d:S(0,0,w,M,{topLeft:F.topLeft,topRight:w>=k?F.topRight:0,bottomLeft:F.bottomLeft,bottomRight:w>=k?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=e,exports.ProductionUnit=function(n){var a=n.onChangeInput,l=n.onChangeSwitch,r=n.defaultValue,s=n.defaultChecked,d=void 0!==s&&s,h=n.value,u=n.checked,v=n.unitName,m=void 0===v?"Production Unit":v,f=n.energyCost,p=void 0===f?0:f,x=n.checkedImage,g=n.uncheckedImage,b=n.readonly,j=void 0!==b&&b,w=i.useState(d),N=w[0],C=w[1],L=i.useState(r),R=L[0],y=L[1],k=void 0!==u?u:N,M=void 0!==h?h:R;return t.jsxs("div",{className:"production-unit-container",children:[t.jsxs("div",{className:"production-unit-content",children:[t.jsx("div",{className:"image-preview-container",children:k?x:g}),t.jsxs("div",{className:"production-unit-chip",children:[t.jsx("div",{className:"production-unit-chip-name",children:m}),t.jsx(c,{label:"".concat(p," MW"),width:"fit-content",bgColor:"#E1F5FD",textColor:"#005896"})]}),t.jsxs("div",{className:"production-unit-switch-container",children:[t.jsx(e,{label:"PA",type:"number",onChange:function(t){var i=Number(t);void 0===h&&y(i),a&&a(i)},value:void 0!==M?M.toString():void 0,disabled:!k||j})," "]})]}),t.jsx(o,{checked:k,onChange:function(t){void 0===u&&C(t),l&&l(t)},disabled:j})]})},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 inputRef = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n setInternalValue(value);\n }, [value]);\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const newValue = e.target.value;\n setInternalValue(newValue);\n onChange?.(newValue);\n };\n\n const handleFocus = () => {\n setIsFocused(true);\n };\n\n const handleBlur = () => {\n setIsFocused(false);\n };\n\n const isLabelFloating = isFocused || internalValue.length > 0;\n\n const containerClasses = [\n \"input-container\",\n isFocused ? \"input-container--focused\" : \"\",\n isLabelFloating ? \"input-container--floating\" : \"\",\n disabled ? \"input-container--disabled\" : \"\",\n className,\n ]\n .filter(Boolean)\n .join(\" \");\n\n return (\n <div className={containerClasses}>\n <div className=\"input-constraints\">\n <div className=\"input-min\">\n {min.label}\n <br />\n {min.value}\n </div>\n\n <div className=\"input-field\">\n <input\n ref={inputRef}\n type={type}\n value={internalValue}\n onChange={handleChange}\n onFocus={handleFocus}\n onBlur={handleBlur}\n disabled={disabled}\n required={required}\n className=\"input-element\"\n aria-label={label}\n />\n <label className=\"input-label\">\n {label}\n {required && <span className=\"input-required\">*</span>}\n </label>\n </div>\n <div className=\"input-max\">\n {max.label}\n <br /> {max.value}\n </div>\n </div>\n </div>\n );\n};\n","import React, { useState } from \"react\";\nimport \"./Switch.css\";\n\ninterface OnProps {\n isOff?: boolean;\n}\nconst ImgOn = ({ isOff }: OnProps) => (\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M9.56529 2.85352C9.66365 2.57607 9.96837 2.43116 10.246 2.5293C13.4295 3.65507 15.3392 6.91015 14.7684 10.2383C14.1974 13.5667 11.3114 16 7.93443 16C4.55739 16 1.67151 13.5667 1.10045 10.2383C0.5296 6.91011 2.4393 3.65504 5.62291 2.5293C5.9005 2.43115 6.20523 2.57605 6.30357 2.85352C6.40176 3.13124 6.2561 3.43599 5.97838 3.53418C3.28438 4.48672 1.669 7.2423 2.1522 10.0586C2.63557 12.8747 5.07706 14.9336 7.93443 14.9336C10.7918 14.9336 13.2333 12.8747 13.7167 10.0586C14.1999 7.24233 12.5844 4.48676 9.89049 3.53418C9.61276 3.43599 9.4671 3.13124 9.56529 2.85352ZM7.93443 0C8.22892 3.10447e-05 8.46754 0.238727 8.46763 0.533203V7.4668C8.46763 7.76135 8.22898 8.00095 7.93443 8.00098C7.63986 8.00098 7.40123 7.76137 7.40123 7.4668V0.533203C7.40132 0.238707 7.63991 0 7.93443 0Z\"\n fill={isOff ? \"#999FA1\" : \"#009CDF\"}\n />\n </svg>\n);\nconst SwitchThumb = ({ isOff }: OnProps) => (\n <svg\n width=\"32\"\n height=\"32\"\n viewBox=\"0 0 32 32\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <circle cx=\"16\" cy=\"16\" r=\"16\" fill={isOff ? \"white\" : \"#009cdf\"} />\n </svg>\n);\n\ninterface SwitchProps {\n checked?: boolean;\n onChange?: (checked: boolean) => void;\n disabled?: boolean;\n showIcon?: boolean;\n}\n\nexport const Switch: React.FC<SwitchProps> = ({\n checked = false,\n onChange,\n disabled = false,\n showIcon = true,\n}) => {\n const [internalChecked, setInternalChecked] = useState(checked);\n\n // 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\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}\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}: 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 />{\" \"}\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","inputRef","useRef","useEffect","containerClasses","length","filter","Boolean","join","_jsx","children","_jsxs","jsx","ref","e","newValue","target","onFocus","onBlur","jsxs","ImgOn","isOff","width","height","viewBox","fill","xmlns","d","SwitchThumb","cx","cy","r","Switch","checked","showIcon","internalChecked","setInternalChecked","isChecked","undefined","switchClasses","role","onClick","newChecked","Chip","bgColor","textColor","chipClasses","style","backgroundColor","color","relative","barHeight","barWidth","orientation","cornerRadius","animatedHeight","setAnimatedHeight","animatedWidth","setAnimatedWidth","targetHeight","Math","targetWidth","startTime","Date","now","animate","elapsed","progress","easeOutQuart","pow","requestAnimationFrame","displayWidth","displayHeight","svgWidth","svgHeight","createRoundedRectPath","x","y","radii","topLeft","topRight","bottomLeft","bottomRight","concat","trim","replace","defaultCornerRadius","corners","fillOpacity","opacity","onChangeInput","onChangeSwitch","defaultValue","defaultChecked","unitName","energyCost","checkedImage","uncheckedImage","readonly","currentValue","val","numValue","Number","toString"],"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/Avatar.tsx","../src/components/Histogram.tsx","../src/components/ProductionUnit.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from \"react\";\nimport \"./Input.css\";\n\ninterface InputProps {\n label: string;\n value?: string;\n onChange?: (value: string) => void;\n type?: \"text\" | \"number\";\n disabled?: boolean;\n className?: string;\n required?: boolean;\n min?: { value: number; label?: string };\n max?: { value: number; label?: string };\n}\n\nexport const Input: React.FC<InputProps> = ({\n label,\n value = \"\",\n onChange,\n type = \"text\",\n disabled = false,\n className = \"\",\n required = false,\n min = { value: 0, label: \"Pmin\" },\n max = { value: 100, label: \"Pmax\" },\n}) => {\n const [internalValue, setInternalValue] = useState(value);\n const [isFocused, setIsFocused] = useState(false);\n const inputRef = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n setInternalValue(value);\n }, [value]);\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const newValue = e.target.value;\n \n // For number inputs, validate min/max constraints\n if (type === \"number\" && newValue !== \"\") {\n const numValue = parseFloat(newValue);\n if (!isNaN(numValue)) {\n // Clamp the value within min/max bounds\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 return;\n }\n }\n }\n \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 }\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 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\" ? \"any\" : 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\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}\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}: 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 />{\" \"}\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","inputRef","useRef","useEffect","containerClasses","length","filter","Boolean","join","_jsx","jsx","children","_jsxs","jsxs","ref","e","newValue","target","numValue","parseFloat","isNaN","clampedValue","Math","clampedString","toString","onFocus","onBlur","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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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "rte-utils",
3
- "version": "1.2.11",
3
+ "version": "1.2.13",
4
4
  "description": "React components library in TypeScript for agigox projects",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
@@ -15,7 +15,10 @@
15
15
  "test": "jest",
16
16
  "lint": "eslint src --ext .ts,.tsx",
17
17
  "typecheck": "tsc --noEmit",
18
- "prepublishOnly": "npm run build"
18
+ "prepublishOnly": "npm run build",
19
+ "storybook": "storybook dev -p 6006",
20
+ "build-storybook": "storybook build",
21
+ "serve-storybook": "npx http-server storybook-static -p 8080 -o"
19
22
  },
20
23
  "keywords": [
21
24
  "react",
@@ -31,23 +34,34 @@
31
34
  "react-dom": ">=16.8.0"
32
35
  },
33
36
  "devDependencies": {
37
+ "@chromatic-com/storybook": "^4.1.0",
34
38
  "@rollup/plugin-commonjs": "^25.0.0",
35
39
  "@rollup/plugin-node-resolve": "^15.1.0",
36
40
  "@rollup/plugin-terser": "^0.4.0",
37
41
  "@rollup/plugin-typescript": "^11.1.0",
42
+ "@storybook/addon-a11y": "^9.1.1",
43
+ "@storybook/addon-docs": "^9.1.1",
44
+ "@storybook/addon-vitest": "^9.1.1",
45
+ "@storybook/react-vite": "^9.1.1",
38
46
  "@types/react": "^18.2.0",
39
47
  "@types/react-dom": "^18.2.0",
40
48
  "@typescript-eslint/eslint-plugin": "^6.0.0",
41
49
  "@typescript-eslint/parser": "^6.0.0",
50
+ "@vitest/browser": "^3.2.4",
51
+ "@vitest/coverage-v8": "^3.2.4",
42
52
  "eslint": "^8.45.0",
43
53
  "eslint-plugin-react": "^7.33.0",
44
54
  "eslint-plugin-react-hooks": "^4.6.0",
55
+ "eslint-plugin-storybook": "^9.1.1",
45
56
  "jest": "^29.6.0",
57
+ "playwright": "^1.54.2",
46
58
  "rollup": "^3.26.0",
47
59
  "rollup-plugin-peer-deps-external": "^2.2.4",
48
60
  "rollup-plugin-postcss": "^4.0.2",
61
+ "storybook": "^9.1.1",
49
62
  "tslib": "^2.8.1",
50
- "typescript": "^5.1.0"
63
+ "typescript": "^5.1.0",
64
+ "vitest": "^3.2.4"
51
65
  },
52
66
  "optionalDependencies": {
53
67
  "fsevents": "^2.3.3"