@alfalab/core-components 42.0.0-beta.0 → 42.0.0-beta.1

package/tabs/modern/Component-4cd3936b.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { FC, SVGProps } from 'react';
+import { OptionShape } from "./shared-4cd3936b";
+import { OptionProps as BaseOptionProps } from "./shared-4cd3936b";
+type OptionProps = Omit<BaseOptionProps, 'option'> & {
+    option: OptionShape & {
+        icon?: FC<SVGProps<SVGSVGElement>>;
+    };
+};
+declare const Option: ({ option, children, ...restProps }: OptionProps) => JSX.Element;
+export { Option };

package/tabs/modern/Component-5e1b8383.d.ts

@@ -1,4 +1,72 @@
 /// <reference types="react" />
-import { CheckmarkProps } from "./typings-5e1b8383";
-declare const BaseCheckmark: ({ selected, disabled, className, multiple, }: CheckmarkProps) => JSX.Element;
-export { BaseCheckmark };
+import React from 'react';
+import { ReactNode } from "react";
+import { BottomSheetProps } from "./index-f12ee135";
+import { BaseSelectProps } from "./typings-5e1b8383";
+type SelectMobileProps = Omit<BaseSelectProps, 'Checkmark' | 'onScroll'> & {
+    /**
+     * Футер
+     * @deprecated Используйте bottomSheetProps.actionButton
+     */
+    footer?: ReactNode;
+    /**
+     * Будет ли свайпаться шторка
+     * @deprecated Используйте bottomSheetProps.swipeable
+     */
+    swipeable?: boolean;
+    /**
+     * Отображать в BottomSheet
+     */
+    isBottomSheet?: boolean;
+    /**
+     * Дополнительные пропсы шторки
+     */
+    bottomSheetProps?: Partial<BottomSheetProps>;
+    /**
+     *  Дополнительные пропсы модалки
+     */
+    modalProps?: Partial<React.ComponentProps<typeof ModalMobile>>;
+    /**
+     *  Дополнительные пропсы шапки модалки
+     */
+    modalHeaderProps?: Partial<React.ComponentProps<typeof ModalMobile.Header>>;
+    /**
+     *  Дополнительные пропсы футера модалки
+     */
+    modalFooterProps?: Partial<React.ComponentProps<typeof ModalMobile.Footer>>;
+};
+declare const BaseSelectMobile: React.ForwardRefExoticComponent<Omit<BaseSelectProps, "onScroll" | "Checkmark"> & {
+    /**
+     * Футер
+     * @deprecated Используйте bottomSheetProps.actionButton
+     */
+    footer?: ReactNode;
+    /**
+     * Будет ли свайпаться шторка
+     * @deprecated Используйте bottomSheetProps.swipeable
+     */
+    swipeable?: boolean | undefined;
+    /**
+     * Отображать в BottomSheet
+     */
+    isBottomSheet?: boolean | undefined;
+    /**
+     * Дополнительные пропсы шторки
+     */
+    bottomSheetProps?: Partial<BottomSheetProps> | undefined;
+    /**
+     *  Дополнительные пропсы модалки
+     */
+    modalProps?: Partial<ModalMobileProps & React.RefAttributes<HTMLDivElement>> | undefined;
+    /**
+     *  Дополнительные пропсы шапки модалки
+     */
+    modalHeaderProps?: Partial<import("./Component.mobile-e81c389f").HeaderProps> | undefined;
+    /**
+     *  Дополнительные пропсы футера модалки
+     */
+    modalFooterProps?: Partial<import("./Component.mobile-e81c389f").FooterProps> | undefined;
+} & React.RefAttributes<unknown>>;
+export * from "./Component.mobile-e81c389f";
+export { ModalMobileProps } from "./typings-bdb4c6b9";
+export { SelectMobileProps, BaseSelectMobile };

package/tabs/modern/Component.mobile-e81c389f.d.ts

