@shmidko61/lc-ui-kit 0.0.1

package/README.md

@@ -0,0 +1,38 @@
+# @shmidko61/lc-ui-kit
+
+Переиспользуемый React UI kit для LC-приложений.
+
+## Установка
+
+```bash
+pnpm add @shmidko61/lc-ui-kit
+```
+
+## Подключение стилей
+
+```tsx
+import '@shmidko61/lc-ui-kit/styles.css';
+```
+
+## Импорты
+
+В React Server Components импортируйте компоненты через subpath exports:
+
+```tsx
+import { Picture } from '@shmidko61/lc-ui-kit/picture';
+import { Typography } from '@shmidko61/lc-ui-kit/typography';
+```
+
+Root import удобен в client-only модулях, Storybook, тестах или приложениях без RSC:
+
+```tsx
+'use client';
+
+import { Button, Select } from '@shmidko61/lc-ui-kit';
+```
+
+В Next.js App Router не используйте `import { Component } from '@shmidko61/lc-ui-kit'`
+в server component: root export содержит и server-safe, и client-only компоненты,
+поэтому может потянуть `createContext`, `useState` или event handlers в RSC-граф.
+
+Примеры по компонентам: [docs/component-usage.md](./docs/component-usage.md).

package/dist/accordion/accordion-context.d.ts

@@ -0,0 +1,3 @@
+import { DisclosureGroupState } from 'react-stately/useDisclosureGroupState';
+export declare const AccordionContext: import('react').Context<DisclosureGroupState | null>;
+export declare function useAccordionContext(): DisclosureGroupState;

package/dist/accordion/accordion-item.d.ts

@@ -0,0 +1,48 @@
+import { ComponentType, JSX, PropsWithChildren, ReactNode } from 'react';
+import { BoxProps } from '../box/box';
+type AccordionItemHeaderProps = Omit<Partial<BoxProps<'button'>>, 'as' | 'children' | 'disabled' | 'display' | 'id' | 'role' | 'title' | 'type'>;
+type AccordionItemBoxProps = Omit<Partial<BoxProps>, 'as' | 'children'>;
+type AccordionItemContentProps = Omit<Partial<BoxProps>, 'as' | 'children' | 'id' | 'role'>;
+type AccordionIndicatorProps = Omit<Partial<BoxProps<'span'>>, 'as' | 'children'>;
+export type AccordionItemRenderProps = {
+    /** Содержимое заголовка item. */
+    children: ReactNode;
+};
+export type AccordionItemProps = PropsWithChildren<AccordionItemHeaderProps & {
+    /** Уникальный id item для controlled-состояния `expandedKeys`. */
+    id?: string | number;
+    /** Заголовок раскрываемого блока. */
+    title: ReactNode;
+    /** Дополнительная строка под заголовком. */
+    subtitle?: ReactNode;
+    /** Контент перед текстом заголовка: иконка, номер, маркер. */
+    leading?: ReactNode;
+    /** Контент между текстом и indicator: badge, статус, счетчик. */
+    trailing?: ReactNode;
+    /** Кастомный indicator справа. */
+    indicator?: ReactNode;
+    /** Props wrapper-а indicator справа: размер, фон, border, className и style. */
+    indicatorProps?: AccordionIndicatorProps;
+    /** Скрывает indicator, если раскрытие показывается другим элементом. */
+    hideIndicator?: boolean;
+    /** Отключает конкретный item. */
+    isDisabled?: boolean;
+    /** Controlled-состояние конкретного item поверх group state. */
+    isExpanded?: boolean;
+    /** Callback изменения состояния конкретного item. */
+    onToggle?: (isExpanded: boolean) => void;
+    /** Визуальный вариант заголовка. */
+    variant?: 'primary' | 'secondary';
+    /** Визуальная поверхность item: card задает общий фон, plain оставляет старый прозрачный контейнер. */
+    surface?: 'card' | 'plain';
+    /** Длительность анимации panel в ms. */
+    duration?: number;
+    /** Кастомная раскладка содержимого заголовка. */
+    headingWrapper?: ComponentType<AccordionItemRenderProps>;
+    /** Props внешнего контейнера item. */
+    itemProps?: AccordionItemBoxProps;
+    /** Props panel с раскрываемым контентом. */
+    contentProps?: AccordionItemContentProps;
+}>;
+export declare function AccordionItem({ children, className, contentProps, duration, headingWrapper: HeadingWrapper, hideIndicator, id, indicator, indicatorProps, isDisabled, isExpanded, itemProps, leading, onToggle, subtitle, surface, title, trailing, variant, ...headerProps }: AccordionItemProps): JSX.Element;
+export {};

