@shmidko61/lc-ui-kit 0.0.1

package/dist/media-card.js

@@ -0,0 +1,104 @@
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { c } from "./responsive-style.config-DFuATrIM.js";
+import { S as u, a as p } from "./media-picture-BN4saEVT.js";
+import { S as f } from "./x-mark-WU1eT82T.js";
+import { Typography as b } from "./typography.js";
+function x({ isPicked: e }) {
+  return /* @__PURE__ */ r(
+    "span",
+    {
+      className: c(
+        "absolute right-[4px] top-[4px] inline-flex size-[20px] items-center justify-center rounded-full  ",
+        e ? " bg-[var(--color-primary-accent)] text-[var(--color-background-default)]" : "bg-[var(--color-background-default)] text-transparent"
+      ),
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ r(u, { className: "size-[18px]" })
+    }
+  );
+}
+function l({ fileName: e, imgUrl: a, children: t }) {
+  return /* @__PURE__ */ i("div", { className: "relative flex aspect-square w-full items-center justify-center rounded-[8px] overflow-hidden bg-[var(--color-background-subtle)]", children: [
+    a ? /* @__PURE__ */ r("img", { className: "w-full  object-contain", src: a, alt: e }) : /* @__PURE__ */ r(p, { className: "size-[40px] text-[var(--color-text-secondary)]" }),
+    t
+  ] });
+}
+function m({
+  className: e,
+  fileName: a,
+  imgUrl: t,
+  isPicked: n = !1,
+  onSubmit: o
+}) {
+  return /* @__PURE__ */ r(
+    "button",
+    {
+      type: "button",
+      className: c(
+        "block w-full overflow-hidden rounded-[10px] border border-[var(--color-primary-accent)] outline-none transition-colors focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--color-primary-accent)_35%,transparent)]",
+        e
+      ),
+      onClick: o,
+      children: /* @__PURE__ */ r(l, { fileName: a, imgUrl: t, children: /* @__PURE__ */ r(x, { isPicked: n }) })
+    }
+  );
+}
+function v({
+  fileName: e,
+  onDelete: a
+}) {
+  return /* @__PURE__ */ i("div", { className: "flex justify-between  items-center gap-[8px]", children: [
+    /* @__PURE__ */ r(b, { variant: "b3", children: e }),
+    a ? /* @__PURE__ */ r("button", { type: "button", "aria-label": `Удалить ${e}`, onClick: a, children: /* @__PURE__ */ r(f, { className: "size-[16px]" }) }) : null
+  ] });
+}
+function g({
+  className: e,
+  fileName: a,
+  imgUrl: t,
+  onDelete: n
+}) {
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      className: c(
+        "flex flex-col  w-full gap-[4px] rounded-[10px] bg-[var(--color-background-subtle)] p-[4px]",
+        e
+      ),
+      children: [
+        /* @__PURE__ */ r(l, { fileName: a, imgUrl: t }),
+        /* @__PURE__ */ r(v, { fileName: a, onDelete: n })
+      ]
+    }
+  );
+}
+function M({
+  className: e,
+  fileName: a,
+  imgUrl: t,
+  isPicked: n,
+  onDelete: o,
+  onSubmit: s,
+  variant: d
+}) {
+  return d === "img-pick" ? /* @__PURE__ */ r(
+    m,
+    {
+      className: e,
+      fileName: a,
+      imgUrl: t,
+      isPicked: n,
+      onSubmit: s
+    }
+  ) : /* @__PURE__ */ r(
+    g,
+    {
+      className: e,
+      fileName: a,
+      imgUrl: t,
+      onDelete: o
+    }
+  );
+}
+export {
+  M as MediaCard
+};

package/dist/media-gallery/media-gallery.d.ts

@@ -0,0 +1,12 @@
+import { JSX } from 'react';
+import { MediaGalleryItem, MediaGalleryProps } from './media-gallery.types';
+/**
+ * Галерея медиа-карточек для выбора изображений.
+ *
+ * Компонент не знает ничего о доменной модели приложения: он получает готовые
+ * элементы `MediaGalleryItem`, отображает их через `MediaCard` и возвращает
+ * выбранный item в `onSubmit`. Количество колонок и gap настраиваются через
+ * base/md/lg/xl props и передаются в общий `Grid`.
+ */
+export declare function MediaGallery<TItem extends MediaGalleryItem = MediaGalleryItem>({ className, columns, errorMessage, emptyMessage, gap, gridClassName, items, isLoading, lg, maxHeight, md, onSubmit, scrollable, scrollThreshold, xl, ...props }: MediaGalleryProps<TItem>): JSX.Element;
+export type { MediaGalleryItem, MediaGalleryProps } from './media-gallery.types';