@@ -0,0 +1,38 @@
+/// <reference types="react" />
+import React from "react";
+import { FC, ReactNode } from "react";
+import { NavigationBarProps } from "./index-e81c389f";
+import { ContentProps, ModalMobileProps } from "./typings-bdb4c6b9";
+type HeaderProps = Omit<NavigationBarProps, "size" | "view" | "parentRef">;
+declare const Header: FC<HeaderProps>;
+declare const Content: FC<ContentProps>;
+type FooterProps = {
+    /**
+     * Контент футера
+     */
+    children?: ReactNode;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Фиксирует футер
+     */
+    sticky?: boolean;
+    /**
+     * Выравнивание элементов футера
+     */
+    layout?: "start" | "center" | "space-between" | "column";
+    /**
+     * Отступы между элементами футера
+     */
+    gap?: 16 | 24 | 32;
+};
+declare const Footer: FC<FooterProps>;
+declare const ModalMobile: React.ForwardRefExoticComponent<ModalMobileProps & React.RefAttributes<HTMLDivElement>> & {
+    Content: React.FC<import("./typings-bdb4c6b9").ContentProps>;
+    Header: React.FC<HeaderProps>;
+    Footer: React.FC<FooterProps>;
+    Closer: React.FC<import("./index-e81c389f").CloserProps>;
+};
+export { HeaderProps, Header, Content, FooterProps, Footer, ModalMobile };

package/tabs/modern/collapsible.d.ts

@@ -0,0 +1,7 @@
+export { TabsCollapsibleResponsive as TabsCollapsible, TabsCollapsibleResponsiveProps as TabsCollapsibleProps } from "./components/tabs/Component.collapsible.responsive";
+export * from "./components/tabs/Component.collabsible.desktop";
+export * from "./components/tabs/Component.collapsible.mobile";
+export * from "./components/primary-tablist/Component.collapsible.responsive";
+export * from "./components/primary-tablist/Component.collapsible.desktop";
+export * from "./components/primary-tablist/Component.collapsible.mobile";
+export * from "./components/tab/index";

package/tabs/modern/collapsible.js

@@ -0,0 +1,25 @@
+export { TabsCollapsibleResponsive as TabsCollapsible } from './components/tabs/Component.collapsible.responsive.js';
+export { TabsCollapsibleDesktop } from './components/tabs/Component.collabsible.desktop.js';
+export { TabsCollapsibleMobile } from './components/tabs/Component.collapsible.mobile.js';
+export { CollapsiblePrimaryTabListResponsive } from './components/primary-tablist/Component.collapsible.responsive.js';
+export { CollapsiblePrimaryTabListDesktop } from './components/primary-tablist/Component.collapsible.desktop.js';
+export { CollapsiblePrimaryTabListMobile } from './components/primary-tablist/Component.collapsible.mobile.js';
+export { Tab } from './components/tab/Component.js';
+import 'react';
+import '../../mq/modern';
+import 'classnames';
+import '../../badge/modern';
+import '../../keyboard-focusable/modern';
+import '../../picker-button/modern/desktop';
+import '@juggle/resize-observer';
+import '@alfalab/hooks';
+import '../../shared/modern';
+import './components/title/Component.js';
+import './index.module-cd918b29.js';
+import './mobile.module-823710bb.js';
+import './components/tabs/Component.js';
+import './components/primary-tablist/Component.collapsible.js';
+import './hooks/use-tablist-titles.js';
+import './hooks/use-collapsible-elements.js';
+import './hooks/use-tabs.js';
+import './synthetic-events.js';

package/tabs/modern/components/primary-tablist/Component.collapsible.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { Styles, TabListProps } from "../../typings";
+declare const CollapsiblePrimaryTabList: ({ size, className, containerClassName, titles, styles, selectedId, collapsedTabsIds, fullWidthScroll, onChange, dataTestId, breakpoint, defaultMatchMediaValue, }: TabListProps & Styles) => JSX.Element;
+export { CollapsiblePrimaryTabList };

package/tabs/modern/components/primary-tablist/Component.collapsible.desktop.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { TabListProps } from "../../typings";
+declare const CollapsiblePrimaryTabListDesktop: ({ size, ...restProps }: TabListProps) => JSX.Element;
+export { CollapsiblePrimaryTabListDesktop };

package/tabs/modern/components/primary-tablist/Component.collapsible.desktop.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { CollapsiblePrimaryTabList } from './Component.collapsible.js';
+import { c as commonStyles } from '../../index.module-cd918b29.js';
+import 'classnames';
+import '../../../../badge/modern';
+import '../../../../keyboard-focusable/modern';
+import '../../../../picker-button/modern/desktop';
+import '../../../../mq/modern';
+import '@juggle/resize-observer';
+import '@alfalab/hooks';
+import '../../../../shared/modern';
+import '../title/Component.js';
+import '../../hooks/use-tablist-titles.js';
+import '../../hooks/use-collapsible-elements.js';
+import '../../hooks/use-tabs.js';
+import '../../synthetic-events.js';
+
+const CollapsiblePrimaryTabListDesktop = ({ size = 'm', ...restProps }) => (React.createElement(CollapsiblePrimaryTabList, { ...restProps, size: size, styles: commonStyles }));
+
+export { CollapsiblePrimaryTabListDesktop };