package/dist/accordion/accordion-root.d.ts

@@ -0,0 +1,5 @@
+import { JSX, PropsWithChildren } from 'react';
+import { DisclosureGroupProps } from 'react-stately/useDisclosureGroupState';
+import { FlexProps } from '../flex/flex';
+export type AccordionProps = PropsWithChildren<DisclosureGroupProps & Omit<FlexProps, 'children' | 'defaultValue' | 'onChange'>>;
+export declare function AccordionRoot({ allowsMultipleExpanded, children, defaultExpandedKeys, expandedKeys, isDisabled, onExpandedChange, ...props }: AccordionProps): JSX.Element;

package/dist/accordion/accordion.d.ts

@@ -0,0 +1,8 @@
+import { AccordionItem } from './accordion-item';
+import { AccordionRoot } from './accordion-root';
+export declare const Accordion: typeof AccordionRoot & {
+    Item: typeof AccordionItem;
+};
+export { AccordionItem, AccordionRoot };
+export type { AccordionItemProps } from './accordion-item';
+export type { AccordionProps } from './accordion-root';

package/dist/accordion.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("react"),j=require("react-aria"),P=require("react-stately/useDisclosureState"),n=require("./box.cjs"),l=require("./flex.cjs"),ee=require("./drop-down-CdIuWbLC.cjs"),u=require("./responsive-style.config-B2m9jVlX.cjs"),E=require("./typography.cjs"),te=require("react-stately/useDisclosureGroupState"),R=i.createContext(null);function ne(){const t=i.useContext(R);if(!t)throw new Error("Accordion.Item должен использоваться внутри Accordion.");return t}function se({children:t}){return e.jsx(l.Flex,{align:"center",gap:16,justify:"space-between",width:"100%",children:t})}function k({children:t,className:x,contentProps:a,duration:d=200,headingWrapper:p=se,hideIndicator:g=!1,id:f,indicator:y,indicatorProps:s,isDisabled:I=!1,isExpanded:_,itemProps:r,leading:w,onToggle:F,subtitle:S,surface:m="card",title:W,trailing:D,variant:N="primary",...b}){const G=i.useId(),h=f??G,v=ne(),K=String(h),T=v.expandedKeys.has(h),O=_??T,c=v.isDisabled||I,A=i.useRef(null),B=i.useRef(null),o=P.useDisclosureState({isExpanded:O,onExpandedChange:Z=>{c||(v.toggleKey(h),F?.(Z))}}),{buttonProps:Y,panelProps:q}=j.useDisclosure({isDisabled:c},o,A),{buttonProps:$}=j.useButton(Y,B),z=a?.className,H=a?.style,M=q.style,J=r?.bg??(m==="card"?"--color-background-default":void 0),L=m==="card"?{radius:"16px",style:"none",width:"0",...r?.border}:r?.border,Q=r?.className,U=r?.style,V=b.style,X={...M,height:"var(--disclosure-panel-height)",opacity:o.isExpanded?1:0,transitionDuration:`${d}ms`,...H};return e.jsxs(n.Box,{"data-disabled":c||void 0,"data-state":o.isExpanded?"open":"closed","data-value":K,...r,bg:J,border:L,className:u.cn("grid min-w-0",m==="card"?"gap-0 overflow-hidden":"gap-[24px]",c&&"opacity-50",Q),style:U,children:[e.jsx(n.Box,{...j.mergeProps($,b),as:"button",border:{radius:"16px",style:"none",width:"0",...b.border},className:u.cn("group/accordion-trigger w-full text-left outline-none transition-colors disabled:cursor-not-allowed","focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--color-primary-accent)_35%,transparent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-background-default)]",N==="primary"&&"bg-[var(--color-background-default)]",N==="secondary"&&"bg-transparent",x),cursor:c?"not-allowed":"pointer","data-state":o.isExpanded?"open":"closed",p:24,ref:B,style:V,type:"button",children:e.jsxs(p,{children:[e.jsxs(l.Flex,{align:"center",gap:16,minWidth:0,children:[w?e.jsx(n.Box,{as:"span",className:"flex shrink-0 items-center justify-center text-[var(--color-text-primary)] [&_svg]:size-[20px]",children:w}):null,e.jsxs(l.Flex,{flexDirection:"column",gap:8,minWidth:0,children:[e.jsx(E.Typography,{as:"span",className:"truncate",variant:"h4",children:W}),S?e.jsx(E.Typography,{as:"span",className:"truncate",color:"--color-text-secondary",variant:"b2",children:S}):null]})]}),e.jsxs(l.Flex,{align:"center",gap:12,shrink:0,children:[D?e.jsx(n.Box,{as:"span",children:D}):null,g?null:e.jsx(n.Box,{...s,as:"span",bg:s?.bg??"--color-background-default",border:s?.border??{radius:"8px"},style:s?.style,className:u.cn(s?"flex items-center justify-center":"flex min-h-[41px] min-w-[41px] items-center justify-center text-[var(--color-text-primary)] transition-colors group-hover/accordion-trigger:bg-[color-mix(in_srgb,var(--color-background-default)_90%,#000)]",s?.className),children:y??e.jsx(ee.SvgDropDown,{"aria-hidden":"true",className:"h-[12px] w-[12px] transition-transform",style:{transform:o.isExpanded?"translateY(-2px) rotate(180deg)":"translateY(2px) rotate(0deg)",transitionDuration:`${d}ms`}})})]})]})}),e.jsx(n.Box,{...q,...a,className:u.cn("overflow-hidden text-[var(--color-text-secondary)] transition-[height,opacity]",z),"data-state":o.isExpanded?"open":"closed",ref:A,style:X,children:e.jsx(n.Box,{p:{px:24,pb:24},children:t})})]})}function C({allowsMultipleExpanded:t=!1,children:x,defaultExpandedKeys:a,expandedKeys:d,isDisabled:p=!1,onExpandedChange:g,...f}){const y=te.useDisclosureGroupState({allowsMultipleExpanded:t,defaultExpandedKeys:a,expandedKeys:d,isDisabled:p,onExpandedChange:g});return e.jsx(R.Provider,{value:y,children:e.jsx(l.Flex,{flexDirection:"column",gap:24,width:"100%",...f,children:x})})}const re=Object.assign(C,{Item:k});exports.Accordion=re;exports.AccordionItem=k;exports.AccordionRoot=C;