package/dist/media-gallery/media-gallery.helpers.d.ts

@@ -0,0 +1,27 @@
+import { GridProps } from '../grid/grid.types';
+import { MediaGalleryProps } from './media-gallery.types';
+interface MediaGalleryLayoutInput {
+    itemsCount: number;
+    maxHeight: MediaGalleryProps['maxHeight'];
+    scrollable: MediaGalleryProps['scrollable'];
+    scrollThreshold: number;
+}
+/**
+ * Определяет параметры scroll-контейнера галереи.
+ *
+ * По умолчанию галерея становится скроллируемой, когда количество элементов
+ * превышает `scrollThreshold`. Потребитель может переопределить это поведение
+ * явным prop `scrollable`.
+ */
+export declare function getMediaGalleryScrollState({ itemsCount, maxHeight, scrollable, scrollThreshold, }: MediaGalleryLayoutInput): {
+    maxHeightValue: string;
+    shouldUseScroll: boolean;
+};
+/**
+ * Преобразует API MediaGallery (`columns`) в API Grid (`cols`).
+ *
+ * MediaGallery оставляет предметное имя `columns`, а Grid использует короткое
+ * layout-имя `cols`. Этот helper держит маппинг в одном месте.
+ */
+export declare function getMediaGalleryGridProps({ columns, gap, lg, md, xl, }: Pick<MediaGalleryProps, 'columns' | 'gap' | 'lg' | 'md' | 'xl'>): Pick<GridProps, 'cols' | 'gap' | 'lg' | 'md' | 'xl'>;
+export {};

package/dist/media-gallery/media-gallery.types.d.ts

@@ -0,0 +1,59 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { GridCols, GridGap } from '../grid/grid.types';
+/**
+ * Минимальная модель элемента, которую умеет отрисовать MediaGallery.
+ *
+ * Потребитель может расширять этот тип через generic и хранить рядом доменные
+ * данные, которые вернутся обратно в `onSubmit`.
+ */
+export interface MediaGalleryItem {
+    /** Подпись/имя файла для alt и accessibility-текста карточки. */
+    fileName: string;
+    /** Стабильный key элемента. */
+    id: string | number;
+    /** URL изображения для preview. */
+    imgUrl?: string;
+    /** Признак выбранного состояния карточки. */
+    isPicked?: boolean;
+}
+/**
+ * Настройки сетки MediaGallery для одного responsive-состояния.
+ */
+export interface MediaGalleryBreakpointConfig {
+    /** Количество колонок в сетке. */
+    columns?: GridCols;
+    /** Зазор между карточками. Число трактуется как px. */
+    gap?: GridGap;
+}
+/**
+ * Props MediaGallery.
+ *
+ * Верхний уровень (`columns`, `gap`) задаёт base-состояние, а `md`, `lg`, `xl`
+ * переопределяют параметры сетки на соответствующих breakpoint-ах.
+ */
+export interface MediaGalleryProps<TItem extends MediaGalleryItem = MediaGalleryItem> extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onSubmit'>, MediaGalleryBreakpointConfig {
+    /** Текст ошибки загрузки или подготовки галереи. */
+    errorMessage?: ReactNode;
+    /** Сообщение для пустого состояния. */
+    emptyMessage?: ReactNode;
+    /** Дополнительный className для grid-области с карточками. */
+    gridClassName?: string;
+    /** Список медиа-элементов для отображения. */
+    items: TItem[];
+    /** Показывает loading-state вместо пустого состояния. */
+    isLoading?: boolean;
+    /** Responsive-настройки сетки для lg и шире. */
+    lg?: MediaGalleryBreakpointConfig;
+    /** Максимальная высота скроллируемой галереи. Число трактуется как px. */
+    maxHeight?: number | string;
+    /** Responsive-настройки сетки для md и шире. */
+    md?: MediaGalleryBreakpointConfig;
+    /** Callback выбора карточки. */
+    onSubmit?: (item: TItem) => void;
+    /** Принудительно включает/выключает scroll container. По умолчанию зависит от scrollThreshold. */
+    scrollable?: boolean;
+    /** Количество элементов, после которого галерея становится скроллируемой. */
+    scrollThreshold?: number;
+    /** Responsive-настройки сетки для xl и шире. */
+    xl?: MediaGalleryBreakpointConfig;
+}

