rte-utils 1.2.4 → 1.2.6

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 (11) hide show
  1. package/dist/components/Input.d.ts +14 -0
  2. package/dist/components/ProductionUnit.d.ts +8 -0
  3. package/dist/components/Switch.d.ts +13 -0
  4. package/dist/components/index.d.ts +3 -0
  5. package/dist/index.css +1 -1
  6. package/dist/index.esm.css +1 -1
  7. package/dist/index.esm.js +1 -1
  8. package/dist/index.esm.js.map +1 -1
  9. package/dist/index.js +1 -1
  10. package/dist/index.js.map +1 -1
  11. package/package.json +1 -1
package/dist/components/Input.d.ts ADDED
@@ -0,0 +1,14 @@
1
+ import React from 'react';
2
+ import './Input.css';
3
+ interface InputProps {
4
+ label: string;
5
+ value?: string;
6
+ onChange?: (value: string) => void;
7
+ type?: 'text' | 'email' | 'password' | 'number';
8
+ disabled?: boolean;
9
+ error?: string;
10
+ className?: string;
11
+ required?: boolean;
12
+ }
13
+ export declare const Input: React.FC<InputProps>;
14
+ export {};
package/dist/components/ProductionUnit.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ interface ProductionUnitProps {
2
+ onChangeInput?: (value: string) => void;
3
+ onChangeSwitch?: (checked: boolean) => void;
4
+ value?: string;
5
+ checked?: boolean;
6
+ }
7
+ export declare const ProductionUnit: ({ onChangeInput, onChangeSwitch, value, checked, }: ProductionUnitProps) => import("react/jsx-runtime").JSX.Element;
8
+ export {};
package/dist/components/Switch.d.ts ADDED
@@ -0,0 +1,13 @@
1
+ import React from 'react';
2
+ import './Switch.css';
3
+ interface SwitchProps {
4
+ checked?: boolean;
5
+ onChange?: (checked: boolean) => void;
6
+ disabled?: boolean;
7
+ size?: 'small' | 'medium' | 'large';
8
+ label?: string;
9
+ className?: string;
10
+ showIcon?: boolean;
11
+ }
12
+ export declare const Switch: React.FC<SwitchProps>;
13
+ export {};
package/dist/components/index.d.ts CHANGED
@@ -1,2 +1,5 @@
1
+ export { ProductionUnit } from "./ProductionUnit";
1
2
  export { Histogram } from "./Histogram";
2
3
  export { Chip } from "./Chip";
