@moysklad/uikit 28.1.0

package/dist/components/BottomSheet/BottomSheet.js

@@ -0,0 +1,267 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useEffect, useId, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { useLatestValue } from "@dnd-kit/utilities";
+import { AnimatePresence, motion, useDragControls } from "framer-motion";
+import lodash_debounce from "lodash.debounce";
+import { cn } from "../../common/index.js";
+import { useSheetContext } from "./BottomSheetContextProvider.js";
+import { Text } from "../Text/Text.js";
+import { useMediaQuery } from "../../hooks/index.js";
+import { RemoveCloseIcon16Icon, Support20Icon } from "../../icon/index.js";
+import { TRANSITION } from "./BottomSheet.constants.js";
+import { BottomSheetBody } from "./BottomSheetBody.js";
+import BottomSheet_module from "./BottomSheet.module.js";
+const CLOSE_DRAG_DISTANCE = 100;
+const CLOSE_DRAG_PERCENTAGE_DISTANCE = 50;
+const CLOSE_VELOCITY = 500;
+const VIEW_DIFF_FOR_ASSERT_KEYBOARD_IS_OPENED = 100;
+const SHEET_INITIAL = {
+    y: '100%'
+};
+const SHEET_ANIMATE = {
+    y: 0
+};
+const SHEET_DRAG_CONSTRAINTS = {
+    top: 0,
+    bottom: 0
+};
+const SHEET_DRAG_ELASTIC = {
+    bottom: 1
+};
+const SIDE_INDENT = 16;
+const SCROLL_TO_ACTIVE_DEBOUNCE = 100;
+const IS_IOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
+const getVisualHeight = ()=>Math.round(window.visualViewport?.height ?? document.documentElement.clientHeight);
+const BottomSheet = /*#__PURE__*/ memo(({ testId = 'bottomSheet', isOpen, onClose, onCloseAnimationComplete, title, description, contentSlot, actionsSlot, closable = true, supportSheetText, maxWidthContainer })=>{
+    const controls = useDragControls();
+    const sheetRef = useRef(null);
+    const closeButtonRef = useRef(null);
+    const id = useId();
+    const { sheets, addSheet, deleteSheetById, root } = useSheetContext();
+    const latestOnClose = useLatestValue(onClose);
+    const latestIsOpen = useLatestValue(isOpen);
+    const [supportSheetIsOpen, setSupportSheetIsOpen] = useState(false);
+    const [keyboardIsOpened, setKeyboardIsOpened] = useState(false);
+    const baseHeightRef = useRef(getVisualHeight());
+    const isExceedsContainer = useMediaQuery(`(min-width:${(maxWidthContainer ?? 1 / 0) + 6 * SIDE_INDENT}px)`);
+    const sheetZIndex = sheets.findIndex((sheet)=>sheet.id === id) + 1;
+    const handleClose = useCallback(()=>{
+        latestOnClose.current?.();
+    }, [
+        latestOnClose
+    ]);
+    const onAnimationComplete = useCallback(()=>{
+        if (!latestIsOpen.current) {
+            deleteSheetById(id);
+            onCloseAnimationComplete?.();
+        }
+    }, [
+        deleteSheetById,
+        id,
+        latestIsOpen,
+        onCloseAnimationComplete
+    ]);
+    const sheetRefCb = useCallback((node)=>{
+        sheetRef.current = node;
+        if (!node) return;
+        sheetRef.current?.style.setProperty('--max-width-container', void 0 === maxWidthContainer ? 'unset' : `${maxWidthContainer}px`);
+    }, [
+        maxWidthContainer
+    ]);
+    const handleHeaderPointerDown = useCallback((e)=>{
+        const sel = window.getSelection();
+        if (sel?.type === 'Range') sel.removeAllRanges();
+        if (closable) controls.start(e);
+    }, [
+        closable,
+        controls
+    ]);
+    const onDragEnd = useCallback((e, info)=>{
+        const sheetHeight = sheetRef.current?.clientHeight ?? 0;
+        const percentageDraggedDown = info.offset.y / sheetHeight * 100;
+        if (info.offset.y > CLOSE_DRAG_DISTANCE || percentageDraggedDown > CLOSE_DRAG_PERCENTAGE_DISTANCE || info.velocity.y > CLOSE_VELOCITY) handleClose();
+    }, [
+        handleClose
+    ]);
+    const onCloseSupportSheet = useCallback(()=>{
+        setSupportSheetIsOpen(false);
+    }, []);
+    const openSupportSheet = useCallback(()=>{
+        setSupportSheetIsOpen(true);
+    }, []);
+    useEffect(()=>{
+        if (!isOpen) return;
+        const prevOverflow = document.body.style.overflow;
+        document.body.style.overflow = 'hidden';
+        return ()=>{
+            document.body.style.overflow = prevOverflow;
+        };
+    }, [
+        isOpen
+    ]);
+    useEffect(()=>{
+        if (isOpen) addSheet({
+            closeOnOverlayClick: closable,
+            id,
+            handleClose
+        });
+    }, [
+        addSheet,
+        closable,
+        handleClose,
+        id,
+        isOpen
+    ]);
+    useEffect(()=>{
+        if (!isOpen) return;
+        const vv = window.visualViewport;
+        const editableInFocus = ()=>{
+            const element = document.activeElement;
+            if (!element || !sheetRef.current) return false;
+            if (!sheetRef.current.contains(element)) return false;
+            return [
+                'INPUT',
+                'TEXTAREA'
+            ].includes(element.tagName);
+        };
+        const scrollIntoActive = lodash_debounce(()=>{
+            if (!editableInFocus()) return;
+            document.activeElement?.scrollIntoView({
+                block: 'nearest',
+                behavior: 'smooth'
+            });
+        }, SCROLL_TO_ACTIVE_DEBOUNCE);
+        const updateKbInset = ()=>{
+            const layoutHeight = document.documentElement.clientHeight;
+            if (layoutHeight > baseHeightRef.current) baseHeightRef.current = layoutHeight;
+            const keyboardHeight = Math.max(0, baseHeightRef.current - getVisualHeight());
+            const opened = editableInFocus() && keyboardHeight > VIEW_DIFF_FOR_ASSERT_KEYBOARD_IS_OPENED;
+            setKeyboardIsOpened(opened);
+        };
+        vv?.addEventListener('resize', updateKbInset);
+        vv?.addEventListener('scroll', updateKbInset);
+        if (!IS_IOS) {
+            window.addEventListener('resize', updateKbInset);
+            window.addEventListener('focusin', scrollIntoActive);
+        }
+        return ()=>{
+            vv?.removeEventListener('resize', updateKbInset);
+            vv?.removeEventListener('scroll', updateKbInset);
+            if (!IS_IOS) {
+                window.removeEventListener('resize', updateKbInset);
+                window.removeEventListener('focusin', scrollIntoActive);
+            }
+            setKeyboardIsOpened(false);
+            scrollIntoActive.cancel();
+        };
+    }, [
+        isOpen
+    ]);
+    useEffect(()=>{
+        if (isOpen) {
+            const order = sheets.findIndex((s)=>s.id === id);
+            if (-1 !== order) sheetRef.current?.style.setProperty('--order', order.toString());
+        }
+    }, [
+        id,
+        isOpen,
+        sheets
+    ]);
+    useEffect(()=>()=>{
+            deleteSheetById(id);
+        }, [
+        deleteSheetById,
+        id
+    ]);
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            root && /*#__PURE__*/ createPortal(/*#__PURE__*/ jsx(AnimatePresence, {
+                children: !!sheets.length && isOpen && /*#__PURE__*/ jsx(Fragment, {
+                    children: /*#__PURE__*/ jsxs(motion.div, {
+                        "data-test-id": `${testId}-sheet`,
+                        ref: sheetRefCb,
+                        role: "dialog",
+                        "aria-modal": "true",
+                        className: BottomSheet_module.sheet,
+                        initial: SHEET_INITIAL,
+                        animate: SHEET_ANIMATE,
+                        exit: SHEET_INITIAL,
+                        transition: TRANSITION,
+                        drag: "y",
+                        dragControls: controls,
+                        dragListener: false,
+                        dragConstraints: SHEET_DRAG_CONSTRAINTS,
+                        dragElastic: SHEET_DRAG_ELASTIC,
+                        dragMomentum: false,
+                        onDragEnd: onDragEnd,
+                        onAnimationComplete: onAnimationComplete,
+                        style: {
+                            zIndex: sheetZIndex
+                        },
+                        children: [
+                            /*#__PURE__*/ jsxs("div", {
+                                "data-test-id": `${testId}-sheetHeader`,
+                                className: cn(BottomSheet_module.header, closable && BottomSheet_module.closableSheetHeader),
+                                onPointerDown: handleHeaderPointerDown,
+                                children: [
+                                    sheets[sheets.length - 1].id === id && closable && /*#__PURE__*/ jsx("div", {
+                                        "data-test-id": `${testId}-grabber`,
+                                        className: BottomSheet_module.grabber
+                                    }),
+                                    /*#__PURE__*/ jsx("div", {
+                                        className: BottomSheet_module.container,
+                                        children: /*#__PURE__*/ jsxs("div", {
+                                            className: BottomSheet_module.headerRow,
+                                            children: [
+                                                /*#__PURE__*/ jsx(Text.H3, {
+                                                    testId: `${testId}-title`,
+                                                    className: BottomSheet_module.title,
+                                                    children: title
+                                                }),
+                                                supportSheetText && /*#__PURE__*/ jsx("div", {
+                                                    className: BottomSheet_module.supportButtonWrapper,
+                                                    children: /*#__PURE__*/ jsx("button", {
+                                                        "data-test-id": `${testId}-supportButton`,
+                                                        type: "button",
+                                                        className: BottomSheet_module.headerButton,
+                                                        onClick: openSupportSheet,
+                                                        children: /*#__PURE__*/ jsx(Support20Icon, {})
+                                                    })
+                                                }),
+                                                closable && /*#__PURE__*/ jsx("button", {
+                                                    "data-test-id": `${testId}-closeButton`,
+                                                    type: "button",
+                                                    className: cn(BottomSheet_module.headerButton, BottomSheet_module.closeButton, isExceedsContainer && BottomSheet_module.absoluteCloseButton),
+                                                    onClick: handleClose,
+                                                    ref: closeButtonRef,
+                                                    children: /*#__PURE__*/ jsx(RemoveCloseIcon16Icon, {})
+                                                })
+                                            ]
+                                        })
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ jsx(BottomSheetBody, {
+                                testId: testId,
+                                keyboardIsOpened: keyboardIsOpened,
+                                actionsSlot: actionsSlot,
+                                contentSlot: contentSlot,
+                                description: description
+                            })
+                        ]
+                    })
+                })
+            }), root),
+            supportSheetText && /*#__PURE__*/ jsx(BottomSheet, {
+                testId: "supportSheet",
+                isOpen: supportSheetIsOpen,
+                onClose: onCloseSupportSheet,
+                description: supportSheetText,
+                maxWidthContainer: maxWidthContainer
+            })
+        ]
+    });
+});
+BottomSheet.displayName = 'BottomSheet';
+export { BottomSheet };

package/dist/components/BottomSheet/BottomSheet.module.js

@@ -0,0 +1,23 @@
+import "./BottomSheet_module.css";
+const BottomSheet_module = {
+    portalRoot: "portalRoot-smAPot",
+    overlay: "overlay-GlfI0f",
+    sheet: "sheet-zpzkmX",
+    actions: "actions-CUSCBZ",
+    body: "body-vI1ZOe",
+    header: "header-FEkyeJ",
+    closableSheetHeader: "closableSheetHeader-wmdB9J",
+    grabber: "grabber-ZhoI8w",
+    headerRow: "headerRow-ydmVUc",
+    title: "title-yZ7916",
+    headerButton: "headerButton-Ult55e",
+    supportButtonWrapper: "supportButtonWrapper-f39lXT",
+    closeButton: "closeButton-RWUMeD",
+    absoluteCloseButton: "absoluteCloseButton-CUIm1t",
+    content: "content-LMiLH9",
+    description: "description-K9AHhX",
+    container: "container-Ji6dJv",
+    actionsWithOpenedKeyboard: "actionsWithOpenedKeyboard-DGRCfD",
+    filler: "filler-pD7Afi"
+};
+export default BottomSheet_module;

package/dist/components/BottomSheet/BottomSheetAction.d.ts

@@ -0,0 +1,4 @@
+import { type FC } from 'react';
+import { type IButtonProps } from '../Button/Button';
+export type BottomSheetActionProps = Omit<IButtonProps, 'stretch' | 'size'>;
+export declare const BottomSheetAction: FC<BottomSheetActionProps>;

package/dist/components/BottomSheet/BottomSheetAction.js

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+import { Button, ButtonSize } from "../Button/Button.js";
+const BottomSheetAction = ({ testId, ...props })=>/*#__PURE__*/ jsx(Button, {
+        testId: `${testId}-bottomSheetAction`,
+        ...props,
+        stretch: true,
+        size: ButtonSize.XL
+    });
+BottomSheetAction.displayName = 'BottomSheetAction';
+export { BottomSheetAction };

package/dist/components/BottomSheet/BottomSheetBody.d.ts

@@ -0,0 +1,9 @@
+import React, { type FC } from 'react';
+import { type IHasTestId } from '../../common/types';
+export interface BottomSheetBodyProps extends IHasTestId {
+    description?: string;
+    contentSlot?: React.ReactElement;
+    actionsSlot?: React.ReactElement;
+    keyboardIsOpened: boolean;
+}
+export declare const BottomSheetBody: FC<BottomSheetBodyProps>;

package/dist/components/BottomSheet/BottomSheetBody.js

@@ -0,0 +1,34 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo } from "react";
+import { cn } from "../../common/index.js";
+import { Text } from "../Text/Text.js";
+import BottomSheet_module from "./BottomSheet.module.js";
+const BottomSheetBody = /*#__PURE__*/ memo(({ testId, description, contentSlot, actionsSlot, keyboardIsOpened })=>{
+    if (!contentSlot && !description && !actionsSlot) return null;
+    return /*#__PURE__*/ jsx("div", {
+        "data-test-id": `${testId}-body`,
+        className: BottomSheet_module.body,
+        children: /*#__PURE__*/ jsxs("div", {
+            className: BottomSheet_module.container,
+            children: [
+                description && /*#__PURE__*/ jsx(Text.BodyL, {
+                    testId: `${testId}-description`,
+                    className: BottomSheet_module.description,
+                    children: description
+                }),
+                contentSlot && /*#__PURE__*/ jsx("div", {
+                    "data-test-id": `${testId}-content`,
+                    className: BottomSheet_module.content,
+                    children: contentSlot
+                }),
+                actionsSlot && /*#__PURE__*/ jsx("div", {
+                    "data-test-id": `${testId}-actions`,
+                    className: cn(BottomSheet_module.actions, keyboardIsOpened && BottomSheet_module.actionsWithOpenedKeyboard),
+                    children: actionsSlot
+                })
+            ]
+        })
+    });
+});
+BottomSheetBody.displayName = 'BottomSheetBody';
+export { BottomSheetBody };

package/dist/components/BottomSheet/BottomSheetContextProvider.d.ts

@@ -0,0 +1,20 @@
+import React, { type PropsWithChildren } from 'react';
+import type { IHasTestId } from '../../common';
+interface Sheet {
+    id: string;
+    handleClose: () => void;
+    closeOnOverlayClick: boolean;
+}
+interface BottomSheetContextProps {
+    sheets: Sheet[];
+    addSheet: (sheet: Sheet) => void;
+    deleteSheetById: (id: string) => void;
+    root: HTMLDivElement | null;
+}
+export declare const BottomSheetContext: React.Context<BottomSheetContextProps>;
+export declare const useSheetContext: () => BottomSheetContextProps;
+export type BottomSheetContextProviderProps = PropsWithChildren<{
+    zIndex?: number;
+} & IHasTestId>;
+export declare const BottomSheetContextProvider: React.MemoExoticComponent<({ children, zIndex, testId, }: BottomSheetContextProviderProps) => import("react/jsx-runtime").JSX.Element>;
+export {};

package/dist/components/BottomSheet/BottomSheetContextProvider.js

@@ -0,0 +1,89 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createContext, memo, useCallback, useContext, useMemo, useState } from "react";
+import { createPortal } from "react-dom";
+import { AnimatePresence, motion } from "framer-motion";
+import { TRANSITION } from "./BottomSheet.constants.js";
+import BottomSheet_module from "./BottomSheet.module.js";
+const BottomSheetContext = /*#__PURE__*/ createContext({
+    sheets: [],
+    addSheet: ()=>null,
+    deleteSheetById: ()=>null,
+    root: null
+});
+const useSheetContext = ()=>{
+    const context = useContext(BottomSheetContext);
+    if (!context) throw new Error('BottomSheet component must be wrapped by ContextProvider');
+    return context;
+};
+const BottomSheetContextProvider = /*#__PURE__*/ memo(({ children, zIndex = 1, testId = 'bottomSheet' })=>{
+    const [sheets, setSheets] = useState([]);
+    const [root, setRoot] = useState(null);
+    const addSheet = useCallback((sheet)=>{
+        setSheets((prev)=>{
+            if (!prev.find((s)=>s.id === sheet.id)) return prev.concat(sheet);
+            return prev;
+        });
+    }, []);
+    const deleteSheetById = useCallback((id)=>{
+        setSheets((prev)=>prev.filter((sheet)=>sheet.id !== id));
+    }, []);
+    const value = useMemo(()=>({
+            sheets,
+            addSheet,
+            deleteSheetById,
+            root
+        }), [
+        addSheet,
+        deleteSheetById,
+        root,
+        sheets
+    ]);
+    const lastSheet = useMemo(()=>{
+        if (!sheets.length) return null;
+        return sheets[sheets.length - 1];
+    }, [
+        sheets
+    ]);
+    const portalRootRefCb = useCallback((node)=>{
+        setRoot(node);
+    }, []);
+    return /*#__PURE__*/ jsxs(BottomSheetContext.Provider, {
+        value: value,
+        children: [
+            children,
+            /*#__PURE__*/ createPortal(/*#__PURE__*/ jsx(AnimatePresence, {
+                children: !!sheets.length && /*#__PURE__*/ jsx(Fragment, {
+                    children: /*#__PURE__*/ jsx("div", {
+                        "data-test-id": `${testId}-root`,
+                        className: BottomSheet_module.portalRoot,
+                        "aria-hidden": false,
+                        style: {
+                            zIndex
+                        },
+                        ref: portalRootRefCb,
+                        children: /*#__PURE__*/ jsx(motion.div, {
+                            "data-test-id": `${testId}-overlay`,
+                            className: BottomSheet_module.overlay,
+                            style: {
+                                zIndex: sheets.length
+                            },
+                            initial: {
+                                opacity: 0
+                            },
+                            animate: {
+                                opacity: 1
+                            },
+                            exit: {
+                                opacity: 0
+                            },
+                            transition: TRANSITION,
+                            onClick: lastSheet?.closeOnOverlayClick ? lastSheet.handleClose : void 0
+                        })
+                    })
+                })
+            }), document.body)
+        ]
+    });
+});
+BottomSheetContextProvider.displayName = 'BottomSheetContextProvider';
+export { BottomSheetContext, BottomSheetContextProvider, useSheetContext };

