@redneckz/wildless-cms-uni-blocks 0.3.95 → 0.4.0

package/src/ui-kit/SearchBar/SearchBarInner.tsx

@@ -1,72 +1,69 @@
 import { JSX } from '@redneckz/uni-jsx';
-import type { UniBlockProps } from '../../types';
+import { useSearch } from '../../hooks/useSearch';
 import { Button } from '../Button/Button';
 import { Img } from '../Img/Img';
 
-export interface SearchBarInnerProps extends UniBlockProps {
+export interface SearchBarInnerProps {
   isMobile?: boolean;
+  className?: string;
 }
 
-export const SearchBarInner = JSX<SearchBarInnerProps>(
-  ({ className, context, isMobile = false }) => {
-    const { term, setTerm } = context.useSearch();
+export const SearchBarInner = JSX<SearchBarInnerProps>(({ className, isMobile = false }) => {
+  const { term, setTerm } = useSearch();
 
-    const LoupeIconClassName = isMobile ? 'w-[20px] h-[20px]' : 'w-[24px] h-[24px]';
-    const SearchBarLabelClassName = isMobile ? 'font-normal text-sm' : 'text-l-light';
-    const SearchBarInputClassName = isMobile
-      ? ' placeholder-transparent font-normal'
-      : 'font-light h-full';
-    const inputPlaceholder = isMobile ? 'some search' : undefined;
+  const LoupeIconClassName = isMobile ? 'w-[20px] h-[20px]' : 'w-[24px] h-[24px]';
+  const SearchBarLabelClassName = isMobile ? 'text-s' : 'text-l-light';
+  const SearchBarInputClassName = isMobile ? ' placeholder-transparent' : 'h-full';
+  const inputPlaceholder = isMobile ? 'some search' : undefined;
 
-    return (
-      <form className={`font-sans relative ${className}`}>
-        <div className="absolute rounded h-full flex items-center justify-center pl-4 max-w-[170px] gap-3.5 pointer-events-none">
-          <div className={LoupeIconClassName}>
-            <Img image="LoupeIcon" width="24" height="24" />
-          </div>
-          {term ? null : (
-            <label
-              htmlFor="search-bar-input"
-              className={`text-secondary-text ${SearchBarLabelClassName}`}
-            >
-              Поиск по сайту
-            </label>
-          )}
+  return (
+    <form className={`font-sans relative ${className}`}>
+      <div className="absolute rounded h-full flex items-center justify-center pl-4 max-w-[170px] gap-3.5 pointer-events-none">
+        <div className={LoupeIconClassName}>
+          <Img image="LoupeIcon" width="24" height="24" />
         </div>
-        <input
-          id="search-bar-input"
-          className={`h-12 pl-12 w-full peer text-l text-black border border-solid rounded-md box-border
-              outline-none pr-[6%] border-main-divider focus:border-primary-text ${SearchBarInputClassName}`}
-          value={term}
-          onChange={(e) => setTerm(e.target.value as string)}
-          type="text"
-          name="search-bar-input"
-          placeholder={inputPlaceholder}
-        />
-        {isMobile ? (
-          <button
-            className="visible peer-placeholder-shown:invisible absolute top-2 right-3 w-6 h-6 p-1 bg-transparent cursor-pointer border-none"
-            onClick={(e) => {
-              e.preventDefault();
-              setTerm('');
-            }}
-          >
-            <Img image="CloseIcon" width="24" height="24" />
-          </button>
-        ) : (
-          <Button
-            version="primary"
-            text="Найти"
-            className="invisible peer-focus:visible absolute top-1 right-1"
-            onClick={(ev) => {
-              ev?.preventDefault();
-              console.log('click');
-            }}
+        {term ? null : (
+          <label
+            htmlFor="search-bar-input"
+            className={`text-secondary-text ${SearchBarLabelClassName}`}
           >
-            <div className="font-normal text-sm px-9 py-[9px]">Найти</div>
-          </Button>
+            Поиск по сайту
+          </label>
         )}
-      </form>
-    );
-  },
-);
+      </div>
+      <input
+        id="search-bar-input"
+        className={`h-12 pl-12 w-full peer text-l text-black border border-solid rounded-md box-border
+              outline-none pr-[6%] border-main-divider focus:border-primary-text ${SearchBarInputClassName}`}
+        value={term}
+        onChange={(e) => setTerm(e.target.value as string)}
+        type="text"
+        name="search-bar-input"
+        placeholder={inputPlaceholder}
+      />
+      {isMobile ? (
+        <button
+          className="visible peer-placeholder-shown:invisible absolute top-2 right-3 w-6 h-6 p-1 bg-transparent cursor-pointer border-none"
+          onClick={(e) => {
+            e.preventDefault();
+            setTerm('');
+          }}
+        >
+          <Img image="CloseIcon" width="24" height="24" />
+        </button>
+      ) : (
+        <Button
+          version="primary"
+          text="Найти"
+          className="invisible peer-focus:visible absolute top-1 right-1"
+          onClick={(ev) => {
+            ev?.preventDefault();
+            console.log('click');
+          }}
+        >
+          <div className="text-s px-9 py-2.5">Найти</div>
+        </Button>
+      )}
+    </form>
+  );
+});

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

@@ -1,4 +1,5 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useState } from '@redneckz/uni-jsx/lib/hooks';
 import { DEFAULT_GAP, DEFAULT_PADDING } from './constants';
 import { SwipeListControlDots } from './SwipeListControlDots';
 import { SwipeListControlList } from './SwipeListControlList';
@@ -9,15 +10,14 @@ import { getScrollPoints } from './utils/getScrollPoints';
 export const SwipeListControl = JSX<SwipeListControlProps>(
   ({
     className,
-    context,
     children,
     gap = DEFAULT_GAP,
     padding = DEFAULT_PADDING,
     showDots = true,
     onSlideChange,
   }) => {
-    const [activeIndex, setActiveIndex] = context.useState<number>(0);
-    const [indexFraction, setIndexFraction] = context.useState<number>(0);
+    const [activeIndex, setActiveIndex] = useState(0);
+    const [indexFraction, setIndexFraction] = useState(0);
 
     const dotsProps = {
       activeIndex,

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

@@ -14,7 +14,7 @@ export const Tabs = JSX<TabsProps>(({ tabs, currentTabIndex, onTabClick }) => {
 });
 
 const tabDescriptionStyle = (isActive = false) =>
-  `font-light text-xs ${isActive ? '' : 'text-secondary-text'}`;
+  `text-xs-light ${isActive ? '' : 'text-secondary-text'}`;
 
 const renderTab =
   (currentTabIndex: number, onTabClick: TabClickHandler) => (tab: Tab, index: number) => {
@@ -32,7 +32,7 @@ const renderTab =
       >
         {tab?.icon ? renderIcon(tab, isActive) : null}
         <div>
-          {tab?.title ? <h3 className="font-medium m-0 text-base">{tab?.title}</h3> : null}
+          {tab?.title ? <h3 className="m-0 text-l font-medium">{tab?.title}</h3> : null}
           {tab?.description ? (
             <span className={tabDescriptionStyle(isActive)}>{tab?.description}</span>
           ) : null}

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

@@ -15,7 +15,7 @@ export interface TopItemProps extends TopItemContent {
   dataItemName?: string;
 }
 
-const TEXT_CLASSES = 'font-sans font-light text-sm';
+const TEXT_CLASSES = 'font-sans text-s-light';
 const LINK_CLASSES = 'inline-block border border-solid bg-transparent text-center no-underline';
 
 export const TopItem = JSX<TopItemProps>(