package/tabs/modern/components/primary-tablist/Component.collapsible.js

@@ -0,0 +1,61 @@
+import React, { useRef, useEffect, useMemo } from 'react';
+import cn from 'classnames';
+import { Badge } from '../../../../badge/modern';
+import { KeyboardFocusable } from '../../../../keyboard-focusable/modern';
+import { PickerButtonDesktop } from '../../../../picker-button/modern/desktop';
+import { useTablistTitles } from '../../hooks/use-tablist-titles.js';
+import { createSyntheticMouseEvent } from '../../synthetic-events.js';
+import { Title } from '../title/Component.js';
+import '../../../../mq/modern';
+import '@juggle/resize-observer';
+import '@alfalab/hooks';
+import '../../../../shared/modern';
+import '../../hooks/use-collapsible-elements.js';
+import '../../hooks/use-tabs.js';
+
+const DEFAULT_STYLES = {};
+const CollapsiblePrimaryTabList = ({ size, className, containerClassName, titles = [], styles = DEFAULT_STYLES, selectedId = titles.length ? titles[0].id : undefined, collapsedTabsIds, fullWidthScroll, onChange, dataTestId, breakpoint = 768, defaultMatchMediaValue, }) => {
+    const lineRef = useRef(null);
+    const { containerRef, addonRef, tablistTitles, selectedTab, getTabListItemProps } = useTablistTitles({
+        titles,
+        selectedId,
+        collapsedTabsIds,
+        breakpoint,
+        onChange,
+        defaultMatchMediaValue,
+    });
+    useEffect(() => {
+        if (selectedTab && lineRef.current) {
+            lineRef.current.style.width = `${selectedTab.offsetWidth}px`;
+            lineRef.current.style.transform = `translateX(${selectedTab.offsetLeft}px)`;
+        }
+    }, [selectedTab, tablistTitles]);
+    const collapsedOptions = useMemo(() => tablistTitles.reduce((options, title) => {
+        if (title.collapsed) {
+            options.push({
+                key: title.title,
+                value: title.id,
+                content: React.createElement(Title, { ...title, styles: styles, isOption: true }),
+            });
+        }
+        return options;
+    }, []), [tablistTitles, styles]);
+    const collapsedAddonsLength = tablistTitles.filter((title) => title.collapsed && title.rightAddons).length;
+    const handleOptionsChange = (payload) => {
+        if (payload.selected?.value && onChange) {
+            const nativeMouseEvent = new MouseEvent('change');
+            const syntheticMouseEvent = createSyntheticMouseEvent(nativeMouseEvent);
+            onChange(syntheticMouseEvent, { selectedId: payload.selected.value });
+        }
+    };
+    const renderContent = () => (React.createElement("div", { role: 'tablist', "data-test-id": dataTestId, className: cn(styles.component, className, size && styles[size], {
+            [styles.fullWidthScroll]: fullWidthScroll,
+        }) },
+        tablistTitles.map(({ dataTestId: _, ...restTitleProps }, index) => (React.createElement(KeyboardFocusable, { key: restTitleProps.id }, (ref, focused) => (React.createElement(Title, { ...getTabListItemProps(index, ref), ...restTitleProps, focused: focused, styles: styles }))))),
+        collapsedOptions.length ? (React.createElement("span", { ref: addonRef, role: 'menu', className: styles.pickerWrapper },
+            React.createElement(PickerButtonDesktop, { fieldClassName: styles.title, optionClassName: cn(styles.pickerOption, size && styles[size]), options: collapsedOptions, onChange: handleOptionsChange, rightAddons: collapsedAddonsLength ? (React.createElement(Badge, { view: 'count', content: collapsedAddonsLength })) : null, size: 'l', view: 'ghost', label: '\u0415\u0449\u0451', popoverPosition: 'bottom-end' }))) : null,
+        React.createElement("div", { className: styles.line, ref: lineRef })));
+    return (React.createElement("div", { ref: containerRef, className: cn(styles.container, containerClassName) }, renderContent()));
+};
+
+export { CollapsiblePrimaryTabList };

