@sats-group/ui-lib 88.0.0 → 88.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sats-group/ui-lib",
-  "version": "88.0.0",
+  "version": "88.1.1",
   "description": "SATS web user interface library",
   "author": "developer@sats.no",
   "license": "UNLICENSED",

package/react/radio/radio.d.ts

@@ -6,6 +6,8 @@ declare const RefRadio: React.ForwardRefExoticComponent<{
     label?: string;
     name: string;
     showCustomError?: boolean;
+    extra?: any;
+    onChangeFunc?: ((event: React.ChangeEvent<HTMLInputElement>, extra: any) => void) | undefined;
     value: string;
     hasHover?: boolean;
     isWide?: boolean;

package/react/radio/radio.js

@@ -1,2 +1,2 @@
-"use client";var R=Object.defineProperty;var l=Object.getOwnPropertySymbols;var f=Object.prototype.hasOwnProperty,p=Object.prototype.propertyIsEnumerable;var t=(a,i,o)=>i in a?R(a,i,{enumerable:!0,configurable:!0,writable:!0,value:o}):a[i]=o,u=(a,i)=>{for(var o in i||(i={}))f.call(i,o)&&t(a,o,i[o]);if(l)for(var o of l(i))p.call(i,o)&&t(a,o,i[o]);return a};var v=(a,i)=>{var o={};for(var e in a)f.call(a,e)&&i.indexOf(e)<0&&(o[e]=a[e]);if(a!=null&&l)for(var e of l(a))i.indexOf(e)<0&&p.call(a,e)&&(o[e]=a[e]);return o};import T from"classnames";import*as r from"react";import w from"../use-input-validation";import c from"../text";import{colors as z}from"./radio.types";const h=r.forwardRef((k,b)=>{var m=k,{children:a,color:i,description:o,label:e,name:_,showCustomError:I=!0,value:N,isWide:g=!0,hasHover:C=!1}=m,n=v(m,["children","color","description","label","name","showCustomError","value","isWide","hasHover"]);const[y,x,s]=w();return r.createElement("label",{className:T("radio",{"radio--error":s,"radio--wide":g,"radio--hover":C},i)},r.createElement("input",u({name:_,value:N,ref:b,type:"radio",onChange:d=>{n.onChange&&n.onChange(d),y(d)},onInvalid:d=>{n.onInvalid&&n.onInvalid(d),x(d)}},n)),r.createElement("div",{className:"radio__label"},r.createElement("span",{className:"radio__fake-element"}),r.createElement("span",null,e,a)),s&&I&&r.createElement("div",{"aria-hidden":"true",className:"radio__error"},s),o&&r.createElement(c,{className:"radio__description",size:c.sizes.small},o))});h.displayName="Radio";const j=Object.assign(h,{colors:z});var W=j;export{W as default};
+"use client";var w=Object.defineProperty;var d=Object.getOwnPropertySymbols;var f=Object.prototype.hasOwnProperty,u=Object.prototype.propertyIsEnumerable;var p=(a,e,o)=>e in a?w(a,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):a[e]=o,c=(a,e)=>{for(var o in e||(e={}))f.call(e,o)&&p(a,o,e[o]);if(d)for(var o of d(e))u.call(e,o)&&p(a,o,e[o]);return a};var h=(a,e)=>{var o={};for(var n in a)f.call(a,n)&&e.indexOf(n)<0&&(o[n]=a[n]);if(a!=null&&d)for(var n of d(a))e.indexOf(n)<0&&u.call(a,n)&&(o[n]=a[n]);return o};import z from"classnames";import*as i from"react";import H from"../use-input-validation";import t from"../text";import{colors as L}from"./radio.types";const v=i.forwardRef((j,x)=>{var m=j,{children:a,color:e,description:o,label:n,name:I,showCustomError:_=!0,value:g,isWide:C=!0,hasHover:N=!1,extra:T,onChangeFunc:b=()=>{}}=m,l=h(m,["children","color","description","label","name","showCustomError","value","isWide","hasHover","extra","onChangeFunc"]);const[y,R,s]=H(),E=r=>{l.onChange&&l.onChange(r),y(r),b(r,T)};return i.createElement("label",{className:z("radio",{"radio--error":s,"radio--wide":C,"radio--hover":N},e)},i.createElement("input",c({name:I,value:g,ref:x,type:"radio",onChange:E,onInvalid:r=>{l.onInvalid&&l.onInvalid(r),R(r)}},l)),i.createElement(t,{className:"radio__label"},i.createElement("span",{className:"radio__fake-element"}),i.createElement("span",null,n,a)),s&&_&&i.createElement("div",{"aria-hidden":"true",className:"radio__error"},s),o&&i.createElement(t,{className:"radio__description",size:t.sizes.small},o))});v.displayName="Radio";const M=Object.assign(v,{colors:L});var B=M;export{B as default};
 //# sourceMappingURL=radio.js.map

package/react/radio/radio.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../react/radio/radio.tsx"],
-  "sourcesContent": ["'use client';\n\nimport cn from 'classnames';\nimport * as React from 'react';\n\nimport useInputValidation from '../use-input-validation';\nimport Text from '../text';\n\nimport { colors, Radio as Props } from './radio.types';\n\nconst RefRadio = React.forwardRef<\n  HTMLInputElement,\n  React.PropsWithChildren<Props>\n>(\n  (\n    {\n      children,\n      color,\n      description,\n      label,\n      name,\n      showCustomError = true,\n      value,\n      isWide = true,\n      hasHover = false,\n      ...restProps\n    },\n    ref,\n  ) => {\n    const [onChange, onInvalid, error] = useInputValidation();\n\n    return (\n      <label\n        className={cn(\n          'radio',\n          {\n            'radio--error': error,\n            'radio--wide': isWide,\n            'radio--hover': hasHover,\n          },\n          color,\n        )}\n      >\n        <input\n          name={name}\n          value={value}\n          ref={ref}\n          type=\"radio\"\n          onChange={e => {\n            // NOTE: To not break compatibility\n            if (restProps.onChange) restProps.onChange(e);\n            onChange(e);\n          }}\n          onInvalid={e => {\n            // NOTE: To not break compatibility\n            if (restProps.onInvalid) restProps.onInvalid(e);\n            onInvalid(e);\n          }}\n          {...restProps}\n        />\n        <div className=\"radio__label\">\n          <span className=\"radio__fake-element\"></span>\n          <span>\n            {label}\n            {children}\n          </span>\n        </div>\n\n        {/* NOTE: This is aria-hidden because reporting of validation errors is handled by the browser */}\n        {error && showCustomError && (\n          <div aria-hidden=\"true\" className=\"radio__error\">\n            {error}\n          </div>\n        )}\n\n        {description && (\n          <Text className=\"radio__description\" size={Text.sizes.small}>\n            {description}\n          </Text>\n        )}\n      </label>\n    );\n  },\n);\n\n// NOTE: If this isn't set, stack traces say \"forwardRef\" instead of \"Radio\"\nRefRadio.displayName = 'Radio';\n\n// NOTE: The component is redeclared here because TypeScript doesn't accept assigning extra properties to `RefComponent` when it's declared\nconst Radio: typeof RefRadio & {\n  colors: typeof colors;\n} = Object.assign(RefRadio, { colors });\n\nexport default Radio;\n"],
-  "mappings": "wgBAEA,OAAOA,MAAQ,aACf,UAAYC,MAAW,QAEvB,OAAOC,MAAwB,0BAC/B,OAAOC,MAAU,UAEjB,OAAS,UAAAC,MAA8B,gBAEvC,MAAMC,EAAWJ,EAAM,WAIrB,CACEK,EAYAC,IACG,CAbH,IAAAC,EAAAF,EACE,UAAAG,EACA,MAAAC,EACA,YAAAC,EACA,MAAAC,EACA,KAAAC,EACA,gBAAAC,EAAkB,GAClB,MAAAC,EACA,OAAAC,EAAS,GACT,SAAAC,EAAW,EAxBjB,EAeIT,EAUKU,EAAAC,EAVLX,EAUK,CATH,WACA,QACA,cACA,QACA,OACA,kBACA,QACA,SACA,aAKF,KAAM,CAACY,EAAUC,EAAWC,CAAK,EAAIpB,EAAmB,EAExD,OACED,EAAA,cAAC,SACC,UAAWD,EACT,QACA,CACE,eAAgBsB,EAChB,cAAeN,EACf,eAAgBC,CAClB,EACAP,CACF,GAEAT,EAAA,cAAC,QAAAsB,EAAA,CACC,KAAMV,EACN,MAAOE,EACP,IAAKR,EACL,KAAK,QACL,SAAUiB,GAAK,CAETN,EAAU,UAAUA,EAAU,SAASM,CAAC,EAC5CJ,EAASI,CAAC,CACZ,EACA,UAAWA,GAAK,CAEVN,EAAU,WAAWA,EAAU,UAAUM,CAAC,EAC9CH,EAAUG,CAAC,CACb,GACIN,EACN,EACAjB,EAAA,cAAC,OAAI,UAAU,gBACbA,EAAA,cAAC,QAAK,UAAU,sBAAsB,EACtCA,EAAA,cAAC,YACEW,EACAH,CACH,CACF,EAGCa,GAASR,GACRb,EAAA,cAAC,OAAI,cAAY,OAAO,UAAU,gBAC/BqB,CACH,EAGDX,GACCV,EAAA,cAACE,EAAA,CAAK,UAAU,qBAAqB,KAAMA,EAAK,MAAM,OACnDQ,CACH,CAEJ,CAEJ,CACF,EAGAN,EAAS,YAAc,QAGvB,MAAMoB,EAEF,OAAO,OAAOpB,EAAU,CAAE,OAAAD,CAAO,CAAC,EAEtC,IAAOsB,EAAQD",
-  "names": ["cn", "React", "useInputValidation", "Text", "colors", "RefRadio", "_a", "ref", "_b", "children", "color", "description", "label", "name", "showCustomError", "value", "isWide", "hasHover", "restProps", "__objRest", "onChange", "onInvalid", "error", "__spreadValues", "e", "Radio", "radio_default"]
+  "sourcesContent": ["'use client';\n\nimport cn from 'classnames';\nimport * as React from 'react';\n\nimport useInputValidation from '../use-input-validation';\nimport Text from '../text';\n\nimport { colors, Radio as Props } from './radio.types';\n\nconst RefRadio = React.forwardRef<\n  HTMLInputElement,\n  React.PropsWithChildren<Props>\n>(\n  (\n    {\n      children,\n      color,\n      description,\n      label,\n      name,\n      showCustomError = true,\n      value,\n      isWide = true,\n      hasHover = false,\n      extra,\n      onChangeFunc = () => {},\n      ...restProps\n    },\n    ref,\n  ) => {\n    const [onChange, onInvalid, error] = useInputValidation();\n\n    const onInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      // NOTE: To not break compatibility\n      if (restProps.onChange) restProps.onChange(e);\n      onChange(e);\n      onChangeFunc(e, extra);\n    };\n\n    return (\n      <label\n        className={cn(\n          'radio',\n          {\n            'radio--error': error,\n            'radio--wide': isWide,\n            'radio--hover': hasHover,\n          },\n          color,\n        )}\n      >\n        <input\n          name={name}\n          value={value}\n          ref={ref}\n          type=\"radio\"\n          onChange={onInputChange}\n          onInvalid={e => {\n            // NOTE: To not break compatibility\n            if (restProps.onInvalid) restProps.onInvalid(e);\n            onInvalid(e);\n          }}\n          {...restProps}\n        />\n        <Text className=\"radio__label\">\n          <span className=\"radio__fake-element\"></span>\n          <span>\n            {label}\n            {children}\n          </span>\n        </Text>\n\n        {/* NOTE: This is aria-hidden because reporting of validation errors is handled by the browser */}\n        {error && showCustomError && (\n          <div aria-hidden=\"true\" className=\"radio__error\">\n            {error}\n          </div>\n        )}\n\n        {description && (\n          <Text className=\"radio__description\" size={Text.sizes.small}>\n            {description}\n          </Text>\n        )}\n      </label>\n    );\n  },\n);\n\n// NOTE: If this isn't set, stack traces say \"forwardRef\" instead of \"Radio\"\nRefRadio.displayName = 'Radio';\n\n// NOTE: The component is redeclared here because TypeScript doesn't accept assigning extra properties to `RefComponent` when it's declared\nconst Radio: typeof RefRadio & {\n  colors: typeof colors;\n} = Object.assign(RefRadio, { colors });\n\nexport default Radio;\n"],
+  "mappings": "wgBAEA,OAAOA,MAAQ,aACf,UAAYC,MAAW,QAEvB,OAAOC,MAAwB,0BAC/B,OAAOC,MAAU,UAEjB,OAAS,UAAAC,MAA8B,gBAEvC,MAAMC,EAAWJ,EAAM,WAIrB,CACEK,EAcAC,IACG,CAfH,IAAAC,EAAAF,EACE,UAAAG,EACA,MAAAC,EACA,YAAAC,EACA,MAAAC,EACA,KAAAC,EACA,gBAAAC,EAAkB,GAClB,MAAAC,EACA,OAAAC,EAAS,GACT,SAAAC,EAAW,GACX,MAAAC,EACA,aAAAC,EAAe,IAAM,CAAC,CA1B5B,EAeIX,EAYKY,EAAAC,EAZLb,EAYK,CAXH,WACA,QACA,cACA,QACA,OACA,kBACA,QACA,SACA,WACA,QACA,iBAKF,KAAM,CAACc,EAAUC,EAAWC,CAAK,EAAItB,EAAmB,EAElDuB,EAAiBC,GAA2C,CAE5DN,EAAU,UAAUA,EAAU,SAASM,CAAC,EAC5CJ,EAASI,CAAC,EACVP,EAAaO,EAAGR,CAAK,CACvB,EAEA,OACEjB,EAAA,cAAC,SACC,UAAWD,EACT,QACA,CACE,eAAgBwB,EAChB,cAAeR,EACf,eAAgBC,CAClB,EACAP,CACF,GAEAT,EAAA,cAAC,QAAA0B,EAAA,CACC,KAAMd,EACN,MAAOE,EACP,IAAKR,EACL,KAAK,QACL,SAAUkB,EACV,UAAWC,GAAK,CAEVN,EAAU,WAAWA,EAAU,UAAUM,CAAC,EAC9CH,EAAUG,CAAC,CACb,GACIN,EACN,EACAnB,EAAA,cAACE,EAAA,CAAK,UAAU,gBACdF,EAAA,cAAC,QAAK,UAAU,sBAAsB,EACtCA,EAAA,cAAC,YACEW,EACAH,CACH,CACF,EAGCe,GAASV,GACRb,EAAA,cAAC,OAAI,cAAY,OAAO,UAAU,gBAC/BuB,CACH,EAGDb,GACCV,EAAA,cAACE,EAAA,CAAK,UAAU,qBAAqB,KAAMA,EAAK,MAAM,OACnDQ,CACH,CAEJ,CAEJ,CACF,EAGAN,EAAS,YAAc,QAGvB,MAAMuB,EAEF,OAAO,OAAOvB,EAAU,CAAE,OAAAD,CAAO,CAAC,EAEtC,IAAOyB,EAAQD",
+  "names": ["cn", "React", "useInputValidation", "Text", "colors", "RefRadio", "_a", "ref", "_b", "children", "color", "description", "label", "name", "showCustomError", "value", "isWide", "hasHover", "extra", "onChangeFunc", "restProps", "__objRest", "onChange", "onInvalid", "error", "onInputChange", "e", "__spreadValues", "Radio", "radio_default"]
 }

