@redneckz/wildless-cms-uni-blocks 0.3.48 → 0.3.51

package/src/model/Picture.ts

@@ -1,4 +1,5 @@
 import type { IconName } from '../icons/IconName';
+import type { IconVersion } from './IconVersion';
 
 export interface Img {
   /** @title Картинка */
@@ -12,6 +13,8 @@ export interface Img {
 export interface ImgSource {
   /** @title Иконка */
   icon?: IconName;
+  /** @hidden */
+  iconVersion?: IconVersion;
   /** @title Картинка */
   src?: string;
   /** @title Формат */

package/src/ui-kit/Icon/Icon.tsx

@@ -9,17 +9,19 @@ export const Icon = JSX<IconProps>(
     name = '',
     alt = `Иконка ${IconTitleMap[name] || name}`,
     title = alt,
+    iconVersion,
     asSVG,
     ...imgProps
   }) => {
     const href = `${projectSettings.CDN || ''}icons/${name}.svg`;
+    const svgUseStyle = iconVersion === 'white' ? 'text-black invert' : '';
 
     if (asSVG) {
       return (
         <svg className={className} {...imgProps} aria-hidden="true">
           {title ? <title>{title}</title> : null}
           {alt ? <desc>{alt}</desc> : null}
-          <use href={`${href}#icon`} xlinkHref={`${href}#icon`} />
+          <use className={svgUseStyle} href={`${href}#icon`} xlinkHref={`${href}#icon`} />
         </svg>
       );
     }

package/src/ui-kit/Icon/IconProps.ts

@@ -1,4 +1,5 @@
 import type { IconName } from '../../icons/IconName';
+import type { IconVersion } from '../../model/IconVersion';
 
 export type { IconName };
 
@@ -18,4 +19,6 @@ export interface IconCompatibilityFields {
 export type IconProps = IconCompatibilityFields & {
   className?: string;
   name?: IconName;
+  /** @hidden */
+  iconVersion?: IconVersion;
 };

package/src/ui-kit/Img/Img.mobile.tsx

@@ -1,6 +1,8 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { ImgSource, Picture } from '../../model/Picture';
 import { Icon } from '../Icon/Icon';
+import { getIconVersion } from './getIconVersion';
+import type { ImgSource, Picture } from '../../model/Picture';
+
 import type { Image, ImageProps } from './ImgProps';
 
 export const Img = JSX<ImageProps<Image>>(
@@ -8,7 +10,14 @@ export const Img = JSX<ImageProps<Image>>(
     // backwards compatibility with existing icons in usage
     const icon = typeof image === 'string' ? image : image?.icon;
     if (icon || icon === '') {
-      return <Icon className={className} name={icon} {...iconProps} />;
+      return (
+        <Icon
+          className={className}
+          iconVersion={getIconVersion(image)}
+          name={icon}
+          {...iconProps}
+        />
+      );
     }
 
     return (

package/src/ui-kit/Img/Img.tsx

@@ -1,6 +1,7 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { ImgSource, Picture } from '../../model/Picture';
 import { Icon } from '../Icon/Icon';
+import { getIconVersion } from './getIconVersion';
+import type { ImgSource, Picture } from '../../model/Picture';
 import type { Image, ImageProps } from './ImgProps';
 
 export const Img = JSX<ImageProps<Image>>(
@@ -12,7 +13,14 @@ export const Img = JSX<ImageProps<Image>>(
     // backwards compatibility with existing icons in usage
     const icon = typeof image === 'string' ? image : image.icon;
     if (icon || icon === '') {
-      return icon.length ? <Icon className={className} name={icon} {...iconProps} /> : null;
+      return icon.length ? (
+        <Icon
+          className={className}
+          iconVersion={getIconVersion(image)}
+          name={icon}
+          {...iconProps}
+        />
+      ) : null;
     }
 
     return (

package/src/ui-kit/Img/getIconVersion.tsx

@@ -0,0 +1,3 @@
+export function getIconVersion(image) {
+  return typeof image === 'string' ? 'normal' : image.iconVersion || 'normal';
+}

package/src/ui-kit/Select/SelectOption.tsx

@@ -3,12 +3,15 @@ import { JSX } from '@redneckz/uni-jsx';
 export interface SelectOptionProps {
   className?: string;
   value?: string;
+  selected?: boolean;
 }
 
-export const SelectOption = JSX<SelectOptionProps>(({ className = '', value, children }) => {
-  return (
-    <option className={className} value={`${value}`}>
-      {children}
-    </option>
-  );
-});
+export const SelectOption = JSX<SelectOptionProps>(
+  ({ className = '', value, selected, children }) => {
+    return (
+      <option className={className} value={`${value}`} selected={selected}>
+        {children}
+      </option>
+    );
+  },
+);

package/src/ui-kit/Tabs/Tabs.tsx

@@ -42,7 +42,7 @@ const renderTab =
 const renderIcon = (tab: Tab, isActive: boolean) => (
   <div className="h-full mt-1">
     <Img
-      className={`w-5 h-5 mr-3 ${isActive ? 'invert-full' : ''}`}
+      className={`w-5 h-5 mr-3 ${isActive ? 'invert' : ''}`}
       image={tab?.icon || 'CardIcon'}
       asSVG={!isActive}
     />