@shmidko61/lc-ui-kit 0.0.1

package/dist/pagination.js

@@ -0,0 +1,155 @@
+import { jsxs as g, jsx as c } from "react/jsx-runtime";
+import { S as d } from "./arrow-DBc2opRL.js";
+import { c as b } from "./responsive-style.config-DFuATrIM.js";
+import { Typography as $ } from "./typography.js";
+function P({
+  boundaryCount: e = 1,
+  className: n,
+  currentPage: r,
+  disabled: i = !1,
+  onPageChange: s,
+  pageSize: o,
+  showRangeLabel: h = !0,
+  siblingCount: m = 1,
+  totalItems: p,
+  totalPages: a,
+  ...u
+}) {
+  const f = Math.max(1, a), t = A(r, 1, f), M = j({
+    boundaryCount: e,
+    currentPage: t,
+    siblingCount: m,
+    totalPages: f
+  }), N = t > 1 && !i, k = t < f && !i, w = G({
+    currentPage: t,
+    pageSize: o,
+    totalItems: p,
+    totalPages: f
+  });
+  return /* @__PURE__ */ g(
+    "nav",
+    {
+      "aria-label": "Pagination",
+      className: b("inline-flex items-center gap-6", n),
+      ...u,
+      children: [
+        h ? /* @__PURE__ */ c(
+          $,
+          {
+            as: "span",
+            className: "whitespace-nowrap text-[var(--color-text-secondary)]",
+            variant: "b3",
+            children: w
+          }
+        ) : null,
+        /* @__PURE__ */ g("div", { className: "inline-flex items-center gap-[6px]", children: [
+          /* @__PURE__ */ c(
+            v,
+            {
+              "aria-label": "Предыдущая страница",
+              disabled: !N,
+              onClick: () => s?.(t - 1),
+              children: /* @__PURE__ */ c(d, { className: "h-[9px] w-3" })
+            }
+          ),
+          M.map(
+            (l, _) => l === "ellipsis" ? /* @__PURE__ */ c(
+              "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-${_}`
+            ) : /* @__PURE__ */ c(
+              v,
+              {
+                "aria-current": l === t ? "page" : void 0,
+                "aria-label": `Страница ${l}`,
+                isActive: l === t,
+                disabled: i,
+                onClick: () => s?.(l),
+                children: l
+              },
+              l
+            )
+          ),
+          /* @__PURE__ */ c(
+            v,
+            {
+              "aria-label": "Следующая страница",
+              disabled: !k,
+              onClick: () => s?.(t + 1),
+              children: /* @__PURE__ */ c(d, { className: "h-[9px] w-3 rotate-180" })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function v({
+  children: e,
+  className: n,
+  disabled: r,
+  isActive: i = !1,
+  ...s
+}) {
+  return /* @__PURE__ */ c(
+    "button",
+    {
+      className: b(
+        "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)]",
+        n
+      ),
+      disabled: r,
+      type: "button",
+      ...s,
+      children: e
+    }
+  );
+}
+function j({
+  boundaryCount: e,
+  currentPage: n,
+  siblingCount: r,
+  totalPages: i
+}) {
+  const s = e * 2 + r * 2 + 3;
+  if (i <= s)
+    return x(1, i);
+  const o = x(1, e), h = x(i - e + 1, i), m = Math.max(
+    Math.min(n - r, i - e - r * 2 - 1),
+    e + 2
+  ), p = Math.min(
+    Math.max(n + r, e + r * 2 + 2),
+    i - e - 1
+  ), a = [...o];
+  return m > e + 2 ? a.push("ellipsis") : e + 1 < i - e && a.push(e + 1), a.push(...x(m, p)), p < i - e - 1 ? a.push("ellipsis") : i - e > e && a.push(i - e), a.push(...h), a;
+}
+function x(e, n) {
+  if (n < e)
+    return [];
+  const r = [];
+  for (let i = e; i <= n; i += 1)
+    r.push(i);
+  return r;
+}
+function A(e, n, r) {
+  return Math.min(Math.max(e, n), r);
+}
+function G({
+  currentPage: e,
+  pageSize: n,
+  totalItems: r,
+  totalPages: i
+}) {
+  if (!n || !r)
+    return `${e} из ${i}`;
+  const s = (e - 1) * n + 1, o = Math.min(e * n, r);
+  return `${s}-${o} из ${r}`;
+}
+export {
+  P as Pagination
+};

package/dist/picture/picture.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { PictureProps } from './picture.types';
+/**
+ * Адаптивная обертка над HTML-элементом `picture`.
+ *
+ * Компонент принимает изображения через проектные брейкпоинты `sm`, `md`,
+ * `lg` и `xl`. Значение `sm` используется как обязательный fallback для
+ * внутреннего `img`, а остальные значения преобразуются в `source` с
+ * min-width из общего responsive-конфига ui-kit.
+ */
+export declare function Picture({ display, image, sources, ...props }: PictureProps): ReactNode;
+export type { PictureBreakpoint, PictureBreakpointSource, PictureBreakpointSources, PictureProps, } from './picture.types';

package/dist/picture/picture.helpers.d.ts

@@ -0,0 +1,9 @@
+import { SourceHTMLAttributes } from 'react';
+import { PictureBreakpoint, PictureBreakpointSource, PictureBreakpointSources } from './picture.types';
+export type PictureResolvedBreakpointSource = {
+    breakpoint: Exclude<PictureBreakpoint, 'sm'>;
+    source: PictureBreakpointSource;
+};
+export declare function buildBreakpointSources(sources: PictureBreakpointSources): PictureResolvedBreakpointSource[];
+export declare function getSourceSrcSet(source: PictureBreakpointSource): string;
+export declare function getSourceProps(source: PictureBreakpointSource): SourceHTMLAttributes<HTMLSourceElement>;

package/dist/picture/picture.types.d.ts

@@ -0,0 +1,56 @@
+import { ImgHTMLAttributes, SourceHTMLAttributes } from 'react';
+import { BoxProps } from '../box/box.types';
+/**
+ * Поддерживаемые проектные брейкпоинты для компонента `Picture`.
+ *
+ * `sm` не превращается в отдельный `source`: это базовая картинка для
+ * внутреннего `img`. Остальные брейкпоинты получают media-query из общего
+ * responsive-конфига ui-kit.
+ */
+export type PictureBreakpoint = 'sm' | 'md' | 'lg' | 'xl';
+/**
+ * Описание картинки для одного брейкпоинта.
+ *
+ * Можно передать строку, если достаточно указать только `srcSet`. В этом
+ * случае компонент добавит `type="image/webp"` по умолчанию.
+ *
+ * Можно передать объект, если нужно управлять дополнительными атрибутами
+ * `source`, например `type`, `sizes`, `width` или `height`.
+ */
+export type PictureBreakpointSource = string | (Omit<SourceHTMLAttributes<HTMLSourceElement>, 'media' | 'srcSet'> & {
+    srcSet: string;
+});
+/**
+ * Набор изображений для проектных брейкпоинтов.
+ *
+ * `sm` обязателен: он используется как fallback `src` для внутреннего `img`.
+ * `md`, `lg` и `xl` опциональны и рендерятся как `source` в порядке от
+ * большего брейкпоинта к меньшему, чтобы браузер выбрал наиболее подходящий
+ * ресурс.
+ */
+export type PictureBreakpointSources = {
+    sm: PictureBreakpointSource;
+} & Partial<Record<Exclude<PictureBreakpoint, 'sm'>, PictureBreakpointSource>>;
+/**
+ * Свойства компонента `Picture`.
+ *
+ * Компонент наследует свойства `Box`, кроме `as` и `children`: тег всегда
+ * фиксирован как `picture`, а содержимое формируется из `sources` и `image`.
+ */
+export type PictureProps = Omit<BoxProps<'picture'>, 'as' | 'children'> & {
+    /**
+     * Атрибуты для внутреннего элемента `img`.
+     *
+     * `src` задается автоматически из `sources.sm`, поэтому его нельзя передать
+     * через этот объект. `alt` лучше указывать явно; если он не передан,
+     * компонент использует пустую строку для декоративного изображения.
+     */
+    image?: Omit<ImgHTMLAttributes<HTMLImageElement>, 'src'>;
+    /**
+     * Изображения для проектных брейкпоинтов.
+     *
+     * `sm` является обязательным fallback, `md`, `lg` и `xl` подключаются через
+     * media-query, значения которых берутся из общего responsive-конфига ui-kit.
+     */
+    sources: PictureBreakpointSources;
+};

package/dist/picture.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),f=require("./box.cjs"),p=require("./responsive-style.config-B2m9jVlX.cjs");function S(e){return[...p.responsiveBreakpoints].reverse().flatMap(t=>{const i=e[t];return i?[{breakpoint:t,source:i}]:[]})}function o(e){return typeof e=="string"?e:e.srcSet}function y(e){if(typeof e!="string")return e;const t=e.split("?")[0].split("#")[0].split(".").pop()?.toLowerCase(),i={avif:"image/avif",jpeg:"image/jpeg",jpg:"image/jpeg",png:"image/png",webp:"image/webp"};return t&&i[t]?{type:i[t]}:{}}function d({display:e="block",image:t,sources:i,...c}){const{alt:a="",style:g,...u}=t??{},l=o(i.sm),m=S(i);return n.jsxs(f.Box,{...c,as:"picture",display:e,children:[m.map(({breakpoint:r,source:s})=>n.jsx("source",{...y(s),media:`(min-width: ${p.responsiveBreakpointMinWidth[r]})`,srcSet:o(s)},r)),n.jsx("img",{alt:a,src:l,style:{display:"block",height:"auto",width:"100%",...g},...u})]})}exports.Picture=d;

package/dist/picture.js

@@ -0,0 +1,55 @@
+import { jsxs as f, jsx as o } from "react/jsx-runtime";
+import { Box as u } from "./box.js";
+import { a as S, r as y } from "./responsive-style.config-DFuATrIM.js";
+function d(e) {
+  return [...S].reverse().flatMap((t) => {
+    const i = e[t];
+    return i ? [{ breakpoint: t, source: i }] : [];
+  });
+}
+function s(e) {
+  return typeof e == "string" ? e : e.srcSet;
+}
+function h(e) {
+  if (typeof e != "string")
+    return e;
+  const t = e.split("?")[0].split("#")[0].split(".").pop()?.toLowerCase(), i = {
+    avif: "image/avif",
+    jpeg: "image/jpeg",
+    jpg: "image/jpeg",
+    png: "image/png",
+    webp: "image/webp"
+  };
+  return t && i[t] ? { type: i[t] } : {};
+}
+function k({ display: e = "block", image: t, sources: i, ...p }) {
+  const { alt: a = "", style: c, ...m } = t ?? {}, g = s(i.sm), l = d(i);
+  return /* @__PURE__ */ f(u, { ...p, as: "picture", display: e, children: [
+    l.map(({ breakpoint: r, source: n }) => /* @__PURE__ */ o(
+      "source",
+      {
+        ...h(n),
+        media: `(min-width: ${y[r]})`,
+        srcSet: s(n)
+      },
+      r
+    )),
+    /* @__PURE__ */ o(
+      "img",
+      {
+        alt: a,
+        src: g,
+        style: {
+          display: "block",
+          height: "auto",
+          width: "100%",
+          ...c
+        },
+        ...m
+      }
+    )
+  ] });
+}
+export {
+  k as Picture
+};

package/dist/responsive-style.config-B2m9jVlX.cjs

@@ -0,0 +1 @@
+"use strict";const n=require("clsx"),i=require("tailwind-merge");function s(...e){return i.twMerge(n.clsx(e))}const r=["md","lg","xl"],t={md:"768px",lg:"1024px",xl:"1440px"};exports.cn=s;exports.responsiveBreakpointMinWidth=t;exports.responsiveBreakpoints=r;

package/dist/responsive-style.config-DFuATrIM.js

@@ -0,0 +1,19 @@
+import { clsx as o } from "clsx";
+import { twMerge as n } from "tailwind-merge";
+function e(...r) {
+  return n(o(r));
+}
+const p = [
+  "md",
+  "lg",
+  "xl"
+], i = {
+  md: "768px",
+  lg: "1024px",
+  xl: "1440px"
+};
+export {
+  p as a,
+  e as c,
+  i as r
+};

package/dist/responsive-style.utils-BdyoDkKg.cjs

@@ -0,0 +1 @@
+"use strict";function a(...r){return r.reduce((o,s)=>s?{colors:{...o.colors,...s.colors},typography:{...o.typography,...s.typography},vars:{...o.vars,...s.vars},md:y(o.md,s.md),lg:y(o.lg,s.lg),xl:y(o.xl,s.xl)}:o,{})}function i(r){return typeof r=="string"&&r.startsWith("--")?`var(${r})`:r}function y(r,o){if(!(!r&&!o))return{colors:{...r?.colors,...o?.colors},typography:{...r?.typography,...o?.typography},vars:{...r?.vars,...o?.vars}}}exports.mergeResponsiveStyleProps=a;exports.normalizeCssTokenValue=i;

package/dist/responsive-style.utils-D10sC561.js

@@ -0,0 +1,25 @@
+function g(...r) {
+  return r.reduce((o, a) => a ? {
+    colors: { ...o.colors, ...a.colors },
+    typography: { ...o.typography, ...a.typography },
+    vars: { ...o.vars, ...a.vars },
+    md: y(o.md, a.md),
+    lg: y(o.lg, a.lg),
+    xl: y(o.xl, a.xl)
+  } : o, {});
+}
+function i(r) {
+  return typeof r == "string" && r.startsWith("--") ? `var(${r})` : r;
+}
+function y(r, o) {
+  if (!(!r && !o))
+    return {
+      colors: { ...r?.colors, ...o?.colors },
+      typography: { ...r?.typography, ...o?.typography },
+      vars: { ...r?.vars, ...o?.vars }
+    };
+}
+export {
+  g as m,
+  i as n
+};

package/dist/select/select.d.ts

@@ -0,0 +1,55 @@
+import { ButtonHTMLAttributes, JSX, ReactNode, SelectHTMLAttributes } from 'react';
+import { SelectDropdownBoxProps, SelectOption, SelectTriggerBoxProps } from './select.types';
+export type { SelectOption } from './select.types';
+export interface SelectTriggerRenderProps {
+    displayValue: ReactNode;
+    isOpen: boolean;
+    isPlaceholder: boolean;
+    selectedOption: SelectOption | undefined;
+    selectedValue: string;
+}
+export interface SelectTriggerSlotProps extends SelectTriggerRenderProps {
+    defaultTrigger: ReactNode;
+    triggerProps: ButtonHTMLAttributes<HTMLButtonElement> & {
+        className: string;
+        fullWidth: true;
+        type: 'button';
+        variant: 'secondary';
+    };
+}
+export interface SelectOptionRenderProps {
+    defaultOption: ReactNode;
+    isDisabled: boolean;
+    isSelected: boolean;
+    option: SelectOption;
+    optionProps: ButtonHTMLAttributes<HTMLButtonElement>;
+}
+export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'children' | 'size'> {
+    /** Альтернативный способ передать пункты через native `<option>`. */
+    children?: ReactNode;
+    /** Размеры и фон dropdown-панели через Box responsive props. */
+    dropdownBoxProps?: SelectDropdownBoxProps;
+    /** Переводит select в состояние ошибки. */
+    error?: boolean;
+    /** Текст ошибки. Показывается под select и окрашивается в danger-токен. */
+    errorMessage?: ReactNode;
+    /** Подсказка под select, показывается когда нет `errorMessage`. */
+    helperText?: ReactNode;
+    /** Label над select. */
+    label?: ReactNode;
+    /** Callback с новым значением без synthetic event. */
+    onValueChange?: (value: string) => void;
+    /** Список пунктов select. */
+    options?: SelectOption[];
+    /** Текст, который показывается когда значение не выбрано. */
+    placeholder?: string;
+    /** Полная замена option-рендера. Получает готовые optionProps и defaultOption. */
+    renderOption?: (props: SelectOptionRenderProps) => ReactNode;
+    /** Полная замена trigger-рендера. Получает готовые triggerProps и defaultTrigger. */
+    renderTrigger?: (props: SelectTriggerSlotProps) => ReactNode;
+    /** Кастомное содержимое trigger-кнопки или render-функция для полного контроля над ним. */
+    trigger?: ReactNode | ((props: SelectTriggerRenderProps) => ReactNode);
+    /** Размеры trigger-кнопки через Box responsive props. */
+    triggerBoxProps?: SelectTriggerBoxProps;
+}
+export declare function Select({ className, defaultValue, disabled, dropdownBoxProps, error, errorMessage, helperText, id, label, name, onChange, onValueChange, options, placeholder, renderOption, renderTrigger, required, trigger, triggerBoxProps, value, children, ...props }: SelectProps): JSX.Element;

package/dist/select/select.helpers.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import { SelectOption } from './select.types';
+/**
+ * Приводит варианты select к единому внутреннему формату.
+ *
+ * Компонент поддерживает два способа задания пунктов:
+ * - через prop `options`;
+ * - через native `<option>` в `children`.
+ *
+ * Если `options` передан явно, он считается главным источником данных. Если
+ * нет, helper читает React children, оставляет только валидные элементы с
+ * `value` и собирает из них `SelectOption`.
+ */
+export declare function normalizeOptions(options: SelectOption[] | undefined, children: ReactNode): SelectOption[];

package/dist/select/select.types.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { BoxProps } from '../box/box.types';
+export type SelectTriggerBoxProps = Pick<BoxProps, 'width' | 'maxWidth' | 'minWidth' | 'height' | 'maxHeight' | 'minHeight' | 'md' | 'lg' | 'xl'>;
+export type SelectDropdownBoxProps = Pick<BoxProps, 'width' | 'maxWidth' | 'minWidth' | 'height' | 'maxHeight' | 'minHeight' | 'background' | 'backgroundColor' | 'md' | 'lg' | 'xl'>;
+export interface SelectOption {
+    /** Отключает конкретный пункт списка. */
+    disabled?: boolean;
+    /** Видимый текст или React-содержимое пункта. */
+    label: ReactNode;
+    /** Значение, которое попадет в форму и callback при выборе пункта. */
+    value: string;
+}

package/dist/select.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),n=require("react"),L=require("./box.cjs"),X=require("./button.cjs"),u=require("./responsive-style.config-B2m9jVlX.cjs"),p=require("./typography.cjs");function Y(l,x){return l||n.Children.toArray(x).flatMap(r=>{if(!n.isValidElement(r))return[];const s=r.props.value;return s===void 0?[]:[{disabled:r.props.disabled,label:r.props.children??s,value:s}]})}function Z({className:l,defaultValue:x,disabled:r=!1,dropdownBoxProps:s,error:j=!1,errorMessage:w,helperText:M,id:V,label:N,name:f,onChange:S,onValueChange:W,options:O,placeholder:b,renderOption:k,renderTrigger:q,required:A,trigger:v,triggerBoxProps:D,value:o,children:C,..._}){const G=n.useId(),h=V??G,P=n.useRef(null),[i,m]=n.useState(!1),[J,K]=n.useState(()=>String(x??o??"")),T=w??M,c=n.useMemo(()=>Y(O,C),[O,C]),d=o!==void 0?String(o):J,y=c.find(e=>e.value===d),I=y?.label??b,R=!y,B={displayValue:I,isOpen:i,isPlaceholder:R,selectedOption:y,selectedValue:d},Q=typeof v=="function"?v(B):v;n.useEffect(()=>{function e(a){P.current?.contains(a.target)||m(!1)}return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[]);function U(e){const a=c.find(g=>g.value===e);!a||a.disabled||r||(o===void 0&&K(e),W?.(e),S?.({currentTarget:{name:f,value:e},target:{name:f,value:e}}),m(!1))}const E={"aria-expanded":i,"aria-haspopup":"listbox","aria-invalid":j||_["aria-invalid"],className:u.cn("h-full min-h-0 min-w-0 justify-between border border-transparent px-[16px] py-[12px] text-left",j&&"border-[var(--color-secondary-accent-2)] focus-visible:ring-[var(--color-secondary-accent-2)]",l),disabled:r,fullWidth:!0,id:h,type:"button",variant:"secondary",onClick:()=>m(e=>!e)},z=t.jsx(X.Button,{...E,children:Q??t.jsxs(t.Fragment,{children:[t.jsx(p.Typography,{as:"span",className:u.cn("min-w-[0px] truncate",R&&"text-[var(--color-text-secondary)]"),variant:"b3",children:I}),t.jsx("span",{className:"relative size-[16px] shrink-0 text-[var(--color-text-primary)]",children:t.jsx("span",{className:u.cn("absolute left-1/2 top-1/2 h-[8px] w-[8px] -translate-x-1/2 -translate-y-[65%] rotate-45 border-b border-r border-current transition-transform",i&&"translate-y-[-35%] rotate-[225deg]")})})]})});return t.jsxs("div",{className:"grid w-full gap-[8px]",ref:P,children:[N?t.jsx(p.Typography,{as:"label",color:"--color-text-secondary",htmlFor:h,variant:"b2",children:N}):null,t.jsxs("div",{className:"relative w-full",children:[t.jsx(L.Box,{minHeight:42,width:"100%",...D,children:q?q({...B,defaultTrigger:z,triggerProps:E}):z}),i&&!r?t.jsx(L.Box,{backgroundColor:"--color-background-default",className:"absolute left-0 top-full z-50 mt-[8px] flex overflow-hidden rounded-[8px] p-[8px] shadow-md",maxHeight:220,minWidth:214,width:"100%",...s,children:t.jsx("div",{className:"grid max-h-[204px] flex-1 gap-[0px] overflow-y-auto pr-[4px]",role:"listbox","aria-labelledby":h,children:c.map(e=>{const a=e.value===d,g=!!e.disabled,F={"aria-selected":a,className:u.cn("flex min-h-[45px] w-full items-center rounded-[8px] px-[16px] py-[12px] text-left transition-colors hover:bg-[var(--color-background-subtle)] disabled:pointer-events-none disabled:opacity-50",a&&"bg-[var(--color-background-subtle)]"),disabled:e.disabled,role:"option",type:"button",onClick:()=>U(e.value)},H=t.jsx("button",{...F,children:t.jsx(p.Typography,{as:"span",className:"min-w-[0px] truncate",variant:"b2",children:e.label})});return t.jsx(n.Fragment,{children:k?k({defaultOption:H,isDisabled:g,isSelected:a,option:e,optionProps:F}):H},e.value)})})}):null,t.jsxs("select",{"aria-hidden":"true",className:"sr-only",disabled:r,name:f,required:A,tabIndex:-1,value:d,onChange:S??(()=>{}),children:[b?t.jsx("option",{value:"",children:b}):null,c.map(e=>t.jsx("option",{disabled:e.disabled,value:e.value,children:e.label},e.value))]})]}),T?t.jsx(p.Typography,{color:w?"--color-secondary-accent-2":"--color-text-secondary",variant:"b3",children:T}):null]})}exports.Select=Z;

package/dist/select.js

@@ -0,0 +1,179 @@
+import { jsx as t, jsxs as d, Fragment as Y } from "react/jsx-runtime";
+import { Children as Z, isValidElement as _, useId as ee, useRef as te, useState as V, useMemo as re, useEffect as ae, Fragment as ne } from "react";
+import { Box as W } from "./box.js";
+import { Button as le } from "./button.js";
+import { c as u } from "./responsive-style.config-DFuATrIM.js";
+import { Typography as p } from "./typography.js";
+function oe(l, f) {
+  return l || Z.toArray(f).flatMap((r) => {
+    if (!_(r))
+      return [];
+    const n = r.props.value;
+    return n === void 0 ? [] : [
+      {
+        disabled: r.props.disabled,
+        label: r.props.children ?? n,
+        value: n
+      }
+    ];
+  });
+}
+function fe({
+  className: l,
+  defaultValue: f,
+  disabled: r = !1,
+  dropdownBoxProps: n,
+  error: w = !1,
+  errorMessage: N,
+  helperText: A,
+  id: D,
+  label: k,
+  name: m,
+  onChange: O,
+  onValueChange: M,
+  options: C,
+  placeholder: b,
+  renderOption: S,
+  renderTrigger: I,
+  required: $,
+  trigger: v,
+  triggerBoxProps: q,
+  value: o,
+  children: P,
+  ...G
+}) {
+  const J = ee(), x = D ?? J, E = te(null), [s, h] = V(!1), [K, Q] = V(
+    () => String(f ?? o ?? "")
+  ), F = N ?? A, i = re(() => oe(C, P), [C, P]), c = o !== void 0 ? String(o) : K, g = i.find((e) => e.value === c), j = g?.label ?? b, z = !g, B = {
+    displayValue: j,
+    isOpen: s,
+    isPlaceholder: z,
+    selectedOption: g,
+    selectedValue: c
+  }, U = typeof v == "function" ? v(B) : v;
+  ae(() => {
+    function e(a) {
+      E.current?.contains(a.target) || h(!1);
+    }
+    return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+  }, []);
+  function X(e) {
+    const a = i.find((y) => y.value === e);
+    !a || a.disabled || r || (o === void 0 && Q(e), M?.(e), O?.({
+      currentTarget: { name: m, value: e },
+      target: { name: m, value: e }
+    }), h(!1));
+  }
+  const R = {
+    "aria-expanded": s,
+    "aria-haspopup": "listbox",
+    "aria-invalid": w || G["aria-invalid"],
+    className: u(
+      "h-full min-h-0 min-w-0 justify-between border border-transparent px-[16px] py-[12px] text-left",
+      w && "border-[var(--color-secondary-accent-2)] focus-visible:ring-[var(--color-secondary-accent-2)]",
+      l
+    ),
+    disabled: r,
+    fullWidth: !0,
+    id: x,
+    type: "button",
+    variant: "secondary",
+    onClick: () => h((e) => !e)
+  }, H = /* @__PURE__ */ t(le, { ...R, children: U ?? /* @__PURE__ */ d(Y, { children: [
+    /* @__PURE__ */ t(
+      p,
+      {
+        as: "span",
+        className: u(
+          "min-w-[0px] truncate",
+          z && "text-[var(--color-text-secondary)]"
+        ),
+        variant: "b3",
+        children: j
+      }
+    ),
+    /* @__PURE__ */ t("span", { className: "relative size-[16px] shrink-0 text-[var(--color-text-primary)]", children: /* @__PURE__ */ t(
+      "span",
+      {
+        className: u(
+          "absolute left-1/2 top-1/2 h-[8px] w-[8px] -translate-x-1/2 -translate-y-[65%] rotate-45 border-b border-r border-current transition-transform",
+          s && "translate-y-[-35%] rotate-[225deg]"
+        )
+      }
+    ) })
+  ] }) });
+  return /* @__PURE__ */ d("div", { className: "grid w-full gap-[8px]", ref: E, children: [
+    k ? /* @__PURE__ */ t(p, { as: "label", color: "--color-text-secondary", htmlFor: x, variant: "b2", children: k }) : null,
+    /* @__PURE__ */ d("div", { className: "relative w-full", children: [
+      /* @__PURE__ */ t(W, { minHeight: 42, width: "100%", ...q, children: I ? I({ ...B, defaultTrigger: H, triggerProps: R }) : H }),
+      s && !r ? /* @__PURE__ */ t(
+        W,
+        {
+          backgroundColor: "--color-background-default",
+          className: "absolute left-0 top-full z-50 mt-[8px] flex overflow-hidden rounded-[8px] p-[8px] shadow-md",
+          maxHeight: 220,
+          minWidth: 214,
+          width: "100%",
+          ...n,
+          children: /* @__PURE__ */ t(
+            "div",
+            {
+              className: "grid max-h-[204px] flex-1 gap-[0px] overflow-y-auto pr-[4px]",
+              role: "listbox",
+              "aria-labelledby": x,
+              children: i.map((e) => {
+                const a = e.value === c, y = !!e.disabled, L = {
+                  "aria-selected": a,
+                  className: u(
+                    "flex min-h-[45px] w-full items-center rounded-[8px] px-[16px] py-[12px] text-left transition-colors hover:bg-[var(--color-background-subtle)] disabled:pointer-events-none disabled:opacity-50",
+                    a && "bg-[var(--color-background-subtle)]"
+                  ),
+                  disabled: e.disabled,
+                  role: "option",
+                  type: "button",
+                  onClick: () => X(e.value)
+                }, T = /* @__PURE__ */ t("button", { ...L, children: /* @__PURE__ */ t(p, { as: "span", className: "min-w-[0px] truncate", variant: "b2", children: e.label }) });
+                return /* @__PURE__ */ t(ne, { children: S ? S({
+                  defaultOption: T,
+                  isDisabled: y,
+                  isSelected: a,
+                  option: e,
+                  optionProps: L
+                }) : T }, e.value);
+              })
+            }
+          )
+        }
+      ) : null,
+      /* @__PURE__ */ d(
+        "select",
+        {
+          "aria-hidden": "true",
+          className: "sr-only",
+          disabled: r,
+          name: m,
+          required: $,
+          tabIndex: -1,
+          value: c,
+          onChange: O ?? (() => {
+          }),
+          children: [
+            b ? /* @__PURE__ */ t("option", { value: "", children: b }) : null,
+            i.map((e) => /* @__PURE__ */ t("option", { disabled: e.disabled, value: e.value, children: e.label }, e.value))
+          ]
+        }
+      )
+    ] }),
+    F ? /* @__PURE__ */ t(
+      p,
+      {
+        color: N ? "--color-secondary-accent-2" : "--color-text-secondary",
+        variant: "b3",
+        children: F
+      }
+    ) : null
+  ] });
+}
+export {
+  fe as Select
+};

package/dist/shared/lib/cn.d.ts

@@ -0,0 +1,2 @@
+import { ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/shared/responsive-style/responsive-style.config.d.ts

@@ -0,0 +1,20 @@
+import { ResponsiveStyleBreakpoint } from './responsive-style.types';
+export type ResponsiveBreakpointMinWidth = Record<ResponsiveStyleBreakpoint, string>;
+/**
+ * Единый порядок responsive breakpoints для всего ui-kit.
+ *
+ * Важно для разработчика и ИИ: не заводить локальные массивы breakpoint-ов
+ * внутри компонентов. Все компоненты, которые генерируют responsive CSS, должны
+ * использовать этот список, чтобы cascade и порядок media queries были одинаковыми.
+ */
+export declare const responsiveBreakpoints: readonly ["md", "lg", "xl"];
+/**
+ * Единые min-width значения breakpoint-ов для всего ui-kit.
+ *
+ * Если дизайн-система меняет пороги адаптива, править нужно только этот объект.
+ */
+export declare const responsiveBreakpointMinWidth: {
+    readonly md: "768px";
+    readonly lg: "1024px";
+    readonly xl: "1440px";
+};