@shmidko61/lc-ui-kit 0.16.1 → 0.17.0

package/README.md

@@ -219,3 +219,33 @@ Box/Flex поддерживают типизированный `scrollbar` в ba
 CSS-размеры, частичное наследование и сброс через `null`. Оформление не включает
 overflow. [API и ограничения](./src/box/README.md). Storybook: **UI Kit / Scrollbar**
 (16 примеров, включая вложенность, сбросы и style escape hatch).
+
+## Accordion: внутренняя обёртка
+
+`Accordion.Item.contentInnerProps` настраивает внутренний Box через BoxProps,
+включая `p: 0`, размеры, оформление и `md`/`lg`/`xl`. По умолчанию остаётся
+`p={{ px: 24, pb: 24 }}`; `style` имеет приоритет. `contentProps` управляет
+внешней анимированной панелью. Объектные responsive overrides наследуют
+незаданные стороны от предыдущего breakpoint; `p: 0` сбрасывает все стороны.
+
+```tsx
+import { Accordion } from '@shmidko61/lc-ui-kit/accordion';
+import { Typography } from '@shmidko61/lc-ui-kit/typography';
+import '@shmidko61/lc-ui-kit/styles.css';
+
+export function Question() {
+  return (
+    <Accordion defaultExpandedKeys={['question']}>
+      <Accordion.Item
+        id="question"
+        title="Вопрос"
+        contentInnerProps={{ p: 0, lg: { p: { pt: 16, pb: 8 } }, xl: { p: 0 } }}
+      >
+        <Typography>Ответ</Typography>
+      </Accordion.Item>
+    </Accordion>
+  );
+}
+```
+
+Storybook: **UI Kit / Accordion / ContentInner**.

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

@@ -41,8 +41,15 @@ export type AccordionItemProps = PropsWithChildren<AccordionItemHeaderProps & {
     headingWrapper?: ComponentType<AccordionItemRenderProps>;
     /** Props внешнего контейнера item. */
     itemProps?: AccordionItemBoxProps;
-    /** Props panel с раскрываемым контентом. */
+    /** Props внешней анимированной panel; не задают отступы внутренней обёртки. */
     contentProps?: AccordionItemContentProps;
+    /**
+     * Props внутреннего Box: отступы, размеры, оформление и md/lg/xl по контракту BoxProps.
+     * По умолчанию p={ px: 24, pb: 24 }; переданный p заменяет его целиком, включая 0.
+     * Responsive overrides наследуются как в Box; p: 0 сбрасывает отступы.
+     * className и HTML props передаются напрямую; явный style имеет приоритет над style props.
+     */
+    contentInnerProps?: AccordionItemBoxProps;
 }>;