package/dist/components/BottomSheet/BottomSheet_module.css

@@ -0,0 +1,143 @@
+.portalRoot-smAPot {
+  -webkit-tap-highlight-color: #0000;
+  overflow-wrap: break-word;
+  position: fixed;
+  inset: 0;
+}
+
+.overlay-GlfI0f {
+  background: var(--bgd-overlay, #01040b5c);
+  position: absolute;
+  inset: 0;
+}
+
+.sheet-zpzkmX {
+  --order: 0;
+  --top-offset: max(8dvh, 16px);
+  background: var(--bgd-white, #fff);
+  width: 100%;
+  max-height: calc(100dvh - var(--top-offset) - 16px*var(--order));
+  border-top-left-radius: 12px;
+  border-top-right-radius: 12px;
+  outline: none;
+  flex-direction: column;
+  display: flex;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  overflow: hidden;
+  box-shadow: 0 0 2px #0917391f, 0 0 96px #09173929;
+}
+
+.sheet-zpzkmX:not(:has(.actions-CUSCBZ)) .body-vI1ZOe {
+  padding-bottom: 24px;
+}
+
+.header-FEkyeJ {
+  touch-action: none;
+  padding: 28px 16px 16px;
+  position: relative;
+}
+
+.closableSheetHeader-wmdB9J {
+  cursor: grab;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.grabber-ZhoI8w {
+  background: var(--light, #dde1e6);
+  border-radius: 12px;
+  width: 42px;
+  height: 4px;
+  position: absolute;
+  top: 12px;
+  left: 50%;
+  translate: -50%;
+}
+
+.headerRow-ydmVUc {
+  justify-content: space-between;
+  align-items: flex-start;
+  min-height: 24px;
+  display: flex;
+}
+
+.title-yZ7916 {
+  min-width: 0;
+}
+
+.headerButton-Ult55e {
+  cursor: pointer;
+  height: 24px;
+  color: var(--elements-normal, #5f6d79);
+  background: none;
+  border: none;
+  align-items: center;
+  padding: 0;
+  display: flex;
+}
+
+.headerButton-Ult55e:active {
+  color: var(--elements-hover, #091739);
+}
+
+.supportButtonWrapper-f39lXT {
+  flex: 1;
+  padding-left: 12px;
+}
+
+.closeButton-RWUMeD {
+  margin-left: 16px;
+}
+
+.absoluteCloseButton-CUIm1t {
+  margin-left: 0;
+  position: absolute;
+  top: 28px;
+  right: 16px;
+}
+
+.body-vI1ZOe {
+  flex: 1;
+  padding: 0 16px;
+  scroll-padding: 10px;
+  overflow: auto;
+}
+
+.body-vI1ZOe:not(:has(.content-LMiLH9)) .description-K9AHhX {
+  padding-bottom: 0;
+}
+
+.description-K9AHhX {
+  padding-bottom: 16px;
+}
+
+.container-Ji6dJv {
+  width: 100%;
+  max-width: var(--max-width-container);
+  margin: 0 auto;
+}
+
+.actions-CUSCBZ {
+  background-color: var(--bgd-white, #fff);
+  gap: 12px;
+  padding: 24px 0;
+  display: flex;
+  position: sticky;
+  bottom: 0;
+}
+
+.actionsWithOpenedKeyboard-DGRCfD {
+  position: static;
+}
+
+.filler-pD7Afi {
+  background: var(--bgd-white, #fff);
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+

package/dist/components/Breadcrumbs/BreadcrumbItem.d.ts

@@ -0,0 +1,5 @@
+import { type HTMLAttributes } from 'react';
+import { type TextAtomProps } from '../Text/Text.atom';
+type BreadcrumbItemProps = Omit<TextAtomProps, 'variant'> & HTMLAttributes<HTMLSpanElement>;
+export declare const BreadcrumbItem: import("react").MemoExoticComponent<({ className, onClick, ...otherProps }: BreadcrumbItemProps) => import("react/jsx-runtime").JSX.Element>;
+export {};

package/dist/components/Breadcrumbs/BreadcrumbItem.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { cn } from "../../common/css/cn.js";
+import { TextVariant } from "../Text/Text.js";
+import { TextAtom } from "../Text/Text.atom.js";
+import Breadcrumbs_module from "./Breadcrumbs.module.js";
+const BreadcrumbItem = /*#__PURE__*/ memo(({ className, onClick, ...otherProps })=>/*#__PURE__*/ jsx(TextAtom, {
+        variant: TextVariant.caption,
+        className: cn(Breadcrumbs_module.item, className, onClick && Breadcrumbs_module.hasClick),
+        onClick: onClick,
+        ...otherProps
+    }));
+BreadcrumbItem.displayName = 'BreadcrumbItem';
+export { BreadcrumbItem };

package/dist/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,7 @@
+import { type FC, type HTMLAttributes } from 'react';
+import { type IHasTestId } from '../../common/types';
+import { BreadcrumbItem } from './BreadcrumbItem';
+export type IBreadcrumbsProps = HTMLAttributes<HTMLDivElement> & IHasTestId;
+export declare const Breadcrumbs: FC<IBreadcrumbsProps> & {
+    Item: typeof BreadcrumbItem;
+};

package/dist/components/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,29 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Children, isValidElement } from "react";
+import { cn } from "../../common/css/cn.js";
+import { Right12Icon } from "../../icon/index.js";
+import { BreadcrumbItem } from "./BreadcrumbItem.js";
+import Breadcrumbs_module from "./Breadcrumbs.module.js";
+const renderBreadcrumbItems = (children)=>{
+    const childrenArray = Children.toArray(children);
+    const lastIndex = childrenArray.length - 1;
+    return childrenArray.filter(isValidElement).map((child, idx)=>/*#__PURE__*/ jsxs("div", {
+            className: Breadcrumbs_module.itemContainer,
+            children: [
+                child,
+                idx !== lastIndex && /*#__PURE__*/ jsx(Right12Icon, {})
+            ]
+        }, idx));
+};
+const Breadcrumbs = ({ children, className, testId, ...otherProps })=>{
+    const items = renderBreadcrumbItems(children);
+    return /*#__PURE__*/ jsx("div", {
+        className: cn(Breadcrumbs_module.container, className),
+        "data-test-id": testId,
+        ...otherProps,
+        children: items
+    });
+};
+Breadcrumbs.displayName = 'Breadcrumbs';
+Breadcrumbs.Item = BreadcrumbItem;
+export { Breadcrumbs };

package/dist/components/Breadcrumbs/Breadcrumbs.module.js

@@ -0,0 +1,8 @@
+import "./Breadcrumbs_module.css";
+const Breadcrumbs_module = {
+    item: "item-kztGIH",
+    hasClick: "hasClick-ogr6O3",
+    itemContainer: "itemContainer-tyotRe",
+    container: "container-qQGzcq"
+};
+export default Breadcrumbs_module;