4
+ export { Switch } from "./Switch";
5
+ export { Input } from "./Input";
package/dist/index.css CHANGED
@@ -1 +1 @@
1
- @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap");*{font-family:Open Sans,sans-serif}.histogram-container{height:auto;max-width:54px;position:relative}.histogram-container--horizontal{max-width:none;width:auto}.histogram-content{align-items:center;display:flex;flex-direction:column;gap:8px;width:100%}.histogram-content--horizontal{align-items:center;flex-direction:row;height:100%}.histogram-bar{position:relative}.histogram-svg{display:block}.histogram-text-container{align-items:center;display:flex;flex-direction:column;gap:0;width:100%}.histogram-text-container--horizontal{align-items:flex-start;margin-left:8px}.histogram-value-container{text-align:center;width:40px}.histogram-value{font-size:16px;line-height:14px}.histogram-unit,.histogram-value{color:#000;display:block;font-weight:600;margin:0}.histogram-unit{font-size:12px}.histogram-label{color:#6f6f6f;font-size:12px;font-style:normal;font-weight:400;line-height:18px;margin:0;text-align:left;white-space:nowrap}.chip-container{align-items:center;background-color:var(--chip-bg-color,#e0e0e0);border-radius:60px;color:var(--chip-text-color,#000);display:inline-flex;min-width:84px;padding:8px}.chip-content{align-items:center;display:flex;flex-grow:1;gap:.5rem;justify-content:center}.chip-label{font-size:14px;font-weight:600;margin:0}
1
+ .input-container{margin-bottom:16px}.input-container,.input-field{position:relative;width:100%}.input-element{background-color:#fff;border:2px solid #e0e0e0;border-radius:4px;font-size:16px;outline:none;padding:16px 12px 8px;transition:border-color .2s ease,box-shadow .2s ease;width:100%}.input-element:focus{border-color:#009cdf;box-shadow:0 0 0 2px rgba(0,156,223,.1)}.input-label{background-color:#fff;color:#999;font-size:16px;left:12px;padding:0 4px;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%);transition:all .2s ease;white-space:nowrap}.input-required{color:#e74c3c;margin-left:2px}.input-container--floating .input-label,.input-container--focused .input-label{color:#009cdf;font-size:12px;font-weight:500;top:0;transform:translateY(-50%)}.input-container--focused .input-element{border-color:#009cdf;box-shadow:0 0 0 2px rgba(0,156,223,.1)}.input-container--focused .input-label{color:#009cdf}.input-container--error .input-element{border-color:#e74c3c}.input-container--error .input-element:focus{border-color:#e74c3c;box-shadow:0 0 0 2px rgba(231,76,60,.1)}.input-container--error .input-label,.input-error{color:#e74c3c}.input-error{font-size:12px;margin-top:4px;padding-left:12px}.input-container--disabled .input-element{background-color:#f5f5f5;border-color:#d0d0d0;color:#999;cursor:not-allowed}.input-container--disabled .input-label{color:#999}.input-element:not(:disabled):hover{border-color:#009cdf}.input-container--error .input-element:not(:disabled):hover{border-color:#e74c3c}.input-element:-webkit-autofill{-webkit-text-fill-color:inherit!important}.input-element:-webkit-autofill,.input-element:-webkit-autofill:focus{-webkit-box-shadow:inset 0 0 0 30px #fff!important}.input-container--small .input-element{font-size:14px;padding:12px 8px 6px}.input-container--small .input-label{font-size:14px;left:8px}.input-container--small.input-container--floating .input-label,.input-container--small.input-container--focused .input-label{font-size:10px}.input-container--large .input-element{font-size:18px;padding:20px 16px 10px}.input-container--large .input-label{font-size:18px;left:16px}.input-container--large.input-container--floating .input-label,.input-container--large.input-container--focused .input-label{font-size:14px}.switch-container{align-items:center;display:flex;gap:8px}.switch-label{color:#333;font-size:14px;font-weight:500}.switch-wrapper{flex-direction:column;gap:4px}.switch-icon,.switch-wrapper{align-items:center;display:flex}.switch-icon{height:16px;justify-content:center;width:16px}.switch-power-icon{height:100%;object-fit:contain;width:100%}.switch{background:none;border:none;cursor:pointer;outline:none;padding:0;transition:all .2s ease}.switch:focus-visible{outline:2px solid #009cdf;outline-offset:2px}.switch--disabled{cursor:not-allowed;opacity:.5}.switch-track{background-color:#999fa1;border-radius:60px;display:block;position:relative;transition:background-color .2s ease}.switch--checked .switch-track{background-color:#009cdf}.switch-thumb{align-items:center;background-color:#fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2);display:flex;justify-content:center;left:2px;position:absolute;top:2px;transition:transform .2s ease}.switch-thumb-icon{height:100%;object-fit:contain;width:100%}.switch--small .switch-track{height:12px;width:24px}.switch--small .switch-thumb{height:8px;width:8px}.switch--small.switch--checked .switch-thumb{transform:translateX(12px)}.switch--medium .switch-track{height:16px;width:32px}.switch--medium .switch-thumb{height:12px;width:12px}.switch--medium.switch--checked .switch-thumb{transform:translateX(16px)}.switch--large .switch-track{height:20px;width:40px}.switch--large .switch-thumb{height:16px;width:16px}.switch--large.switch--checked .switch-thumb{transform:translateX(20px)}.switch:not(.switch--disabled):hover .switch-track{filter:brightness(1.1)}.switch:not(.switch--disabled):active .switch-thumb{transform:scale(1.1)}.switch--checked:not(.switch--disabled):active .switch-thumb{transform:translateX(16px) scale(1.1)}.switch--small.switch--checked:not(.switch--disabled):active .switch-thumb{transform:translateX(12px) scale(1.1)}.switch--large.switch--checked:not(.switch--disabled):active .switch-thumb{transform:translateX(20px) scale(1.1)}@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap");*{font-family:Open Sans,sans-serif}.histogram-container{height:auto;max-width:54px;position:relative}.histogram-container--horizontal{max-width:none;width:auto}.histogram-content{align-items:center;display:flex;flex-direction:column;gap:8px;width:100%}.histogram-content--horizontal{align-items:center;flex-direction:row;height:100%}.histogram-bar{position:relative}.histogram-svg{display:block}.histogram-text-container{align-items:center;display:flex;flex-direction:column;gap:0;width:100%}.histogram-text-container--horizontal{align-items:flex-start;margin-left:8px}.histogram-value-container{text-align:center;width:40px}.histogram-value{font-size:16px;line-height:14px}.histogram-unit,.histogram-value{color:#000;display:block;font-weight:600;margin:0}.histogram-unit{font-size:12px}.histogram-label{color:#6f6f6f;font-size:12px;font-style:normal;font-weight:400;line-height:18px;margin:0;text-align:left;white-space:nowrap}.chip-container{align-items:center;background-color:var(--chip-bg-color,#e0e0e0);border-radius:60px;color:var(--chip-text-color,#000);display:inline-flex;min-width:84px;padding:8px}.chip-content{align-items:center;display:flex;flex-grow:1;gap:.5rem;justify-content:center}.chip-label{font-size:14px;font-weight:600;margin:0}
package/dist/index.esm.css CHANGED
@@ -1 +1 @@
1
- @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap");*{font-family:Open Sans,sans-serif}.histogram-container{height:auto;max-width:54px;position:relative}.histogram-container--horizontal{max-width:none;width:auto}.histogram-content{align-items:center;display:flex;flex-direction:column;gap:8px;width:100%}.histogram-content--horizontal{align-items:center;flex-direction:row;height:100%}.histogram-bar{position:relative}.histogram-svg{display:block}.histogram-text-container{align-items:center;display:flex;flex-direction:column;gap:0;width:100%}.histogram-text-container--horizontal{align-items:flex-start;margin-left:8px}.histogram-value-container{text-align:center;width:40px}.histogram-value{font-size:16px;line-height:14px}.histogram-unit,.histogram-value{color:#000;display:block;font-weight:600;margin:0}.histogram-unit{font-size:12px}.histogram-label{color:#6f6f6f;font-size:12px;font-style:normal;font-weight:400;line-height:18px;margin:0;text-align:left;white-space:nowrap}.chip-container{align-items:center;background-color:var(--chip-bg-color,#e0e0e0);border-radius:60px;color:var(--chip-text-color,#000);display:inline-flex;min-width:84px;padding:8px}.chip-content{align-items:center;display:flex;flex-grow:1;gap:.5rem;justify-content:center}.chip-label{font-size:14px;font-weight:600;margin:0}
1
+ .input-container{margin-bottom:16px}.input-container,.input-field{position:relative;width:100%}.input-element{background-color:#fff;border:2px solid #e0e0e0;border-radius:4px;font-size:16px;outline:none;padding:16px 12px 8px;transition:border-color .2s ease,box-shadow .2s ease;width:100%}.input-element:focus{border-color:#009cdf;box-shadow:0 0 0 2px rgba(0,156,223,.1)}.input-label{background-color:#fff;color:#999;font-size:16px;left:12px;padding:0 4px;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%);transition:all .2s ease;white-space:nowrap}.input-required{color:#e74c3c;margin-left:2px}.input-container--floating .input-label,.input-container--focused .input-label{color:#009cdf;font-size:12px;font-weight:500;top:0;transform:translateY(-50%)}.input-container--focused .input-element{border-color:#009cdf;box-shadow:0 0 0 2px rgba(0,156,223,.1)}.input-container--focused .input-label{color:#009cdf}.input-container--error .input-element{border-color:#e74c3c}.input-container--error .input-element:focus{border-color:#e74c3c;box-shadow:0 0 0 2px rgba(231,76,60,.1)}.input-container--error .input-label,.input-error{color:#e74c3c}.input-error{font-size:12px;margin-top:4px;padding-left:12px}.input-container--disabled .input-element{background-color:#f5f5f5;border-color:#d0d0d0;color:#999;cursor:not-allowed}.input-container--disabled .input-label{color:#999}.input-element:not(:disabled):hover{border-color:#009cdf}.input-container--error .input-element:not(:disabled):hover{border-color:#e74c3c}.input-element:-webkit-autofill{-webkit-text-fill-color:inherit!important}.input-element:-webkit-autofill,.input-element:-webkit-autofill:focus{-webkit-box-shadow:inset 0 0 0 30px #fff!important}.input-container--small .input-element{font-size:14px;padding:12px 8px 6px}.input-container--small .input-label{font-size:14px;left:8px}.input-container--small.input-container--floating .input-label,.input-container--small.input-container--focused .input-label{font-size:10px}.input-container--large .input-element{font-size:18px;padding:20px 16px 10px}.input-container--large .input-label{font-size:18px;left:16px}.input-container--large.input-container--floating .input-label,.input-container--large.input-container--focused .input-label{font-size:14px}.switch-container{align-items:center;display:flex;gap:8px}.switch-label{color:#333;font-size:14px;font-weight:500}.switch-wrapper{flex-direction:column;gap:4px}.switch-icon,.switch-wrapper{align-items:center;display:flex}.switch-icon{height:16px;justify-content:center;width:16px}.switch-power-icon{height:100%;object-fit:contain;width:100%}.switch{background:none;border:none;cursor:pointer;outline:none;padding:0;transition:all .2s ease}.switch:focus-visible{outline:2px solid #009cdf;outline-offset:2px}.switch--disabled{cursor:not-allowed;opacity:.5}.switch-track{background-color:#999fa1;border-radius:60px;display:block;position:relative;transition:background-color .2s ease}.switch--checked .switch-track{background-color:#009cdf}.switch-thumb{align-items:center;background-color:#fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2);display:flex;justify-content:center;left:2px;position:absolute;top:2px;transition:transform .2s ease}.switch-thumb-icon{height:100%;object-fit:contain;width:100%}.switch--small .switch-track{height:12px;width:24px}.switch--small .switch-thumb{height:8px;width:8px}.switch--small.switch--checked .switch-thumb{transform:translateX(12px)}.switch--medium .switch-track{height:16px;width:32px}.switch--medium .switch-thumb{height:12px;width:12px}.switch--medium.switch--checked .switch-thumb{transform:translateX(16px)}.switch--large .switch-track{height:20px;width:40px}.switch--large .switch-thumb{height:16px;width:16px}.switch--large.switch--checked .switch-thumb{transform:translateX(20px)}.switch:not(.switch--disabled):hover .switch-track{filter:brightness(1.1)}.switch:not(.switch--disabled):active .switch-thumb{transform:scale(1.1)}.switch--checked:not(.switch--disabled):active .switch-thumb{transform:translateX(16px) scale(1.1)}.switch--small.switch--checked:not(.switch--disabled):active .switch-thumb{transform:translateX(12px) scale(1.1)}.switch--large.switch--checked:not(.switch--disabled):active .switch-thumb{transform:translateX(20px) scale(1.1)}@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap");*{font-family:Open Sans,sans-serif}.histogram-container{height:auto;max-width:54px;position:relative}.histogram-container--horizontal{max-width:none;width:auto}.histogram-content{align-items:center;display:flex;flex-direction:column;gap:8px;width:100%}.histogram-content--horizontal{align-items:center;flex-direction:row;height:100%}.histogram-bar{position:relative}.histogram-svg{display:block}.histogram-text-container{align-items:center;display:flex;flex-direction:column;gap:0;width:100%}.histogram-text-container--horizontal{align-items:flex-start;margin-left:8px}.histogram-value-container{text-align:center;width:40px}.histogram-value{font-size:16px;line-height:14px}.histogram-unit,.histogram-value{color:#000;display:block;font-weight:600;margin:0}.histogram-unit{font-size:12px}.histogram-label{color:#6f6f6f;font-size:12px;font-style:normal;font-weight:400;line-height:18px;margin:0;text-align:left;white-space:nowrap}.chip-container{align-items:center;background-color:var(--chip-bg-color,#e0e0e0);border-radius:60px;color:var(--chip-text-color,#000);display:inline-flex;min-width:84px;padding:8px}.chip-content{align-items:center;display:flex;flex-grow:1;gap:.5rem;justify-content:center}.chip-label{font-size:14px;font-weight:600;margin:0}
package/dist/index.esm.js CHANGED
@@ -1,2 +1,2 @@
1
- import{jsx as t,jsxs as o}from"react/jsx-runtime";import{useState as a,useEffect as c}from"react";var n=function(n){var i,e,r,l,h=n.max,m=n.relative,g=n.barHeight,s=void 0===g?103:g,p=n.barWidth,d=void 0===p?32:p,v=n.orientation,f=void 0===v?"vertical":v,b=n.cornerRadius,L=n.children,u=a(0),R=u[0],z=u[1],x=a(0),N=x[0],w=x[1],y=Math.min(m.value/h.value*100,100)/100*s,M=Math.min(m.value/h.value*100,100)/100*d;c(function(){z(0),w(0);var t=Date.now(),o=function(){var a=Date.now()-t,c=Math.min(a/1e3,1),n=1-Math.pow(1-c,4);z(y*n),w(M*n),c<1&&requestAnimationFrame(o)};requestAnimationFrame(o)},[y,M]);var Q="horizontal"===f?s:d,C="horizontal"===f?d:s,q="horizontal"===f?s:d,A="horizontal"===f?d:s,D=function(t,o,a,c,n){var i=n.topLeft,e=n.topRight,r=n.bottomLeft,l=n.bottomRight;return"\n M ".concat(t+i," ").concat(o,"\n L ").concat(t+a-e," ").concat(o,"\n Q ").concat(t+a," ").concat(o," ").concat(t+a," ").concat(o+e,"\n L ").concat(t+a," ").concat(o+c-l,"\n Q ").concat(t+a," ").concat(o+c," ").concat(t+a-l," ").concat(o+c,"\n L ").concat(t+r," ").concat(o+c,"\n Q ").concat(t," ").concat(o+c," ").concat(t," ").concat(o+c-r,"\n L ").concat(t," ").concat(o+i,"\n Q ").concat(t," ").concat(o," ").concat(t+i," ").concat(o,"\n Z\n ").trim().replace(/\s+/g," ")},F={topLeft:2,topRight:2,bottomLeft:2,bottomRight:2},j=b?{topLeft:null!==(i=b.topLeft)&&void 0!==i?i:F.topLeft,topRight:null!==(e=b.topRight)&&void 0!==e?e:F.topRight,bottomLeft:null!==(r=b.bottomLeft)&&void 0!==r?r:F.bottomLeft,bottomRight:null!==(l=b.bottomRight)&&void 0!==l?l:F.bottomRight}:F;return t("div",{className:"histogram-container ".concat("horizontal"===f?"histogram-container--horizontal":""),children:o("div",{className:"histogram-content ".concat("horizontal"===f?"histogram-content--horizontal":""),children:[t("div",{className:"histogram-bar",style:{height:"".concat(C,"px"),width:"".concat(Q,"px")},children:o("svg",{width:q,height:A,viewBox:"0 0 ".concat(q," ").concat(A),className:"histogram-svg",children:[t("path",{d:D(0,0,q,A,j),fill:h.color,fillOpacity:h.opacity||1}),t("path","vertical"===f?{d:D(0,A-R,q,R,{topLeft:R>=A?j.topLeft:0,topRight:R>=A?j.topRight:0,bottomLeft:j.bottomLeft,bottomRight:j.bottomRight}),fill:m.color}:{d:D(0,0,N,A,{topLeft:j.topLeft,topRight:N>=q?j.topRight:0,bottomLeft:j.bottomLeft,bottomRight:N>=q?j.bottomRight:0}),fill:m.color})]})}),L&&t("div",{className:"histogram-text-container ".concat("horizontal"===f?"histogram-text-container--horizontal":""),children:L})]})})},i=function(o){var a=o.label,c=o.bgColor,n=o.textColor;return t("div",{className:"chip-container",style:{backgroundColor:c},children:t("div",{className:"chip-content",children:t("p",{className:"chip-label",style:{color:n},children:a})})})};export{i as Chip,n as Histogram};
1
+ import{jsxs as t,jsx as o}from"react/jsx-runtime";import{useState as a,useRef as c,useEffect as n}from"react";var i=function(i){var e=i.label,l=i.value,r=void 0===l?"":l,s=i.onChange,h=i.type,d=void 0===h?"text":h,m=i.disabled,u=void 0!==m&&m,v=i.error,p=i.className,f=void 0===p?"":p,b=i.required,g=void 0!==b&&b,N=a(r),w=N[0],L=N[1],R=a(!1),z=R[0],C=R[1],x=c(null);n(function(){L(r)},[r]);var y=["input-container",z?"input-container--focused":"",z||w.length>0?"input-container--floating":"",v?"input-container--error":"",u?"input-container--disabled":"",f].filter(Boolean).join(" ");return t("div",{className:y,children:[t("div",{className:"input-field",children:[o("input",{ref:x,type:d,value:w,onChange:function(t){var o=t.target.value;L(o),null==s||s(o)},onFocus:function(){C(!0)},onBlur:function(){C(!1)},disabled:u,required:g,className:"input-element","aria-label":e}),t("label",{className:"input-label",children:[e,g&&o("span",{className:"input-required",children:"*"})]})]}),v&&o("div",{className:"input-error",children:v})]})},e=function(c){var n=c.checked,i=void 0!==n&&n,e=c.onChange,l=c.disabled,r=void 0!==l&&l,s=c.size,h=void 0===s?"medium":s,d=c.label,m=c.className,u=void 0===m?"":m,v=c.showIcon,p=void 0===v||v,f=a(i),b=f[0],g=f[1],N=["switch","switch--".concat(h),b?"switch--checked":"",r?"switch--disabled":"",u].filter(Boolean).join(" ");return t("div",{className:"switch-container",children:[d&&o("label",{className:"switch-label",htmlFor:"switch-".concat(Math.random()),children:d}),t("div",{className:"switch-wrapper",children:[p&&o("div",{className:"switch-icon",children:o("img",{alt:"Power icon",src:b?"http://localhost:3845/assets/86c15ca80cb444eb8cc1db3e8335b63ac51c31a9.svg":"http://localhost:3845/assets/ad7677e073e42d60a4ed84f42b17c5e56222a75d.svg",className:"switch-power-icon"})}),o("button",{type:"button",role:"switch","aria-checked":b,className:N,onClick:function(){if(!r){var t=!b;g(t),null==e||e(t)}},disabled:r,children:o("span",{className:"switch-track",children:t("span",{className:"switch-thumb",children:[b&&o("img",{alt:"",src:"http://localhost:3845/assets/25f95806464af11dea630fdf68fa80d5415c7da4.svg",className:"switch-thumb-icon"}),!b&&o("img",{alt:"",src:"http://localhost:3845/assets/164245110dc3649da31e9ff08005286a44c3c907.svg",className:"switch-thumb-icon"})]})})})]})]})},l=function(a){var c=a.onChangeInput,n=a.onChangeSwitch,l=a.value,r=a.checked;return t("div",{className:"production-unit-container",children:[o(i,{label:"Production Unit",type:"number",onChange:c,value:l}),o(e,{label:"Production Unit",checked:r,onChange:n,className:"production-unit-switch"})]})},r=function(c){var i,e,l,r,s=c.max,h=c.relative,d=c.barHeight,m=void 0===d?103:d,u=c.barWidth,v=void 0===u?32:u,p=c.orientation,f=void 0===p?"vertical":p,b=c.cornerRadius,g=c.children,N=a(0),w=N[0],L=N[1],R=a(0),z=R[0],C=R[1],x=Math.min(h.value/s.value*100,100)/100*m,y=Math.min(h.value/s.value*100,100)/100*v;n(function(){L(0),C(0);var t=Date.now(),o=function(){var a=Date.now()-t,c=Math.min(a/1e3,1),n=1-Math.pow(1-c,4);L(x*n),C(y*n),c<1&&requestAnimationFrame(o)};requestAnimationFrame(o)},[x,y]);var k="horizontal"===f?m:v,M="horizontal"===f?v:m,q="horizontal"===f?m:v,B="horizontal"===f?v:m,F=function(t,o,a,c,n){var i=n.topLeft,e=n.topRight,l=n.bottomLeft,r=n.bottomRight;return"\n M ".concat(t+i," ").concat(o,"\n L ").concat(t+a-e," ").concat(o,"\n Q ").concat(t+a," ").concat(o," ").concat(t+a," ").concat(o+e,"\n L ").concat(t+a," ").concat(o+c-r,"\n Q ").concat(t+a," ").concat(o+c," ").concat(t+a-r," ").concat(o+c,"\n L ").concat(t+l," ").concat(o+c,"\n Q ").concat(t," ").concat(o+c," ").concat(t," ").concat(o+c-l,"\n L ").concat(t," ").concat(o+i,"\n Q ").concat(t," ").concat(o," ").concat(t+i," ").concat(o,"\n Z\n ").trim().replace(/\s+/g," ")},Q={topLeft:2,topRight:2,bottomLeft:2,bottomRight:2},j=b?{topLeft:null!==(i=b.topLeft)&&void 0!==i?i:Q.topLeft,topRight:null!==(e=b.topRight)&&void 0!==e?e:Q.topRight,bottomLeft:null!==(l=b.bottomLeft)&&void 0!==l?l:Q.bottomLeft,bottomRight:null!==(r=b.bottomRight)&&void 0!==r?r:Q.bottomRight}:Q;return o("div",{className:"histogram-container ".concat("horizontal"===f?"histogram-container--horizontal":""),children:t("div",{className:"histogram-content ".concat("horizontal"===f?"histogram-content--horizontal":""),children:[o("div",{className:"histogram-bar",style:{height:"".concat(M,"px"),width:"".concat(k,"px")},children:t("svg",{width:q,height:B,viewBox:"0 0 ".concat(q," ").concat(B),className:"histogram-svg",children:[o("path",{d:F(0,0,q,B,j),fill:s.color,fillOpacity:s.opacity||1}),o("path","vertical"===f?{d:F(0,B-w,q,w,{topLeft:w>=B?j.topLeft:0,topRight:w>=B?j.topRight:0,bottomLeft:j.bottomLeft,bottomRight:j.bottomRight}),fill:h.color}:{d:F(0,0,z,B,{topLeft:j.topLeft,topRight:z>=q?j.topRight:0,bottomLeft:j.bottomLeft,bottomRight:z>=q?j.bottomRight:0}),fill:h.color})]})}),g&&o("div",{className:"histogram-text-container ".concat("horizontal"===f?"histogram-text-container--horizontal":""),children:g})]})})},s=function(t){var a=t.label,c=t.bgColor,n=t.textColor;return o("div",{className:"chip-container",style:{backgroundColor:c},children:o("div",{className:"chip-content",children:o("p",{className:"chip-label",style:{color:n},children:a})})})};export{s as Chip,r as Histogram,i as Input,l as ProductionUnit,e as Switch};
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/Histogram.tsx","../src/components/Chip.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport \"./Histogram.css\";\n\ninterface HistogramProps {\n /** Maximum value configuration with value and color */\n max: {\n value: number;\n color: string;\n opacity?: number;\n };\n /** Relative/current value configuration with value and color */\n relative: {\n value: number;\n color: string;\n };\n /** Height of the histogram bar in pixels */\n barHeight?: number;\n /** Width of the histogram bar in pixels */\n barWidth?: number;\n /** Orientation of the histogram - 'vertical' or 'horizontal' */\n orientation?: 'vertical' | 'horizontal';\n /** Corner radius configuration for individual corners */\n cornerRadius?: {\n topLeft?: number;\n topRight?: number;\n bottomLeft?: number;\n bottomRight?: number;\n };\n /** Child components (typically text content) */\n children?: React.ReactNode;\n}\n\nexport const Histogram: React.FC<HistogramProps> = ({\n max,\n relative,\n barHeight = 103,\n barWidth = 32,\n orientation = 'vertical',\n cornerRadius,\n children,\n}) => {\n const [animatedHeight, setAnimatedHeight] = useState(0);\n const [animatedWidth, setAnimatedWidth] = useState(0);\n\n // Calculate target dimensions based on orientation\n const targetHeight = (Math.min((relative.value / max.value) * 100, 100) / 100) * barHeight;\n const targetWidth = (Math.min((relative.value / max.value) * 100, 100) / 100) * barWidth;\n\n // Simple Chart.js-like animation: always animate from 0 to target\n useEffect(() => {\n setAnimatedHeight(0);\n setAnimatedWidth(0);\n \n const startTime = Date.now();\n const duration = 1000;\n\n const animate = () => {\n const elapsed = Date.now() - startTime;\n const progress = Math.min(elapsed / duration, 1);\n\n // Chart.js-like easing (easeOutQuart)\n const easeOutQuart = 1 - Math.pow(1 - progress, 4);\n \n setAnimatedHeight(targetHeight * easeOutQuart);\n setAnimatedWidth(targetWidth * easeOutQuart);\n\n if (progress < 1) {\n requestAnimationFrame(animate);\n }\n };\n\n requestAnimationFrame(animate);\n }, [targetHeight, targetWidth]);\n\n const displayWidth = orientation === 'horizontal' ? barHeight : barWidth;\n const displayHeight = orientation === 'horizontal' ? barWidth : barHeight;\n const svgWidth = orientation === 'horizontal' ? barHeight : barWidth;\n const svgHeight = orientation === 'horizontal' ? barWidth : barHeight;\n\n // Helper function to create rounded rectangle path\n const createRoundedRectPath = (\n x: number,\n y: number,\n width: number,\n height: number,\n radii: { topLeft: number; topRight: number; bottomLeft: number; bottomRight: number }\n ) => {\n const { topLeft, topRight, bottomLeft, bottomRight } = radii;\n \n return `\n M ${x + topLeft} ${y}\n L ${x + width - topRight} ${y}\n Q ${x + width} ${y} ${x + width} ${y + topRight}\n L ${x + width} ${y + height - bottomRight}\n Q ${x + width} ${y + height} ${x + width - bottomRight} ${y + height}\n L ${x + bottomLeft} ${y + height}\n Q ${x} ${y + height} ${x} ${y + height - bottomLeft}\n L ${x} ${y + topLeft}\n Q ${x} ${y} ${x + topLeft} ${y}\n Z\n `.trim().replace(/\\s+/g, ' ');\n };\n\n // Default corner radius values\n const defaultCornerRadius = { topLeft: 2, topRight: 2, bottomLeft: 2, bottomRight: 2 };\n const corners = cornerRadius ? {\n topLeft: cornerRadius.topLeft ?? defaultCornerRadius.topLeft,\n topRight: cornerRadius.topRight ?? defaultCornerRadius.topRight,\n bottomLeft: cornerRadius.bottomLeft ?? defaultCornerRadius.bottomLeft,\n bottomRight: cornerRadius.bottomRight ?? defaultCornerRadius.bottomRight,\n } : defaultCornerRadius;\n\n return (\n <div className={`histogram-container ${orientation === 'horizontal' ? 'histogram-container--horizontal' : ''}`}>\n <div className={`histogram-content ${orientation === 'horizontal' ? 'histogram-content--horizontal' : ''}`}>\n <div \n className=\"histogram-bar\"\n style={{\n height: `${displayHeight}px`,\n width: `${displayWidth}px`\n }}\n >\n <svg\n width={svgWidth}\n height={svgHeight}\n viewBox={`0 0 ${svgWidth} ${svgHeight}`}\n className=\"histogram-svg\"\n >\n {/* Background bar (max value) */}\n <path\n d={createRoundedRectPath(0, 0, svgWidth, svgHeight, corners)}\n fill={max.color}\n fillOpacity={max.opacity || 1}\n />\n {/* Foreground bar (relative value) with animation */}\n {orientation === 'vertical' ? (\n <path\n d={createRoundedRectPath(\n 0,\n svgHeight - animatedHeight,\n svgWidth,\n animatedHeight,\n {\n topLeft: animatedHeight >= svgHeight ? corners.topLeft : 0,\n topRight: animatedHeight >= svgHeight ? corners.topRight : 0,\n bottomLeft: corners.bottomLeft,\n bottomRight: corners.bottomRight,\n }\n )}\n fill={relative.color}\n />\n ) : (\n <path\n d={createRoundedRectPath(\n 0,\n 0,\n animatedWidth,\n svgHeight,\n {\n topLeft: corners.topLeft,\n topRight: animatedWidth >= svgWidth ? corners.topRight : 0,\n bottomLeft: corners.bottomLeft,\n bottomRight: animatedWidth >= svgWidth ? corners.bottomRight : 0,\n }\n )}\n fill={relative.color}\n />\n )}\n </svg>\n </div>\n {children && (\n <div className={`histogram-text-container ${orientation === 'horizontal' ? 'histogram-text-container--horizontal' : ''}`}>\n {children}\n </div>\n )}\n </div>\n </div>\n );\n};\n","import React from \"react\";\nimport \"./Chip.css\";\n\ninterface ChipProps {\n // Define any props you want to pass to the Chip component\n label?: string;\n bgColor?: string;\n textColor?: string;\n}\n\nexport const Chip: React.FC<ChipProps> = ({ label, bgColor, textColor }) => {\n return (\n <div className=\"chip-container\" style={{ backgroundColor: bgColor }}>\n <div className=\"chip-content\">\n <p className=\"chip-label\" style={{ color: textColor }}>\n {label}\n </p>\n </div>\n </div>\n );\n};\n"],"names":["Histogram","_a","max","relative","_f","barHeight","_g","barWidth","_h","orientation","cornerRadius","children","_j","useState","animatedHeight","setAnimatedHeight","_k","animatedWidth","setAnimatedWidth","targetHeight","Math","min","value","targetWidth","useEffect","startTime","Date","now","animate","elapsed","progress","easeOutQuart","pow","requestAnimationFrame","displayWidth","displayHeight","svgWidth","svgHeight","createRoundedRectPath","x","y","width","height","radii","topLeft","topRight","bottomLeft","bottomRight","concat","trim","replace","defaultCornerRadius","corners","_b","_c","_d","_e","_jsx","className","_jsxs","style","viewBox","d","fill","color","fillOpacity","opacity","Chip","label","bgColor","textColor","backgroundColor"],"mappings":"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"}
1
+ {"version":3,"file":"index.esm.js","sources":["../src/components/Input.tsx","../src/components/Switch.tsx","../src/components/ProductionUnit.tsx","../src/components/Histogram.tsx","../src/components/Chip.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react';\nimport './Input.css';\n\ninterface InputProps {\n label: string;\n value?: string;\n onChange?: (value: string) => void;\n type?: 'text' | 'email' | 'password' | 'number';\n disabled?: boolean;\n error?: string;\n className?: string;\n required?: boolean;\n}\n\nexport const Input: React.FC<InputProps> = ({\n label,\n value = '',\n onChange,\n type = 'text',\n disabled = false,\n error,\n className = '',\n required = false,\n}) => {\n const [internalValue, setInternalValue] = useState(value);\n const [isFocused, setIsFocused] = useState(false);\n const inputRef = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n setInternalValue(value);\n }, [value]);\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const newValue = e.target.value;\n setInternalValue(newValue);\n onChange?.(newValue);\n };\n\n const handleFocus = () => {\n setIsFocused(true);\n };\n\n const handleBlur = () => {\n setIsFocused(false);\n };\n\n const isLabelFloating = isFocused || internalValue.length > 0;\n\n const containerClasses = [\n 'input-container',\n isFocused ? 'input-container--focused' : '',\n isLabelFloating ? 'input-container--floating' : '',\n error ? 'input-container--error' : '',\n disabled ? 'input-container--disabled' : '',\n className,\n ].filter(Boolean).join(' ');\n\n return (\n <div className={containerClasses}>\n <div className=\"input-field\">\n <input\n ref={inputRef}\n type={type}\n value={internalValue}\n onChange={handleChange}\n onFocus={handleFocus}\n onBlur={handleBlur}\n disabled={disabled}\n required={required}\n className=\"input-element\"\n aria-label={label}\n />\n <label className=\"input-label\">\n {label}\n {required && <span className=\"input-required\">*</span>}\n </label>\n </div>\n {error && <div className=\"input-error\">{error}</div>}\n </div>\n );\n};","import React, { useState } from 'react';\nimport './Switch.css';\n\nconst imgOn = \"http://localhost:3845/assets/86c15ca80cb444eb8cc1db3e8335b63ac51c31a9.svg\";\nconst imgOff = \"http://localhost:3845/assets/ad7677e073e42d60a4ed84f42b17c5e56222a75d.svg\";\nconst imgGroupOn = \"http://localhost:3845/assets/25f95806464af11dea630fdf68fa80d5415c7da4.svg\";\nconst imgGroupOff = \"http://localhost:3845/assets/164245110dc3649da31e9ff08005286a44c3c907.svg\";\n\ninterface SwitchProps {\n checked?: boolean;\n onChange?: (checked: boolean) => void;\n disabled?: boolean;\n size?: 'small' | 'medium' | 'large';\n label?: string;\n className?: string;\n showIcon?: boolean;\n}\n\nexport const Switch: React.FC<SwitchProps> = ({\n checked = false,\n onChange,\n disabled = false,\n size = 'medium',\n label,\n className = '',\n showIcon = true,\n}) => {\n const [internalChecked, setInternalChecked] = useState(checked);\n\n const handleToggle = () => {\n if (disabled) return;\n \n const newChecked = !internalChecked;\n setInternalChecked(newChecked);\n onChange?.(newChecked);\n };\n\n const switchClasses = [\n 'switch',\n `switch--${size}`,\n internalChecked ? 'switch--checked' : '',\n disabled ? 'switch--disabled' : '',\n className,\n ].filter(Boolean).join(' ');\n\n return (\n <div className=\"switch-container\">\n {label && (\n <label className=\"switch-label\" htmlFor={`switch-${Math.random()}`}>\n {label}\n </label>\n )}\n <div className=\"switch-wrapper\">\n {showIcon && (\n <div className=\"switch-icon\">\n <img \n alt=\"Power icon\" \n src={internalChecked ? imgOn : imgOff}\n className=\"switch-power-icon\"\n />\n </div>\n )}\n <button\n type=\"button\"\n role=\"switch\"\n aria-checked={internalChecked}\n className={switchClasses}\n onClick={handleToggle}\n disabled={disabled}\n >\n <span className=\"switch-track\">\n <span className=\"switch-thumb\">\n {internalChecked && (\n <img \n alt=\"\" \n src={imgGroupOn} \n className=\"switch-thumb-icon\"\n />\n )}\n {!internalChecked && (\n <img \n alt=\"\" \n src={imgGroupOff} \n className=\"switch-thumb-icon\"\n />\n )}\n </span>\n </span>\n </button>\n </div>\n </div>\n );\n};","import { Input } from \"./Input\";\nimport { Switch } from \"./Switch\";\ninterface ProductionUnitProps {\n onChangeInput?: (value: string) => void;\n onChangeSwitch?: (checked: boolean) => void;\n value?: string;\n checked?: boolean;\n}\nexport const ProductionUnit = ({\n onChangeInput,\n onChangeSwitch,\n value,\n checked,\n}: ProductionUnitProps) => {\n return (\n <div className=\"production-unit-container\">\n <Input\n label=\"Production Unit\"\n type=\"number\"\n onChange={onChangeInput}\n value={value}\n />\n <Switch\n label=\"Production Unit\"\n checked={checked}\n onChange={onChangeSwitch}\n className=\"production-unit-switch\"\n />\n </div>\n );\n};\n","import React, { useEffect, useState } from \"react\";\nimport \"./Histogram.css\";\n\ninterface HistogramProps {\n /** Maximum value configuration with value and color */\n max: {\n value: number;\n color: string;\n opacity?: number;\n };\n /** Relative/current value configuration with value and color */\n relative: {\n value: number;\n color: string;\n };\n /** Height of the histogram bar in pixels */\n barHeight?: number;\n /** Width of the histogram bar in pixels */\n barWidth?: number;\n /** Orientation of the histogram - 'vertical' or 'horizontal' */\n orientation?: 'vertical' | 'horizontal';\n /** Corner radius configuration for individual corners */\n cornerRadius?: {\n topLeft?: number;\n topRight?: number;\n bottomLeft?: number;\n bottomRight?: number;\n };\n /** Child components (typically text content) */\n children?: React.ReactNode;\n}\n\nexport const Histogram: React.FC<HistogramProps> = ({\n max,\n relative,\n barHeight = 103,\n barWidth = 32,\n orientation = 'vertical',\n cornerRadius,\n children,\n}) => {\n const [animatedHeight, setAnimatedHeight] = useState(0);\n const [animatedWidth, setAnimatedWidth] = useState(0);\n\n // Calculate target dimensions based on orientation\n const targetHeight = (Math.min((relative.value / max.value) * 100, 100) / 100) * barHeight;\n const targetWidth = (Math.min((relative.value / max.value) * 100, 100) / 100) * barWidth;\n\n // Simple Chart.js-like animation: always animate from 0 to target\n useEffect(() => {\n setAnimatedHeight(0);\n setAnimatedWidth(0);\n \n const startTime = Date.now();\n const duration = 1000;\n\n const animate = () => {\n const elapsed = Date.now() - startTime;\n const progress = Math.min(elapsed / duration, 1);\n\n // Chart.js-like easing (easeOutQuart)\n const easeOutQuart = 1 - Math.pow(1 - progress, 4);\n \n setAnimatedHeight(targetHeight * easeOutQuart);\n setAnimatedWidth(targetWidth * easeOutQuart);\n\n if (progress < 1) {\n requestAnimationFrame(animate);\n }\n };\n\n requestAnimationFrame(animate);\n }, [targetHeight, targetWidth]);\n\n const displayWidth = orientation === 'horizontal' ? barHeight : barWidth;\n const displayHeight = orientation === 'horizontal' ? barWidth : barHeight;\n const svgWidth = orientation === 'horizontal' ? barHeight : barWidth;\n const svgHeight = orientation === 'horizontal' ? barWidth : barHeight;\n\n // Helper function to create rounded rectangle path\n const createRoundedRectPath = (\n x: number,\n y: number,\n width: number,\n height: number,\n radii: { topLeft: number; topRight: number; bottomLeft: number; bottomRight: number }\n ) => {\n const { topLeft, topRight, bottomLeft, bottomRight } = radii;\n \n return `\n M ${x + topLeft} ${y}\n L ${x + width - topRight} ${y}\n Q ${x + width} ${y} ${x + width} ${y + topRight}\n L ${x + width} ${y + height - bottomRight}\n Q ${x + width} ${y + height} ${x + width - bottomRight} ${y + height}\n L ${x + bottomLeft} ${y + height}\n Q ${x} ${y + height} ${x} ${y + height - bottomLeft}\n L ${x} ${y + topLeft}\n Q ${x} ${y} ${x + topLeft} ${y}\n Z\n `.trim().replace(/\\s+/g, ' ');\n };\n\n // Default corner radius values\n const defaultCornerRadius = { topLeft: 2, topRight: 2, bottomLeft: 2, bottomRight: 2 };\n const corners = cornerRadius ? {\n topLeft: cornerRadius.topLeft ?? defaultCornerRadius.topLeft,\n topRight: cornerRadius.topRight ?? defaultCornerRadius.topRight,\n bottomLeft: cornerRadius.bottomLeft ?? defaultCornerRadius.bottomLeft,\n bottomRight: cornerRadius.bottomRight ?? defaultCornerRadius.bottomRight,\n } : defaultCornerRadius;\n\n return (\n <div className={`histogram-container ${orientation === 'horizontal' ? 'histogram-container--horizontal' : ''}`}>\n <div className={`histogram-content ${orientation === 'horizontal' ? 'histogram-content--horizontal' : ''}`}>\n <div \n className=\"histogram-bar\"\n style={{\n height: `${displayHeight}px`,\n width: `${displayWidth}px`\n }}\n >\n <svg\n width={svgWidth}\n height={svgHeight}\n viewBox={`0 0 ${svgWidth} ${svgHeight}`}\n className=\"histogram-svg\"\n >\n {/* Background bar (max value) */}\n <path\n d={createRoundedRectPath(0, 0, svgWidth, svgHeight, corners)}\n fill={max.color}\n fillOpacity={max.opacity || 1}\n />\n {/* Foreground bar (relative value) with animation */}\n {orientation === 'vertical' ? (\n <path\n d={createRoundedRectPath(\n 0,\n svgHeight - animatedHeight,\n svgWidth,\n animatedHeight,\n {\n topLeft: animatedHeight >= svgHeight ? corners.topLeft : 0,\n topRight: animatedHeight >= svgHeight ? corners.topRight : 0,\n bottomLeft: corners.bottomLeft,\n bottomRight: corners.bottomRight,\n }\n )}\n fill={relative.color}\n />\n ) : (\n <path\n d={createRoundedRectPath(\n 0,\n 0,\n animatedWidth,\n svgHeight,\n {\n topLeft: corners.topLeft,\n topRight: animatedWidth >= svgWidth ? corners.topRight : 0,\n bottomLeft: corners.bottomLeft,\n bottomRight: animatedWidth >= svgWidth ? corners.bottomRight : 0,\n }\n )}\n fill={relative.color}\n />\n )}\n </svg>\n </div>\n {children && (\n <div className={`histogram-text-container ${orientation === 'horizontal' ? 'histogram-text-container--horizontal' : ''}`}>\n {children}\n </div>\n )}\n </div>\n </div>\n );\n};\n","import React from \"react\";\nimport \"./Chip.css\";\n\ninterface ChipProps {\n // Define any props you want to pass to the Chip component\n label?: string;\n bgColor?: string;\n textColor?: string;\n}\n\nexport const Chip: React.FC<ChipProps> = ({ label, bgColor, textColor }) => {\n return (\n <div className=\"chip-container\" style={{ backgroundColor: bgColor }}>\n <div className=\"chip-content\">\n <p className=\"chip-label\" style={{ color: textColor }}>\n {label}\n </p>\n </div>\n </div>\n );\n};\n"],"names":["Input","_a","label","_b","value","onChange","_c","type","_d","disabled","error","_e","className","_f","required","_g","useState","internalValue","setInternalValue","_h","isFocused","setIsFocused","inputRef","useRef","useEffect","containerClasses","length","filter","Boolean","join","_jsxs","_jsx","ref","e","newValue","target","onFocus","onBlur","children","Switch","checked","size","showIcon","internalChecked","setInternalChecked","switchClasses","concat","htmlFor","Math","random","alt","src","role","onClick","newChecked","ProductionUnit","onChangeInput","onChangeSwitch","Histogram","max","relative","barHeight","barWidth","orientation","cornerRadius","_j","animatedHeight","setAnimatedHeight","_k","animatedWidth","setAnimatedWidth","targetHeight","min","targetWidth","startTime","Date","now","animate","elapsed","progress","easeOutQuart","pow","requestAnimationFrame","displayWidth","displayHeight","svgWidth","svgHeight","createRoundedRectPath","x","y","width","height","radii","topLeft","topRight","bottomLeft","bottomRight","trim","replace","defaultCornerRadius","corners","style","viewBox","d","fill","color","fillOpacity","opacity","Chip","bgColor","textColor","backgroundColor"],"mappings":"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"}
package/dist/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";var t=require("react/jsx-runtime"),o=require("react");exports.Chip=function(o){var a=o.label,c=o.bgColor,n=o.textColor;return t.jsx("div",{className:"chip-container",style:{backgroundColor:c},children:t.jsx("div",{className:"chip-content",children:t.jsx("p",{className:"chip-label",style:{color:n},children:a})})})},exports.Histogram=function(a){var c,n,i,e,r=a.max,l=a.relative,h=a.barHeight,s=void 0===h?103:h,m=a.barWidth,g=void 0===m?32:m,p=a.orientation,d=void 0===p?"vertical":p,v=a.cornerRadius,f=a.children,u=o.useState(0),b=u[0],L=u[1],x=o.useState(0),R=x[0],j=x[1],z=Math.min(l.value/r.value*100,100)/100*s,N=Math.min(l.value/r.value*100,100)/100*g;o.useEffect(function(){L(0),j(0);var t=Date.now(),o=function(){var a=Date.now()-t,c=Math.min(a/1e3,1),n=1-Math.pow(1-c,4);L(z*n),j(N*n),c<1&&requestAnimationFrame(o)};requestAnimationFrame(o)},[z,N]);var w="horizontal"===d?s:g,y="horizontal"===d?g:s,M="horizontal"===d?s:g,q="horizontal"===d?g:s,C=function(t,o,a,c,n){var i=n.topLeft,e=n.topRight,r=n.bottomLeft,l=n.bottomRight;return"\n M ".concat(t+i," ").concat(o,"\n L ").concat(t+a-e," ").concat(o,"\n Q ").concat(t+a," ").concat(o," ").concat(t+a," ").concat(o+e,"\n L ").concat(t+a," ").concat(o+c-l,"\n Q ").concat(t+a," ").concat(o+c," ").concat(t+a-l," ").concat(o+c,"\n L ").concat(t+r," ").concat(o+c,"\n Q ").concat(t," ").concat(o+c," ").concat(t," ").concat(o+c-r,"\n L ").concat(t," ").concat(o+i,"\n Q ").concat(t," ").concat(o," ").concat(t+i," ").concat(o,"\n Z\n ").trim().replace(/\s+/g," ")},Q={topLeft:2,topRight:2,bottomLeft:2,bottomRight:2},A=v?{topLeft:null!==(c=v.topLeft)&&void 0!==c?c:Q.topLeft,topRight:null!==(n=v.topRight)&&void 0!==n?n:Q.topRight,bottomLeft:null!==(i=v.bottomLeft)&&void 0!==i?i:Q.bottomLeft,bottomRight:null!==(e=v.bottomRight)&&void 0!==e?e:Q.bottomRight}:Q;return t.jsx("div",{className:"histogram-container ".concat("horizontal"===d?"histogram-container--horizontal":""),children:t.jsxs("div",{className:"histogram-content ".concat("horizontal"===d?"histogram-content--horizontal":""),children:[t.jsx("div",{className:"histogram-bar",style:{height:"".concat(y,"px"),width:"".concat(w,"px")},children:t.jsxs("svg",{width:M,height:q,viewBox:"0 0 ".concat(M," ").concat(q),className:"histogram-svg",children:[t.jsx("path",{d:C(0,0,M,q,A),fill:r.color,fillOpacity:r.opacity||1}),"vertical"===d?t.jsx("path",{d:C(0,q-b,M,b,{topLeft:b>=q?A.topLeft:0,topRight:b>=q?A.topRight:0,bottomLeft:A.bottomLeft,bottomRight:A.bottomRight}),fill:l.color}):t.jsx("path",{d:C(0,0,R,q,{topLeft:A.topLeft,topRight:R>=M?A.topRight:0,bottomLeft:A.bottomLeft,bottomRight:R>=M?A.bottomRight:0}),fill:l.color})]})}),f&&t.jsx("div",{className:"histogram-text-container ".concat("horizontal"===d?"histogram-text-container--horizontal":""),children:f})]})})};
1
+ "use strict";var t=require("react/jsx-runtime"),o=require("react"),a=function(a){var e=a.label,c=a.value,n=void 0===c?"":c,i=a.onChange,s=a.type,l=void 0===s?"text":s,r=a.disabled,h=void 0!==r&&r,d=a.error,u=a.className,m=void 0===u?"":u,p=a.required,v=void 0!==p&&p,f=o.useState(n),g=f[0],b=f[1],x=o.useState(!1),j=x[0],w=x[1],N=o.useRef(null);o.useEffect(function(){b(n)},[n]);var L=["input-container",j?"input-container--focused":"",j||g.length>0?"input-container--floating":"",d?"input-container--error":"",h?"input-container--disabled":"",m].filter(Boolean).join(" ");return t.jsxs("div",{className:L,children:[t.jsxs("div",{className:"input-field",children:[t.jsx("input",{ref:N,type:l,value:g,onChange:function(t){var o=t.target.value;b(o),null==i||i(o)},onFocus:function(){w(!0)},onBlur:function(){w(!1)},disabled:h,required:v,className:"input-element","aria-label":e}),t.jsxs("label",{className:"input-label",children:[e,v&&t.jsx("span",{className:"input-required",children:"*"})]})]}),d&&t.jsx("div",{className:"input-error",children:d})]})},e=function(a){var e=a.checked,c=void 0!==e&&e,n=a.onChange,i=a.disabled,s=void 0!==i&&i,l=a.size,r=void 0===l?"medium":l,h=a.label,d=a.className,u=void 0===d?"":d,m=a.showIcon,p=void 0===m||m,v=o.useState(c),f=v[0],g=v[1],b=["switch","switch--".concat(r),f?"switch--checked":"",s?"switch--disabled":"",u].filter(Boolean).join(" ");return t.jsxs("div",{className:"switch-container",children:[h&&t.jsx("label",{className:"switch-label",htmlFor:"switch-".concat(Math.random()),children:h}),t.jsxs("div",{className:"switch-wrapper",children:[p&&t.jsx("div",{className:"switch-icon",children:t.jsx("img",{alt:"Power icon",src:f?"http://localhost:3845/assets/86c15ca80cb444eb8cc1db3e8335b63ac51c31a9.svg":"http://localhost:3845/assets/ad7677e073e42d60a4ed84f42b17c5e56222a75d.svg",className:"switch-power-icon"})}),t.jsx("button",{type:"button",role:"switch","aria-checked":f,className:b,onClick:function(){if(!s){var t=!f;g(t),null==n||n(t)}},disabled:s,children:t.jsx("span",{className:"switch-track",children:t.jsxs("span",{className:"switch-thumb",children:[f&&t.jsx("img",{alt:"",src:"http://localhost:3845/assets/25f95806464af11dea630fdf68fa80d5415c7da4.svg",className:"switch-thumb-icon"}),!f&&t.jsx("img",{alt:"",src:"http://localhost:3845/assets/164245110dc3649da31e9ff08005286a44c3c907.svg",className:"switch-thumb-icon"})]})})})]})]})};exports.Chip=function(o){var a=o.label,e=o.bgColor,c=o.textColor;return t.jsx("div",{className:"chip-container",style:{backgroundColor:e},children:t.jsx("div",{className:"chip-content",children:t.jsx("p",{className:"chip-label",style:{color:c},children:a})})})},exports.Histogram=function(a){var e,c,n,i,s=a.max,l=a.relative,r=a.barHeight,h=void 0===r?103:r,d=a.barWidth,u=void 0===d?32:d,m=a.orientation,p=void 0===m?"vertical":m,v=a.cornerRadius,f=a.children,g=o.useState(0),b=g[0],x=g[1],j=o.useState(0),w=j[0],N=j[1],L=Math.min(l.value/s.value*100,100)/100*h,R=Math.min(l.value/s.value*100,100)/100*u;o.useEffect(function(){x(0),N(0);var t=Date.now(),o=function(){var a=Date.now()-t,e=Math.min(a/1e3,1),c=1-Math.pow(1-e,4);x(L*c),N(R*c),e<1&&requestAnimationFrame(o)};requestAnimationFrame(o)},[L,R]);var C="horizontal"===p?h:u,z="horizontal"===p?u:h,y="horizontal"===p?h:u,k="horizontal"===p?u:h,q=function(t,o,a,e,c){var n=c.topLeft,i=c.topRight,s=c.bottomLeft,l=c.bottomRight;return"\n M ".concat(t+n," ").concat(o,"\n L ").concat(t+a-i," ").concat(o,"\n Q ").concat(t+a," ").concat(o," ").concat(t+a," ").concat(o+i,"\n L ").concat(t+a," ").concat(o+e-l,"\n Q ").concat(t+a," ").concat(o+e," ").concat(t+a-l," ").concat(o+e,"\n L ").concat(t+s," ").concat(o+e,"\n Q ").concat(t," ").concat(o+e," ").concat(t," ").concat(o+e-s,"\n L ").concat(t," ").concat(o+n,"\n Q ").concat(t," ").concat(o," ").concat(t+n," ").concat(o,"\n Z\n ").trim().replace(/\s+/g," ")},S={topLeft:2,topRight:2,bottomLeft:2,bottomRight:2},M=v?{topLeft:null!==(e=v.topLeft)&&void 0!==e?e:S.topLeft,topRight:null!==(c=v.topRight)&&void 0!==c?c:S.topRight,bottomLeft:null!==(n=v.bottomLeft)&&void 0!==n?n:S.bottomLeft,bottomRight:null!==(i=v.bottomRight)&&void 0!==i?i:S.bottomRight}:S;return t.jsx("div",{className:"histogram-container ".concat("horizontal"===p?"histogram-container--horizontal":""),children:t.jsxs("div",{className:"histogram-content ".concat("horizontal"===p?"histogram-content--horizontal":""),children:[t.jsx("div",{className:"histogram-bar",style:{height:"".concat(z,"px"),width:"".concat(C,"px")},children:t.jsxs("svg",{width:y,height:k,viewBox:"0 0 ".concat(y," ").concat(k),className:"histogram-svg",children:[t.jsx("path",{d:q(0,0,y,k,M),fill:s.color,fillOpacity:s.opacity||1}),"vertical"===p?t.jsx("path",{d:q(0,k-b,y,b,{topLeft:b>=k?M.topLeft:0,topRight:b>=k?M.topRight:0,bottomLeft:M.bottomLeft,bottomRight:M.bottomRight}),fill:l.color}):t.jsx("path",{d:q(0,0,w,k,{topLeft:M.topLeft,topRight:w>=y?M.topRight:0,bottomLeft:M.bottomLeft,bottomRight:w>=y?M.bottomRight:0}),fill:l.color})]})}),f&&t.jsx("div",{className:"histogram-text-container ".concat("horizontal"===p?"histogram-text-container--horizontal":""),children:f})]})})},exports.Input=a,exports.ProductionUnit=function(o){var c=o.onChangeInput,n=o.onChangeSwitch,i=o.value,s=o.checked;return t.jsxs("div",{className:"production-unit-container",children:[t.jsx(a,{label:"Production Unit",type:"number",onChange:c,value:i}),t.jsx(e,{label:"Production Unit",checked:s,onChange:n,className:"production-unit-switch"})]})},exports.Switch=e;
2
2
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../src/components/Chip.tsx","../src/components/Histogram.tsx"],"sourcesContent":["import React from \"react\";\nimport \"./Chip.css\";\n\ninterface ChipProps {\n // Define any props you want to pass to the Chip component\n label?: string;\n bgColor?: string;\n textColor?: string;\n}\n\nexport const Chip: React.FC<ChipProps> = ({ label, bgColor, textColor }) => {\n return (\n <div className=\"chip-container\" style={{ backgroundColor: bgColor }}>\n <div className=\"chip-content\">\n <p className=\"chip-label\" style={{ color: textColor }}>\n {label}\n </p>\n </div>\n </div>\n );\n};\n","import React, { useEffect, useState } from \"react\";\nimport \"./Histogram.css\";\n\ninterface HistogramProps {\n /** Maximum value configuration with value and color */\n max: {\n value: number;\n color: string;\n opacity?: number;\n };\n /** Relative/current value configuration with value and color */\n relative: {\n value: number;\n color: string;\n };\n /** Height of the histogram bar in pixels */\n barHeight?: number;\n /** Width of the histogram bar in pixels */\n barWidth?: number;\n /** Orientation of the histogram - 'vertical' or 'horizontal' */\n orientation?: 'vertical' | 'horizontal';\n /** Corner radius configuration for individual corners */\n cornerRadius?: {\n topLeft?: number;\n topRight?: number;\n bottomLeft?: number;\n bottomRight?: number;\n };\n /** Child components (typically text content) */\n children?: React.ReactNode;\n}\n\nexport const Histogram: React.FC<HistogramProps> = ({\n max,\n relative,\n barHeight = 103,\n barWidth = 32,\n orientation = 'vertical',\n cornerRadius,\n children,\n}) => {\n const [animatedHeight, setAnimatedHeight] = useState(0);\n const [animatedWidth, setAnimatedWidth] = useState(0);\n\n // Calculate target dimensions based on orientation\n const targetHeight = (Math.min((relative.value / max.value) * 100, 100) / 100) * barHeight;\n const targetWidth = (Math.min((relative.value / max.value) * 100, 100) / 100) * barWidth;\n\n // Simple Chart.js-like animation: always animate from 0 to target\n useEffect(() => {\n setAnimatedHeight(0);\n setAnimatedWidth(0);\n \n const startTime = Date.now();\n const duration = 1000;\n\n const animate = () => {\n const elapsed = Date.now() - startTime;\n const progress = Math.min(elapsed / duration, 1);\n\n // Chart.js-like easing (easeOutQuart)\n const easeOutQuart = 1 - Math.pow(1 - progress, 4);\n \n setAnimatedHeight(targetHeight * easeOutQuart);\n setAnimatedWidth(targetWidth * easeOutQuart);\n\n if (progress < 1) {\n requestAnimationFrame(animate);\n }\n };\n\n requestAnimationFrame(animate);\n }, [targetHeight, targetWidth]);\n\n const displayWidth = orientation === 'horizontal' ? barHeight : barWidth;\n const displayHeight = orientation === 'horizontal' ? barWidth : barHeight;\n const svgWidth = orientation === 'horizontal' ? barHeight : barWidth;\n const svgHeight = orientation === 'horizontal' ? barWidth : barHeight;\n\n // Helper function to create rounded rectangle path\n const createRoundedRectPath = (\n x: number,\n y: number,\n width: number,\n height: number,\n radii: { topLeft: number; topRight: number; bottomLeft: number; bottomRight: number }\n ) => {\n const { topLeft, topRight, bottomLeft, bottomRight } = radii;\n \n return `\n M ${x + topLeft} ${y}\n L ${x + width - topRight} ${y}\n Q ${x + width} ${y} ${x + width} ${y + topRight}\n L ${x + width} ${y + height - bottomRight}\n Q ${x + width} ${y + height} ${x + width - bottomRight} ${y + height}\n L ${x + bottomLeft} ${y + height}\n Q ${x} ${y + height} ${x} ${y + height - bottomLeft}\n L ${x} ${y + topLeft}\n Q ${x} ${y} ${x + topLeft} ${y}\n Z\n `.trim().replace(/\\s+/g, ' ');\n };\n\n // Default corner radius values\n const defaultCornerRadius = { topLeft: 2, topRight: 2, bottomLeft: 2, bottomRight: 2 };\n const corners = cornerRadius ? {\n topLeft: cornerRadius.topLeft ?? defaultCornerRadius.topLeft,\n topRight: cornerRadius.topRight ?? defaultCornerRadius.topRight,\n bottomLeft: cornerRadius.bottomLeft ?? defaultCornerRadius.bottomLeft,\n bottomRight: cornerRadius.bottomRight ?? defaultCornerRadius.bottomRight,\n } : defaultCornerRadius;\n\n return (\n <div className={`histogram-container ${orientation === 'horizontal' ? 'histogram-container--horizontal' : ''}`}>\n <div className={`histogram-content ${orientation === 'horizontal' ? 'histogram-content--horizontal' : ''}`}>\n <div \n className=\"histogram-bar\"\n style={{\n height: `${displayHeight}px`,\n width: `${displayWidth}px`\n }}\n >\n <svg\n width={svgWidth}\n height={svgHeight}\n viewBox={`0 0 ${svgWidth} ${svgHeight}`}\n className=\"histogram-svg\"\n >\n {/* Background bar (max value) */}\n <path\n d={createRoundedRectPath(0, 0, svgWidth, svgHeight, corners)}\n fill={max.color}\n fillOpacity={max.opacity || 1}\n />\n {/* Foreground bar (relative value) with animation */}\n {orientation === 'vertical' ? (\n <path\n d={createRoundedRectPath(\n 0,\n svgHeight - animatedHeight,\n svgWidth,\n animatedHeight,\n {\n topLeft: animatedHeight >= svgHeight ? corners.topLeft : 0,\n topRight: animatedHeight >= svgHeight ? corners.topRight : 0,\n bottomLeft: corners.bottomLeft,\n bottomRight: corners.bottomRight,\n }\n )}\n fill={relative.color}\n />\n ) : (\n <path\n d={createRoundedRectPath(\n 0,\n 0,\n animatedWidth,\n svgHeight,\n {\n topLeft: corners.topLeft,\n topRight: animatedWidth >= svgWidth ? corners.topRight : 0,\n bottomLeft: corners.bottomLeft,\n bottomRight: animatedWidth >= svgWidth ? corners.bottomRight : 0,\n }\n )}\n fill={relative.color}\n />\n )}\n </svg>\n </div>\n {children && (\n <div className={`histogram-text-container ${orientation === 'horizontal' ? 'histogram-text-container--horizontal' : ''}`}>\n {children}\n </div>\n )}\n </div>\n </div>\n );\n};\n"],"names":["_a","label","bgColor","textColor","_jsx","jsx","className","style","backgroundColor","children","color","max","relative","_f","barHeight","_g","barWidth","_h","orientation","cornerRadius","_j","useState","animatedHeight","setAnimatedHeight","_k","animatedWidth","setAnimatedWidth","targetHeight","Math","min","value","targetWidth","useEffect","startTime","Date","now","animate","elapsed","progress","easeOutQuart","pow","requestAnimationFrame","displayWidth","displayHeight","svgWidth","svgHeight","createRoundedRectPath","x","y","width","height","radii","topLeft","topRight","bottomLeft","bottomRight","concat","trim","replace","defaultCornerRadius","corners","_b","_c","_d","_e","_jsxs","viewBox","d","fill","fillOpacity","opacity"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","sources":["../src/components/Input.tsx","../src/components/Switch.tsx","../src/components/Chip.tsx","../src/components/Histogram.tsx","../src/components/ProductionUnit.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect } from 'react';\nimport './Input.css';\n\ninterface InputProps {\n label: string;\n value?: string;\n onChange?: (value: string) => void;\n type?: 'text' | 'email' | 'password' | 'number';\n disabled?: boolean;\n error?: string;\n className?: string;\n required?: boolean;\n}\n\nexport const Input: React.FC<InputProps> = ({\n label,\n value = '',\n onChange,\n type = 'text',\n disabled = false,\n error,\n className = '',\n required = false,\n}) => {\n const [internalValue, setInternalValue] = useState(value);\n const [isFocused, setIsFocused] = useState(false);\n const inputRef = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n setInternalValue(value);\n }, [value]);\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const newValue = e.target.value;\n setInternalValue(newValue);\n onChange?.(newValue);\n };\n\n const handleFocus = () => {\n setIsFocused(true);\n };\n\n const handleBlur = () => {\n setIsFocused(false);\n };\n\n const isLabelFloating = isFocused || internalValue.length > 0;\n\n const containerClasses = [\n 'input-container',\n isFocused ? 'input-container--focused' : '',\n isLabelFloating ? 'input-container--floating' : '',\n error ? 'input-container--error' : '',\n disabled ? 'input-container--disabled' : '',\n className,\n ].filter(Boolean).join(' ');\n\n return (\n <div className={containerClasses}>\n <div className=\"input-field\">\n <input\n ref={inputRef}\n type={type}\n value={internalValue}\n onChange={handleChange}\n onFocus={handleFocus}\n onBlur={handleBlur}\n disabled={disabled}\n required={required}\n className=\"input-element\"\n aria-label={label}\n />\n <label className=\"input-label\">\n {label}\n {required && <span className=\"input-required\">*</span>}\n </label>\n </div>\n {error && <div className=\"input-error\">{error}</div>}\n </div>\n );\n};","import React, { useState } from 'react';\nimport './Switch.css';\n\nconst imgOn = \"http://localhost:3845/assets/86c15ca80cb444eb8cc1db3e8335b63ac51c31a9.svg\";\nconst imgOff = \"http://localhost:3845/assets/ad7677e073e42d60a4ed84f42b17c5e56222a75d.svg\";\nconst imgGroupOn = \"http://localhost:3845/assets/25f95806464af11dea630fdf68fa80d5415c7da4.svg\";\nconst imgGroupOff = \"http://localhost:3845/assets/164245110dc3649da31e9ff08005286a44c3c907.svg\";\n\ninterface SwitchProps {\n checked?: boolean;\n onChange?: (checked: boolean) => void;\n disabled?: boolean;\n size?: 'small' | 'medium' | 'large';\n label?: string;\n className?: string;\n showIcon?: boolean;\n}\n\nexport const Switch: React.FC<SwitchProps> = ({\n checked = false,\n onChange,\n disabled = false,\n size = 'medium',\n label,\n className = '',\n showIcon = true,\n}) => {\n const [internalChecked, setInternalChecked] = useState(checked);\n\n const handleToggle = () => {\n if (disabled) return;\n \n const newChecked = !internalChecked;\n setInternalChecked(newChecked);\n onChange?.(newChecked);\n };\n\n const switchClasses = [\n 'switch',\n `switch--${size}`,\n internalChecked ? 'switch--checked' : '',\n disabled ? 'switch--disabled' : '',\n className,\n ].filter(Boolean).join(' ');\n\n return (\n <div className=\"switch-container\">\n {label && (\n <label className=\"switch-label\" htmlFor={`switch-${Math.random()}`}>\n {label}\n </label>\n )}\n <div className=\"switch-wrapper\">\n {showIcon && (\n <div className=\"switch-icon\">\n <img \n alt=\"Power icon\" \n src={internalChecked ? imgOn : imgOff}\n className=\"switch-power-icon\"\n />\n </div>\n )}\n <button\n type=\"button\"\n role=\"switch\"\n aria-checked={internalChecked}\n className={switchClasses}\n onClick={handleToggle}\n disabled={disabled}\n >\n <span className=\"switch-track\">\n <span className=\"switch-thumb\">\n {internalChecked && (\n <img \n alt=\"\" \n src={imgGroupOn} \n className=\"switch-thumb-icon\"\n />\n )}\n {!internalChecked && (\n <img \n alt=\"\" \n src={imgGroupOff} \n className=\"switch-thumb-icon\"\n />\n )}\n </span>\n </span>\n </button>\n </div>\n </div>\n );\n};","import React from \"react\";\nimport \"./Chip.css\";\n\ninterface ChipProps {\n // Define any props you want to pass to the Chip component\n label?: string;\n bgColor?: string;\n textColor?: string;\n}\n\nexport const Chip: React.FC<ChipProps> = ({ label, bgColor, textColor }) => {\n return (\n <div className=\"chip-container\" style={{ backgroundColor: bgColor }}>\n <div className=\"chip-content\">\n <p className=\"chip-label\" style={{ color: textColor }}>\n {label}\n </p>\n </div>\n </div>\n );\n};\n","import React, { useEffect, useState } from \"react\";\nimport \"./Histogram.css\";\n\ninterface HistogramProps {\n /** Maximum value configuration with value and color */\n max: {\n value: number;\n color: string;\n opacity?: number;\n };\n /** Relative/current value configuration with value and color */\n relative: {\n value: number;\n color: string;\n };\n /** Height of the histogram bar in pixels */\n barHeight?: number;\n /** Width of the histogram bar in pixels */\n barWidth?: number;\n /** Orientation of the histogram - 'vertical' or 'horizontal' */\n orientation?: 'vertical' | 'horizontal';\n /** Corner radius configuration for individual corners */\n cornerRadius?: {\n topLeft?: number;\n topRight?: number;\n bottomLeft?: number;\n bottomRight?: number;\n };\n /** Child components (typically text content) */\n children?: React.ReactNode;\n}\n\nexport const Histogram: React.FC<HistogramProps> = ({\n max,\n relative,\n barHeight = 103,\n barWidth = 32,\n orientation = 'vertical',\n cornerRadius,\n children,\n}) => {\n const [animatedHeight, setAnimatedHeight] = useState(0);\n const [animatedWidth, setAnimatedWidth] = useState(0);\n\n // Calculate target dimensions based on orientation\n const targetHeight = (Math.min((relative.value / max.value) * 100, 100) / 100) * barHeight;\n const targetWidth = (Math.min((relative.value / max.value) * 100, 100) / 100) * barWidth;\n\n // Simple Chart.js-like animation: always animate from 0 to target\n useEffect(() => {\n setAnimatedHeight(0);\n setAnimatedWidth(0);\n \n const startTime = Date.now();\n const duration = 1000;\n\n const animate = () => {\n const elapsed = Date.now() - startTime;\n const progress = Math.min(elapsed / duration, 1);\n\n // Chart.js-like easing (easeOutQuart)\n const easeOutQuart = 1 - Math.pow(1 - progress, 4);\n \n setAnimatedHeight(targetHeight * easeOutQuart);\n setAnimatedWidth(targetWidth * easeOutQuart);\n\n if (progress < 1) {\n requestAnimationFrame(animate);\n }\n };\n\n requestAnimationFrame(animate);\n }, [targetHeight, targetWidth]);\n\n const displayWidth = orientation === 'horizontal' ? barHeight : barWidth;\n const displayHeight = orientation === 'horizontal' ? barWidth : barHeight;\n const svgWidth = orientation === 'horizontal' ? barHeight : barWidth;\n const svgHeight = orientation === 'horizontal' ? barWidth : barHeight;\n\n // Helper function to create rounded rectangle path\n const createRoundedRectPath = (\n x: number,\n y: number,\n width: number,\n height: number,\n radii: { topLeft: number; topRight: number; bottomLeft: number; bottomRight: number }\n ) => {\n const { topLeft, topRight, bottomLeft, bottomRight } = radii;\n \n return `\n M ${x + topLeft} ${y}\n L ${x + width - topRight} ${y}\n Q ${x + width} ${y} ${x + width} ${y + topRight}\n L ${x + width} ${y + height - bottomRight}\n Q ${x + width} ${y + height} ${x + width - bottomRight} ${y + height}\n L ${x + bottomLeft} ${y + height}\n Q ${x} ${y + height} ${x} ${y + height - bottomLeft}\n L ${x} ${y + topLeft}\n Q ${x} ${y} ${x + topLeft} ${y}\n Z\n `.trim().replace(/\\s+/g, ' ');\n };\n\n // Default corner radius values\n const defaultCornerRadius = { topLeft: 2, topRight: 2, bottomLeft: 2, bottomRight: 2 };\n const corners = cornerRadius ? {\n topLeft: cornerRadius.topLeft ?? defaultCornerRadius.topLeft,\n topRight: cornerRadius.topRight ?? defaultCornerRadius.topRight,\n bottomLeft: cornerRadius.bottomLeft ?? defaultCornerRadius.bottomLeft,\n bottomRight: cornerRadius.bottomRight ?? defaultCornerRadius.bottomRight,\n } : defaultCornerRadius;\n\n return (\n <div className={`histogram-container ${orientation === 'horizontal' ? 'histogram-container--horizontal' : ''}`}>\n <div className={`histogram-content ${orientation === 'horizontal' ? 'histogram-content--horizontal' : ''}`}>\n <div \n className=\"histogram-bar\"\n style={{\n height: `${displayHeight}px`,\n width: `${displayWidth}px`\n }}\n >\n <svg\n width={svgWidth}\n height={svgHeight}\n viewBox={`0 0 ${svgWidth} ${svgHeight}`}\n className=\"histogram-svg\"\n >\n {/* Background bar (max value) */}\n <path\n d={createRoundedRectPath(0, 0, svgWidth, svgHeight, corners)}\n fill={max.color}\n fillOpacity={max.opacity || 1}\n />\n {/* Foreground bar (relative value) with animation */}\n {orientation === 'vertical' ? (\n <path\n d={createRoundedRectPath(\n 0,\n svgHeight - animatedHeight,\n svgWidth,\n animatedHeight,\n {\n topLeft: animatedHeight >= svgHeight ? corners.topLeft : 0,\n topRight: animatedHeight >= svgHeight ? corners.topRight : 0,\n bottomLeft: corners.bottomLeft,\n bottomRight: corners.bottomRight,\n }\n )}\n fill={relative.color}\n />\n ) : (\n <path\n d={createRoundedRectPath(\n 0,\n 0,\n animatedWidth,\n svgHeight,\n {\n topLeft: corners.topLeft,\n topRight: animatedWidth >= svgWidth ? corners.topRight : 0,\n bottomLeft: corners.bottomLeft,\n bottomRight: animatedWidth >= svgWidth ? corners.bottomRight : 0,\n }\n )}\n fill={relative.color}\n />\n )}\n </svg>\n </div>\n {children && (\n <div className={`histogram-text-container ${orientation === 'horizontal' ? 'histogram-text-container--horizontal' : ''}`}>\n {children}\n </div>\n )}\n </div>\n </div>\n );\n};\n","import { Input } from \"./Input\";\nimport { Switch } from \"./Switch\";\ninterface ProductionUnitProps {\n onChangeInput?: (value: string) => void;\n onChangeSwitch?: (checked: boolean) => void;\n value?: string;\n checked?: boolean;\n}\nexport const ProductionUnit = ({\n onChangeInput,\n onChangeSwitch,\n value,\n checked,\n}: ProductionUnitProps) => {\n return (\n <div className=\"production-unit-container\">\n <Input\n label=\"Production Unit\"\n type=\"number\"\n onChange={onChangeInput}\n value={value}\n />\n <Switch\n label=\"Production Unit\"\n checked={checked}\n onChange={onChangeSwitch}\n className=\"production-unit-switch\"\n />\n </div>\n );\n};\n"],"names":["Input","_a","label","_b","value","onChange","_c","type","_d","disabled","error","_e","className","_f","required","_g","useState","internalValue","setInternalValue","_h","isFocused","setIsFocused","inputRef","useRef","useEffect","containerClasses","length","filter","Boolean","join","_jsxs","_jsx","ref","e","newValue","target","onFocus","onBlur","children","jsx","Switch","checked","size","showIcon","internalChecked","setInternalChecked","switchClasses","concat","htmlFor","Math","random","alt","src","role","onClick","newChecked","bgColor","textColor","style","backgroundColor","color","max","relative","barHeight","barWidth","orientation","cornerRadius","_j","animatedHeight","setAnimatedHeight","_k","animatedWidth","setAnimatedWidth","targetHeight","min","targetWidth","startTime","Date","now","animate","elapsed","progress","easeOutQuart","pow","requestAnimationFrame","displayWidth","displayHeight","svgWidth","svgHeight","createRoundedRectPath","x","y","width","height","radii","topLeft","topRight","bottomLeft","bottomRight","trim","replace","defaultCornerRadius","corners","viewBox","d","fill","fillOpacity","opacity","onChangeInput","onChangeSwitch"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "rte-utils",
3
- "version": "1.2.4",
3
+ "version": "1.2.6",
4
4
  "description": "React components library in TypeScript for agigox projects",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",