package/dist/accordion.js

@@ -0,0 +1,206 @@
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import { createContext as X, useContext as Z, useId as P, useRef as k } from "react";
+import { useDisclosure as ee, useButton as te, mergeProps as re } from "react-aria";
+import { useDisclosureState as oe } from "react-stately/useDisclosureState";
+import { Box as r } from "./box.js";
+import { Flex as l } from "./flex.js";
+import { S as ne } from "./drop-down-DH2_3qXq.js";
+import { c as u } from "./responsive-style.config-DFuATrIM.js";
+import { Typography as C } from "./typography.js";
+import { useDisclosureGroupState as se } from "react-stately/useDisclosureGroupState";
+const B = X(null);
+function ae() {
+  const t = Z(B);
+  if (!t)
+    throw new Error("Accordion.Item должен использоваться внутри Accordion.");
+  return t;
+}
+function ie({
+  children: t
+}) {
+  return /* @__PURE__ */ e(l, { align: "center", gap: 16, justify: "space-between", width: "100%", children: t });
+}
+function ce({
+  children: t,
+  className: p,
+  contentProps: a,
+  duration: d = 200,
+  headingWrapper: m = ie,
+  hideIndicator: f = !1,
+  id: g,
+  indicator: x,
+  indicatorProps: o,
+  isDisabled: I = !1,
+  isExpanded: _,
+  itemProps: n,
+  leading: w,
+  onToggle: R,
+  subtitle: N,
+  surface: y = "card",
+  title: W,
+  trailing: D,
+  variant: S = "primary",
+  ...b
+}) {
+  const K = P(), h = g ?? K, v = ae(), G = String(h), Y = v.expandedKeys.has(h), $ = _ ?? Y, i = v.isDisabled || I, A = k(null), E = k(null), s = oe({
+    isExpanded: $,
+    onExpandedChange: (V) => {
+      i || (v.toggleKey(h), R?.(V));
+    }
+  }), { buttonProps: z, panelProps: j } = ee(
+    { isDisabled: i },
+    s,
+    A
+  ), { buttonProps: F } = te(z, E), H = a?.className, O = a?.style, T = j.style, q = n?.bg ?? (y === "card" ? "--color-background-default" : void 0), J = y === "card" ? {
+    radius: "16px",
+    style: "none",
+    width: "0",
+    ...n?.border
+  } : n?.border, L = n?.className, M = n?.style, Q = b.style, U = {
+    ...T,
+    height: "var(--disclosure-panel-height)",
+    opacity: s.isExpanded ? 1 : 0,
+    transitionDuration: `${d}ms`,
+    ...O
+  };
+  return /* @__PURE__ */ c(
+    r,
+    {
+      "data-disabled": i || void 0,
+      "data-state": s.isExpanded ? "open" : "closed",
+      "data-value": G,
+      ...n,
+      bg: q,
+      border: J,
+      className: u(
+        "grid min-w-0",
+        y === "card" ? "gap-0 overflow-hidden" : "gap-[24px]",
+        i && "opacity-50",
+        L
+      ),
+      style: M,
+      children: [
+        /* @__PURE__ */ e(
+          r,
+          {
+            ...re(F, b),
+            as: "button",
+            border: {
+              radius: "16px",
+              style: "none",
+              width: "0",
+              ...b.border
+            },
+            className: u(
+              "group/accordion-trigger w-full text-left outline-none transition-colors disabled:cursor-not-allowed",
+              "focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--color-primary-accent)_35%,transparent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-background-default)]",
+              S === "primary" && "bg-[var(--color-background-default)]",
+              S === "secondary" && "bg-transparent",
+              p
+            ),
+            cursor: i ? "not-allowed" : "pointer",
+            "data-state": s.isExpanded ? "open" : "closed",
+            p: 24,
+            ref: E,
+            style: Q,
+            type: "button",
+            children: /* @__PURE__ */ c(m, { children: [
+              /* @__PURE__ */ c(l, { align: "center", gap: 16, minWidth: 0, children: [
+                w ? /* @__PURE__ */ e(
+                  r,
+                  {
+                    as: "span",
+                    className: "flex shrink-0 items-center justify-center text-[var(--color-text-primary)] [&_svg]:size-[20px]",
+                    children: w
+                  }
+                ) : null,
+                /* @__PURE__ */ c(l, { flexDirection: "column", gap: 8, minWidth: 0, children: [
+                  /* @__PURE__ */ e(C, { as: "span", className: "truncate", variant: "h4", children: W }),
+                  N ? /* @__PURE__ */ e(
+                    C,
+                    {
+                      as: "span",
+                      className: "truncate",
+                      color: "--color-text-secondary",
+                      variant: "b2",
+                      children: N
+                    }
+                  ) : null
+                ] })
+              ] }),
+              /* @__PURE__ */ c(l, { align: "center", gap: 12, shrink: 0, children: [
+                D ? /* @__PURE__ */ e(r, { as: "span", children: D }) : null,
+                f ? null : /* @__PURE__ */ e(
+                  r,
+                  {
+                    ...o,
+                    as: "span",
+                    bg: o?.bg ?? "--color-background-default",
+                    border: o?.border ?? { radius: "8px" },
+                    style: o?.style,
+                    className: u(
+                      o ? "flex items-center justify-center" : "flex min-h-[41px] min-w-[41px] items-center justify-center text-[var(--color-text-primary)] transition-colors group-hover/accordion-trigger:bg-[color-mix(in_srgb,var(--color-background-default)_90%,#000)]",
+                      o?.className
+                    ),
+                    children: x ?? /* @__PURE__ */ e(
+                      ne,
+                      {
+                        "aria-hidden": "true",
+                        className: "h-[12px] w-[12px] transition-transform",
+                        style: {
+                          transform: s.isExpanded ? "translateY(-2px) rotate(180deg)" : "translateY(2px) rotate(0deg)",
+                          transitionDuration: `${d}ms`
+                        }
+                      }
+                    )
+                  }
+                )
+              ] })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ e(
+          r,
+          {
+            ...j,
+            ...a,
+            className: u(
+              "overflow-hidden text-[var(--color-text-secondary)] transition-[height,opacity]",
+              H
+            ),
+            "data-state": s.isExpanded ? "open" : "closed",
+            ref: A,
+            style: U,
+            children: /* @__PURE__ */ e(r, { p: { px: 24, pb: 24 }, children: t })
+          }
+        )
+      ]
+    }
+  );
+}
+function le({
+  allowsMultipleExpanded: t = !1,
+  children: p,
+  defaultExpandedKeys: a,
+  expandedKeys: d,
+  isDisabled: m = !1,
+  onExpandedChange: f,
+  ...g
+}) {
+  const x = se({
+    allowsMultipleExpanded: t,
+    defaultExpandedKeys: a,
+    expandedKeys: d,
+    isDisabled: m,
+    onExpandedChange: f
+  });
+  return /* @__PURE__ */ e(B.Provider, { value: x, children: /* @__PURE__ */ e(l, { flexDirection: "column", gap: 24, width: "100%", ...g, children: p }) });
+}
+const ve = Object.assign(le, {
+  Item: ce
+});
+export {
+  ve as Accordion,
+  ce as AccordionItem,
+  le as AccordionRoot
+};

package/dist/arrow-CS6d64Y4.cjs

@@ -0,0 +1 @@
+"use strict";const o=require("react");function a(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:()=>e[t]})}}return r.default=e,Object.freeze(r)}const c=a(o),l=e=>c.createElement("svg",{width:12,height:9,viewBox:"0 0 12 9",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},c.createElement("path",{d:"M1.56962 3.90496L4.45882 1.01583C4.69121 0.783451 4.69121 0.406671 4.45882 0.174287C4.22644 -0.0580963 3.84966 -0.0580963 3.61727 0.174287L0.501241 3.29032C-0.166871 3.95843 -0.16687 5.04157 0.501241 5.70968L3.61727 8.82572C3.84966 9.05809 4.22644 9.05809 4.45882 8.82572C4.69121 8.59334 4.69121 8.21658 4.45882 7.9842L1.56962 5.09504L10.5153 5.09504C10.8439 5.09504 11.1104 4.82862 11.1104 4.5C11.1104 4.17138 10.8439 3.90496 10.5153 3.90496L1.56962 3.90496Z",fill:"#152237"}));exports.SvgArrow=l;

package/dist/arrow-DBc2opRL.js

@@ -0,0 +1,5 @@
+import * as e from "react";
+const o = (t) => /* @__PURE__ */ e.createElement("svg", { width: 12, height: 9, viewBox: "0 0 12 9", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("path", { d: "M1.56962 3.90496L4.45882 1.01583C4.69121 0.783451 4.69121 0.406671 4.45882 0.174287C4.22644 -0.0580963 3.84966 -0.0580963 3.61727 0.174287L0.501241 3.29032C-0.166871 3.95843 -0.16687 5.04157 0.501241 5.70968L3.61727 8.82572C3.84966 9.05809 4.22644 9.05809 4.45882 8.82572C4.69121 8.59334 4.69121 8.21658 4.45882 7.9842L1.56962 5.09504L10.5153 5.09504C10.8439 5.09504 11.1104 4.82862 11.1104 4.5C11.1104 4.17138 10.8439 3.90496 10.5153 3.90496L1.56962 3.90496Z", fill: "#152237" }));
+export {
+  o as S
+};

package/dist/box/box.d.ts

@@ -0,0 +1,7 @@
+import { JSX, Ref } from 'react';
+import { BoxAs, BoxProps } from './box.types';
+export declare const Box: <TAs extends BoxAs = "div">(props: BoxProps<TAs> & {
+    ref?: Ref<Element>;
+}) => JSX.Element;
+export type { BoxAs, BoxBackgroundValue, BoxBreakpointProps, BoxProps } from './box.types';
+export type { BorderRadiusItem, BorderRadiusKeys, BorderRadiusSides, BorderWidthItem, BorderWidthSides, PositionValue, UiKitAnyIndentationMargin, UiKitAnyIndentationPadding, UiKitArrayIndentation, UiKitAxisIndentationMargin, UiKitAxisIndentationPadding, UiKitDimensionProps, UiKitIndentations, UiKitIndentationsProps, UiKitMarginArrayIndentation, UiKitMarginIndentation, UiKitBackgroundProps, UiKitBorderColor, UiKitBorderProps, UiKitBorderRadius, UiKitBorderWidth, UiKitCursorProps, UiKitDisplayProps, UiKitListStyleProps, UiKitMixedXAxisIndentationMargin, UiKitMixedXAxisIndentationPadding, UiKitMixedYAxisIndentationMargin, UiKitMixedYAxisIndentationPadding, UiKitOutlineProps, UiKitPositionProps, } from '../types';

package/dist/box/box.helpers.d.ts

@@ -0,0 +1,11 @@
+import { CSSProperties } from 'react';
+import { ResponsiveStyleBreakpoint } from '../shared/responsive-style/responsive-style.types';
+import { BoxBreakpointProps } from './box.types';
+export type BoxStyleBuildProps = BoxBreakpointProps & Partial<Record<ResponsiveStyleBreakpoint, BoxBreakpointProps>>;
+export type BoxTailwindClassNamePlan = {
+    /** Готовая строка Tailwind-классов для style props. */
+    className: string;
+    /** CSS-переменные, которые читают Tailwind arbitrary utilities. */
+    style: CSSProperties | undefined;
+};
+export declare function buildBoxTailwindClassNamePlan(props: BoxStyleBuildProps): BoxTailwindClassNamePlan;

package/dist/box/box.types.d.ts

@@ -0,0 +1,62 @@
+import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';
+import { ResponsiveStyleBreakpoint } from '../shared/responsive-style/responsive-style.types';
+import { UiKitBackgroundProps, UiKitBackgroundValue, UiKitBorderProps, UiKitCursorProps, UiKitDimensionProps, UiKitIndentationsProps, UiKitDisplayProps, UiKitListStyleProps, UiKitOutlineProps, UiKitPositionProps } from '../types';
+/**
+ * Допустимые HTML-теги для Box.
+ *
+ * Box остаётся layout primitive, но `as` может быть как нативным HTML-тегом,
+ * так и проектным React-компонентом, например router-aware Link из
+ * `UiKitProvider`.
+ */
+export type BoxAs = ElementType;
+/**
+ * CSS-значение цвета/фона.
+ *
+ * Можно передать дизайн-токен цвета (`--color-background-subtle`) или прямое
+ * CSS-значение: hex, rgb, rgba, hsl, hsla, `var(...)`, `color-mix(...)`,
+ * gradient, `url(...)` или полный background shorthand.
+ */
+export type BoxBackgroundValue = UiKitBackgroundValue;
+/**
+ * Стилевые props, общие для base-состояния и responsive overrides.
+ */
+export type BoxStyleProps = UiKitDisplayProps & UiKitPositionProps & UiKitBackgroundProps & UiKitCursorProps & UiKitIndentationsProps & UiKitOutlineProps & UiKitListStyleProps & UiKitDimensionProps;
+/**
+ * Собственные стилевые props Box поверх общих контрактов ui-kit.
+ */
+export type BoxOwnStyleProps = {
+    /** Border-настройки элемента. */
+    border?: UiKitBorderProps;
+    /** Background shorthand элемента. */
+    background?: BoxBackgroundValue;
+    /** Цвет фона элемента. */
+    backgroundColor?: BoxBackgroundValue;
+};
+/**
+ * Набор props для одного responsive-состояния.
+ */
+export type BoxBreakpointProps = BoxStyleProps & BoxOwnStyleProps;
+/**
+ * Responsive overrides Box.
+ */
+type BoxResponsiveProps = Partial<Record<ResponsiveStyleBreakpoint, BoxBreakpointProps>>;
+/**
+ * Собственные props Box без нативных HTML-атрибутов.
+ */
+export type BoxOwnProps = BoxBreakpointProps & BoxResponsiveProps & {
+    /** HTML-тег, которым будет отрендерен Box. По умолчанию `div`. */
+    as?: BoxAs;
+    children?: ReactNode;
+};
+/**
+ * Props Box.
+ *
+ * Верхний уровень задаёт base/sm размеры. `md`, `lg`, `xl` задают overrides для
+ * соответствующих breakpoint-ов из общего responsive config ui-kit. Тип
+ * полиморфен по `as`: для `as="a"` доступны `href`, `target`, `rel`, а для
+ * `as="button"` доступны `disabled`, `type`, `form`.
+ */
+export type BoxProps<TAs extends BoxAs = 'div'> = BoxOwnProps & Omit<ComponentPropsWithoutRef<TAs>, keyof BoxOwnProps | 'as' | 'children'> & {
+    as?: TAs;
+};
+export {};

package/dist/box.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E=require("react/jsx-runtime"),F=require("react"),j=require("./responsive-style.config-B2m9jVlX.cjs");function J({background:t,backgroundColor:o,bg:i,bgSize:d,bgRepeat:f,bgPosition:a,border:h,cursor:u,p:s,m,outlineColor:l,outlineWidth:c,outlineOffset:b,outlineStyle:v,listStyle:p,display:y,position:r,width:R,maxWidth:x,minWidth:k,height:S,maxHeight:z,minHeight:W}){const e={};return i!==void 0?lo(e,i):t!==void 0&&(e.background=T(t)),o!==void 0&&(e.backgroundColor=T(o)),d!==void 0&&(e.backgroundSize=ao(d)),f!==void 0&&(e.backgroundRepeat=co(f)),a!==void 0&&(e.backgroundPosition=so(a)),io(e,h),u!==void 0&&(e.cursor=u),oo(e,s),to(e,m),l!==void 0&&(e.outlineColor=N(l)),c!==void 0&&(e.outlineWidth=c),b!==void 0&&(e.outlineOffset=b),v!==void 0&&(e.outlineStyle=v),p?.position!==void 0&&(e.listStylePosition=p.position),p?.type!==void 0&&(e.listStyleType=p.type),y!==void 0&&(e.display=fo(y)),r?.type!==void 0&&(e.position=r.type),r?.top!==void 0&&(e.top=C(r.top)),r?.left!==void 0&&(e.left=C(r.left)),r?.right!==void 0&&(e.right=C(r.right)),r?.bottom!==void 0&&(e.bottom=C(r.bottom)),r?.zIndex!==void 0&&(e.zIndex=r.zIndex),R!==void 0&&(e.width=g(R)),x!==void 0&&(e.maxWidth=g(x)),k!==void 0&&(e.minWidth=g(k)),S!==void 0&&(e.height=g(S)),z!==void 0&&(e.maxHeight=g(z)),W!==void 0&&(e.minHeight=g(W)),Object.keys(e).length>0?e:void 0}function Q(t){const o=[],i={},d=t.groupParent===!0;P(t,o,i,"","",d);for(const f of j.responsiveBreakpoints){const a=t[f];a&&P(a,o,i,`${f}:`,`${f}-`,d)}return{className:o.join(" "),style:Object.keys(i).length>0?i:void 0}}function P(t,o,i,d="",f="",a=!1){const h=J(t);for(const[u,s]of Object.entries(h??{})){if(s==null)continue;const m=String(s),l=U(u,m);if(l){o.push(`${d}${l}`);continue}const c=`${f}${Y(u)}`,b=X(u,c);b&&(i[`--${c}`]=m,o.push(`${d}${b}`))}if(t.bgGroup!==void 0){const u=`${f}group-background`;i[`--${u}`]=T(t.bgGroup),o.push(`${d}group-hover:[background:var(--${u})]`),a&&o.push(`${d}hover:[background:var(--${u})]`)}}function U(t,o){if(t==="display")return o==="none"?"hidden":o;if(t==="position")return o==="inherit"?"[position:inherit]":o;if(t==="cursor")return`cursor-${o}`;if(t==="backgroundRepeat")return{"no-repeat":"bg-no-repeat",repeat:"bg-repeat",round:"bg-repeat-round",space:"bg-repeat-space","repeat-x":"bg-repeat-x","repeat-y":"bg-repeat-y"}[o];if(t==="backgroundSize")return{auto:"bg-auto",contain:"bg-contain",cover:"bg-cover"}[o];if(t==="backgroundPosition")return{bottom:"bg-bottom",center:"bg-center",left:"bg-left","left bottom":"bg-left-bottom","left top":"bg-left-top",right:"bg-right","right bottom":"bg-right-bottom","right top":"bg-right-top",top:"bg-top"}[o];if(t==="borderStyle")return o==="none"?"border-none":`border-${o}`;if(t==="outlineStyle")return o==="none"?"outline-none":`outline-${o}`;if(t==="listStylePosition")return`list-${o}`;if(t==="listStyleType")return`list-${o}`}function X(t,o){const i=`var(--${o})`;return{background:`[background:${i}]`,backgroundColor:`bg-[${i}]`,backgroundPosition:`bg-[position:${i}]`,backgroundSize:`bg-[length:${i}]`,borderBottomLeftRadius:`rounded-bl-[${i}]`,borderBottomRightRadius:`rounded-br-[${i}]`,borderBottomWidth:`border-b-[length:${i}]`,borderColor:`border-[color:${i}]`,borderLeftWidth:`border-l-[length:${i}]`,borderRadius:`rounded-[${i}]`,borderRightWidth:`border-r-[length:${i}]`,borderTopLeftRadius:`rounded-tl-[${i}]`,borderTopRightRadius:`rounded-tr-[${i}]`,borderTopWidth:`border-t-[length:${i}]`,borderWidth:`border-[length:${i}]`,bottom:`bottom-[${i}]`,height:`h-[${i}]`,left:`left-[${i}]`,margin:`m-[${i}]`,marginBottom:`mb-[${i}]`,marginLeft:`ml-[${i}]`,marginRight:`mr-[${i}]`,marginTop:`mt-[${i}]`,maxHeight:`max-h-[${i}]`,maxWidth:`max-w-[${i}]`,minHeight:`min-h-[${i}]`,minWidth:`min-w-[${i}]`,outlineColor:`outline-[color:${i}]`,outlineOffset:`outline-offset-[${i}]`,outlineWidth:`outline-[length:${i}]`,padding:`p-[${i}]`,paddingBottom:`pb-[${i}]`,paddingLeft:`pl-[${i}]`,paddingRight:`pr-[${i}]`,paddingTop:`pt-[${i}]`,right:`right-[${i}]`,top:`top-[${i}]`,width:`w-[${i}]`,zIndex:`z-[${i}]`}[t]}function Y(t){return t.replace(/[A-Z]/g,o=>`-${o.toLowerCase()}`)}function oo(t,o){if(o!==void 0){if(Array.isArray(o)){t.padding=o.map(n).join(" ");return}if(typeof o!="object"){t.padding=n(o);return}"px"in o&&o.px!==void 0&&(t.paddingLeft=n(o.px),t.paddingRight=n(o.px)),"py"in o&&o.py!==void 0&&(t.paddingTop=n(o.py),t.paddingBottom=n(o.py)),"pt"in o&&o.pt!==void 0&&(t.paddingTop=n(o.pt)),"pb"in o&&o.pb!==void 0&&(t.paddingBottom=n(o.pb)),"pl"in o&&o.pl!==void 0&&(t.paddingLeft=n(o.pl)),"pr"in o&&o.pr!==void 0&&(t.paddingRight=n(o.pr))}}function to(t,o){if(o!==void 0){if(Array.isArray(o)){t.margin=o.map(n).join(" ");return}if(typeof o!="object"){t.margin=n(o);return}"mx"in o&&o.mx!==void 0&&(t.marginLeft=n(o.mx),t.marginRight=n(o.mx)),"my"in o&&o.my!==void 0&&(t.marginTop=n(o.my),t.marginBottom=n(o.my)),"mt"in o&&o.mt!==void 0&&(t.marginTop=n(o.mt)),"mb"in o&&o.mb!==void 0&&(t.marginBottom=n(o.mb)),"ml"in o&&o.ml!==void 0&&(t.marginLeft=n(o.ml)),"mr"in o&&o.mr!==void 0&&(t.marginRight=n(o.mr))}}function io(t,o){o&&(o.radius!==void 0&&eo(t,o.radius),o.color!==void 0&&(t.borderColor=N(o.color)),o.width!==void 0&&no(t,o.width),o.style!==void 0&&(t.borderStyle=o.style))}function eo(t,o){if(ro(o)){o.topLeft!==void 0&&(t.borderTopLeftRadius=$(o.topLeft)),o.topRight!==void 0&&(t.borderTopRightRadius=$(o.topRight)),o.bottomLeft!==void 0&&(t.borderBottomLeftRadius=$(o.bottomLeft)),o.bottomRight!==void 0&&(t.borderBottomRightRadius=$(o.bottomRight));return}t.borderRadius=$(o)}function no(t,o){if(uo(o)){o.top!==void 0&&(t.borderTopWidth=B(o.top)),o.bottom!==void 0&&(t.borderBottomWidth=B(o.bottom)),o.left!==void 0&&(t.borderLeftWidth=B(o.left)),o.right!==void 0&&(t.borderRightWidth=B(o.right));return}t.borderWidth=B(o)}function ro(t){return typeof t=="object"}function uo(t){return typeof t=="object"}function $(t){return t.startsWith("--")?`var(${t})`:t}function B(t){return t.startsWith("--")?`var(${t})`:t}function fo(t){return t==="hidden"?"none":t}function C(t){return typeof t=="number"?`${t}px`:t}function n(t){return typeof t=="number"?`${t}px`:t}function g(t){return typeof t=="number"?`${t}px`:t}function ao(t){return typeof t=="number"?`${t}px`:t}function co(t){return{"no-repeat":"no-repeat",repeat:"repeat","repeat-round":"round","repeat-space":"space","repeat-x":"repeat-x","repeat-y":"repeat-y"}[t]}function so(t){return t.replace("-"," ")}function T(t){return N(t)}function lo(t,o){const i=T(o);if(bo(o)){t.background=i;return}t.backgroundColor=i}function bo(t){const o=t.trim().toLowerCase();return o.includes("url(")||o.includes("gradient(")||o.includes("image-set(")||o.includes("cross-fade(")||o.includes("element(")||o.includes("paint(")}function N(t){return t.startsWith("--")?`var(${t})`:t}function mo(t,o){const{as:i,children:d,className:f,background:a,backgroundColor:h,bg:u,bgSize:s,bgRepeat:m,bgGroup:l,groupParent:c,bgPosition:b,border:v,cursor:p,p:y,m:r,outlineColor:R,outlineWidth:x,outlineOffset:k,outlineStyle:S,listStyle:z,display:W,position:e,width:I,maxWidth:w,minWidth:O,height:A,maxHeight:G,minHeight:H,md:q,lg:D,xl:M,style:V,...K}=t,Z=i??"div",L=Q({background:a,backgroundColor:h,bg:u,bgSize:s,bgRepeat:m,bgGroup:l,groupParent:c,bgPosition:b,border:v,cursor:p,p:y,m:r,outlineColor:R,outlineWidth:x,outlineOffset:k,outlineStyle:S,listStyle:z,display:W,position:e,width:I,maxWidth:w,minWidth:O,height:A,maxHeight:G,minHeight:H,md:q,lg:D,xl:M}),_=L.style||V?{...L.style,...V}:void 0;return E.jsx(Z,{className:j.cn(L.className,c&&"group",f),ref:o,style:_,...K,children:d})}const po=F.forwardRef(mo);exports.Box=po;