likvid-ui 0.1.0 → 2.0.0

package/dist/components/LiquidButton/ButtonLoader.d.ts

@@ -0,0 +1 @@
+export declare const ButtonLoader: import("react").MemoExoticComponent<() => import("react").JSX.Element>;

package/dist/components/LiquidButton/ButtonLoader.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import s from './liquidButton.module.css';
+export const ButtonLoader = memo(() => (_jsx("span", { role: 'status', "aria-label": '\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430', className: s.loader })));
+ButtonLoader.displayName = 'ButtonLoader';

package/dist/components/LiquidButton/LiquidButton.d.ts

@@ -0,0 +1,37 @@
+import { type ComponentPropsWithoutRef, type CSSProperties, type MouseEventHandler, type ReactNode, type Ref } from 'react';
+type T_shape = 'pill' | 'widget';
+type T_variant = 'glass' | 'accent' | 'accent-dark';
+type T_tag = keyof JSX.IntrinsicElements;
+interface I_commonProps {
+    children?: ReactNode;
+    title?: string | null;
+    callback?: () => void;
+    onClick?: MouseEventHandler<Element>;
+    isActive?: boolean;
+    disabled?: boolean;
+    isLoading?: boolean;
+    className?: string;
+    width?: '100%' | 'max-content';
+    shape?: T_shape;
+    variant?: T_variant;
+    style?: CSSProperties;
+}
+type T_hrefProps<T_as extends T_tag> = T_as extends 'a' ? {
+    href: string;
+} : {
+    href?: never;
+};
+type T_props<T_as extends T_tag = 'button'> = I_commonProps & T_hrefProps<T_as> & Omit<ComponentPropsWithoutRef<T_as>, keyof I_commonProps | 'as' | 'href' | 'ref'> & {
+    as?: T_as;
+};
+type T_polymorphic = <T_as extends T_tag = 'button'>(props: T_props<T_as> & {
+    ref?: Ref<HTMLElement>;
+}) => ReactNode;
+export declare const LiquidButton: T_polymorphic & {
+    a: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<I_commonProps & {
+        href: string;
+    } & Omit<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref">, "ref" | "href" | "as" | keyof I_commonProps> & {
+        as?: "a" | undefined;
+    } & import("react").RefAttributes<HTMLElement>>>;
+};
+export {};

package/dist/components/LiquidButton/LiquidButton.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement, forwardRef, memo } from 'react';
+import { cx } from '../../utils/cx';
+import { ButtonLoader } from './ButtonLoader';
+import s from './liquidButton.module.css';
+const SHAPE_CLASS = {
+    pill: s.shapePill,
+    widget: s.shapeWidget
+};
+const VARIANT_CLASS = {
+    glass: undefined,
+    accent: s.variantAccent,
+    'accent-dark': s.variantAccentDark
+};
+const BaseButton = memo(forwardRef(function LiquidButton(props, ref) {
+    const { as = 'button', children, className, callback, disabled = false, isActive = false, isLoading = false, shape = 'pill', style, title, variant = 'glass', width, onClick, ...rest } = props;
+    const isDisabled = disabled || isLoading;
+    const isLink = as === 'a';
+    const handlePress = (event) => {
+        if (isDisabled) {
+            if (isLink)
+                event.preventDefault();
+            return;
+        }
+        callback?.();
+        onClick?.(event);
+    };
+    return createElement(as, {
+        ...rest,
+        ref,
+        disabled: as === 'button' ? isDisabled : undefined,
+        'aria-disabled': isDisabled && !isLink ? true : undefined,
+        onClick: handlePress,
+        style: width ? { ...style, width } : style,
+        className: cx(s.wrapper, SHAPE_CLASS[shape], VARIANT_CLASS[variant], isActive && s.wrapperActive, isDisabled && s.disabled, className)
+    }, isLoading ? (_jsx("span", { className: s.loading, children: _jsx(ButtonLoader, {}) })) : (title ? _jsx("p", { children: title }) : children));
+}));
+BaseButton.displayName = 'LiquidButton';
+const LinkButton = memo(forwardRef(function LiquidButtonLink(props, ref) {
+    return _jsx(BaseButton, { ...props, as: 'a', ref: ref });
+}));
+LinkButton.displayName = 'LiquidButton.a';
+export const LiquidButton = Object.assign(BaseButton, {
+    a: LinkButton
+});