package/dist/media-gallery.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),q=require("./grid.cjs"),C=require("./time-clock-DOwPzcx7.cjs"),N=require("./media-card.cjs"),p=require("./responsive-style.config-B2m9jVlX.cjs"),s=require("./typography.cjs");function P({itemsCount:e,maxHeight:n,scrollable:l,scrollThreshold:a}){return{maxHeightValue:M(n??420),shouldUseScroll:l??e>a}}function k({columns:e,gap:n,lg:l,md:a,xl:t}){return{cols:e??4,gap:n??8,md:c(a),lg:c(l),xl:c(t)}}function c(e){if(e)return{cols:e.columns,gap:e.gap}}function M(e){return typeof e=="number"?`${e}px`:e}function T({className:e,columns:n,errorMessage:l,emptyMessage:a="В галерее пока нет изображений.",gap:t,gridClassName:g,items:i,isLoading:d=!1,lg:x,maxHeight:y,md:h,onSubmit:m,scrollable:f,scrollThreshold:v=6,xl:j,...S}){const{maxHeightValue:b,shouldUseScroll:u}=P({itemsCount:i.length,maxHeight:y,scrollable:f,scrollThreshold:v}),G=k({columns:n,gap:t,lg:x,md:h,xl:j});return r.jsxs("div",{className:p.cn("grid gap-[12px]",e),...S,children:[d?r.jsxs("div",{className:"flex items-center gap-[8px] text-[var(--color-text-secondary)]",children:[r.jsx(C.SvgTimeClock,{className:"size-[16px] animate-spin"}),r.jsx(s.Typography,{as:"span",variant:"b3",children:"Загружаем галерею..."})]}):null,l?r.jsx(s.Typography,{as:"p",color:"--color-secondary-accent-2",variant:"b3",children:l}):null,i.length>0?r.jsx(q.Grid,{...G,className:p.cn(u&&"overflow-y-auto rounded-[12px] bg-[var(--color-background-subtle)] p-[8px]",g),style:u?{maxHeight:b}:void 0,children:i.map(o=>r.jsx(N.MediaCard,{fileName:o.fileName,imgUrl:o.imgUrl,isPicked:o.isPicked,variant:"img-pick",onSubmit:()=>m?.(o)},o.id))}):null,!d&&i.length===0?r.jsx(s.Typography,{as:"p",color:"--color-text-secondary",variant:"b3",children:a}):null]})}exports.MediaGallery=T;

package/dist/media-gallery.js

@@ -0,0 +1,100 @@
+import { jsxs as m, jsx as o } from "react/jsx-runtime";
+import { Grid as k } from "./grid.js";
+import { S as C } from "./time-clock-DjqcZ8tI.js";
+import { MediaCard as U } from "./media-card.js";
+import { c as u } from "./responsive-style.config-DFuATrIM.js";
+import { Typography as c } from "./typography.js";
+function H({
+  itemsCount: r,
+  maxHeight: e,
+  scrollable: l,
+  scrollThreshold: a
+}) {
+  return {
+    maxHeightValue: j(e ?? 420),
+    shouldUseScroll: l ?? r > a
+  };
+}
+function M({
+  columns: r,
+  gap: e,
+  lg: l,
+  md: a,
+  xl: t
+}) {
+  return {
+    cols: r ?? 4,
+    gap: e ?? 8,
+    md: s(a),
+    lg: s(l),
+    xl: s(t)
+  };
+}
+function s(r) {
+  if (r)
+    return {
+      cols: r.columns,
+      gap: r.gap
+    };
+}
+function j(r) {
+  return typeof r == "number" ? `${r}px` : r;
+}
+function q({
+  className: r,
+  columns: e,
+  errorMessage: l,
+  emptyMessage: a = "В галерее пока нет изображений.",
+  gap: t,
+  gridClassName: g,
+  items: i,
+  isLoading: d = !1,
+  lg: f,
+  maxHeight: x,
+  md: h,
+  onSubmit: y,
+  scrollable: v,
+  scrollThreshold: S = 6,
+  xl: b,
+  ...G
+}) {
+  const { maxHeightValue: N, shouldUseScroll: p } = H({
+    itemsCount: i.length,
+    maxHeight: x,
+    scrollable: v,
+    scrollThreshold: S
+  }), P = M({ columns: e, gap: t, lg: f, md: h, xl: b });
+  return /* @__PURE__ */ m("div", { className: u("grid gap-[12px]", r), ...G, children: [
+    d ? /* @__PURE__ */ m("div", { className: "flex items-center gap-[8px] text-[var(--color-text-secondary)]", children: [
+      /* @__PURE__ */ o(C, { className: "size-[16px] animate-spin" }),
+      /* @__PURE__ */ o(c, { as: "span", variant: "b3", children: "Загружаем галерею..." })
+    ] }) : null,
+    l ? /* @__PURE__ */ o(c, { as: "p", color: "--color-secondary-accent-2", variant: "b3", children: l }) : null,
+    i.length > 0 ? /* @__PURE__ */ o(
+      k,
+      {
+        ...P,
+        className: u(
+          p && "overflow-y-auto rounded-[12px] bg-[var(--color-background-subtle)] p-[8px]",
+          g
+        ),
+        style: p ? { maxHeight: N } : void 0,
+        children: i.map((n) => /* @__PURE__ */ o(
+          U,
+          {
+            fileName: n.fileName,
+            imgUrl: n.imgUrl,
+            isPicked: n.isPicked,
+            variant: "img-pick",
+            onSubmit: () => y?.(n)
+          },
+          n.id
+        ))
+      }
+    ) : null,
+    !d && i.length === 0 ? /* @__PURE__ */ o(c, { as: "p", color: "--color-text-secondary", variant: "b3", children: a }) : null
+  ] });
+}
+export {
+  q as MediaGallery
+};

