@ssa-ui-kit/core 2.10.1 → 2.11.0

package/dist/components/Radio/Radio.d.ts

@@ -1,3 +1,3 @@
 import { RadioProps } from './types';
-declare const Radio: ({ id, name, value, isChecked, isDisabled, isRequired, onChange, text, className, }: RadioProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+declare const Radio: ({ id, name, value, isChecked, isDisabled, isRequired, text, colors, className, onChange, }: RadioProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default Radio;

package/dist/components/Radio/RadioBase.d.ts

@@ -1,3 +1,5 @@
 export declare const RadioBase: import("@emotion/styled").StyledComponent<import("../Label/types").LabelProps & {
     theme?: import("@emotion/react").Theme;
+} & {
+    focusShadowColor?: string;
 }, {}, {}>;

package/dist/components/Radio/types.d.ts

@@ -8,4 +8,10 @@ export interface RadioProps {
     onChange?: (value: string) => void;
     text?: string;
     className?: string;
+    colors?: {
+        default?: string;
+        hovered?: string;
+        disabled?: string;
+        focusShadow?: string;
+    };
 }

package/dist/index.js

@@ -4363,8 +4363,9 @@ const FormHelperText = ({
 const RadioBase = /*#__PURE__*/base_default()(Label_Label,  true ? {
   target: "efp6u1p0"
 } : 0)("display:inline-flex;flex-grow:0;align-items:center;cursor:pointer;gap:5px;&:has(input:disabled){cursor:default;}input:focus+svg{filter:drop-shadow(\n      ", ({
-  theme
-}) => `-4px 4px 10px ${theme.colors.green40}`, "\n    );}input{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;}span{font-size:14px;font-weight:100;}" + ( true ? "" : 0));
+  theme,
+  focusShadowColor
+}) => `-4px 4px 10px ${focusShadowColor || theme.colors.green40}`, "\n    );}input{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;}span{font-size:14px;font-weight:100;}" + ( true ? "" : 0));
 ;// ./src/components/Radio/Radio.tsx
 
 
@@ -4378,17 +4379,22 @@ const Radio = ({
   isChecked,
   isDisabled,
   isRequired,
-  onChange,
   text,
-  className
+  colors,
+  className,
+  onChange
 }) => {
   const theme = (0,react_namespaceObject.useTheme)();
   const autoGenId = (0,external_react_namespaceObject.useId)();
   const [isHovered, setIsHovered] = (0,external_react_namespaceObject.useState)(false);
   const radioId = id || autoGenId;
+  const disabledColor = colors?.disabled || theme.colors.greyFocused40;
+  const hoveredColor = colors?.hovered || theme.colors.green60;
+  const defaultColor = colors?.default || theme.colors.green;
   return (0,jsx_runtime_namespaceObject.jsxs)(RadioBase, {
     htmlFor: radioId,
     className: className,
+    focusShadowColor: colors?.focusShadow,
     onMouseEnter: () => setIsHovered(true),
     onMouseLeave: () => setIsHovered(false),
     children: [(0,jsx_runtime_namespaceObject.jsx)("input", {
@@ -4403,7 +4409,7 @@ const Radio = ({
     }), (0,jsx_runtime_namespaceObject.jsx)(Icon_Icon, {
       name: isChecked ? 'radio-on' : 'circle',
       size: 20,
-      color: theme.colors[isDisabled ? 'greyFocused40' : isHovered ? 'green60' : 'green']
+      color: isDisabled ? disabledColor : isHovered ? hoveredColor : defaultColor
     }), text ? (0,jsx_runtime_namespaceObject.jsx)("span", {
       "data-testid": id,
       children: text