package/dist/components/LiquidButton/index.d.ts

@@ -0,0 +1,2 @@
+export { LiquidButton } from './LiquidButton';
+export { ButtonLoader } from './ButtonLoader';

package/dist/components/LiquidButton/index.js

@@ -0,0 +1,2 @@
+export { LiquidButton } from './LiquidButton';
+export { ButtonLoader } from './ButtonLoader';

package/dist/components/LiquidButton/liquidButton.module.css

@@ -0,0 +1,128 @@
+:where(.wrapper) {
+  --button-radius: var(--radius-pull);
+
+  position: relative;
+  width: max-content;
+  height: max-content;
+  border: none;
+  appearance: none;
+  font: inherit;
+  color: inherit;
+  text-decoration: none;
+  cursor: pointer;
+  background: linear-gradient(
+    to bottom right,
+    transparent 30%,
+    white
+  );
+  backdrop-filter: blur(2px);
+  box-shadow: 0 0 20px -2px #5d5c5c40;
+  padding: 0.875rem 1rem;
+  border-radius: var(--button-radius);
+  transition: 0.1s ease-in-out;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+:where(.shapePill) {
+  --button-radius: var(--radius-pull);
+  corner-shape: initial !important;
+}
+
+:where(.shapeWidget) {
+  --button-radius: var(--radius-widget);
+  corner-shape: squircle !important;
+}
+
+:where(.shapeWidget)::before {
+  corner-shape: squircle;
+}
+
+:where(.wrapper):not(:disabled):not(.disabled):active {
+  transform: scale(1.1);
+}
+
+:where(.wrapper):disabled,
+:where(.wrapper).disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+}
+
+:where(.wrapper):disabled:active,
+:where(.wrapper).disabled:active {
+  transform: none;
+  animation: liquidButtonShake 0.1s ease-in-out;
+}
+
+@keyframes liquidButtonShake {
+  0%, 100% {
+    transform: translateX(0);
+  }
+
+  25% {
+    transform: translateX(-3px);
+  }
+
+  50% {
+    transform: translateX(3px);
+  }
+
+  75% {
+    transform: translateX(-2px);
+  }
+}
+
+:where(.wrapper)::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: var(--button-radius) !important;
+  box-shadow: inset 1px 1px 1px 0 white, inset -1px -1px 1px 0 white;
+  z-index: 0;
+}
+
+:where(.variantAccent) {
+  background: var(--color-main);
+  color: white;
+}
+
+:where(.variantAccentDark) {
+  background: var(--color-main-dark, var(--color-main));
+  color: white;
+}
+
+:where(.wrapperActive) {
+  background: #000000a3;
+  color: white;
+}
+
+:where(.wrapper) p {
+  margin: 0;
+  font-size: 0.875rem;
+  font-weight: 500;
+  transition: 0.1s ease-in-out;
+}
+
+:where(.loading) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 1.19em;
+}
+
+:where(.loader) {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  border: 2px solid rgba(128, 128, 128, 0.3);
+  border-top-color: currentColor;
+  border-radius: 50%;
+  animation: loaderSpin 0.8s linear infinite;
+}
+
+@keyframes loaderSpin {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/dist/components/LiquidContainer/LiquidContainer.d.ts

@@ -0,0 +1,45 @@
+import { type ReactNode } from 'react';
+type T_shape = 'widget' | 'pill';
+interface I_shapeProps {
+    shape?: T_shape;
+    classNameShadow?: string;
+}
+export declare const LiquidContainer: {
+    div: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & I_shapeProps & {
+        children: ReactNode;
+    } & import("react").RefAttributes<HTMLDivElement>>>;
+    section: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & I_shapeProps & {
+        children: ReactNode;
+    } & import("react").RefAttributes<HTMLElement>>>;
+    li: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & I_shapeProps & {
+        children: ReactNode;
+    } & import("react").RefAttributes<HTMLLIElement>>>;
+    ul: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & I_shapeProps & {
+        children: ReactNode;
+    } & import("react").RefAttributes<HTMLUListElement>>>;
+    ol: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "ref"> & I_shapeProps & {
+        children: ReactNode;
+    } & import("react").RefAttributes<HTMLOListElement>>>;
+    figure: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & I_shapeProps & {
+        children: ReactNode;
+    } & import("react").RefAttributes<HTMLElement>>>;
+    form: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "ref"> & I_shapeProps & {
+        children: ReactNode;
+    } & import("react").RefAttributes<HTMLFormElement>>>;
+    fieldset: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, "ref"> & I_shapeProps & {
+        children: ReactNode;
+    } & import("react").RefAttributes<HTMLFieldSetElement>>>;
+    label: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & I_shapeProps & {
+        children: ReactNode;
+    } & import("react").RefAttributes<HTMLLabelElement>>>;
+    button: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & I_shapeProps & {
+        children: ReactNode;
+    } & import("react").RefAttributes<HTMLButtonElement>>>;
+    a: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & I_shapeProps & {
+        children: ReactNode;
+    } & import("react").RefAttributes<HTMLAnchorElement>>>;
+    span: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & I_shapeProps & {
+        children: ReactNode;
+    } & import("react").RefAttributes<HTMLSpanElement>>>;
+};
+export {};

package/dist/components/LiquidContainer/LiquidContainer.js

@@ -0,0 +1,46 @@
+import { createElement, forwardRef, memo } from 'react';
+import { cx } from '../../utils/cx';
+import s from './liquidContainer.module.css';
+const VARIANTS = {
+    div: { defaultShape: 'widget' },
+    section: { defaultShape: 'widget' },
+    li: { defaultShape: 'widget' },
+    ul: { defaultShape: 'widget' },
+    ol: { defaultShape: 'widget' },
+    figure: { defaultShape: 'widget' },
+    form: { defaultShape: 'widget' },
+    fieldset: { defaultShape: 'widget' },
+    label: { defaultShape: 'pill' },
+    button: { defaultShape: 'pill', extraClass: s.wrapperButton, defaultProps: { type: 'button' } },
+    a: { defaultShape: 'pill' },
+    span: { defaultShape: 'pill' }
+};
+const SHAPE_CLASS = {
+    widget: undefined,
+    pill: s.wrapperPill
+};
+function createVariant(variant) {
+    const { defaultShape, extraClass, defaultProps } = VARIANTS[variant];
+    const Component = forwardRef(({ children, className, classNameShadow, shape = defaultShape, ...rest }, ref) => (createElement(variant, {
+        ...defaultProps,
+        ...rest,
+        ref,
+        className: cx(s.wrapper, SHAPE_CLASS[shape], extraClass, className)
+    }, createElement('div', { className: cx(s.shadow, classNameShadow), 'aria-hidden': true }), children)));
+    Component.displayName = `LiquidContainer.${variant}`;
+    return memo(Component);
+}
+export const LiquidContainer = {
+    div: createVariant('div'),
+    section: createVariant('section'),
+    li: createVariant('li'),
+    ul: createVariant('ul'),
+    ol: createVariant('ol'),
+    figure: createVariant('figure'),
+    form: createVariant('form'),
+    fieldset: createVariant('fieldset'),
+    label: createVariant('label'),
+    button: createVariant('button'),
+    a: createVariant('a'),
+    span: createVariant('span')
+};

package/dist/components/LiquidContainer/index.d.ts

@@ -0,0 +1 @@
+export { LiquidContainer } from './LiquidContainer';

package/dist/components/LiquidContainer/index.js

@@ -0,0 +1 @@
+export { LiquidContainer } from './LiquidContainer';

package/dist/components/LiquidContainer/liquidContainer.module.css

@@ -0,0 +1,44 @@
+:where(.wrapper) {
+  position: relative;
+  backdrop-filter: blur(2px);
+  box-shadow: 0 0 40px -5px #5353531f;
+  border-radius: var(--radius-widget);
+  corner-shape: squircle !important;
+  transition: background 0.1s;
+}
+
+:where(.wrapper) .shadow {
+  position: absolute;
+  inset: 0;
+  box-shadow: inset 1px 1px 1px 0 white, inset -1px -1px 1px 0 white;
+  z-index: -1;
+  border-radius: var(--radius-widget);
+  corner-shape: squircle !important;
+  background: linear-gradient(
+    to bottom right,
+    transparent 30%,
+    white
+  );
+}
+
+:where(.wrapperPill) {
+  border-radius: var(--radius-pull);
+  corner-shape: initial !important;
+}
+
+:where(.wrapperPill) .shadow {
+  border-radius: var(--radius-pull);
+  corner-shape: initial !important;
+}
+
+:where(.wrapperButton) {
+  border: none;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  text-align: inherit;
+  appearance: none;
+}

package/dist/components/LiquidRadio/LiquidRadio.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import 'swiper/css';
+export interface I_liquidRadioItem<T extends string = string> {
+    value: T;
+    label: string;
+    href: string;
+}
+interface I_liquidRadioProps<T extends string = string> {
+    items: readonly I_liquidRadioItem<T>[];
+    value: T;
+    onChange: (value: T) => void;
+    ariaLabel?: string;
+    className?: string;
+}
+export declare const LiquidRadio: <T extends string>(props: I_liquidRadioProps<T>) => ReactNode;
+export {};

package/dist/components/LiquidRadio/LiquidRadio.js

@@ -0,0 +1,65 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import Link from 'next/link';
+import cn from 'classnames';
+import classNames from 'classnames';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import s from './liquidRadio.module.css';
+import 'swiper/css';
+export const LiquidRadio = memo(({ items, value, onChange, ariaLabel = 'Switch', className }) => {
+    const activeIndex = useMemo(() => Math.max(0, items.findIndex(item => item.value === value)), [items, value]);
+    const slidesCount = items.length * 2 - 1;
+    const slidesCountMap = Array.from({ length: slidesCount });
+    const slidesActive = items.length - 1;
+    const itemsLength = items.length;
+    const swiperRef = useRef(null);
+    const shadowRef = useRef(null);
+    const indexActiveRef = useRef(null);
+    const [isTouching, setIsTouching] = useState(false);
+    const handleChangeByActiveSlide = useCallback(() => {
+        const idx = indexActiveRef.current;
+        if (idx == null || idx < 0)
+            return;
+        const item = items[idx];
+        if (!item)
+            return;
+        onChange(item.value);
+    }, [items, onChange]);
+    const onNavigate = (clickIndex) => {
+        const activeSlideIndex = swiperRef.current?.activeIndex ?? 0;
+        const desiredSlideIndex = itemsLength - clickIndex + activeSlideIndex;
+        swiperRef.current?.slideTo(desiredSlideIndex, 300);
+    };
+    const handleTouchStart = () => {
+        setIsTouching(true);
+    };
+    const handleTouchEnd = () => {
+        setIsTouching(false);
+        handleChangeByActiveSlide();
+    };
+    const onProgress = useCallback((swiper, prog) => {
+        if (!shadowRef.current)
+            return;
+        const slidesLength = swiper.slides.length;
+        const perView = Number(swiper.params.slidesPerView) || 1;
+        const maxIndex = Math.max(0, slidesLength - perView);
+        const exactIndex = prog * maxIndex;
+        const hoverIndex = Math.round(exactIndex);
+        indexActiveRef.current = itemsLength - 1 - hoverIndex;
+        shadowRef.current.style.left = `${100 - prog * 100}%`;
+    }, [itemsLength]);
+    useEffect(() => {
+        const swiper = swiperRef.current;
+        if (!swiper)
+            return;
+        if (activeIndex < 0)
+            return;
+        const nextSlide = itemsLength - 1 - activeIndex;
+        swiper.slideTo(nextSlide, 200);
+        indexActiveRef.current = activeIndex;
+    }, [activeIndex, itemsLength]);
+    return (_jsxs("div", { "aria-label": ariaLabel, role: 'radiogroup', className: cn(s.wrapper, isTouching && s.wrapperPress, className), style: { gridTemplateColumns: `repeat(${itemsLength}, 1fr)` }, onPointerDown: handleTouchStart, onPointerUp: handleTouchEnd, onPointerCancel: handleTouchEnd, children: [_jsx("div", { className: cn(s.shadowWrapper, isTouching && s.shadowWrapperPress), children: _jsx("div", { className: s.shadow, ref: shadowRef }) }), _jsx(Swiper, { className: cn(s.swiper, isTouching && s.swiperPress), slidesPerView: itemsLength, onSwiper: sw => {
+                    swiperRef.current = sw;
+                }, speed: 300, resistanceRatio: 0, initialSlide: itemsLength - 1 - Math.max(activeIndex, 0), onProgress: onProgress, children: slidesCountMap.map((_, index) => (_jsx(SwiperSlide, { className: s.slide, onPointerDown: () => onNavigate(index + 1), children: slidesActive === index ? (_jsx("div", { className: cn(s.activeSlide, isTouching && s.activeSlidePress) })) : null }, index))) }), items.map((item, index) => (_jsx(Link, { href: item.href, prefetch: true, role: 'radio', "aria-checked": !isTouching && index === activeIndex, className: classNames(s.item, { [s.itemActive]: !isTouching && index === activeIndex }), children: _jsx("p", { className: s.title, children: item.label }) }, item.value)))] }));
+});

package/dist/components/LiquidRadio/index.d.ts

@@ -0,0 +1,2 @@
+export { LiquidRadio } from './LiquidRadio';
+export type { I_liquidRadioItem } from './LiquidRadio';

package/dist/components/LiquidRadio/index.js

@@ -0,0 +1 @@
+export { LiquidRadio } from './LiquidRadio';

package/dist/components/LiquidRadio/liquidRadio.module.css

@@ -0,0 +1,155 @@
+.wrapper {
+  user-select: none;
+  -webkit-user-select: none;
+  -webkit-user-drag: none;
+  -webkit-touch-callout: none;
+  -webkit-tap-highlight-color: transparent;
+
+  position: relative;
+  display: grid;
+  border-radius: var(--radius-pull) !important;
+  z-index: 1;
+
+  background: rgba(250, 250, 250, 0.75);
+
+  box-shadow: 0 0 40px -5px #5353531f;
+  transition: transform 0.15s ease-out, background 0.1s;
+  padding: 0 3px;
+
+  backdrop-filter: blur(2px);
+
+  width: 100%;
+}
+
+.wrapper:before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: var(--radius-pull) !important;
+  box-shadow: inset 1.5px 1px 1px 0 white, inset -1.5px -1px 1px 0 white;
+  z-index: 0;
+
+}
+
+.wrapperPress {
+  transform: scale(1.05);
+}
+
+.shadowWrapper {
+  position: absolute;
+  inset: 0;
+  border-radius: var(--radius-pull);
+  overflow: hidden;
+  opacity: 0;
+  transition: 0.3s;
+}
+
+.shadowWrapperPress {
+  opacity: 1;
+}
+
+.shadow {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  background: rgba(250, 250, 250, 0.25);
+  box-shadow: 0 0 200px 150px rgba(250, 250, 250, 0.9);
+  width: 0;
+  height: 0;
+  opacity: 1;
+  border-radius: var(--radius-pull);
+}
+
+.item {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  align-items: center;
+  justify-content: center;
+  padding: 0.75rem 0.75rem;
+  width: 100%;
+  pointer-events: none;
+  border: none;
+  background: transparent;
+  text-decoration: none;
+  overflow: hidden;
+  cursor: default;
+  font: inherit;
+}
+
+.title {
+  position: relative;
+  margin: 0;
+  font-size: 0.875rem;
+  font-weight: 500;
+  transition: 0.2s, color 0s !important;
+  text-align: center;
+  width: 100%;
+}
+
+.swiper {
+  border-radius: var(--radius-pull);
+  position: absolute !important;
+  inset: 0 calc(-1 * var(--site-horizontal-padding-mobile));
+  padding:
+    0
+    calc(var(--site-horizontal-padding-mobile) + 3px)
+  !important;
+
+  z-index: 0 !important;
+}
+
+.swiperMirror {
+  pointer-events: none;
+}
+
+.swiperPress {
+  inset:
+    -10px
+    calc(-1 * var(--site-horizontal-padding-mobile))
+    -10px
+    calc(-1 * var(--site-horizontal-padding-mobile))
+    !important;
+
+  z-index: 1 !important;
+}
+
+.slide {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.activeSlide {
+  position: absolute;
+  inset: 3px 0;
+  border-radius: var(--radius-pull);
+  transition: 0.15s;
+  background: #0000001a;
+}
+
+.activeSlidePress {
+  inset: 6px -7px;
+  box-shadow: 0 2px 3px #53535326;
+}
+
+.activeSlidePress {
+  background: transparent;
+  /*backdrop-filter: saturate(400%);*/
+}
+
+.activeSlide:after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: var(--radius-pull);
+  opacity: 0.5;
+  transition: 0.1s;
+}
+
+.activeSlidePress:after {
+  box-shadow: inset 1px 1px 1px 0 white, inset -1px -1px 1px 0 white;
+}