package/dist/media-picture-BN4saEVT.js

@@ -0,0 +1,6 @@
+import * as e from "react";
+const l = (t) => /* @__PURE__ */ e.createElement("svg", { width: 20, height: 20, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("path", { d: "M5.5 9.57143L8.77273 13L14.5 7", stroke: "#152237", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" })), n = (t) => /* @__PURE__ */ e.createElement("svg", { width: 20, height: 20, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4.6875 7.03125C4.6875 5.73683 5.73683 4.6875 7.03125 4.6875C8.32567 4.6875 9.375 5.73683 9.375 7.03125C9.375 8.32567 8.32567 9.375 7.03125 9.375C5.73683 9.375 4.6875 8.32567 4.6875 7.03125ZM7.03125 5.9375C6.42719 5.9375 5.9375 6.42719 5.9375 7.03125C5.9375 7.63531 6.42719 8.125 7.03125 8.125C7.63531 8.125 8.125 7.63531 8.125 7.03125C8.125 6.42719 7.63531 5.9375 7.03125 5.9375Z", fill: "#152237" }), /* @__PURE__ */ e.createElement("path", { d: "M11.2121 10.2968C11.5782 9.93065 12.1718 9.93065 12.5379 10.2968L14.8706 12.6294C15.1147 12.8735 15.5103 12.8735 15.7544 12.6294C15.9985 12.3853 15.9985 11.9897 15.7544 11.7456L13.4218 9.4129C12.5675 8.55865 11.1825 8.55865 10.3282 9.4129L5.18306 14.5581C4.93898 14.8022 4.93898 15.1978 5.18306 15.4419C5.42713 15.686 5.82286 15.686 6.06694 15.4419L11.2121 10.2968Z", fill: "#152237" }), /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M1.875 5.41667C1.875 3.46066 3.46066 1.875 5.41667 1.875H14.5833C16.5393 1.875 18.125 3.46066 18.125 5.41667V14.5833C18.125 16.5393 16.5393 18.125 14.5833 18.125H5.41667C3.46066 18.125 1.875 16.5393 1.875 14.5833V5.41667ZM5.41667 3.125C4.15102 3.125 3.125 4.15102 3.125 5.41667V14.5833C3.125 15.849 4.15102 16.875 5.41667 16.875H14.5833C15.849 16.875 16.875 15.849 16.875 14.5833V5.41667C16.875 4.15102 15.849 3.125 14.5833 3.125H5.41667Z", fill: "#152237" }));
+export {
+  l as S,
+  n as a
+};

package/dist/media-picture-BmERSmsd.cjs

@@ -0,0 +1 @@
+"use strict";const i=require("react");function o(e){const l=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(l,n,r.get?r:{enumerable:!0,get:()=>e[n]})}}return l.default=e,Object.freeze(l)}const t=o(i),c=e=>t.createElement("svg",{width:20,height:20,viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},t.createElement("path",{d:"M5.5 9.57143L8.77273 13L14.5 7",stroke:"#152237",strokeWidth:1.5,strokeLinecap:"round",strokeLinejoin:"round"})),a=e=>t.createElement("svg",{width:20,height:20,viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},t.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M4.6875 7.03125C4.6875 5.73683 5.73683 4.6875 7.03125 4.6875C8.32567 4.6875 9.375 5.73683 9.375 7.03125C9.375 8.32567 8.32567 9.375 7.03125 9.375C5.73683 9.375 4.6875 8.32567 4.6875 7.03125ZM7.03125 5.9375C6.42719 5.9375 5.9375 6.42719 5.9375 7.03125C5.9375 7.63531 6.42719 8.125 7.03125 8.125C7.63531 8.125 8.125 7.63531 8.125 7.03125C8.125 6.42719 7.63531 5.9375 7.03125 5.9375Z",fill:"#152237"}),t.createElement("path",{d:"M11.2121 10.2968C11.5782 9.93065 12.1718 9.93065 12.5379 10.2968L14.8706 12.6294C15.1147 12.8735 15.5103 12.8735 15.7544 12.6294C15.9985 12.3853 15.9985 11.9897 15.7544 11.7456L13.4218 9.4129C12.5675 8.55865 11.1825 8.55865 10.3282 9.4129L5.18306 14.5581C4.93898 14.8022 4.93898 15.1978 5.18306 15.4419C5.42713 15.686 5.82286 15.686 6.06694 15.4419L11.2121 10.2968Z",fill:"#152237"}),t.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M1.875 5.41667C1.875 3.46066 3.46066 1.875 5.41667 1.875H14.5833C16.5393 1.875 18.125 3.46066 18.125 5.41667V14.5833C18.125 16.5393 16.5393 18.125 14.5833 18.125H5.41667C3.46066 18.125 1.875 16.5393 1.875 14.5833V5.41667ZM5.41667 3.125C4.15102 3.125 3.125 4.15102 3.125 5.41667V14.5833C3.125 15.849 4.15102 16.875 5.41667 16.875H14.5833C15.849 16.875 16.875 15.849 16.875 14.5833V5.41667C16.875 4.15102 15.849 3.125 14.5833 3.125H5.41667Z",fill:"#152237"}));exports.SvgCheck=c;exports.SvgMediaPicture=a;

package/dist/modal/modal.d.ts

@@ -0,0 +1,50 @@
+import { AriaModalOverlayProps } from 'react-aria';
+import { OverlayTriggerProps as OverlayTriggerStateProps, OverlayTriggerState } from 'react-stately';
+import { ButtonHTMLAttributes, JSX, ReactNode } from 'react';
+import { BoxProps } from '../box/box';
+import { ButtonProps } from '../button/button';
+import { FlexProps } from '../flex/flex';
+type ModalBoxProps = Omit<Partial<BoxProps>, 'as' | 'children'>;
+type ModalContentWrapperProps = Omit<FlexProps, 'children'>;
+export type ModalProps = AriaModalOverlayProps & ModalBoxProps & {
+    /** Состояние overlay, созданное снаружи или через `Modal.Trigger`. */
+    state: OverlayTriggerState;
+    /** Содержимое модального слоя. */
+    children: ReactNode;
+    /** Кастомный слот кнопки закрытия. */
+    closeButtonSlot?: (close: () => void) => ReactNode;
+    /** Фон полноэкранного overlay. */
+    overlayBackground?: string;
+    /** Значение backdrop blur: число приводится к px. */
+    overlayBlur?: string | number;
+    /** Props Flex-обертки, которая позиционирует содержимое внутри viewport. */
+    contentWrapperProps?: ModalContentWrapperProps;
+    /** DOM-контейнер, в который будет создан portal. */
+    portalContainer?: Element;
+};
+export type ModalTriggerRenderProps = {
+    /** Props, которые нужно передать кастомному trigger-элементу. */
+    triggerProps: ButtonHTMLAttributes<HTMLButtonElement>;
+    /** Текущее состояние overlay. */
+    state: OverlayTriggerState;
+    /** Открывает модальное окно. */
+    open: () => void;
+    /** Закрывает модальное окно. */
+    close: () => void;
+};
+export type ModalTriggerProps = OverlayTriggerStateProps & Omit<ModalProps, 'children' | 'state'> & {
+    /** Render prop содержимого модального окна. */
+    children: (close: () => void) => ReactNode;
+    /** Текст стандартной trigger-кнопки. */
+    label?: ReactNode;
+    /** Props стандартной trigger-кнопки. */
+    triggerButtonProps?: Omit<ButtonProps, 'children' | 'href' | 'onClick' | 'type'>;
+    /** Кастомный trigger, если стандартной Button недостаточно. */
+    customTrigger?: (props: ModalTriggerRenderProps) => ReactNode;
+};
+declare function ModalRoot({ children, className, closeButtonSlot, contentWrapperProps, isDismissable, overlayBackground, overlayBlur, portalContainer, state, style, ...props }: ModalProps): JSX.Element | null;
+declare function ModalTrigger({ children, customTrigger, defaultOpen, isOpen, label, onOpenChange, triggerButtonProps, ...modalProps }: ModalTriggerProps): JSX.Element;
+export declare const Modal: typeof ModalRoot & {
+    Trigger: typeof ModalTrigger;
+};
+export { ModalRoot, ModalTrigger };

package/dist/modal.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),s=require("react-aria"),O=require("react-stately"),k=require("react"),B=require("./box.cjs"),j=require("./button.cjs"),b=require("./flex.cjs"),S=require("./x-mark-DId-ylR6.cjs"),y=require("./responsive-style.config-B2m9jVlX.cjs");function x({children:e,className:o,closeButtonSlot:a,contentWrapperProps:l,isDismissable:i=!0,overlayBackground:u="rgb(0 0 0 / 40%)",overlayBlur:d=4,portalContainer:g,state:t,style:p,...n}){const c=k.useRef(null),{modalProps:P,underlayProps:M}=s.useModalOverlay({...n,isDismissable:i},t,c);if(!t.isOpen)return null;const h=M,f=P,q=l?.className,m=R(d),F={backdropFilter:m,WebkitBackdropFilter:m,...h.style};return r.jsx(s.Overlay,{portalContainer:g,children:r.jsx(s.FocusScope,{contain:!0,restoreFocus:!0,autoFocus:!0,children:r.jsx(b.Flex,{...h,align:"center",bg:u,height:"100dvh",justify:"center",p:{px:16,py:16},position:{type:"fixed",top:0,right:0,bottom:0,left:0,zIndex:50},style:F,width:"100%",children:r.jsx("div",{...f,className:y.cn("size-full outline-none",f.className),ref:c,children:r.jsxs(B.Box,{bg:"transparent",className:y.cn("relative size-full overflow-y-auto",o),height:"100dvh",style:p,width:"100%",...n,children:[i?N(t.close,a):null,r.jsx(b.Flex,{align:"center",height:"100%",justify:"center",width:"100%",...l,className:y.cn(q),children:e})]})})})})})}function v({children:e,customTrigger:o,defaultOpen:a,isOpen:l,label:i="Открыть",onOpenChange:u,triggerButtonProps:d,...g}){const t=O.useOverlayTriggerState({defaultOpen:a,isOpen:l,onOpenChange:u}),{triggerProps:p}=s.useOverlayTrigger({type:"dialog"},t),n=T(p),c=o?o({close:t.close,open:t.open,state:t,triggerProps:n}):r.jsx(j.Button,{...d,...n,type:"button",onClick:t.open,children:i});return r.jsxs(r.Fragment,{children:[c,r.jsx(x,{state:t,...g,children:e(t.close)})]})}const z=Object.assign(x,{Trigger:v});function N(e,o){return o?o(e):r.jsx(j.Button,{"aria-label":"Закрыть модальное окно",p:10,position:{type:"absolute",right:20,top:20,zIndex:1},size:"md",type:"button",variant:"secondary",onClick:e,children:r.jsx(S.SvgXMark,{})})}function R(e){return typeof e=="number"?`blur(${e}px)`:e}function T(e){const o={...e};return delete o.onPress,s.mergeProps(o)}exports.Modal=z;exports.ModalRoot=x;exports.ModalTrigger=v;