-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 declare function AccordionItem({ children, className, contentProps, contentInnerProps, 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.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("react"),v=require("react-aria"),P=require("react-stately/useDisclosureState"),n=require("./box.cjs"),l=require("./flex.cjs"),ee=require("./icons.cjs"),x=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:p,contentProps:a,duration:d=200,headingWrapper:g=se,hideIndicator:f=!1,id:y,indicator:m,indicatorProps:s,isDisabled:I=!1,isExpanded:_,itemProps:o,leading:w,onToggle:F,subtitle:S,surface:b="card",title:W,trailing:D,variant:N="primary",...u}){const G=i.useId(),h=y??G,j=ne(),K=String(h),T=j.expandedKeys.has(h),O=_??T,c=j.isDisabled||I,A=i.useRef(null),B=i.useRef(null),r=P.useDisclosureState({isExpanded:O,onExpandedChange:Z=>{c||(j.toggleKey(h),F?.(Z))}}),{buttonProps:Y,panelProps:q}=v.useDisclosure({isDisabled:c},r,A),{buttonProps:$}=v.useButton(Y,B),z=a?.className,H=a?.style,M=q.style,J=o?.bg??(b==="card"?"--color-background-default":void 0),L=b==="card"?{radius:"16px",style:"none",width:"0",...o?.border}:o?.border,Q=o?.className,U=o?.style,V=u.style,X={...M,height:"var(--disclosure-panel-height)",opacity:r.isExpanded?1:0,transitionDuration:`${d}ms`,...H};return e.jsxs(n.Box,{"data-disabled":c||void 0,"data-state":r.isExpanded?"open":"closed","data-value":K,...o,bg:J,border:L,className:x.cn("grid min-w-0",b==="card"?"gap-0 overflow-hidden":"gap-[24px]",c&&"opacity-50",Q),style:U,children:[e.jsx(n.Box,{...v.mergeProps($,u),as:"button",border:{radius:"16px",style:"none",width:"0",...u.border},className:x.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",p),cursor:c?"not-allowed":"pointer","data-state":r.isExpanded?"open":"closed",p:u.p??24,ref:B,style:V,type:"button",children:e.jsxs(g,{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,f?null:e.jsx(n.Box,{...s,as:"span",bg:s?.bg??"--color-background-default",border:s?.border??{radius:"8px"},style:s?.style,className:x.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:m??e.jsx(ee.DropDown,{"aria-hidden":"true",className:"h-[12px] w-[12px] transition-transform",style:{transform:r.isExpanded?"translateY(-2px) rotate(180deg)":"translateY(2px) rotate(0deg)",transitionDuration:`${d}ms`}})})]})]})}),e.jsx(n.Box,{...q,...a,className:x.cn("overflow-hidden text-[var(--color-text-secondary)] transition-[height,opacity]",z),"data-state":r.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:p,defaultExpandedKeys:a,expandedKeys:d,isDisabled:g=!1,onExpandedChange:f,...y}){const m=te.useDisclosureGroupState({allowsMultipleExpanded:t,defaultExpandedKeys:a,expandedKeys:d,isDisabled:g,onExpandedChange:f});return e.jsx(R.Provider,{value:m,children:e.jsx(l.Flex,{flexDirection:"column",gap:24,width:"100%",...y,children:p})})}const oe=Object.assign(C,{Item:k});exports.Accordion=oe;exports.AccordionItem=k;exports.AccordionRoot=C;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("react"),v=require("react-aria"),ee=require("react-stately/useDisclosureState"),s=require("./box.cjs"),l=require("./flex.cjs"),te=require("./icons.cjs"),p=require("./responsive-style.config-B2m9jVlX.cjs"),E=require("./typography.cjs"),se=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 oe({children:t}){return e.jsx(l.Flex,{align:"center",gap:16,justify:"space-between",width:"100%",children:t})}function k({children:t,className:g,contentProps:a,contentInnerProps:d,duration:u=200,headingWrapper:f=oe,hideIndicator:y=!1,id:m,indicator:I,indicatorProps:n,isDisabled:_=!1,isExpanded:F,itemProps:o,leading:w,onToggle:W,subtitle:S,surface:b="card",title:G,trailing:D,variant:N="primary",...x}){const K=i.useId(),h=m??K,j=ne(),T=String(h),O=j.expandedKeys.has(h),Y=F??O,c=j.isDisabled||_,A=i.useRef(null),B=i.useRef(null),r=ee.useDisclosureState({isExpanded:Y,onExpandedChange:P=>{c||(j.toggleKey(h),W?.(P))}}),{buttonProps:$,panelProps:q}=v.useDisclosure({isDisabled:c},r,A),{buttonProps:z}=v.useButton($,B),H=a?.className,M=a?.style,J=q.style,L=o?.bg??(b==="card"?"--color-background-default":void 0),Q=b==="card"?{radius:"16px",style:"none",width:"0",...o?.border}:o?.border,U=o?.className,V=o?.style,X=x.style,Z={...J,height:"var(--disclosure-panel-height)",opacity:r.isExpanded?1:0,transitionDuration:`${u}ms`,...M};return e.jsxs(s.Box,{"data-disabled":c||void 0,"data-state":r.isExpanded?"open":"closed","data-value":T,...o,bg:L,border:Q,className:p.cn("grid min-w-0",b==="card"?"gap-0 overflow-hidden":"gap-[24px]",c&&"opacity-50",U),style:V,children:[e.jsx(s.Box,{...v.mergeProps(z,x),as:"button",border:{radius:"16px",style:"none",width:"0",...x.border},className:p.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",g),cursor:c?"not-allowed":"pointer","data-state":r.isExpanded?"open":"closed",p:x.p??24,ref:B,style:X,type:"button",children:e.jsxs(f,{children:[e.jsxs(l.Flex,{align:"center",gap:16,minWidth:0,children:[w?e.jsx(s.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:G}),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(s.Box,{as:"span",children:D}):null,y?null:e.jsx(s.Box,{...n,as:"span",bg:n?.bg??"--color-background-default",border:n?.border??{radius:"8px"},style:n?.style,className:p.cn(n?"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)]",n?.className),children:I??e.jsx(te.DropDown,{"aria-hidden":"true",className:"h-[12px] w-[12px] transition-transform",style:{transform:r.isExpanded?"translateY(-2px) rotate(180deg)":"translateY(2px) rotate(0deg)",transitionDuration:`${u}ms`}})})]})]})}),e.jsx(s.Box,{...q,...a,className:p.cn("overflow-hidden text-[var(--color-text-secondary)] transition-[height,opacity]",H),"data-state":r.isExpanded?"open":"closed",ref:A,style:Z,children:e.jsx(s.Box,{...d,p:d?.p??{px:24,pb:24},children:t})})]})}function C({allowsMultipleExpanded:t=!1,children:g,defaultExpandedKeys:a,expandedKeys:d,isDisabled:u=!1,onExpandedChange:f,...y}){const m=se.useDisclosureGroupState({allowsMultipleExpanded:t,defaultExpandedKeys:a,expandedKeys:d,isDisabled:u,onExpandedChange:f});return e.jsx(R.Provider,{value:m,children:e.jsx(l.Flex,{flexDirection:"column",gap:24,width:"100%",...y,children:g})})}const re=Object.assign(C,{Item:k});exports.Accordion=re;exports.AccordionItem=k;exports.AccordionRoot=C;

package/dist/accordion.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shmidko61/lc-ui-kit",
-  "version": "0.16.1",
+  "version": "0.17.0",
   "type": "module",
   "files": [
     "dist"