package/tabs/modern/components/primary-tablist/Component.collapsible.mobile.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { TabListProps } from "../../typings";
+type CollapsiblePrimaryTabListMobileProps = Omit<TabListProps, 'size'>;
+declare const CollapsiblePrimaryTabListMobile: ({ className, ...restProps }: CollapsiblePrimaryTabListMobileProps) => JSX.Element;
+export { CollapsiblePrimaryTabListMobileProps, CollapsiblePrimaryTabListMobile };

package/tabs/modern/components/primary-tablist/Component.collapsible.mobile.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import cn from 'classnames';
+import { CollapsiblePrimaryTabList } from './Component.collapsible.js';
+import { c as commonStyles } from '../../index.module-cd918b29.js';
+import { m as mobileStyles } from '../../mobile.module-823710bb.js';
+import '../../../../badge/modern';
+import '../../../../keyboard-focusable/modern';
+import '../../../../picker-button/modern/desktop';
+import '../../../../mq/modern';
+import '@juggle/resize-observer';
+import '@alfalab/hooks';
+import '../../../../shared/modern';
+import '../title/Component.js';
+import '../../hooks/use-tablist-titles.js';
+import '../../hooks/use-collapsible-elements.js';
+import '../../hooks/use-tabs.js';
+import '../../synthetic-events.js';
+
+const styles = {
+    ...commonStyles,
+    ...mobileStyles,
+};
+const CollapsiblePrimaryTabListMobile = ({ className, ...restProps }) => (React.createElement(CollapsiblePrimaryTabList, { ...restProps, styles: styles, className: cn(className, styles.mobile) }));
+
+export { CollapsiblePrimaryTabListMobile };

package/tabs/modern/components/primary-tablist/Component.collapsible.responsive.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { TabListProps } from "../../typings";
+declare const CollapsiblePrimaryTabListResponsive: ({ size, fullWidthScroll, breakpoint, defaultMatchMediaValue, ...restProps }: TabListProps) => JSX.Element;
+export { CollapsiblePrimaryTabListResponsive };

package/tabs/modern/components/primary-tablist/Component.collapsible.responsive.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { useMatchMedia } from '../../../../mq/modern';
+import { CollapsiblePrimaryTabListDesktop } from './Component.collapsible.desktop.js';
+import { CollapsiblePrimaryTabListMobile } from './Component.collapsible.mobile.js';
+import 'classnames';
+import '../../../../badge/modern';
+import '../../../../keyboard-focusable/modern';
+import '../../../../picker-button/modern/desktop';
+import '@juggle/resize-observer';
+import '@alfalab/hooks';
+import '../../../../shared/modern';
+import '../title/Component.js';
+import '../../index.module-cd918b29.js';
+import '../../mobile.module-823710bb.js';
+import './Component.collapsible.js';
+import '../../hooks/use-tablist-titles.js';
+import '../../hooks/use-collapsible-elements.js';
+import '../../hooks/use-tabs.js';
+import '../../synthetic-events.js';
+
+const CollapsiblePrimaryTabListResponsive = ({ size, fullWidthScroll, breakpoint = 768, defaultMatchMediaValue, ...restProps }) => {
+    const [isDesktop] = useMatchMedia(`(min-width: ${breakpoint}px)`, defaultMatchMediaValue);
+    return isDesktop ? (React.createElement(CollapsiblePrimaryTabListDesktop, { size: size, defaultMatchMediaValue: defaultMatchMediaValue, breakpoint: breakpoint, ...restProps })) : (React.createElement(CollapsiblePrimaryTabListMobile, { fullWidthScroll: fullWidthScroll, defaultMatchMediaValue: defaultMatchMediaValue, breakpoint: breakpoint, ...restProps }));
+};
+
+export { CollapsiblePrimaryTabListResponsive };

package/tabs/modern/components/primary-tablist/Component.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { Styles, TabListProps } from "../../typings";
-declare const PrimaryTabList: ({ size, styles, className, containerClassName, titles, selectedId, scrollable, collapsible, collapsedTabsIds, fullWidthScroll, onChange, dataTestId, breakpoint, }: TabListProps & Styles) => JSX.Element;
+declare const PrimaryTabList: ({ size, styles, className, containerClassName, titles, selectedId, scrollable, fullWidthScroll, onChange, dataTestId, }: TabListProps & Styles) => JSX.Element;
 export { PrimaryTabList };