package/dist/modal.js

@@ -0,0 +1,143 @@
+import { jsx as t, jsxs as b, Fragment as z } from "react/jsx-runtime";
+import { useModalOverlay as B, Overlay as N, FocusScope as j, useOverlayTrigger as M, mergeProps as w } from "react-aria";
+import { useOverlayTriggerState as C } from "react-stately";
+import { useRef as S } from "react";
+import { Box as D } from "./box.js";
+import { Button as v } from "./button.js";
+import { Flex as h } from "./flex.js";
+import { S as R } from "./x-mark-WU1eT82T.js";
+import { c as m } from "./responsive-style.config-DFuATrIM.js";
+function x({
+  children: e,
+  className: o,
+  closeButtonSlot: a,
+  contentWrapperProps: i,
+  isDismissable: l = !0,
+  overlayBackground: c = "rgb(0 0 0 / 40%)",
+  overlayBlur: u = 4,
+  portalContainer: p,
+  state: r,
+  style: d,
+  ...n
+}) {
+  const s = S(null), { modalProps: P, underlayProps: F } = B(
+    { ...n, isDismissable: l },
+    r,
+    s
+  );
+  if (!r.isOpen)
+    return null;
+  const g = F, f = P, O = i?.className, y = V(u), k = {
+    backdropFilter: y,
+    WebkitBackdropFilter: y,
+    ...g.style
+  };
+  return /* @__PURE__ */ t(N, { portalContainer: p, children: /* @__PURE__ */ t(j, { contain: !0, restoreFocus: !0, autoFocus: !0, children: /* @__PURE__ */ t(
+    h,
+    {
+      ...g,
+      align: "center",
+      bg: c,
+      height: "100dvh",
+      justify: "center",
+      p: { px: 16, py: 16 },
+      position: { type: "fixed", top: 0, right: 0, bottom: 0, left: 0, zIndex: 50 },
+      style: k,
+      width: "100%",
+      children: /* @__PURE__ */ t(
+        "div",
+        {
+          ...f,
+          className: m("size-full outline-none", f.className),
+          ref: s,
+          children: /* @__PURE__ */ b(
+            D,
+            {
+              bg: "transparent",
+              className: m("relative size-full overflow-y-auto", o),
+              height: "100dvh",
+              style: d,
+              width: "100%",
+              ...n,
+              children: [
+                l ? I(r.close, a) : null,
+                /* @__PURE__ */ t(
+                  h,
+                  {
+                    align: "center",
+                    height: "100%",
+                    justify: "center",
+                    width: "100%",
+                    ...i,
+                    className: m(O),
+                    children: e
+                  }
+                )
+              ]
+            }
+          )
+        }
+      )
+    }
+  ) }) });
+}
+function T({
+  children: e,
+  customTrigger: o,
+  defaultOpen: a,
+  isOpen: i,
+  label: l = "Открыть",
+  onOpenChange: c,
+  triggerButtonProps: u,
+  ...p
+}) {
+  const r = C({ defaultOpen: a, isOpen: i, onOpenChange: c }), { triggerProps: d } = M({ type: "dialog" }, r), n = W(d), s = o ? o({
+    close: r.close,
+    open: r.open,
+    state: r,
+    triggerProps: n
+  }) : /* @__PURE__ */ t(
+    v,
+    {
+      ...u,
+      ...n,
+      type: "button",
+      onClick: r.open,
+      children: l
+    }
+  );
+  return /* @__PURE__ */ b(z, { children: [
+    s,
+    /* @__PURE__ */ t(x, { state: r, ...p, children: e(r.close) })
+  ] });
+}
+const L = Object.assign(x, {
+  Trigger: T
+});
+function I(e, o) {
+  return o ? o(e) : /* @__PURE__ */ t(
+    v,
+    {
+      "aria-label": "Закрыть модальное окно",
+      p: 10,
+      position: { type: "absolute", right: 20, top: 20, zIndex: 1 },
+      size: "md",
+      type: "button",
+      variant: "secondary",
+      onClick: e,
+      children: /* @__PURE__ */ t(R, {})
+    }
+  );
+}
+function V(e) {
+  return typeof e == "number" ? `blur(${e}px)` : e;
+}
+function W(e) {
+  const o = { ...e };
+  return delete o.onPress, w(o);
+}
+export {
+  L as Modal,
+  x as ModalRoot,
+  T as ModalTrigger
+};