package/dist/components/NavBarBase/NavBarBase.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import 'swiper/css';
+export interface I_mobileNavTab {
+    title: string;
+    path: string;
+    icon: (color: string) => ReactNode;
+    isActive: (pathname: string) => boolean;
+    onPress?: () => void;
+}
+interface I_props {
+    tabs: I_mobileNavTab[];
+}
+export declare const NavBarBase: import("react").MemoExoticComponent<({ tabs }: I_props) => import("react").JSX.Element>;
+export {};

package/dist/components/NavBarBase/NavBarBase.js

@@ -0,0 +1,74 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import Link from 'next/link';
+import { usePathname, useRouter } from 'next/navigation';
+import cn from 'classnames';
+import classNames from 'classnames';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import s from './navBarBase.module.css';
+import 'swiper/css';
+export const NavBarBase = memo(({ tabs }) => {
+    const router = useRouter();
+    const pathname = usePathname();
+    //
+    const activeTabIndex = useMemo(() => tabs.findIndex(tab => tab.isActive(pathname)), [tabs, pathname]);
+    const slidesCount = tabs.length * 2 - 1;
+    const slidesCountMap = Array.from({ length: slidesCount });
+    const slidesActive = tabs.length - 1;
+    const tabsLength = tabs.length;
+    const swiperRef = useRef(null);
+    const shadowRef = useRef(null);
+    const indexActiveRef = useRef(null);
+    //
+    const [isTouching, setIsTouching] = useState(false);
+    const handleNavigateByActiveSlide = useCallback(() => {
+        const swiper = swiperRef.current;
+        if (!swiper)
+            return;
+        const idx = indexActiveRef.current;
+        if (idx == null || idx < 0)
+            return;
+        const tab = tabs[idx];
+        if (!tab?.path)
+            return;
+        tab.onPress?.();
+        router.push(tab.path);
+    }, [tabs, router]);
+    const onNavigate = (clickIndex) => {
+        const activeIndex = swiperRef.current?.activeIndex ?? 0;
+        const desiredSlideIndex = tabsLength - clickIndex + activeIndex;
+        swiperRef.current?.slideTo(desiredSlideIndex, 300);
+    };
+    const handleNavTouchStart = () => {
+        setIsTouching(true);
+    };
+    const handleNavTouchEnd = () => {
+        setIsTouching(false);
+        handleNavigateByActiveSlide();
+    };
+    const onProgress = useCallback((swiper, prog) => {
+        if (!shadowRef.current)
+            return;
+        const slidesLength = swiper.slides.length;
+        const perView = Number(swiper.params.slidesPerView) || 1;
+        const maxIndex = Math.max(0, slidesLength - perView);
+        const exactIndex = prog * maxIndex;
+        const hoverIndex = Math.round(exactIndex);
+        indexActiveRef.current = tabsLength - 1 - hoverIndex;
+        shadowRef.current.style.left = `${100 - prog * 100}%`;
+    }, [tabsLength]);
+    useEffect(() => {
+        const swiper = swiperRef.current;
+        if (!swiper)
+            return;
+        if (activeTabIndex < 0)
+            return;
+        const nextSlide = tabsLength - 1 - activeTabIndex;
+        swiper.slideTo(nextSlide, 200);
+        indexActiveRef.current = activeTabIndex;
+    }, [activeTabIndex, tabsLength]);
+    return (_jsxs("nav", { "aria-label": 'Mobile Navigation', className: cn(s.wrapper, isTouching && s.wrapperPress), style: { gridTemplateColumns: `repeat(${tabsLength}, 1fr)` }, onPointerDown: handleNavTouchStart, onPointerUp: handleNavTouchEnd, onPointerCancel: handleNavTouchEnd, children: [_jsx("div", { className: cn(s.shadowWrapper, isTouching && s.shadowWrapperPress), children: _jsx("div", { className: s.shadow, ref: shadowRef }) }), _jsx(Swiper, { className: cn(s.swiper, isTouching && s.swiperPress), slidesPerView: tabsLength, onSwiper: sw => {
+                    swiperRef.current = sw;
+                }, speed: 300, resistanceRatio: 0, initialSlide: tabsLength - 1 - Math.max(activeTabIndex, 0), onProgress: onProgress, children: slidesCountMap.map((_, index) => (_jsx(SwiperSlide, { className: s.slide, onPointerDown: () => onNavigate(index + 1), children: slidesActive === index ? (_jsx("div", { className: cn(s.activeSlide, isTouching && s.activeSlidePress) })) : null }, index))) }), tabs.map((item, index) => (_jsxs(Link, { className: classNames(s.item, { [s.itemActive]: !isTouching && index === activeTabIndex }), href: item.path, prefetch: true, onClick: () => item.onPress?.(), children: [_jsx("div", { style: { position: 'relative' }, children: _jsx("span", { className: s.itemIcon, children: item?.icon((index === activeTabIndex && !isTouching) ? 'var(--color-main)' : '#6d4c4c') }) }), _jsx("p", { className: s.title, children: item.title })] }, index)))] }));
+});