package/tabs/modern/components/primary-tablist/Component.desktop.js

@@ -1,19 +1,13 @@
 import React from 'react';
 import { PrimaryTabList } from './Component.js';
-import { c as commonStyles } from '../../index.module-58709150.js';
+import { c as commonStyles } from '../../index.module-cd918b29.js';
 import 'classnames';
-import '../../../../badge/modern';
 import '../../../../keyboard-focusable/modern';
-import '../../../../picker-button/modern/desktop';
-import '@alfalab/hooks';
-import '@juggle/resize-observer';
+import '../../../../shared/modern';
 import '../scrollable-container/Component.js';
 import 'compute-scroll-into-view';
 import '../title/Component.js';
-import '../../hooks/use-tablist-titles.js';
-import '../../hooks/use-collapsible-elements.js';
 import '../../hooks/use-tabs.js';
-import '../../synthetic-events.js';
 
 const PrimaryTabListDesktop = ({ size = 'm', ...restProps }) => (React.createElement(PrimaryTabList, { ...restProps, size: size, styles: commonStyles }));
 

package/tabs/modern/components/primary-tablist/Component.js

@@ -1,26 +1,17 @@
-import React, { useRef, useEffect, useMemo } from 'react';
+import React, { useRef, useEffect } from 'react';
 import cn from 'classnames';
-import { Badge } from '../../../../badge/modern';
 import { KeyboardFocusable } from '../../../../keyboard-focusable/modern';
-import { PickerButtonDesktop } from '../../../../picker-button/modern/desktop';
-import { useTablistTitles } from '../../hooks/use-tablist-titles.js';
-import { createSyntheticMouseEvent } from '../../synthetic-events.js';
+import { useTabs } from '../../hooks/use-tabs.js';
 import { ScrollableContainer } from '../scrollable-container/Component.js';
 import { Title } from '../title/Component.js';
-import '@alfalab/hooks';
-import '@juggle/resize-observer';
+import '../../../../shared/modern';
 import 'compute-scroll-into-view';
-import '../../hooks/use-collapsible-elements.js';
-import '../../hooks/use-tabs.js';
 