package/dist/pagination/pagination.d.ts

@@ -0,0 +1,22 @@
+import { HTMLAttributes, JSX } from 'react';
+export interface PaginationProps extends HTMLAttributes<HTMLElement> {
+    /** Количество всегда видимых страниц в начале и конце списка. */
+    boundaryCount?: number;
+    /** Активная страница, нумерация начинается с 1. */
+    currentPage: number;
+    /** Отключает все элементы пагинации. */
+    disabled?: boolean;
+    /** Вызывается при выборе страницы или клике по стрелкам. */
+    onPageChange?: (page: number) => void;
+    /** Количество элементов на странице, нужно для подписи диапазона вида "1-10 из 96". */
+    pageSize?: number;
+    /** Показывать подпись диапазона слева от кнопок страниц. */
+    showRangeLabel?: boolean;
+    /** Количество страниц, видимых слева и справа от активной страницы. */
+    siblingCount?: number;
+    /** Общее количество элементов, нужно для подписи диапазона вида "1-10 из 96". */
+    totalItems?: number;
+    /** Общее количество страниц. */
+    totalPages: number;
+}
+export declare function Pagination({ boundaryCount, className, currentPage, disabled, onPageChange, pageSize, showRangeLabel, siblingCount, totalItems, totalPages, ...props }: PaginationProps): JSX.Element;