package/dist/components/NavBarBase/index.d.ts

@@ -0,0 +1,2 @@
+export { NavBarBase } from './NavBarBase';
+export type { I_mobileNavTab } from './navBarBase.helpers';

package/dist/components/NavBarBase/index.js

@@ -0,0 +1 @@
+export { NavBarBase } from './NavBarBase';

package/dist/components/NavBarBase/navBarBase.helpers.d.ts

@@ -0,0 +1 @@
+export type { I_mobileNavTab } from './NavBarBase';

package/dist/components/NavBarBase/navBarBase.helpers.js

@@ -0,0 +1 @@
+export {};

package/dist/components/NavBarBase/navBarBase.module.css

@@ -0,0 +1,167 @@
+.wrapper {
+  user-select: none;
+  -webkit-user-select: none;
+  -webkit-user-drag: none;
+  -webkit-touch-callout: none;
+  -webkit-tap-highlight-color: transparent;
+
+  position: relative;
+  display: grid;
+  border-radius: var(--radius-pull) !important;
+  z-index: 1;
+  width: calc(100% - (var(--site-horizontal-padding-mobile) * 2));
+
+  background: rgba(250, 250, 250, 0.75);
+
+  inset: 0 var(--site-horizontal-padding-mobile);
+  box-shadow: 0 0 40px -5px #5353531f;
+  transition: transform 0.15s ease-out, background 0.1s;
+  padding: 0 3px;
+
+  backdrop-filter: blur(2px);
+}
+
+.wrapper:before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: var(--radius-pull) !important;
+  box-shadow: inset 1.5px 1px 1px 0 white, inset -1.5px -1px 1px 0 white;
+  z-index: 0;
+
+}
+
+.wrapperPress {
+  transform: scale(1.05);
+}
+
+.shadowWrapper {
+  position: absolute;
+  inset: 0;
+  border-radius: var(--radius-pull);
+  overflow: hidden;
+  opacity: 0;
+  transition: 0.3s;
+}
+
+.shadowWrapperPress {
+  opacity: 1;
+}
+
+.shadow {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  background: rgba(250, 250, 250, 0.25);
+  box-shadow: 0 0 200px 150px rgba(250, 250, 250, 0.9);
+  width: 0;
+  height: 0;
+  opacity: 1;
+  border-radius: var(--radius-pull);
+}
+
+.item {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  align-items: center;
+  padding: 0.5rem 0 0.6rem 0;
+  width: 100%;
+  pointer-events: none;
+  text-decoration: none;
+  overflow: hidden;
+}
+
+.itemIcon {
+  display: flex;
+  aspect-ratio: 1/1;
+  justify-content: center;
+  height: 1.75rem;
+  transform-origin: center bottom;
+  will-change: transform;
+}
+
+.item p {
+  position: relative;
+  margin: 0;
+  font-size: 0.6rem;
+  font-weight: 500;
+  transition: 0.2s, color 0s !important;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  text-align: center;
+  color: #6d4c4c;
+  width: 100%;
+}
+
+.itemActive p {
+  color: var(--color-main);
+}
+
+.swiper {
+  border-radius: var(--radius-pull);
+  position: absolute !important;
+  inset: 0 calc(-1 * var(--site-horizontal-padding-mobile));
+  padding:
+    0
+    calc(var(--site-horizontal-padding-mobile) + 3px)
+  !important;
+
+  z-index: 0 !important;
+}
+
+.swiperMirror {
+  pointer-events: none;
+}
+
+.swiperPress {
+  inset:
+    -10px
+    calc(-1 * var(--site-horizontal-padding-mobile))
+    -10px
+    calc(-1 * var(--site-horizontal-padding-mobile))
+    !important;
+
+  z-index: 1 !important;
+}
+
+.slide {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.activeSlide {
+  position: absolute;
+  inset: 3px 0;
+  border-radius: var(--radius-pull);
+  transition: 0.15s;
+  background: #0000001a;
+}
+
+.activeSlidePress {
+  inset: 6px -7px;
+  box-shadow: 0 2px 3px #53535326;
+}
+
+.activeSlidePress {
+  background: transparent;
+  backdrop-filter: saturate(400%);
+}
+
+.activeSlide:after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: var(--radius-pull);
+  opacity: 0.5;
+  transition: 0.1s;
+}
+
+.activeSlidePress:after {
+  box-shadow: inset 1px 1px 1px 0 white, inset -1px -1px 1px 0 white;
+}