-const PrimaryTabList = ({ size, styles = {}, className, containerClassName, titles = [], selectedId = titles.length ? titles[0].id : undefined, scrollable = true, collapsible, collapsedTabsIds, fullWidthScroll, onChange, dataTestId, breakpoint = 1024, }) => {
+const PrimaryTabList = ({ size, styles = {}, className, containerClassName, titles = [], selectedId = titles.length ? titles[0].id : undefined, scrollable = true, fullWidthScroll, onChange, dataTestId, }) => {
     const lineRef = useRef(null);
-    const { containerRef, addonRef, tablistTitles, selectedTab, focusedTab, getTabListItemProps } = useTablistTitles({
+    const { selectedTab, focusedTab, getTabListItemProps } = useTabs({
         titles,
         selectedId,
-        collapsible,
-        collapsedTabsIds,
-        breakpoint,
         onChange,
     });
     useEffect(() => {
@@ -28,33 +19,13 @@ const PrimaryTabList = ({ size, styles = {}, className, containerClassName, titl
             lineRef.current.style.width = `${selectedTab.offsetWidth}px`;
             lineRef.current.style.transform = `translateX(${selectedTab.offsetLeft}px)`;
         }
-    }, [selectedTab, tablistTitles]);
-    const collapsedOptions = useMemo(() => tablistTitles.reduce((options, title) => {
-        if (title.collapsed) {
-            options.push({
-                key: title.title,
-                value: title.id,
-                content: React.createElement(Title, { ...title, styles: styles, isOption: true }),
-            });
-        }
-        return options;
-    }, []), [tablistTitles, styles]);
-    const collapsedAddonsLength = tablistTitles.filter((title) => title.collapsed && title.rightAddons).length;
-    const handleOptionsChange = (payload) => {
-        if (payload.selected?.value && onChange) {
-            const nativeMouseEvent = new MouseEvent('change');
-            const syntheticMouseEvent = createSyntheticMouseEvent(nativeMouseEvent);
-            onChange(syntheticMouseEvent, { selectedId: payload.selected.value });
-        }
-    };
+    }, [selectedTab]);
     const renderContent = () => (React.createElement("div", { role: 'tablist', "data-test-id": dataTestId, className: cn(styles.component, className, size && styles[size], {
             [styles.fullWidthScroll]: fullWidthScroll,
         }) },
-        tablistTitles.map(({ dataTestId: _, ...restTitleProps }, index) => (React.createElement(KeyboardFocusable, { key: restTitleProps.id }, (ref, focused) => (React.createElement(Title, { ...getTabListItemProps(index, ref), ...restTitleProps, focused: focused, styles: styles }))))),
-        collapsedOptions.length ? (React.createElement("span", { ref: addonRef, role: 'menu', className: styles.pickerWrapper },
-            React.createElement(PickerButtonDesktop, { fieldClassName: styles.title, optionClassName: cn(styles.pickerOption, size && styles[size]), options: collapsedOptions, onChange: handleOptionsChange, rightAddons: collapsedAddonsLength ? (React.createElement(Badge, { view: 'count', content: collapsedAddonsLength })) : null, size: 'l', view: 'ghost', label: '\u0415\u0449\u0451', popoverPosition: 'bottom-end' }))) : null,
+        titles.map(({ dataTestId: _, ...restTitleProps }, index) => (React.createElement(KeyboardFocusable, { key: restTitleProps.id }, (ref, focused) => (React.createElement(Title, { ...getTabListItemProps(index, ref), ...restTitleProps, focused: focused, styles: styles }))))),
         React.createElement("div", { className: styles.line, ref: lineRef })));
-    return scrollable && !collapsible ? (React.createElement(ScrollableContainer, { activeChild: focusedTab || selectedTab, containerClassName: containerClassName, fullWidthScroll: fullWidthScroll }, renderContent())) : (React.createElement("div", { ref: containerRef, className: cn(styles.container, containerClassName) }, renderContent()));
+    return scrollable ? (React.createElement(ScrollableContainer, { activeChild: focusedTab || selectedTab, containerClassName: containerClassName, fullWidthScroll: fullWidthScroll }, renderContent())) : (React.createElement("div", { className: cn(styles.container, containerClassName) }, renderContent()));
 };
 
 export { PrimaryTabList };

package/tabs/modern/components/primary-tablist/Component.mobile.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { TabListProps } from "../../typings";
-type PrimaryTabListMobileProps = Omit<TabListProps, 'size'>;
+type PrimaryTabListMobileProps = Omit<TabListProps, 'size' | 'collapsedTabsIds'>;
 declare const PrimaryTabListMobile: ({ className, ...restProps }: PrimaryTabListMobileProps) => JSX.Element;
 export { PrimaryTabListMobileProps, PrimaryTabListMobile };

package/tabs/modern/components/primary-tablist/Component.mobile.js

@@ -1,22 +1,14 @@
 import React from 'react';
 import cn from 'classnames';
 import { PrimaryTabList } from './Component.js';
-import { c as commonStyles } from '../../index.module-58709150.js';
-import '../../../../badge/modern';
+import { c as commonStyles } from '../../index.module-cd918b29.js';
+import { m as mobileStyles } from '../../mobile.module-823710bb.js';
 import '../../../../keyboard-focusable/modern';
-import '../../../../picker-button/modern/desktop';
-import '@alfalab/hooks';
-import '@juggle/resize-observer';
+import '../../../../shared/modern';
 import '../scrollable-container/Component.js';
 import 'compute-scroll-into-view';
 import '../title/Component.js';
-import '../../hooks/use-tablist-titles.js';
-import '../../hooks/use-collapsible-elements.js';
 import '../../hooks/use-tabs.js';
-import '../../synthetic-events.js';
-
-const mobileStyles = {"title":"tabs__title_1t2w8 tabs__title_no3qa","mobile":"tabs__mobile_1t2w8"};
-require('./mobile.css');
 
 const styles = {
     ...commonStyles,

package/tabs/modern/components/primary-tablist/Component.responsive.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { TabListProps } from "../../typings";
-declare const PrimaryTabListResponsive: ({ size, defaultMatch, collapsible, collapsedTabsIds, fullWidthScroll, ...restProps }: TabListProps) => JSX.Element;
+declare const PrimaryTabListResponsive: ({ size, breakpoint, fullWidthScroll, defaultMatchMediaValue, ...restProps }: TabListProps) => JSX.Element;
 export { PrimaryTabListResponsive };

package/tabs/modern/components/primary-tablist/Component.responsive.js

@@ -1,28 +1,21 @@
 import React from 'react';
-import { useMedia } from '@alfalab/hooks';
+import { useMatchMedia } from '../../../../mq/modern';
 import { PrimaryTabListDesktop } from './Component.desktop.js';
 import { PrimaryTabListMobile } from './Component.mobile.js';
 import 'classnames';
-import '../../../../badge/modern';
 import '../../../../keyboard-focusable/modern';
-import '../../../../picker-button/modern/desktop';
-import '@juggle/resize-observer';
+import '../../../../shared/modern';
 import '../scrollable-container/Component.js';
 import '../title/Component.js';
 import 'compute-scroll-into-view';
-import '../../index.module-58709150.js';
+import '../../index.module-cd918b29.js';
+import '../../mobile.module-823710bb.js';
 import './Component.js';
-import '../../hooks/use-tablist-titles.js';
-import '../../hooks/use-collapsible-elements.js';
 import '../../hooks/use-tabs.js';
-import '../../synthetic-events.js';
 
-const PrimaryTabListResponsive = ({ size, defaultMatch = 'desktop', collapsible, collapsedTabsIds, fullWidthScroll, ...restProps }) => {
-    const [view] = useMedia([
-        ['mobile', '(max-width: 767px)'],
-        ['desktop', '(min-width: 768px)'],
-    ], defaultMatch);
-    return view === 'desktop' ? (React.createElement(PrimaryTabListDesktop, { collapsible: collapsible, collapsedTabsIds: collapsedTabsIds, size: size, ...restProps })) : (React.createElement(PrimaryTabListMobile, { fullWidthScroll: fullWidthScroll, ...restProps }));
+const PrimaryTabListResponsive = ({ size, breakpoint = 768, fullWidthScroll, defaultMatchMediaValue, ...restProps }) => {
+    const [isDesktop] = useMatchMedia(`(min-width: ${breakpoint}px)`, defaultMatchMediaValue);
+    return isDesktop ? (React.createElement(PrimaryTabListDesktop, { breakpoint: breakpoint, size: size, defaultMatchMediaValue: defaultMatchMediaValue, ...restProps })) : (React.createElement(PrimaryTabListMobile, { breakpoint: breakpoint, defaultMatchMediaValue: defaultMatchMediaValue, fullWidthScroll: fullWidthScroll, ...restProps }));
 };
 
 export { PrimaryTabListResponsive };

package/tabs/modern/components/secondary-tablist/Component.desktop.js

@@ -1,8 +1,9 @@
 import React from 'react';
 import { SecondaryTabList } from './Component.js';
-import { c as commonStyles } from '../../index.module-50ec9b7a.js';
+import { c as commonStyles } from '../../index.module-71e56d00.js';
 import 'classnames';
 import '../../../../tag/modern';
+import '../../../../shared/modern';
 import '../scrollable-container/Component.js';
 import 'compute-scroll-into-view';
 import '../../hooks/use-tabs.js';

package/tabs/modern/components/secondary-tablist/Component.js

@@ -3,6 +3,7 @@ import cn from 'classnames';
 import { Tag } from '../../../../tag/modern';
 import { useTabs } from '../../hooks/use-tabs.js';
 import { ScrollableContainer } from '../scrollable-container/Component.js';
+import '../../../../shared/modern';
 import 'compute-scroll-into-view';
 
 const SecondaryTabList = ({ styles = {}, className, containerClassName, size, titles = [], selectedId = titles.length ? titles[0].id : undefined, scrollable = true, fullWidthScroll, tagSize = 'xs', onChange, dataTestId, }) => {

package/tabs/modern/components/secondary-tablist/Component.mobile.js

@@ -1,8 +1,9 @@
 import React from 'react';
 import cn from 'classnames';
 import { SecondaryTabList } from './Component.js';
-import { c as commonStyles } from '../../index.module-50ec9b7a.js';
+import { c as commonStyles } from '../../index.module-71e56d00.js';
 import '../../../../tag/modern';
+import '../../../../shared/modern';
 import '../scrollable-container/Component.js';
 import 'compute-scroll-into-view';
 import '../../hooks/use-tabs.js';

package/tabs/modern/components/secondary-tablist/Component.responsive.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { SecondaryTabListProps } from "../../typings";
-declare const SecondaryTabListResponsive: ({ size, defaultMatch, fullWidthScroll, ...restProps }: SecondaryTabListProps) => JSX.Element;
+declare const SecondaryTabListResponsive: ({ size, defaultMatchMediaValue, fullWidthScroll, breakpoint, ...restProps }: SecondaryTabListProps) => JSX.Element;
 export { SecondaryTabListResponsive };

package/tabs/modern/components/secondary-tablist/Component.responsive.js

@@ -1,21 +1,19 @@
 import React from 'react';
-import { useMedia } from '@alfalab/hooks';
+import { useMatchMedia } from '../../../../mq/modern';
 import { SecondaryTabListDesktop } from './Component.desktop.js';
 import { SecondaryTabListMobile } from './Component.mobile.js';
 import 'classnames';
 import '../../../../tag/modern';
+import '../../../../shared/modern';
 import '../scrollable-container/Component.js';
 import 'compute-scroll-into-view';
-import '../../index.module-50ec9b7a.js';
+import '../../index.module-71e56d00.js';
 import './Component.js';
 import '../../hooks/use-tabs.js';
 
-const SecondaryTabListResponsive = ({ size, defaultMatch = 'desktop', fullWidthScroll, ...restProps }) => {
-    const [view] = useMedia([
-        ['mobile', '(max-width: 767px)'],
-        ['desktop', '(min-width: 768px)'],
-    ], defaultMatch);
-    return view === 'desktop' ? (React.createElement(SecondaryTabListDesktop, { size: size, ...restProps })) : (React.createElement(SecondaryTabListMobile, { fullWidthScroll: fullWidthScroll, ...restProps }));
+const SecondaryTabListResponsive = ({ size, defaultMatchMediaValue, fullWidthScroll, breakpoint = 768, ...restProps }) => {
+    const [isDesktop] = useMatchMedia(`(min-width: ${breakpoint}px)`, defaultMatchMediaValue);
+    return isDesktop ? (React.createElement(SecondaryTabListDesktop, { size: size, breakpoint: breakpoint, ...restProps })) : (React.createElement(SecondaryTabListMobile, { fullWidthScroll: fullWidthScroll, breakpoint: breakpoint, ...restProps }));
 };
 
 export { SecondaryTabListResponsive };

package/tabs/modern/components/tabs/Component.collabsible.desktop.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { TabsProps } from "../../typings";
+type TabsCollapsibleDesktopProps = Omit<TabsProps, 'TabList' | 'fullWidthScroll' | 'scrollable' | 'view'>;
+declare const TabsCollapsibleDesktop: ({ ...restProps }: TabsCollapsibleDesktopProps) => JSX.Element;
+export { TabsCollapsibleDesktopProps, TabsCollapsibleDesktop };

package/tabs/modern/components/tabs/Component.collabsible.desktop.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { CollapsiblePrimaryTabListDesktop } from '../primary-tablist/Component.collapsible.desktop.js';
+import { Tabs } from './Component.js';
+import 'classnames';
+import '../../../../badge/modern';
+import '../../../../keyboard-focusable/modern';
+import '../../../../picker-button/modern/desktop';
+import '../../../../mq/modern';
+import '@juggle/resize-observer';
+import '@alfalab/hooks';
+import '../../../../shared/modern';
+import '../title/Component.js';
+import '../../index.module-cd918b29.js';
+import '../primary-tablist/Component.collapsible.js';
+import '../../hooks/use-tablist-titles.js';
+import '../../hooks/use-collapsible-elements.js';
+import '../../hooks/use-tabs.js';
+import '../../synthetic-events.js';
+
+const TabsCollapsibleDesktop = ({ ...restProps }) => (React.createElement(Tabs, { TabList: CollapsiblePrimaryTabListDesktop, ...restProps }));
+
+export { TabsCollapsibleDesktop };

package/tabs/modern/components/tabs/Component.collapsible.mobile.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { TabsProps } from "../../typings";
+type TabsCollapsibleMobileProps = Omit<TabsProps, 'TabList' | 'scrollable' | 'view' | 'size'>;
+declare const TabsCollapsibleMobile: ({ ...restProps }: TabsCollapsibleMobileProps) => JSX.Element;
+export { TabsCollapsibleMobileProps, TabsCollapsibleMobile };