@shmidko61/lc-ui-kit 0.17.1 → 0.18.0

package/README.md

@@ -266,3 +266,9 @@ export function Question() {
 ```
 
 Storybook: **UI Kit / Accordion / ContentInner**.
+
+## DropdownMenu
+
+Меню действий с клавиатурой, поиском, portal, автоматическим позиционированием,
+прокруткой, controlled/uncontrolled состоянием и настройкой обёрток через BoxProps.
+Импорт: `@shmidko61/lc-ui-kit/dropdown-menu`. [API и примеры](src/dropdown-menu/README.md).

package/dist/dropdown-menu/dropdown-menu.d.ts

@@ -0,0 +1,4 @@
+import { JSX } from 'react';
+import { DropdownMenuProps } from './types/index';
+/** Меню действий с порталом, автопозиционированием, поиском по тексту и возвратом фокуса. */
+export declare function DropdownMenu(options: DropdownMenuProps): JSX.Element;

package/dist/dropdown-menu/helpers/dropdown-menu.helpers.d.ts

@@ -0,0 +1,4 @@
+/** Находит соседний tab-stop относительно триггера, исключая закрываемую portal-панель.
+ * Положительные tabindex идут первыми, скрытые и disabled-элементы пропускаются.
+ */
+export declare function getDropdownTabTarget(trigger: HTMLButtonElement, panel: HTMLElement | null, backwards: boolean): HTMLElement | undefined;

package/dist/dropdown-menu/helpers/index.d.ts

@@ -0,0 +1 @@
+export { getDropdownTabTarget } from './dropdown-menu.helpers';

package/dist/dropdown-menu/index.d.ts

@@ -0,0 +1,2 @@
+export { DropdownMenu } from './dropdown-menu';
+export type { DropdownMenuBoxProps, DropdownMenuItem, DropdownMenuPlacement, DropdownMenuProps, } from './types/index';

package/dist/dropdown-menu/types/dropdown-menu.types.d.ts

@@ -0,0 +1,66 @@
+import { ReactNode } from 'react';
+import { BoxProps } from '../../box/index';
+/** Настройки обёртки без замены семантического элемента и содержимого. style имеет итоговый приоритет. */
+export type DropdownMenuBoxProps = Omit<BoxProps, 'as' | 'children'>;
+/** Пункт меню действий; id уникален, textValue используется для поиска с клавиатуры. */
+export interface DropdownMenuItem {
+    /** Уникальный ключ действия. */
+    id: string;
+    /** Видимая подпись или произвольное содержимое. */
+    label: ReactNode;
+    /** Текст для поиска; обязателен для сложной JSX-подписи. */
+    textValue?: string;
+    /** Дополнительное описание действия. */
+    description?: ReactNode;
+    /** Начальный слот: например, иконка. */
+    leading?: ReactNode;
+    /** Конечный слот: например, сочетание клавиш. */
+    trailing?: ReactNode;
+    /** Недоступный пункт пропускается при навигации. */
+    disabled?: boolean;
+    /** Деструктивное действие окрашивается в красный. */
+    destructive?: boolean;
+    /** Индивидуальное оформление пункта, включая md/lg/xl; style приоритетнее. */
+    boxProps?: DropdownMenuBoxProps;
+}
+/** Props меню действий. Для выбора значения формы используйте Select. */
+export interface DropdownMenuProps {
+    /** Список действий; пустой список отображает emptyContent. */
+    items: Array<DropdownMenuItem>;
+    /** Содержимое стандартной кнопки. По умолчанию «Действия». */
+    trigger?: ReactNode;
+    /** Настройка кнопки через Box, включая md/lg/xl, className, style и HTML props. */
+    triggerProps?: Omit<BoxProps<'button'>, 'as' | 'children'>;
+    /** Внешняя обёртка триггера. */
+    rootProps?: DropdownMenuBoxProps;
+    /** Оформление позиционируемой панели. */
+    panelProps?: DropdownMenuBoxProps;
+    /** Оформление списка: padding, maxHeight, scrollbar и md/lg/xl. */
+    menuProps?: DropdownMenuBoxProps;
+    /** Общие настройки пунктов; индивидуальные boxProps имеют приоритет. */
+    itemProps?: DropdownMenuBoxProps;
+    /** Кастомизация содержимого пункта без изменения его доступной семантики. */
+    renderItem?: (item: DropdownMenuItem) => ReactNode;
+    /** Доступное название списка; по умолчанию «Действия». */
+    label?: string;
+    /** Содержимое при отсутствии действий. По умолчанию «Нет действий». */
+    emptyContent?: ReactNode;
+    /** Controlled-состояние панели. */
+    open?: boolean;
+    /** Начальное раскрытие uncontrolled-панели; по умолчанию false. */
+    defaultOpen?: boolean;
+    /** Изменение раскрытия. */
+    onOpenChange?: (open: boolean) => void;
+    /** Выбор доступного действия. */
+    onAction?: (id: string) => void;
+    /** Отключает триггер; по умолчанию false. */
+    disabled?: boolean;
+    /** Закрывать после действия; по умолчанию true. */
+    closeOnSelect?: boolean;
+    /** Положение с автоматическим переворотом у края экрана; по умолчанию bottom start. */
+    placement?: DropdownMenuPlacement;
+    /** Расстояние от триггера в px; по умолчанию 8. */
+    offset?: number;
+}
+/** Положение панели: физические left/right либо логические start/end с учётом направления текста. */
+export type DropdownMenuPlacement = 'top' | 'bottom' | 'left' | 'right' | 'start' | 'end' | `${'top' | 'bottom'} ${'left' | 'right' | 'start' | 'end'}` | `${'left' | 'right' | 'start' | 'end'} ${'top' | 'bottom'}`;

package/dist/dropdown-menu/types/index.d.ts

@@ -0,0 +1 @@
+export type { DropdownMenuBoxProps, DropdownMenuItem, DropdownMenuPlacement, DropdownMenuProps, } from './dropdown-menu.types';

package/dist/dropdown-menu/types/internal/dropdown-menu-internal.types.d.ts

@@ -0,0 +1,17 @@
+import { RefObject } from 'react';
+import { TreeState, useMenuTriggerState } from 'react-stately';
+import { DropdownMenuItem, DropdownMenuProps } from '..';
+/** Внутренние props доступного пункта. */
+export interface DropdownMenuEntryProps {
+    item: DropdownMenuItem;
+    state: TreeState<DropdownMenuItem>;
+    options: DropdownMenuProps;
+    close: () => void;
+}
+/** Внутренние props позиционируемой панели. */
+export interface DropdownMenuPanelProps {
+    options: DropdownMenuProps;
+    triggerRef: RefObject<HTMLButtonElement | null>;
+    state: ReturnType<typeof useMenuTriggerState>;
+    triggerMenuProps: object;
+}

package/dist/dropdown-menu/types/internal/index.d.ts

@@ -0,0 +1 @@
+export type { DropdownMenuEntryProps, DropdownMenuPanelProps, } from './dropdown-menu-internal.types';

package/dist/dropdown-menu-D14xkawH.js

@@ -0,0 +1,199 @@
+"use client";
+import { jsxs as b, jsx as l } from "react/jsx-runtime";
+import { useRef as g, useId as P, useEffect as I, useLayoutEffect as O } from "react";
+import { useMenuTrigger as w, useButton as D, mergeProps as m, usePopover as S, useMenu as v, Overlay as k, FocusScope as T, DismissButton as x, useMenuItem as C } from "react-aria";
+import { useMenuTriggerState as M, useTreeState as F, Item as A } from "react-stately";
+import { Box as a } from "./box.js";
+import { Flex as E } from "./flex.js";
+import { Typography as R } from "./typography.js";
+function V(e, i, t) {
+  const o = Array.from(
+    e.ownerDocument.querySelectorAll(
+      'a[href],button,input,select,textarea,[tabindex],[contenteditable="true"]'
+    )
+  ).filter(
+    (r) => r.tabIndex >= 0 && !r.matches(":disabled") && !r.closest("[inert]") && r.getClientRects().length > 0 && !0
+  ).sort(
+    (r, s) => (r.tabIndex > 0 ? r.tabIndex : 1 / 0) - (s.tabIndex > 0 ? s.tabIndex : 1 / 0)
+  );
+  return o[o.indexOf(e) + (t ? -1 : 1)];
+}
+function q({ item: e, state: i, options: t, close: o }) {
+  const r = g(null), { menuItemProps: s, labelProps: c, descriptionProps: f, isFocused: u } = C(
+    {
+      key: e.id,
+      onAction: () => t.onAction?.(e.id),
+      onClose: o,
+      closeOnSelect: t.closeOnSelect ?? !0
+    },
+    i,
+    r
+  );
+  return /* @__PURE__ */ l(
+    a,
+    {
+      outlineStyle: "none",
+      focusVisible: {
+        outlineStyle: "solid",
+        outlineWidth: "2px",
+        outlineOffset: "-2px",
+        outlineColor: "--color-primary-accent"
+      },
+      p: { px: 16, py: 12 },
+      border: { radius: "8px" },
+      color: e.destructive ? "#dc2626" : "--color-text-primary",
+      bg: u ? "--color-background-subtle" : void 0,
+      ...m(t.itemProps ?? {}, e.boxProps ?? {}, s),
+      ref: r,
+      style: { ...t.itemProps?.style, ...e.boxProps?.style },
+      children: t.renderItem ? /* @__PURE__ */ l(a, { ...c, children: t.renderItem(e) }) : /* @__PURE__ */ b(E, { align: "center", gap: 12, children: [
+        e.leading,
+        /* @__PURE__ */ b(a, { width: "100%", children: [
+          /* @__PURE__ */ l(a, { ...c, children: e.label }),
+          e.description && /* @__PURE__ */ l(R, { ...f, variant: "b3", color: "--color-text-secondary", children: e.description })
+        ] }),
+        e.trailing
+      ] })
+    }
+  );
+}
+function B({
+  options: e,
+  triggerRef: i,
+  state: t,
+  triggerMenuProps: o
+}) {
+  const r = g(null), s = g(null), { popoverProps: c, underlayProps: f } = S(
+    {
+      popoverRef: r,
+      triggerRef: i,
+      placement: e.placement ?? "bottom start",
+      offset: e.offset ?? 8
+    },
+    t
+  ), u = F({
+    items: e.items,
+    disabledKeys: e.items.filter((n) => n.disabled).map((n) => n.id),
+    selectionMode: "none",
+    children: (n) => /* @__PURE__ */ l(
+      A,
+      {
+        textValue: n.textValue ?? (typeof n.label == "string" ? n.label : n.id),
+        children: n.label
+      },
+      n.id
+    )
+  }), { menuProps: d } = v(
+    {
+      ...o,
+      ...e.label ? { "aria-labelledby": void 0 } : {},
+      onClose: t.close,
+      "aria-label": e.label ?? "Действия",
+      autoFocus: t.focusStrategy ?? "first"
+    },
+    u,
+    s
+  );
+  return /* @__PURE__ */ b(k, { children: [
+    /* @__PURE__ */ l(a, { ...f, position: { type: "fixed", top: 0, right: 0, bottom: 0, left: 0 } }),
+    /* @__PURE__ */ l(T, { restoreFocus: !0, children: /* @__PURE__ */ b(
+      a,
+      {
+        bg: "--color-background-default",
+        border: { radius: "12px" },
+        boxShadow: "0 8px 32px rgba(0,0,0,.12)",
+        ...m(e.panelProps ?? {}, c),
+        ref: r,
+        style: { ...c.style, ...e.panelProps?.style },
+        children: [
+          /* @__PURE__ */ l(x, { onDismiss: t.close }),
+          /* @__PURE__ */ l(
+            a,
+            {
+              outlineStyle: "none",
+              p: 8,
+              minWidth: 220,
+              maxHeight: "min(320px, 60vh)",
+              overflowY: "auto",
+              ...m(e.menuProps ?? {}, d),
+              ref: s,
+              children: e.items.length ? e.items.map((n) => /* @__PURE__ */ l(
+                q,
+                {
+                  item: n,
+                  state: u,
+                  options: e,
+                  close: t.close
+                },
+                n.id
+              )) : /* @__PURE__ */ l(a, { p: 16, children: e.emptyContent ?? "Нет действий" })
+            }
+          ),
+          /* @__PURE__ */ l(x, { onDismiss: t.close })
+        ]
+      }
+    ) })
+  ] });
+}
+function J(e) {
+  const i = g(null), t = P(), o = e.disabled ?? e.triggerProps?.disabled ?? !1, r = M({
+    isOpen: e.open,
+    defaultOpen: o ? !1 : e.defaultOpen,
+    onOpenChange: e.onOpenChange
+  }), s = g(!1);
+  I(() => {
+    !o || !r.isOpen ? s.current = !1 : s.current || (s.current = !0, r.close());
+  }, [o, r]);
+  const { menuTriggerProps: c, menuProps: f } = w(
+    { type: "menu", isDisabled: o },
+    r,
+    i
+  ), { buttonProps: u } = D(
+    { ...m(c, e.triggerProps ?? {}), isDisabled: o },
+    i
+  );
+  return O(() => {
+    const d = i.current;
+    if (!d || !r.isOpen) return;
+    const n = d.ownerDocument, y = (p) => {
+      if (p.key !== "Tab" || !(p.target instanceof Element) || p.target.closest('[role="menu"]')?.id !== t)
+        return;
+      p.preventDefault(), p.stopPropagation();
+      const h = p.shiftKey;
+      r.close(), requestAnimationFrame(
+        () => requestAnimationFrame(() => {
+          (V(d, null, h) ?? d).focus();
+        })
+      );
+    };
+    return n.defaultView?.addEventListener("keydown", y, !0), () => n.defaultView?.removeEventListener("keydown", y, !0);
+  }, [r, t]), /* @__PURE__ */ b(a, { display: "inline-block", ...e.rootProps, children: [
+    /* @__PURE__ */ l(
+      a,
+      {
+        as: "button",
+        p: { px: 16, py: 10 },
+        bg: "--color-background-subtle",
+        border: { radius: "8px", style: "none" },
+        ...e.triggerProps,
+        ...u,
+        "aria-expanded": !o && r.isOpen,
+        "aria-controls": r.isOpen && !o ? t : void 0,
+        ref: i,
+        children: e.trigger ?? "Действия"
+      }
+    ),
+    r.isOpen && !o && /* @__PURE__ */ l(
+      B,
+      {
+        options: e,
+        state: r,
+        triggerRef: i,
+        triggerMenuProps: { ...f, id: t }
+      }
+    )
+  ] });
+}
+export {
+  J as D
+};

package/dist/dropdown-menu-hivkBAku.cjs

@@ -0,0 +1 @@
+"use client";"use strict";const s=require("react/jsx-runtime"),a=require("react"),l=require("react-aria"),g=require("react-stately"),c=require("./box.cjs"),h=require("./flex.cjs"),P=require("./typography.cjs");function j(e,i,t){const o=Array.from(e.ownerDocument.querySelectorAll('a[href],button,input,select,textarea,[tabindex],[contenteditable="true"]')).filter(r=>r.tabIndex>=0&&!r.matches(":disabled")&&!r.closest("[inert]")&&r.getClientRects().length>0&&!0).sort((r,u)=>(r.tabIndex>0?r.tabIndex:1/0)-(u.tabIndex>0?u.tabIndex:1/0));return o[o.indexOf(e)+(t?-1:1)]}function I({item:e,state:i,options:t,close:o}){const r=a.useRef(null),{menuItemProps:u,labelProps:d,descriptionProps:b,isFocused:p}=l.useMenuItem({key:e.id,onAction:()=>t.onAction?.(e.id),onClose:o,closeOnSelect:t.closeOnSelect??!0},i,r);return s.jsx(c.Box,{outlineStyle:"none",focusVisible:{outlineStyle:"solid",outlineWidth:"2px",outlineOffset:"-2px",outlineColor:"--color-primary-accent"},p:{px:16,py:12},border:{radius:"8px"},color:e.destructive?"#dc2626":"--color-text-primary",bg:p?"--color-background-subtle":void 0,...l.mergeProps(t.itemProps??{},e.boxProps??{},u),ref:r,style:{...t.itemProps?.style,...e.boxProps?.style},children:t.renderItem?s.jsx(c.Box,{...d,children:t.renderItem(e)}):s.jsxs(h.Flex,{align:"center",gap:12,children:[e.leading,s.jsxs(c.Box,{width:"100%",children:[s.jsx(c.Box,{...d,children:e.label}),e.description&&s.jsx(P.Typography,{...b,variant:"b3",color:"--color-text-secondary",children:e.description})]}),e.trailing]})})}function O({options:e,triggerRef:i,state:t,triggerMenuProps:o}){const r=a.useRef(null),u=a.useRef(null),{popoverProps:d,underlayProps:b}=l.usePopover({popoverRef:r,triggerRef:i,placement:e.placement??"bottom start",offset:e.offset??8},t),p=g.useTreeState({items:e.items,disabledKeys:e.items.filter(n=>n.disabled).map(n=>n.id),selectionMode:"none",children:n=>s.jsx(g.Item,{textValue:n.textValue??(typeof n.label=="string"?n.label:n.id),children:n.label},n.id)}),{menuProps:x}=l.useMenu({...o,...e.label?{"aria-labelledby":void 0}:{},onClose:t.close,"aria-label":e.label??"Действия",autoFocus:t.focusStrategy??"first"},p,u);return s.jsxs(l.Overlay,{children:[s.jsx(c.Box,{...b,position:{type:"fixed",top:0,right:0,bottom:0,left:0}}),s.jsx(l.FocusScope,{restoreFocus:!0,children:s.jsxs(c.Box,{bg:"--color-background-default",border:{radius:"12px"},boxShadow:"0 8px 32px rgba(0,0,0,.12)",...l.mergeProps(e.panelProps??{},d),ref:r,style:{...d.style,...e.panelProps?.style},children:[s.jsx(l.DismissButton,{onDismiss:t.close}),s.jsx(c.Box,{outlineStyle:"none",p:8,minWidth:220,maxHeight:"min(320px, 60vh)",overflowY:"auto",...l.mergeProps(e.menuProps??{},x),ref:u,children:e.items.length?e.items.map(n=>s.jsx(I,{item:n,state:p,options:e,close:t.close},n.id)):s.jsx(c.Box,{p:16,children:e.emptyContent??"Нет действий"})}),s.jsx(l.DismissButton,{onDismiss:t.close})]})})]})}function w(e){const i=a.useRef(null),t=a.useId(),o=e.disabled??e.triggerProps?.disabled??!1,r=g.useMenuTriggerState({isOpen:e.open,defaultOpen:o?!1:e.defaultOpen,onOpenChange:e.onOpenChange}),u=a.useRef(!1);a.useEffect(()=>{!o||!r.isOpen?u.current=!1:u.current||(u.current=!0,r.close())},[o,r]);const{menuTriggerProps:d,menuProps:b}=l.useMenuTrigger({type:"menu",isDisabled:o},r,i),{buttonProps:p}=l.useButton({...l.mergeProps(d,e.triggerProps??{}),isDisabled:o},i);return a.useLayoutEffect(()=>{const x=i.current;if(!x||!r.isOpen)return;const n=x.ownerDocument,y=f=>{if(f.key!=="Tab"||!(f.target instanceof Element)||f.target.closest('[role="menu"]')?.id!==t)return;f.preventDefault(),f.stopPropagation();const m=f.shiftKey;r.close(),requestAnimationFrame(()=>requestAnimationFrame(()=>{(j(x,null,m)??x).focus()}))};return n.defaultView?.addEventListener("keydown",y,!0),()=>n.defaultView?.removeEventListener("keydown",y,!0)},[r,t]),s.jsxs(c.Box,{display:"inline-block",...e.rootProps,children:[s.jsx(c.Box,{as:"button",p:{px:16,py:10},bg:"--color-background-subtle",border:{radius:"8px",style:"none"},...e.triggerProps,...p,"aria-expanded":!o&&r.isOpen,"aria-controls":r.isOpen&&!o?t:void 0,ref:i,children:e.trigger??"Действия"}),r.isOpen&&!o&&s.jsx(O,{options:e,state:r,triggerRef:i,triggerMenuProps:{...b,id:t}})]})}exports.DropdownMenu=w;

package/dist/dropdown-menu.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./dropdown-menu-hivkBAku.cjs");exports.DropdownMenu=e.DropdownMenu;

package/dist/dropdown-menu.js

@@ -0,0 +1,5 @@
+"use client";
+import { D as n } from "./dropdown-menu-D14xkawH.js";
+export {
+  n as DropdownMenu
+};

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("./accordion.cjs"),l=require("./alert-DTc0Usg-.cjs"),I=require("./box.cjs"),n=require("./button.cjs"),r=require("./ui-kit-provider-raEFsUm0.cjs"),u=require("./flex.cjs"),a=require("./grid.cjs"),o=require("./icons.cjs"),d=require("./input.cjs"),p=require("./loader-ODTCTLKE.cjs"),T=require("./media-card.cjs"),b=require("./media-gallery.cjs"),t=require("./notification-provider-C2ypXy2W.cjs"),g=require("./pagination.cjs"),C=require("./picture.cjs"),k=require("./progress-bar-XIJDb_UM.cjs"),S=require("./select.cjs"),c=require("./responsive-style.config-B2m9jVlX.cjs"),h=require("./status-badge.cjs"),y=require("./switch.cjs"),e=require("./table-container-DqqqkChm.cjs"),q=require("./tabs-BNZDJRz_.cjs"),M=require("./toast-CH8VqvLC.cjs"),P=require("./tooltip-0RbTCYn_.cjs"),s=require("./typography.cjs");exports.Accordion=i.Accordion;exports.AccordionItem=i.AccordionItem;exports.AccordionRoot=i.AccordionRoot;exports.Alert=l.Alert;exports.Box=I.Box;exports.Button=n.Button;exports.buttonSizeBorderRadius=n.buttonSizeBorderRadius;exports.buttonSizeBoxProps=n.buttonSizeBoxProps;exports.buttonSizeClassNames=n.buttonSizeClassNames;exports.buttonVariantClassNames=n.buttonVariantClassNames;exports.buttonVariants=n.buttonVariants;exports.UiKitProvider=r.UiKitProvider;exports.uiKitColorTokens=r.uiKitColorTokens;exports.uiKitTypographyTokens=r.uiKitTypographyTokens;exports.useUiKitConfig=r.useUiKitConfig;exports.Flex=u.Flex;exports.Grid=a.Grid;exports.GridItem=a.GridItem;exports.ArrowCornerIcon=o.ArrowCornerIcon;exports.ArrowIcon=o.ArrowIcon;exports.ArrowLongLeftIcon=o.ArrowLongLeftIcon;exports.ArrowheadRightIcon=o.ArrowheadRightIcon;exports.BlockIcon=o.BlockIcon;exports.BurgerIcon=o.BurgerIcon;exports.CheckIcon=o.CheckIcon;exports.CopyIcon=o.CopyIcon;exports.DoubleCheckIcon=o.DoubleCheckIcon;exports.DropDown=o.DropDown;exports.ExclamationMarkIcon=o.ExclamationMarkIcon;exports.EyeOpenIcon=o.EyeOpenIcon;exports.FileIcon=o.FileIcon;exports.GeminiStarIcon=o.GeminiStarIcon;exports.GeoIcon=o.GeoIcon;exports.InfoCircleIcon=o.InfoCircleIcon;exports.LockClosedIcon=o.LockClosedIcon;exports.LockOpenIcon=o.LockOpenIcon;exports.LogoutIcon=o.LogoutIcon;exports.MailIcon=o.MailIcon;exports.MediaMaxIcon=o.MediaMaxIcon;exports.MediaPictureIcon=o.MediaPictureIcon;exports.MediaTgIcon=o.MediaTgIcon;exports.MediaVkIcon=o.MediaVkIcon;exports.MediaWaIcon=o.MediaWaIcon;exports.NetUploadIcon=o.NetUploadIcon;exports.PaperclipIcon=o.PaperclipIcon;exports.PdfIcon=o.PdfIcon;exports.PhoneIcon=o.PhoneIcon;exports.PlusIcon=o.PlusIcon;exports.SaveIcon=o.SaveIcon;exports.SparkIcon=o.SparkIcon;exports.SparkleIcon=o.SparkleIcon;exports.TelephoneIcon=o.TelephoneIcon;exports.TimeClockIcon=o.TimeClockIcon;exports.TrashIcon=o.TrashIcon;exports.WarningTriangleIcon=o.WarningTriangleIcon;exports.XMarkIcon=o.XMarkIcon;exports.Input=d.Input;exports.Loader=p.Loader;exports.MediaCard=T.MediaCard;exports.MediaGallery=b.MediaGallery;exports.NotificationProvider=t.NotificationProvider;exports.useNotifications=t.useNotifications;exports.Pagination=g.Pagination;exports.Picture=C.Picture;exports.ProgressBar=k.ProgressBar;exports.Select=S.Select;exports.responsiveBreakpointMinWidth=c.responsiveBreakpointMinWidth;exports.responsiveBreakpoints=c.responsiveBreakpoints;exports.StatusBadge=h.StatusBadge;exports.Switch=y.Switch;exports.DataTable=e.DataTable;exports.Table=e.Table;exports.TableBody=e.TableBody;exports.TableCaption=e.TableCaption;exports.TableCell=e.TableCell;exports.TableContainer=e.TableContainer;exports.TableFooter=e.TableFooter;exports.TableHead=e.TableHead;exports.TableHeader=e.TableHeader;exports.TableRow=e.TableRow;exports.TableScrollArea=e.TableScrollArea;exports.TableStatus=e.TableStatus;exports.TableToolbar=e.TableToolbar;exports.Tabs=q.Tabs;exports.Toast=M.Toast;exports.Tooltip=P.Tooltip;exports.Typography=s.Typography;exports.typographyVariants=s.typographyVariants;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("./accordion.cjs"),l=require("./alert-DTc0Usg-.cjs"),I=require("./box.cjs"),n=require("./button.cjs"),r=require("./ui-kit-provider-raEFsUm0.cjs"),u=require("./dropdown-menu-hivkBAku.cjs"),d=require("./flex.cjs"),a=require("./grid.cjs"),o=require("./icons.cjs"),p=require("./input.cjs"),T=require("./loader-ODTCTLKE.cjs"),b=require("./media-card.cjs"),g=require("./media-gallery.cjs"),t=require("./notification-provider-C2ypXy2W.cjs"),C=require("./pagination.cjs"),k=require("./picture.cjs"),M=require("./progress-bar-XIJDb_UM.cjs"),S=require("./select.cjs"),c=require("./responsive-style.config-B2m9jVlX.cjs"),h=require("./status-badge.cjs"),q=require("./switch.cjs"),e=require("./table-container-DqqqkChm.cjs"),y=require("./tabs-BNZDJRz_.cjs"),P=require("./toast-CH8VqvLC.cjs"),B=require("./tooltip-0RbTCYn_.cjs"),s=require("./typography.cjs");exports.Accordion=i.Accordion;exports.AccordionItem=i.AccordionItem;exports.AccordionRoot=i.AccordionRoot;exports.Alert=l.Alert;exports.Box=I.Box;exports.Button=n.Button;exports.buttonSizeBorderRadius=n.buttonSizeBorderRadius;exports.buttonSizeBoxProps=n.buttonSizeBoxProps;exports.buttonSizeClassNames=n.buttonSizeClassNames;exports.buttonVariantClassNames=n.buttonVariantClassNames;exports.buttonVariants=n.buttonVariants;exports.UiKitProvider=r.UiKitProvider;exports.uiKitColorTokens=r.uiKitColorTokens;exports.uiKitTypographyTokens=r.uiKitTypographyTokens;exports.useUiKitConfig=r.useUiKitConfig;exports.DropdownMenu=u.DropdownMenu;exports.Flex=d.Flex;exports.Grid=a.Grid;exports.GridItem=a.GridItem;exports.ArrowCornerIcon=o.ArrowCornerIcon;exports.ArrowIcon=o.ArrowIcon;exports.ArrowLongLeftIcon=o.ArrowLongLeftIcon;exports.ArrowheadRightIcon=o.ArrowheadRightIcon;exports.BlockIcon=o.BlockIcon;exports.BurgerIcon=o.BurgerIcon;exports.CheckIcon=o.CheckIcon;exports.CopyIcon=o.CopyIcon;exports.DoubleCheckIcon=o.DoubleCheckIcon;exports.DropDown=o.DropDown;exports.ExclamationMarkIcon=o.ExclamationMarkIcon;exports.EyeOpenIcon=o.EyeOpenIcon;exports.FileIcon=o.FileIcon;exports.GeminiStarIcon=o.GeminiStarIcon;exports.GeoIcon=o.GeoIcon;exports.InfoCircleIcon=o.InfoCircleIcon;exports.LockClosedIcon=o.LockClosedIcon;exports.LockOpenIcon=o.LockOpenIcon;exports.LogoutIcon=o.LogoutIcon;exports.MailIcon=o.MailIcon;exports.MediaMaxIcon=o.MediaMaxIcon;exports.MediaPictureIcon=o.MediaPictureIcon;exports.MediaTgIcon=o.MediaTgIcon;exports.MediaVkIcon=o.MediaVkIcon;exports.MediaWaIcon=o.MediaWaIcon;exports.NetUploadIcon=o.NetUploadIcon;exports.PaperclipIcon=o.PaperclipIcon;exports.PdfIcon=o.PdfIcon;exports.PhoneIcon=o.PhoneIcon;exports.PlusIcon=o.PlusIcon;exports.SaveIcon=o.SaveIcon;exports.SparkIcon=o.SparkIcon;exports.SparkleIcon=o.SparkleIcon;exports.TelephoneIcon=o.TelephoneIcon;exports.TimeClockIcon=o.TimeClockIcon;exports.TrashIcon=o.TrashIcon;exports.WarningTriangleIcon=o.WarningTriangleIcon;exports.XMarkIcon=o.XMarkIcon;exports.Input=p.Input;exports.Loader=T.Loader;exports.MediaCard=b.MediaCard;exports.MediaGallery=g.MediaGallery;exports.NotificationProvider=t.NotificationProvider;exports.useNotifications=t.useNotifications;exports.Pagination=C.Pagination;exports.Picture=k.Picture;exports.ProgressBar=M.ProgressBar;exports.Select=S.Select;exports.responsiveBreakpointMinWidth=c.responsiveBreakpointMinWidth;exports.responsiveBreakpoints=c.responsiveBreakpoints;exports.StatusBadge=h.StatusBadge;exports.Switch=q.Switch;exports.DataTable=e.DataTable;exports.Table=e.Table;exports.TableBody=e.TableBody;exports.TableCaption=e.TableCaption;exports.TableCell=e.TableCell;exports.TableContainer=e.TableContainer;exports.TableFooter=e.TableFooter;exports.TableHead=e.TableHead;exports.TableHeader=e.TableHeader;exports.TableRow=e.TableRow;exports.TableScrollArea=e.TableScrollArea;exports.TableStatus=e.TableStatus;exports.TableToolbar=e.TableToolbar;exports.Tabs=y.Tabs;exports.Toast=P.Toast;exports.Tooltip=B.Tooltip;exports.Typography=s.Typography;exports.typographyVariants=s.typographyVariants;

package/dist/index.d.ts

@@ -5,6 +5,7 @@ export { Box } from './box/box';
 export * from './button/button';
 export * from './design-tokens/color.tokens';
 export * from './design-tokens/typography.tokens';
+export * from './dropdown-menu/index';
 export type { FlexBreakpointProps, FlexProps, FlexResponsiveProps } from './flex/flex';
 export { Flex } from './flex/flex';
 export * from './grid/grid';

package/dist/index.js

@@ -3,113 +3,115 @@ import { A as i } from "./alert-CTIWpkmD.js";
 import { Box as s } from "./box.js";
 import { Button as l, buttonSizeBorderRadius as I, buttonSizeBoxProps as f, buttonSizeClassNames as m, buttonVariantClassNames as x, buttonVariants as T } from "./button.js";
 import { U as b, u, a as k, b as g } from "./ui-kit-provider-C6Mk5g_7.js";
-import { Flex as h } from "./flex.js";
-import { Grid as P, GridItem as S } from "./grid.js";
-import { ArrowCornerIcon as y, ArrowIcon as A, ArrowLongLeftIcon as w, ArrowheadRightIcon as L, BlockIcon as N, BurgerIcon as v, CheckIcon as D, CopyIcon as G, DoubleCheckIcon as K, DropDown as R, ExclamationMarkIcon as U, EyeOpenIcon as V, FileIcon as z, GeminiStarIcon as F, GeoIcon as W, InfoCircleIcon as E, LockClosedIcon as H, LockOpenIcon as O, LogoutIcon as j, MailIcon as X, MediaMaxIcon as q, MediaPictureIcon as J, MediaTgIcon as Q, MediaVkIcon as Y, MediaWaIcon as Z, NetUploadIcon as _, PaperclipIcon as $, PdfIcon as oo, PhoneIcon as ro, PlusIcon as eo, SaveIcon as ao, SparkIcon as no, SparkleIcon as to, TelephoneIcon as io, TimeClockIcon as co, TrashIcon as so, WarningTriangleIcon as po, XMarkIcon as lo } from "./icons.js";
-import { Input as fo } from "./input.js";
-import { L as xo } from "./loader-Daam055i.js";
-import { MediaCard as bo } from "./media-card.js";
-import { MediaGallery as ko } from "./media-gallery.js";
-import { N as Co, u as ho } from "./notification-provider-WLUaZyMB.js";
-import { Pagination as Po } from "./pagination.js";
-import { Picture as Bo } from "./picture.js";
-import { P as Ao } from "./progress-bar-D4CL9r42.js";
-import { Select as Lo } from "./select.js";
-import { r as vo, a as Do } from "./responsive-style.config-DFuATrIM.js";
-import { StatusBadge as Ko } from "./status-badge.js";
-import { Switch as Uo } from "./switch.js";
-import { D as zo, T as Fo, a as Wo, b as Eo, c as Ho, d as Oo, e as jo, f as Xo, g as qo, h as Jo, i as Qo, j as Yo, k as Zo } from "./table-container-BsE-uIE1.js";
-import { T as $o } from "./tabs-DIPSJX1z.js";
-import { T as rr } from "./toast-DpjugQ8H.js";
-import { T as ar } from "./tooltip-CWnHAfbI.js";
-import { Typography as tr, typographyVariants as ir } from "./typography.js";
+import { D as h } from "./dropdown-menu-D14xkawH.js";
+import { Flex as P } from "./flex.js";
+import { Grid as B, GridItem as y } from "./grid.js";
+import { ArrowCornerIcon as w, ArrowIcon as D, ArrowLongLeftIcon as L, ArrowheadRightIcon as N, BlockIcon as v, BurgerIcon as G, CheckIcon as K, CopyIcon as R, DoubleCheckIcon as U, DropDown as V, ExclamationMarkIcon as z, EyeOpenIcon as F, FileIcon as W, GeminiStarIcon as E, GeoIcon as H, InfoCircleIcon as O, LockClosedIcon as j, LockOpenIcon as X, LogoutIcon as q, MailIcon as J, MediaMaxIcon as Q, MediaPictureIcon as Y, MediaTgIcon as Z, MediaVkIcon as _, MediaWaIcon as $, NetUploadIcon as oo, PaperclipIcon as ro, PdfIcon as eo, PhoneIcon as ao, PlusIcon as no, SaveIcon as to, SparkIcon as io, SparkleIcon as co, TelephoneIcon as so, TimeClockIcon as po, TrashIcon as lo, WarningTriangleIcon as Io, XMarkIcon as fo } from "./icons.js";
+import { Input as xo } from "./input.js";
+import { L as bo } from "./loader-Daam055i.js";
+import { MediaCard as ko } from "./media-card.js";
+import { MediaGallery as Co } from "./media-gallery.js";
+import { N as Mo, u as Po } from "./notification-provider-WLUaZyMB.js";
+import { Pagination as Bo } from "./pagination.js";
+import { Picture as Ao } from "./picture.js";
+import { P as Do } from "./progress-bar-D4CL9r42.js";
+import { Select as No } from "./select.js";
+import { r as Go, a as Ko } from "./responsive-style.config-DFuATrIM.js";
+import { StatusBadge as Uo } from "./status-badge.js";
+import { Switch as zo } from "./switch.js";
+import { D as Wo, T as Eo, a as Ho, b as Oo, c as jo, d as Xo, e as qo, f as Jo, g as Qo, h as Yo, i as Zo, j as _o, k as $o } from "./table-container-BsE-uIE1.js";
+import { T as rr } from "./tabs-DIPSJX1z.js";
+import { T as ar } from "./toast-DpjugQ8H.js";
+import { T as tr } from "./tooltip-CWnHAfbI.js";
+import { Typography as cr, typographyVariants as sr } from "./typography.js";
 export {
   e as Accordion,
   a as AccordionItem,
   n as AccordionRoot,
   i as Alert,
-  y as ArrowCornerIcon,
-  A as ArrowIcon,
-  w as ArrowLongLeftIcon,
-  L as ArrowheadRightIcon,
-  N as BlockIcon,
+  w as ArrowCornerIcon,
+  D as ArrowIcon,
+  L as ArrowLongLeftIcon,
+  N as ArrowheadRightIcon,
+  v as BlockIcon,
   s as Box,
-  v as BurgerIcon,
+  G as BurgerIcon,
   l as Button,
-  D as CheckIcon,
-  G as CopyIcon,
-  zo as DataTable,
-  K as DoubleCheckIcon,
-  R as DropDown,
-  U as ExclamationMarkIcon,
-  V as EyeOpenIcon,
-  z as FileIcon,
-  h as Flex,
-  F as GeminiStarIcon,
-  W as GeoIcon,
-  P as Grid,
-  S as GridItem,
-  E as InfoCircleIcon,
-  fo as Input,
-  xo as Loader,
-  H as LockClosedIcon,
-  O as LockOpenIcon,
-  j as LogoutIcon,
-  X as MailIcon,
-  bo as MediaCard,
-  ko as MediaGallery,
-  q as MediaMaxIcon,
-  J as MediaPictureIcon,
-  Q as MediaTgIcon,
-  Y as MediaVkIcon,
-  Z as MediaWaIcon,
-  _ as NetUploadIcon,
-  Co as NotificationProvider,
-  Po as Pagination,
-  $ as PaperclipIcon,
-  oo as PdfIcon,
-  ro as PhoneIcon,
-  Bo as Picture,
-  eo as PlusIcon,
-  Ao as ProgressBar,
-  ao as SaveIcon,
-  Lo as Select,
-  no as SparkIcon,
-  to as SparkleIcon,
-  Ko as StatusBadge,
-  Uo as Switch,
-  Fo as Table,
-  Wo as TableBody,
-  Eo as TableCaption,
-  Ho as TableCell,
-  Oo as TableContainer,
-  jo as TableFooter,
-  Xo as TableHead,
-  qo as TableHeader,
-  Jo as TableRow,
-  Qo as TableScrollArea,
-  Yo as TableStatus,
-  Zo as TableToolbar,
-  $o as Tabs,
-  io as TelephoneIcon,
-  co as TimeClockIcon,
-  rr as Toast,
-  ar as Tooltip,
-  so as TrashIcon,
-  tr as Typography,
+  K as CheckIcon,
+  R as CopyIcon,
+  Wo as DataTable,
+  U as DoubleCheckIcon,
+  V as DropDown,
+  h as DropdownMenu,
+  z as ExclamationMarkIcon,
+  F as EyeOpenIcon,
+  W as FileIcon,
+  P as Flex,
+  E as GeminiStarIcon,
+  H as GeoIcon,
+  B as Grid,
+  y as GridItem,
+  O as InfoCircleIcon,
+  xo as Input,
+  bo as Loader,
+  j as LockClosedIcon,
+  X as LockOpenIcon,
+  q as LogoutIcon,
+  J as MailIcon,
+  ko as MediaCard,
+  Co as MediaGallery,
+  Q as MediaMaxIcon,
+  Y as MediaPictureIcon,
+  Z as MediaTgIcon,
+  _ as MediaVkIcon,
+  $ as MediaWaIcon,
+  oo as NetUploadIcon,
+  Mo as NotificationProvider,
+  Bo as Pagination,
+  ro as PaperclipIcon,
+  eo as PdfIcon,
+  ao as PhoneIcon,
+  Ao as Picture,
+  no as PlusIcon,
+  Do as ProgressBar,
+  to as SaveIcon,
+  No as Select,
+  io as SparkIcon,
+  co as SparkleIcon,
+  Uo as StatusBadge,
+  zo as Switch,
+  Eo as Table,
+  Ho as TableBody,
+  Oo as TableCaption,
+  jo as TableCell,
+  Xo as TableContainer,
+  qo as TableFooter,
+  Jo as TableHead,
+  Qo as TableHeader,
+  Yo as TableRow,
+  Zo as TableScrollArea,
+  _o as TableStatus,
+  $o as TableToolbar,
+  rr as Tabs,
+  so as TelephoneIcon,
+  po as TimeClockIcon,
+  ar as Toast,
+  tr as Tooltip,
+  lo as TrashIcon,
+  cr as Typography,
   b as UiKitProvider,
-  po as WarningTriangleIcon,
-  lo as XMarkIcon,
+  Io as WarningTriangleIcon,
+  fo as XMarkIcon,
   I as buttonSizeBorderRadius,
   f as buttonSizeBoxProps,
   m as buttonSizeClassNames,
   x as buttonVariantClassNames,
   T as buttonVariants,
-  vo as responsiveBreakpointMinWidth,
-  Do as responsiveBreakpoints,
-  ir as typographyVariants,
+  Go as responsiveBreakpointMinWidth,
+  Ko as responsiveBreakpoints,
+  sr as typographyVariants,
   u as uiKitColorTokens,
   k as uiKitTypographyTokens,
-  ho as useNotifications,
+  Po as useNotifications,
   g as useUiKitConfig
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shmidko61/lc-ui-kit",
-  "version": "0.17.1",
+  "version": "0.18.0",
   "type": "module",
   "files": [
     "dist"
@@ -90,6 +90,9 @@
       ],
       "tabs": [
         "dist/tabs/index.d.ts"
+      ],
+      "dropdown-menu": [
+        "dist/dropdown-menu/index.d.ts"
       ]
     }
   },
@@ -229,6 +232,11 @@
       "types": "./dist/tabs/index.d.ts",
       "import": "./dist/tabs.js",
       "require": "./dist/tabs.cjs"
+    },
+    "./dropdown-menu": {
+      "types": "./dist/dropdown-menu/index.d.ts",
+      "import": "./dist/dropdown-menu.js",
+      "require": "./dist/dropdown-menu.cjs"
     }
   },
   "sideEffects": [
@@ -236,7 +244,7 @@
   ],
   "scripts": {
     "prepublishOnly": "node -e \"throw new Error('Публикуйте проверенный tarball: corepack pnpm publish:ui-kit из apps')\"",
-    "verify:package": "pnpm typecheck && pnpm lint && pnpm format:check && pnpm build && pnpm typecheck:package && pnpm test:checks && pnpm test:package && pnpm test:hover && pnpm test:states && pnpm test:animation && pnpm test:progress-bar && pnpm test:tabs && pnpm test:scrollbar && pnpm test:accordion && pnpm pack:check && pnpm storybook:build",
+    "verify:package": "pnpm typecheck && pnpm lint && pnpm format:check && pnpm build && pnpm typecheck:package && pnpm test:checks && pnpm test:package && pnpm test:hover && pnpm test:states && pnpm test:animation && pnpm test:progress-bar && pnpm test:tabs && pnpm test:scrollbar && pnpm test:accordion && pnpm test:dropdown-menu && pnpm pack:check && pnpm storybook:build",
     "build": "vite build && tailwindcss -i src/styles.css -o dist/styles.css --minify",
     "lint": "eslint src .storybook vite.config.ts --max-warnings=0",
     "lint:fix": "eslint src .storybook vite.config.ts --fix",
@@ -262,7 +270,9 @@
     "test:scrollbar": "node scripts/check-scrollbar.mjs",
     "test:scrollbar:browser": "node scripts/check-scrollbar-browser.mjs",
     "test:accordion": "node scripts/check-accordion.mjs",
-    "test:accordion:browser": "node scripts/check-accordion-browser.mjs"
+    "test:accordion:browser": "node scripts/check-accordion-browser.mjs",
+    "test:dropdown-menu": "node scripts/check-dropdown-menu.mjs",
+    "test:dropdown-menu:browser": "node scripts/check-dropdown-menu-browser.mjs"
   },
   "dependencies": {
     "class-variance-authority": "^0.7.1",