package/dist/index.d.ts

@@ -1 +1,6 @@
-export declare const likvidUi = "likvid-ui";
+export { LiquidContainer } from './components/LiquidContainer';
+export { LiquidButton, ButtonLoader } from './components/LiquidButton';
+export { NavBarBase } from './components/NavBarBase';
+export type { I_mobileNavTab } from './components/NavBarBase';
+export { LiquidRadio } from './components/LiquidRadio';
+export type { I_liquidRadioItem } from './components/LiquidRadio';

package/dist/index.js

@@ -1 +1,4 @@
-export const likvidUi = 'likvid-ui';
+export { LiquidContainer } from './components/LiquidContainer';
+export { LiquidButton, ButtonLoader } from './components/LiquidButton';
+export { NavBarBase } from './components/NavBarBase';
+export { LiquidRadio } from './components/LiquidRadio';

package/dist/utils/cx.d.ts

@@ -0,0 +1,3 @@
+type ClassValue = string | false | null | undefined;
+export declare const cx: (...classes: ClassValue[]) => string;
+export {};

package/dist/utils/cx.js

@@ -0,0 +1 @@
+export const cx = (...classes) => classes.filter(Boolean).join(' ');

package/package.json

@@ -1,20 +1,17 @@
 {
   "name": "likvid-ui",
-  "version": "0.1.0",
+  "version": "2.0.0",
   "description": "Likvid UI — glass-кит React-компонентов в стиле Apple Liquid Glass",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "scripts": {
-    "build": "tsc -p tsconfig.build.json",
-    "prepublish": "yarn build",
-    "prepublishOnly": "yarn build",
-    "whoami": "npm whoami",
-    "check": "npm pack --dry-run",
-    "pub": "yarn publish",
-    "pub:patch": "npm version patch --no-git-tag-version && yarn publish",
-    "pub:minor": "npm version minor --no-git-tag-version && yarn publish",
-    "pub:major": "npm version major --no-git-tag-version && yarn publish"
+    "build": "tsc -p tsconfig.build.json && node scripts/copy-css.mjs",
+    "prepack": "yarn build",
+    "pub": "npm publish",
+    "pub:patch": "npm version patch --no-git-tag-version && npm publish",
+    "pub:minor": "npm version minor --no-git-tag-version && npm publish",
+    "pub:major": "npm version major --no-git-tag-version && npm publish"
   },
   "exports": {
     ".": {
@@ -34,7 +31,24 @@
   ],
   "license": "MIT",
   "packageManager": "yarn@1.22.22",
+  "peerDependencies": {
+    "next": ">=13",
+    "react": ">=18",
+    "react-dom": ">=18",
+    "swiper": ">=11"
+  },
+  "peerDependenciesMeta": {
+    "next": {
+      "optional": true
+    }
+  },
   "devDependencies": {
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "swiper": "^11.2.10",
     "typescript": "^5.6.3"
+  },
+  "dependencies": {
+    "classnames": "^2.5.1"
   }
 }