package/dist/pagination.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),g=require("./arrow-CS6d64Y4.cjs"),u=require("./responsive-style.config-B2m9jVlX.cjs"),_=require("./typography.cjs");function k({boundaryCount:e=1,className:s,currentPage:r,disabled:i=!1,onPageChange:a,pageSize:o,showRangeLabel:h=!0,siblingCount:x=1,totalItems:p,totalPages:t,...d}){const f=Math.max(1,t),c=y(r,1,f),j=$({boundaryCount:e,currentPage:c,siblingCount:x,totalPages:f}),b=c>1&&!i,w=c<f&&!i,M=q({currentPage:c,pageSize:o,totalItems:p,totalPages:f});return n.jsxs("nav",{"aria-label":"Pagination",className:u.cn("inline-flex items-center gap-6",s),...d,children:[h?n.jsx(_.Typography,{as:"span",className:"whitespace-nowrap text-[var(--color-text-secondary)]",variant:"b3",children:M}):null,n.jsxs("div",{className:"inline-flex items-center gap-[6px]",children:[n.jsx(v,{"aria-label":"Предыдущая страница",disabled:!b,onClick:()=>a?.(c-1),children:n.jsx(g.SvgArrow,{className:"h-[9px] w-3"})}),j.map((l,N)=>l==="ellipsis"?n.jsx("span",{"aria-hidden":"true",className:"inline-flex min-h-6 min-w-6 items-center justify-center text-[13px] leading-[18px] text-[var(--color-text-secondary)]",children:"..."},`ellipsis-${N}`):n.jsx(v,{"aria-current":l===c?"page":void 0,"aria-label":`Страница ${l}`,isActive:l===c,disabled:i,onClick:()=>a?.(l),children:l},l)),n.jsx(v,{"aria-label":"Следующая страница",disabled:!w,onClick:()=>a?.(c+1),children:n.jsx(g.SvgArrow,{className:"h-[9px] w-3 rotate-180"})})]})]})}function v({children:e,className:s,disabled:r,isActive:i=!1,...a}){return n.jsx("button",{className:u.cn("inline-flex min-h-6 min-w-6 items-center justify-center rounded-[6px] bg-[var(--color-background-subtle)] px-1 text-[13px] font-normal leading-[18px] text-[var(--color-text-primary)] transition-colors [font-family:var(--font-family)] hover:bg-[color-mix(in_srgb,var(--color-background-subtle)_90%,#000)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--color-primary-accent)_35%,transparent)] disabled:pointer-events-none disabled:opacity-50 [&_svg]:shrink-0",i&&"bg-[var(--color-primary-accent)] text-[var(--color-background-default)] hover:bg-[color-mix(in_srgb,var(--color-primary-accent)_80%,#fff)]",s),disabled:r,type:"button",...a,children:e})}function $({boundaryCount:e,currentPage:s,siblingCount:r,totalPages:i}){const a=e*2+r*2+3;if(i<=a)return m(1,i);const o=m(1,e),h=m(i-e+1,i),x=Math.max(Math.min(s-r,i-e-r*2-1),e+2),p=Math.min(Math.max(s+r,e+r*2+2),i-e-1),t=[...o];return x>e+2?t.push("ellipsis"):e+1<i-e&&t.push(e+1),t.push(...m(x,p)),p<i-e-1?t.push("ellipsis"):i-e>e&&t.push(i-e),t.push(...h),t}function m(e,s){if(s<e)return[];const r=[];for(let i=e;i<=s;i+=1)r.push(i);return r}function y(e,s,r){return Math.min(Math.max(e,s),r)}function q({currentPage:e,pageSize:s,totalItems:r,totalPages:i}){if(!s||!r)return`${e} из ${i}`;const a=(e-1)*s+1,o=Math.min(e*s,r);return`${a}-${o} из ${r}`}exports.Pagination=k;