@pushwoosh/dumb-components 1.1.14 → 1.1.15

package/Radio/Radio.js

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { Color } from '@pushwoosh/kit-constants';
 import { NativeLabel, NativeRadio } from './styles';
 let counter = 0;
 export function Radio(props) {
@@ -7,10 +8,10 @@ export function Radio(props) {
     id,
     name,
     value,
-    color,
+    type = 'normal',
     isChecked,
     isDisabled,
-    size = 'normal',
+    size = 'regular',
     onChange,
     onBlur
   } = props;
@@ -23,7 +24,7 @@ export function Radio(props) {
   });
   return React.createElement(NativeLabel, {
     htmlFor: localId,
-    "$color": isDisabled ? 'locked' : color,
+    "$color": isDisabled ? Color.LOCKED : Color.MAIN,
     "$size": size
   }, React.createElement(NativeRadio, {
     type: "radio",
@@ -33,6 +34,7 @@ export function Radio(props) {
     checked: isChecked,
     disabled: isDisabled,
     "$size": size,
+    "$type": type,
     onChange: event => onChange === null || onChange === void 0 ? void 0 : onChange(event.currentTarget.value),
     onBlur: onBlur
   }), label && React.createElement("span", null, label));

package/Radio/mappers.d.ts

@@ -0,0 +1,5 @@
+import { type RadioType } from './types';
+export declare const ColorByType: Record<RadioType, {
+    checked: string;
+    notChecked: string;
+}>;

package/Radio/mappers.js

@@ -0,0 +1,11 @@
+import { Color } from '@pushwoosh/kit-constants';
+export const ColorByType = {
+  normal: {
+    checked: Color.PRIMARY,
+    notChecked: Color.PHANTOM
+  },
+  error: {
+    checked: Color.DANGER,
+    notChecked: Color.DANGER
+  }
+};

package/Radio/styles.d.ts

@@ -1,8 +1,9 @@
-import type { RadioSize, RadioTextColor } from './types';
+import type { RadioSize, RadioType } from './types';
 export declare const NativeRadio: import("styled-components").StyledComponent<"input", any, {
     $size: RadioSize;
+    $type: RadioType;
 }, never>;
 export declare const NativeLabel: import("styled-components").StyledComponent<"label", any, {
-    $color?: RadioTextColor;
+    $color: string;
     $size: RadioSize;
 }, never>;

package/Radio/styles.js

@@ -1,23 +1,43 @@
+import { rgba } from 'polished';
 import styled from 'styled-components';
-import { Color, Spacing, FontSize, LineHeight } from '@pushwoosh/kit-constants';
-import { ColorMap } from './maps';
+import { Color, FontSize, LineHeight } from '@pushwoosh/kit-constants';
+import { ColorByType } from './mappers';
 export const NativeRadio = styled.input.withConfig({
   displayName: "NativeRadio",
   componentId: "sc-34lgtl-0"
-})(["appearance:none;-webkit-appearance:none;-moz-appearance:none;width:", ";height:", ";border:", ";border-radius:50%;background-color:", ";transition:border 0.1s,background-color 0.1s;cursor:pointer;&:focus{outline:none;}&[type=radio]:hover{border-color:", ";}&[type=radio]:disabled{cursor:not-allowed;border-color:", ";background-color:", ";}&[type=radio]:checked{border:", ";}&[type=radio]:checked:hover{border-color:", ";}&[type=radio]:checked:disabled{border-color:", ";background-color:", ";}"], ({
+})(["appearance:none;-webkit-appearance:none;-moz-appearance:none;position:relative;width:", ";height:", ";border:", ";border-radius:50%;background-color:", ";transition:border 0.1s,background-color 0.1s;cursor:pointer;&:focus{outline:none;}&[type=radio]:checked:disabled{cursor:not-allowed;background-color:", ";border:", ";}&[type=radio]:not(:checked):disabled{cursor:not-allowed;border-color:", ";background-color:", ";}&[type=radio]:checked{border:", ";background-color:", ";}&[type=radio]:not(:checked):not(:disabled):hover::before{background:", ";content:\"\";position:absolute;top:", ";left:", ";width:", ";height:", ";border-radius:50%;transition:background 0.2s;}"], ({
   $size
-}) => $size === 'compact' ? '12px' : '20px', ({
+}) => $size === 'compact' ? '16px' : '24px', ({
   $size
-}) => $size === 'compact' ? '12px' : '20px', ({
+}) => $size === 'compact' ? '16px' : '24px', ({
+  $type
+}) => `2px solid ${ColorByType[$type].notChecked}`, Color.CLEAR, Color.FORM, ({
   $size
-}) => `${$size === 'compact' ? '1px' : '2px'} solid ${Color.PHANTOM}`, Color.CLEAR, Color.PRIMARY_HOVER, Color.LOCKED, Color.FROZEN, ({
+}) => `${$size === 'compact' ? '4px' : '7px'} solid ${Color.LOCKED}`, Color.LOCKED, Color.FORM, ({
+  $size,
+  $type
+}) => `${$size === 'compact' ? '4px' : '7px'} solid ${ColorByType[$type].checked}`, Color.CLEAR, ({
+  $type
+}) => rgba(ColorByType[$type].notChecked, 0.3), ({
   $size
-}) => `${$size === 'compact' ? '4px' : '6px'} solid ${Color.PRIMARY}`, Color.PRIMARY_HOVER, Color.LOCKED, Color.FROZEN);
+}) => $size === 'compact' ? '3px' : '5px', ({
+  $size
+}) => $size === 'compact' ? '3px' : '5px', ({
+  $size
+}) => $size === 'compact' ? '6px' : '10px', ({
+  $size
+}) => $size === 'compact' ? '6px' : '10px');
 export const NativeLabel = styled.label.withConfig({
   displayName: "NativeLabel",
   componentId: "sc-34lgtl-1"
-})(["display:inline-flex;align-items:center;font-size:", ";line-height:", ";user-select:none;", " & > ", "{&:not(:last-child){margin-right:", ";}}"], ({
+})(["display:inline-flex;align-items:center;font-size:", ";line-height:", ";span{max-width:", ";white-space:normal;overflow-wrap:break-word;}user-select:none;", " &:has(input:disabled){cursor:not-allowed;}&:has(input:not(:disabled)){cursor:pointer;}& > ", "{&:not(:last-child){margin-right:", ";}}"], ({
   $size
-}) => $size === 'compact' ? FontSize.SMALL : FontSize.REGULAR, LineHeight.REGULAR, ({
+}) => $size === 'compact' ? FontSize.SMALL : FontSize.REGULAR, ({
+  $size
+}) => $size === 'compact' ? LineHeight.SMALL : LineHeight.REGULAR, ({
+  $size
+}) => $size === 'compact' ? '600px' : '800px', ({
   $color
-}) => $color && `color: ${ColorMap[$color]};`, NativeRadio, Spacing.S3);
+}) => `color: ${$color};`, NativeRadio, ({
+  $size
+}) => $size === 'compact' ? '6px' : '8px');

package/Radio/types.d.ts

@@ -1,11 +1,11 @@
-export type RadioTextColor = 'main' | 'primary' | 'danger' | 'current' | 'locked';
-export type RadioSize = 'normal' | 'compact';
+export type RadioType = 'normal' | 'error';
+export type RadioSize = 'regular' | 'compact';
 export type RadioProps = {
     label?: string;
     id?: string;
     name?: string;
     value?: string;
-    color?: RadioTextColor;
+    type?: RadioType;
     isChecked?: boolean;
     isDisabled?: boolean;
     size?: RadioSize;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "1.1.14",
+  "version": "1.1.15",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",

package/Radio/maps.d.ts

@@ -1,3 +0,0 @@
-import { Color } from '@pushwoosh/kit-constants';
-import type { RadioTextColor } from './types';
-export declare const ColorMap: Record<RadioTextColor, Color>;

package/Radio/maps.js

@@ -1,8 +0,0 @@
-import { Color } from '@pushwoosh/kit-constants';
-export const ColorMap = {
-  main: Color.MAIN,
-  primary: Color.PRIMARY,
-  danger: Color.DANGER,
-  current: Color.CURRENT,
-  locked: Color.LOCKED
-};