ingred-ui 25.4.3 → 25.5.0

package/dist/components/RadioButton/RadioButton.d.ts

@@ -19,11 +19,13 @@ export type RadioButtonProps = Omit<React.InputHTMLAttributes<HTMLInputElement>,
     children?: React.ReactNode;
     onChange?: RadioButtonChangeHandler;
     inputRef?: React.Ref<HTMLInputElement>;
+    error?: boolean;
 };
 declare const RadioButton: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "size"> & {
     size?: RadioButtonSize | undefined;
     children?: React.ReactNode;
     onChange?: RadioButtonChangeHandler | undefined;
     inputRef?: React.Ref<HTMLInputElement> | undefined;
+    error?: boolean | undefined;
 } & React.RefAttributes<HTMLSpanElement | HTMLLabelElement>>;
 export default RadioButton;

package/dist/components/RadioButton/RadioButton.stories.d.ts

@@ -8,6 +8,7 @@ declare const _default: {
         children?: React.ReactNode;
         onChange?: import("./RadioButton").RadioButtonChangeHandler | undefined;
         inputRef?: React.Ref<HTMLInputElement> | undefined;
+        error?: boolean | undefined;
     } & React.RefAttributes<HTMLSpanElement | HTMLLabelElement>>;
     argTypes: {
         disabled: {

package/dist/components/RadioButton/styled.d.ts

@@ -7,10 +7,12 @@ type IndicatorProps = {
     size: RadioButtonSize;
     inside: string;
     border: string;
+    error: boolean;
 };
 export declare const Indicator: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, IndicatorProps, never>;
 export declare const Label: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {
     checked?: boolean | undefined;
     disabled?: boolean | undefined;
+    error?: boolean | undefined;
 }, never>;
 export {};

package/dist/index.es.js

@@ -1155,14 +1155,24 @@ var mi=["input:not([inert])","select:not([inert])","textarea:not([inert])","a[hr
   cursor: ${({disabled:e})=>e?"not-allowed":"pointer"};
   display: flex;
   align-items: center;
+
+  ${({disabled:e})=>!e&&w`
+      &:hover > span::before {
+        border-color: ${({theme:e})=>e.palette.primary.main};
+      }
+    `}
 `,zd=x.span`
   display: inline-flex;
   align-items: center;
-  color: ${({error:e,checked:t,disabled:n,theme:r})=>n?r.palette.text.disabled:t?r.palette.primary.main:e?r.palette.danger.main:r.palette.black};
+  color: ${({error:e,disabled:t,theme:n})=>t?n.palette.text.disabled:e?n.palette.danger.main:n.palette.black};
   font-size: ${({size:e})=>e===Td.SMALL?`${le.sm}px`:`${le.md}px`};
   &:disabled {
     color: ${({theme:e})=>e.palette.text.disabled};
   }
+
+  input:checked:not(:disabled) + & {
+    color: ${({theme:e})=>e.palette.primary.main};
+  }
   &::before {
     flex-shrink: 0;
     content: "";
@@ -1174,7 +1184,9 @@ var mi=["input:not([inert])","select:not([inert])","textarea:not([inert])","a[hr
     box-shadow: ${({theme:e})=>e.shadow["3dShadowBasic"]};
     background-color: ${({theme:e})=>e.palette.background.default};
     margin-right: ${({hasChild:e,theme:t})=>e?t.spacing/2+"px":"auto"};
-    transition: background-color 0.3s ease;
+    transition:
+      background-color 0.3s ease,
+      border-color 0.3s ease;
   }
 `;var Td;!function(e){e.SMALL="small",e.MEDIUM="medium"}(Td||(Td={}));const Bd=e.forwardRef((function(t,n){var{children:r,indeterminate:i=!1,error:o=!1,disabled:a=!1,inputRef:l,size:s=Td.MEDIUM}=t,c=S(t,["children","indeterminate","error","disabled","inputRef","size"]);return e.createElement(Zd,{ref:n,disabled:a},e.createElement(Rd,Object.assign({ref:l,error:o,readOnly:!0,type:"checkbox",indeterminate:i,disabled:a,_size:s},c)),e.createElement(zd,{size:s,error:o,indeterminate:i,hasChild:!!r,disabled:a,checked:c.checked},r))}));function Pd(...t){return e.useMemo((()=>t.every((e=>null===e))?null:e=>{for(const n of t)"function"==typeof n?n(e):n&&"string"!=typeof n&&(n.current=e)}),[t])}const Gd=({onClickAway:t,children:n})=>{const r=e.useRef(null),i=e.useRef(!1);e.useEffect((()=>(setTimeout((()=>{i.current=!0}),0),()=>{i.current=!1})),[]),e.useEffect((()=>{const e=e=>{i.current&&(null==r.current||r.current.contains(e.target)||t&&t(e))};return document.addEventListener("click",e),()=>{document.removeEventListener("click",e)}}),[r,t]);const o=Object.assign(Object.assign({},n.props),{ref:Pd(r,n.ref)});return e.cloneElement(n,o)},_d=({height:e="auto",maxHeight:t="none",minHeight:n="none"})=>w`
   height: ${e};
@@ -1439,6 +1451,12 @@ var mi=["input:not([inert])","select:not([inert])","textarea:not([inert])","a[hr
     opacity: 0;
     cursor: ${({disabled:e})=>e?"not-allowed":"pointer"};
   }
+
+  ${({disabled:e})=>!e&&w`
+      &:hover > input + span {
+        border-color: ${({theme:e})=>e.palette.primary.main};
+      }
+    `}
 `,Rf=x.span`
   position: relative;
   display: block;
@@ -1448,9 +1466,11 @@ var mi=["input:not([inert])","select:not([inert])","textarea:not([inert])","a[hr
   height: auto;
   border-radius: 50%;
   border: ${({border:e})=>e} solid
-    ${({theme:e})=>e.palette.divider};
+    ${({error:e,theme:t})=>e?t.palette.danger.main:t.palette.divider};
   box-shadow: ${({theme:e})=>e.shadow["3dShadowBasic"]};
-  transition: all 0.3s ease;
+  transition:
+    all 0.3s ease,
+    border-color 0.3s ease;
   background: ${({theme:e})=>e.palette.background.default};
 
   input:checked + & {
@@ -1492,8 +1512,12 @@ var mi=["input:not([inert])","select:not([inert])","textarea:not([inert])","a[hr
 `,Zf=x.span`
   flex: 0 1 auto;
   font-size: inherit;
-  color: ${({checked:e,disabled:t,theme:n})=>t?n.palette.text.disabled:e?n.palette.primary.main:n.palette.black};
-`;var zf;!function(e){e.SMALL="16px",e.MEDIUM="18px"}(zf||(zf={}));const Tf={[zf.SMALL]:{inside:"6px",border:"1px"},[zf.MEDIUM]:{inside:"8px",border:"1px"}},Bf=e.forwardRef((function(t,n){var{size:r=zf.MEDIUM,onChange:i,inputRef:o,children:a,disabled:l}=t,s=S(t,["size","onChange","inputRef","children","disabled"]);return e.createElement(Vf,{ref:n,as:null==a?"span":"label",disabled:l,size:r},e.createElement("input",Object.assign({},s,{ref:o,disabled:l,type:"radio",onChange:e=>{i&&i(e,e.target.checked)}})),e.createElement(Rf,Object.assign({size:r},Tf[r])),null!=a?e.createElement(Zf,{checked:s.checked,disabled:l},a):null)})),Pf=t=>{var{header:n=!1,selected:r=!1,onClick:i}=t,o=S(t,["header","selected","onClick"]);const a=n?Hf:Lf;return e.createElement(a,Object.assign({},o),!n&&e.createElement(Bf,{checked:r,onClick:e=>{e.stopPropagation(),i&&i(e)}}))},Gf=x.td`
+  color: ${({disabled:e,error:t,theme:n})=>e?n.palette.text.disabled:t?n.palette.danger.main:n.palette.black};
+
+  input:checked:not(:disabled) ~ & {
+    color: ${({theme:e})=>e.palette.primary.main};
+  }
+`;var zf;!function(e){e.SMALL="16px",e.MEDIUM="18px"}(zf||(zf={}));const Tf={[zf.SMALL]:{inside:"6px",border:"1px"},[zf.MEDIUM]:{inside:"8px",border:"1px"}},Bf=e.forwardRef((function(t,n){var{size:r=zf.MEDIUM,onChange:i,inputRef:o,children:a,disabled:l,error:s=!1}=t,c=S(t,["size","onChange","inputRef","children","disabled","error"]);return e.createElement(Vf,{ref:n,as:null==a?"span":"label",disabled:l,size:r},e.createElement("input",Object.assign({},c,{ref:o,disabled:l,type:"radio",onChange:e=>{i&&i(e,e.target.checked)}})),e.createElement(Rf,Object.assign({size:r},Tf[r],{error:s})),null!=a?e.createElement(Zf,{checked:c.checked,disabled:l,error:s},a):null)})),Pf=t=>{var{header:n=!1,selected:r=!1,onClick:i}=t,o=S(t,["header","selected","onClick"]);const a=n?Hf:Lf;return e.createElement(a,Object.assign({},o),!n&&e.createElement(Bf,{checked:r,onClick:e=>{e.stopPropagation(),i&&i(e)}}))},Gf=x.td`
   width: ${({width:e})=>e};
   padding-right: ${({theme:e})=>2*e.spacing}px;
   padding-left: ${({theme:e})=>2*e.spacing}px;
@@ -4841,6 +4865,12 @@ var mi=["input:not([inert])","select:not([inert])","textarea:not([inert])","a[hr
         opacity: 0;
       }
     `}
+
+  ${({disabled:e,checked:t})=>!e&&!t&&w`
+      &:hover {
+        border-color: ${({theme:e})=>e.palette.primary.main};
+      }
+    `}
 `,eM=x.input`
   width: 0;
   height: 0;