package/react/radio/radio.scss

@@ -9,6 +9,7 @@
   position: relative;
   display: flex;
   flex-direction: column;
+  cursor: pointer;
 
   &:focus-within {
     .radio__fake-element {
@@ -107,7 +108,8 @@
   }
 
   &__label {
-    display: inline-flex;
+    display: flex;
+    align-items: center;
   }
 
   &--light {

package/react/radio/radio.types.d.ts

@@ -2,12 +2,14 @@ import { InputHtmlProps, ObjectValues } from '../types';
 export declare const colors: {
     readonly light: "radio--light";
 };
-export type Radio = {
+export type Radio<Extra = any> = {
     color?: ObjectValues<typeof colors>;
     description?: string;
     label?: string;
     name: string;
     showCustomError?: boolean;
+    extra?: Extra;
+    onChangeFunc?: (event: React.ChangeEvent<HTMLInputElement>, extra: Extra) => void;
     value: string;
     hasHover?: boolean;
     isWide?: boolean;

package/react/radio/radio.types.js

@@ -1,2 +1,2 @@
-const s={light:"radio--light"};export{s as colors};
+const r={light:"radio--light"};export{r as colors};
 //# sourceMappingURL=radio.types.js.map

package/react/radio/radio.types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../react/radio/radio.types.ts"],
-  "sourcesContent": ["import { InputHtmlProps, ObjectValues } from '../types';\n\nexport const colors = {\n  light: 'radio--light',\n} as const;\n\nexport type Radio = {\n  color?: ObjectValues<typeof colors>;\n  description?: string;\n  label?: string;\n  name: string;\n  showCustomError?: boolean;\n  value: string;\n  hasHover?: boolean;\n  isWide?: boolean;\n} & InputHtmlProps;\n"],
+  "sourcesContent": ["import { InputHtmlProps, ObjectValues } from '../types';\n\nexport const colors = {\n  light: 'radio--light',\n} as const;\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type Radio<Extra = any> = {\n  color?: ObjectValues<typeof colors>;\n  description?: string;\n  label?: string;\n  name: string;\n  showCustomError?: boolean;\n  extra?: Extra;\n  onChangeFunc?: (\n    event: React.ChangeEvent<HTMLInputElement>,\n    extra: Extra,\n  ) => void;\n  value: string;\n  hasHover?: boolean;\n  isWide?: boolean;\n} & InputHtmlProps;\n"],
   "mappings": "AAEO,MAAMA,EAAS,CACpB,MAAO,cACT",
   "names": ["colors"]
 }

package/react/toggle/toggle.scss

@@ -27,7 +27,7 @@
 
     &--background {
       background-color: var(--surface-secondary-default);
-      padding: spacing.$s;
+      padding: spacing.$xs spacing.$s spacing.$xs spacing.$s;
       border-radius: corner-radius.$circle;
     }
   }