@redneckz/wildless-cms-uni-blocks 0.7.4 → 0.7.5

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

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { style } from '../../utils/style';
 import { SVG } from '../SVG';
 import type { CheckboxProps } from './CheckboxProps';
 
@@ -11,33 +12,40 @@ const CHECK_PATHS = [
   },
 ];
 
-export const Checkbox = JSX<CheckboxProps>(({ className, text, checked, isRadio, onChange }) => {
-  return (
-    <div className={className}>
-      <label className="flex items-center relative cursor-pointer group/box">
-        <input
-          className={`peer appearance-none w-5 h-5 border-solid cursor-pointer group-hover/box:border-primary-hover
-        ${isRadio ? 'rounded-full border-2' : 'rounded checked:bg-primary-main border'}
-        ${checked ? 'border-black' : 'border-gray'}
-        checked:border-primary-main m-0`}
-          type="checkbox"
-          onChange={(e) => onChange && onChange(e.target.checked as boolean)}
-          checked={checked}
-        />
-        {isRadio ? (
-          <div className="left-1 w-3 h-3 rounded-full bg-primary-main hidden absolute peer-checked:block"></div>
-        ) : (
-          <SVG
-            paths={CHECK_PATHS}
-            className="hidden absolute left-1 ml-px peer-checked:block"
-            width="11"
-            height="9"
-            fill="white"
-            viewBox="0 0 11 9"
+export const Checkbox = JSX<CheckboxProps>(
+  ({ className, text, checked, disabled, isRadio, onChange }) => {
+    return (
+      <div className={className}>
+        <label className="flex items-center relative cursor-pointer group/box">
+          <input
+            className={style(
+              'peer appearance-none w-5 h-5 border-solid cursor-pointer checked:border-primary-main m-0',
+              isRadio
+                ? 'rounded-full border-2'
+                : 'rounded checked:bg-primary-main disabled:bg-main-disabled border',
+              checked ? 'border-black' : 'border-gray',
+              disabled ? '' : 'group-hover/box:border-primary-hover',
+            )}
+            type="checkbox"
+            onChange={(e) => onChange && onChange(e.target.checked as boolean)}
+            checked={checked}
+            disabled={disabled}
           />
-        )}
-        {text ? <span className="font-sans ml-3 text-l-light">{text}</span> : null}
-      </label>
-    </div>
-  );
-});
+          {isRadio ? (
+            <div className="left-1 w-3 h-3 rounded-full bg-primary-main hidden absolute peer-checked:block" />
+          ) : (
+            <SVG
+              paths={CHECK_PATHS}
+              className="hidden absolute left-1 ml-px peer-checked:block"
+              width="11"
+              height="9"
+              fill="white"
+              viewBox="0 0 11 9"
+            />
+          )}
+          {text ? <span className="font-sans ml-3 text-l-light">{text}</span> : null}
+        </label>
+      </div>
+    );
+  },
+);

package/src/ui-kit/Checkbox/CheckboxProps.ts

@@ -1,6 +1,7 @@
 export interface CheckboxProps {
   text?: string;
   checked?: boolean;
+  disabled?: boolean;
   className?: string;
   isRadio?: boolean;
   onChange?: (value: boolean) => void;

package/src/ui-kit/SwipeListControl/SwipeListContainer.tsx

@@ -3,7 +3,8 @@ import { useCallback, useRef } from '@redneckz/uni-jsx/lib/hooks';
 import type { IntersectionObserverOptions } from '../../hooks/useIntersectionObserver';
 import { mapChildren } from '../../utils/mapChildren';
 import { style } from '../../utils/style';
-import type { SwipeContainerProps, SwipeListControlType } from './SwipeListControlProps';
+import type { SwipeListControlType } from './SwipeListControlContent';
+import type { SwipeContainerProps } from './SwipeListControlProps';
 import { SwipeListItem } from './SwipeListItem';
 
 type ItemsVisibilityList = Array<IntersectionObserverEntry | undefined>;

package/src/ui-kit/SwipeListControl/SwipeListControlContent.ts

@@ -0,0 +1,17 @@
+import type { BlockVersion } from '../../model/BlockVersion';
+
+/**
+ * @title Вид
+ * @enumNames ["Горизонтальный", "Вертикальный"]
+ */
+export type SwipeListControlType = 'horizontal-list' | 'vertical-list';
+
+/**
+ * @title Swipe-контроллер
+ */
+export interface SwipeListControlContent {
+  /** @title Точки-индикаторы */
+  showDots?: boolean;
+  listType?: SwipeListControlType;
+  version?: BlockVersion;
+}

package/src/ui-kit/SwipeListControl/SwipeListControlDots.tsx

@@ -1,5 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { SwipeListControlType } from './SwipeListControlProps';
+import type { SwipeListControlType } from './SwipeListControlContent';
 
 const containerStyles: Record<SwipeListControlType, string> = {
   'horizontal-list': 'mx-auto mt-5 w-fit',
@@ -11,7 +11,8 @@ const activeDotStyles: Record<SwipeListControlType, string> = {
   'vertical-list': 'h-6',
 };
 
-const dotStyle = 'cursor-pointer bg-primary-main rounded-full transition-width duration-300';
+const dotStyle =
+  'cursor-pointer bg-primary-main rounded-full transition-width duration-300 group-data-secondary:bg-white';
 
 const inactiveDotStyle = 'w-2 h-2 opacity-30';
 

package/src/ui-kit/SwipeListControl/SwipeListControlProps.ts

@@ -1,8 +1,4 @@
-/**
- * @title Вид
- * @enumNames ["Горизонтальный", "Вертикальный"]
- */
-export type SwipeListControlType = 'horizontal-list' | 'vertical-list';
+import type { SwipeListControlContent } from './SwipeListControlContent';
 
 /**
  * @title Контейнер
@@ -17,11 +13,8 @@ export interface SwipeContainerProps {
 /**
  * @title Swipe-контроллер
  */
-export interface SwipeListControlProps extends SwipeContainerProps {
+export interface SwipeListControlProps extends SwipeListControlContent, SwipeContainerProps {
   className?: string;
-  /** @title Точки-индикаторы */
-  showDots?: boolean;
   /** @hidden */
   onVisibleIndicesChange?: (indices: number[]) => void;
-  listType?: SwipeListControlType;
 }

package/src/utils/addSpacesBetweenNumbers.ts

@@ -1,2 +1,2 @@
 export const addSpacesBetweenNumbers = (number: number) =>
-  new Intl.NumberFormat('ru-RU', { maximumSignificantDigits: 3 }).format(number);
+  new Intl.NumberFormat('ru-RU', {}).format(number);

package/tailwind.config.cjs

@@ -209,6 +209,7 @@ module.exports = {
             start: 'rgba(var(--color-gradient-from), <alpha-value>)',
             end: 'rgba(var(--color-gradient-to), <alpha-value>)',
           },
+          disabled: 'rgba(242, 242, 242, <alpha-value>)',
         },
         primary: {
           main: 'rgba(var(--color-primary-main), <alpha-value>)',