@vkontakte/vkui 6.5.2 → 6.6.0

package/dist/components/Gallery/Gallery.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Gallery.d.ts","sourceRoot":"","sources":["../../../src/components/Gallery/Gallery.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAGxD,MAAM,WAAW,YAAa,SAAQ,gBAAgB;IACpD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;GAEG;AACH,eAAO,MAAM,OAAO,kFAQjB,YAAY,KAAG,KAAK,CAAC,SAoDvB,CAAC"}
+{"version":3,"file":"Gallery.d.ts","sourceRoot":"","sources":["../../../src/components/Gallery/Gallery.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAG7D,MAAM,WAAW,YAAa,SAAQ,gBAAgB;IACpD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;GAEG;AACH,eAAO,MAAM,OAAO,kFAQjB,YAAY,KAAG,KAAK,CAAC,SAoDvB,CAAC"}

package/dist/components/Gallery/Gallery.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Gallery/Gallery.tsx"],"sourcesContent":["import * as React from 'react';\nimport { clamp } from '../../helpers/math';\nimport { useIsClient } from '../../hooks/useIsClient';\nimport { BaseGallery } from '../BaseGallery/BaseGallery';\nimport { CarouselBase } from '../BaseGallery/CarouselBase/CarouselBase';\nimport { BaseGalleryProps } from '../BaseGallery/types';\nimport { useAutoPlay } from './hooks';\n\nexport interface GalleryProps extends BaseGalleryProps {\n  initialSlideIndex?: number;\n  timeout?: number;\n  // Отвечает за зацикливание слайдов\n  looped?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Gallery\n */\nexport const Gallery = ({\n  initialSlideIndex = 0,\n  children,\n  timeout = 0,\n  onChange,\n  bullets,\n  looped,\n  ...props\n}: GalleryProps): React.ReactNode => {\n  const [localSlideIndex, setSlideIndex] = React.useState(initialSlideIndex);\n  const isControlled = typeof props.slideIndex === 'number';\n  const slideIndex = isControlled ? props.slideIndex ?? 0 : localSlideIndex;\n  const slides = React.useMemo(\n    () => React.Children.toArray(children).filter((item) => Boolean(item)),\n    [children],\n  );\n  const childCount = slides.length;\n  const isClient = useIsClient();\n\n  const handleChange: GalleryProps['onChange'] = React.useCallback(\n    (current: number) => {\n      if (current === slideIndex) {\n        return;\n      }\n      !isControlled && setSlideIndex(current);\n      onChange && onChange(current);\n    },\n    [isControlled, onChange, slideIndex],\n  );\n\n  useAutoPlay(timeout, slideIndex, () => handleChange((slideIndex + 1) % childCount));\n\n  // prevent invalid slideIndex\n  // any slide index is invalid with no slides, just keep it as is\n  const safeSlideIndex = childCount > 0 ? clamp(slideIndex, 0, childCount - 1) : slideIndex;\n  // notify parent in controlled mode\n  React.useEffect(() => {\n    if (onChange && safeSlideIndex !== slideIndex) {\n      onChange(safeSlideIndex);\n    }\n    setSlideIndex(safeSlideIndex);\n  }, [onChange, safeSlideIndex, slideIndex]);\n\n  if (!isClient) {\n    return null;\n  }\n\n  const Component = looped ? CarouselBase : BaseGallery;\n\n  return (\n    <Component\n      dragDisabled={isControlled && !onChange}\n      {...props}\n      bullets={childCount > 0 && bullets}\n      slideIndex={safeSlideIndex}\n      onChange={handleChange}\n    >\n      {slides}\n    </Component>\n  );\n};\n"],"names":["React","clamp","useIsClient","BaseGallery","CarouselBase","useAutoPlay","Gallery","initialSlideIndex","children","timeout","onChange","bullets","looped","props","localSlideIndex","setSlideIndex","useState","isControlled","slideIndex","slides","useMemo","Children","toArray","filter","item","Boolean","childCount","length","isClient","handleChange","useCallback","current","safeSlideIndex","useEffect","Component","dragDisabled"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,KAAK,QAAQ,qBAAqB;AAC3C,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,WAAW,QAAQ,6BAA6B;AACzD,SAASC,YAAY,QAAQ,2CAA2C;AAExE,SAASC,WAAW,QAAQ,UAAU;AAStC;;CAEC,GACD,OAAO,MAAMC,UAAU;QAAC,EACtBC,oBAAoB,CAAC,EACrBC,QAAQ,EACRC,UAAU,CAAC,EACXC,QAAQ,EACRC,OAAO,EACPC,MAAM,EAEO,WADVC;QANHN;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,CAACE,iBAAiBC,cAAc,GAAGf,MAAMgB,QAAQ,CAACT;IACxD,MAAMU,eAAe,OAAOJ,MAAMK,UAAU,KAAK;QACfL;IAAlC,MAAMK,aAAaD,eAAeJ,CAAAA,oBAAAA,MAAMK,UAAU,cAAhBL,+BAAAA,oBAAoB,IAAIC;IAC1D,MAAMK,SAASnB,MAAMoB,OAAO,CAC1B,IAAMpB,MAAMqB,QAAQ,CAACC,OAAO,CAACd,UAAUe,MAAM,CAAC,CAACC,OAASC,QAAQD,QAChE;QAAChB;KAAS;IAEZ,MAAMkB,aAAaP,OAAOQ,MAAM;IAChC,MAAMC,WAAW1B;IAEjB,MAAM2B,eAAyC7B,MAAM8B,WAAW,CAC9D,CAACC;QACC,IAAIA,YAAYb,YAAY;YAC1B;QACF;QACA,CAACD,gBAAgBF,cAAcgB;QAC/BrB,YAAYA,SAASqB;IACvB,GACA;QAACd;QAAcP;QAAUQ;KAAW;IAGtCb,YAAYI,SAASS,YAAY,IAAMW,aAAa,AAACX,CAAAA,aAAa,CAAA,IAAKQ;IAEvE,6BAA6B;IAC7B,gEAAgE;IAChE,MAAMM,iBAAiBN,aAAa,IAAIzB,MAAMiB,YAAY,GAAGQ,aAAa,KAAKR;IAC/E,mCAAmC;IACnClB,MAAMiC,SAAS,CAAC;QACd,IAAIvB,YAAYsB,mBAAmBd,YAAY;YAC7CR,SAASsB;QACX;QACAjB,cAAciB;IAChB,GAAG;QAACtB;QAAUsB;QAAgBd;KAAW;IAEzC,IAAI,CAACU,UAAU;QACb,OAAO;IACT;IAEA,MAAMM,YAAYtB,SAASR,eAAeD;IAE1C,qBACE,KAAC+B;QACCC,cAAclB,gBAAgB,CAACP;OAC3BG;QACJF,SAASe,aAAa,KAAKf;QAC3BO,YAAYc;QACZtB,UAAUmB;kBAETV;;AAGP,EAAE"}
+{"version":3,"sources":["../../../src/components/Gallery/Gallery.tsx"],"sourcesContent":["import * as React from 'react';\nimport { clamp } from '../../helpers/math';\nimport { useIsClient } from '../../hooks/useIsClient';\nimport { BaseGallery } from '../BaseGallery/BaseGallery';\nimport { CarouselBase } from '../BaseGallery/CarouselBase/CarouselBase';\nimport type { BaseGalleryProps } from '../BaseGallery/types';\nimport { useAutoPlay } from './hooks';\n\nexport interface GalleryProps extends BaseGalleryProps {\n  initialSlideIndex?: number;\n  timeout?: number;\n  // Отвечает за зацикливание слайдов\n  looped?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Gallery\n */\nexport const Gallery = ({\n  initialSlideIndex = 0,\n  children,\n  timeout = 0,\n  onChange,\n  bullets,\n  looped,\n  ...props\n}: GalleryProps): React.ReactNode => {\n  const [localSlideIndex, setSlideIndex] = React.useState(initialSlideIndex);\n  const isControlled = typeof props.slideIndex === 'number';\n  const slideIndex = isControlled ? props.slideIndex ?? 0 : localSlideIndex;\n  const slides = React.useMemo(\n    () => React.Children.toArray(children).filter((item) => Boolean(item)),\n    [children],\n  );\n  const childCount = slides.length;\n  const isClient = useIsClient();\n\n  const handleChange: GalleryProps['onChange'] = React.useCallback(\n    (current: number) => {\n      if (current === slideIndex) {\n        return;\n      }\n      !isControlled && setSlideIndex(current);\n      onChange && onChange(current);\n    },\n    [isControlled, onChange, slideIndex],\n  );\n\n  useAutoPlay(timeout, slideIndex, () => handleChange((slideIndex + 1) % childCount));\n\n  // prevent invalid slideIndex\n  // any slide index is invalid with no slides, just keep it as is\n  const safeSlideIndex = childCount > 0 ? clamp(slideIndex, 0, childCount - 1) : slideIndex;\n  // notify parent in controlled mode\n  React.useEffect(() => {\n    if (onChange && safeSlideIndex !== slideIndex) {\n      onChange(safeSlideIndex);\n    }\n    setSlideIndex(safeSlideIndex);\n  }, [onChange, safeSlideIndex, slideIndex]);\n\n  if (!isClient) {\n    return null;\n  }\n\n  const Component = looped ? CarouselBase : BaseGallery;\n\n  return (\n    <Component\n      dragDisabled={isControlled && !onChange}\n      {...props}\n      bullets={childCount > 0 && bullets}\n      slideIndex={safeSlideIndex}\n      onChange={handleChange}\n    >\n      {slides}\n    </Component>\n  );\n};\n"],"names":["React","clamp","useIsClient","BaseGallery","CarouselBase","useAutoPlay","Gallery","initialSlideIndex","children","timeout","onChange","bullets","looped","props","localSlideIndex","setSlideIndex","useState","isControlled","slideIndex","slides","useMemo","Children","toArray","filter","item","Boolean","childCount","length","isClient","handleChange","useCallback","current","safeSlideIndex","useEffect","Component","dragDisabled"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,KAAK,QAAQ,qBAAqB;AAC3C,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,WAAW,QAAQ,6BAA6B;AACzD,SAASC,YAAY,QAAQ,2CAA2C;AAExE,SAASC,WAAW,QAAQ,UAAU;AAStC;;CAEC,GACD,OAAO,MAAMC,UAAU;QAAC,EACtBC,oBAAoB,CAAC,EACrBC,QAAQ,EACRC,UAAU,CAAC,EACXC,QAAQ,EACRC,OAAO,EACPC,MAAM,EAEO,WADVC;QANHN;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,CAACE,iBAAiBC,cAAc,GAAGf,MAAMgB,QAAQ,CAACT;IACxD,MAAMU,eAAe,OAAOJ,MAAMK,UAAU,KAAK;QACfL;IAAlC,MAAMK,aAAaD,eAAeJ,CAAAA,oBAAAA,MAAMK,UAAU,cAAhBL,+BAAAA,oBAAoB,IAAIC;IAC1D,MAAMK,SAASnB,MAAMoB,OAAO,CAC1B,IAAMpB,MAAMqB,QAAQ,CAACC,OAAO,CAACd,UAAUe,MAAM,CAAC,CAACC,OAASC,QAAQD,QAChE;QAAChB;KAAS;IAEZ,MAAMkB,aAAaP,OAAOQ,MAAM;IAChC,MAAMC,WAAW1B;IAEjB,MAAM2B,eAAyC7B,MAAM8B,WAAW,CAC9D,CAACC;QACC,IAAIA,YAAYb,YAAY;YAC1B;QACF;QACA,CAACD,gBAAgBF,cAAcgB;QAC/BrB,YAAYA,SAASqB;IACvB,GACA;QAACd;QAAcP;QAAUQ;KAAW;IAGtCb,YAAYI,SAASS,YAAY,IAAMW,aAAa,AAACX,CAAAA,aAAa,CAAA,IAAKQ;IAEvE,6BAA6B;IAC7B,gEAAgE;IAChE,MAAMM,iBAAiBN,aAAa,IAAIzB,MAAMiB,YAAY,GAAGQ,aAAa,KAAKR;IAC/E,mCAAmC;IACnClB,MAAMiC,SAAS,CAAC;QACd,IAAIvB,YAAYsB,mBAAmBd,YAAY;YAC7CR,SAASsB;QACX;QACAjB,cAAciB;IAChB,GAAG;QAACtB;QAAUsB;QAAgBd;KAAW;IAEzC,IAAI,CAACU,UAAU;QACb,OAAO;IACT;IAEA,MAAMM,YAAYtB,SAASR,eAAeD;IAE1C,qBACE,KAAC+B;QACCC,cAAclB,gBAAgB,CAACP;OAC3BG;QACJF,SAASe,aAAa,KAAKf;QAC3BO,YAAYc;QACZtB,UAAUmB;kBAETV;;AAGP,EAAE"}

package/dist/components/Gallery/hooks.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Gallery/hooks.ts"],"sourcesContent":["import * as React from 'react';\nimport { useStableCallback } from '../../hooks/useStableCallback';\nimport { useDOM } from '../../lib/dom';\nimport { TimeoutId } from '../../types';\n\nexport function useAutoPlay(\n  timeout: number,\n  slideIndex: number,\n  callbackFnProp: VoidFunction,\n): void {\n  const { document } = useDOM();\n  const callbackFn = useStableCallback(callbackFnProp);\n\n  React.useEffect(\n    function initializeAutoPlay() {\n      if (!document || !timeout) {\n        return;\n      }\n\n      let timeoutId: TimeoutId = null;\n\n      const stop = () => {\n        if (timeoutId) {\n          clearTimeout(timeoutId);\n          timeoutId = null;\n        }\n      };\n\n      const start = () => {\n        switch (document.visibilityState) {\n          case 'visible':\n            stop();\n            timeoutId = setTimeout(callbackFn, timeout);\n            break;\n          case 'hidden':\n            stop();\n        }\n      };\n\n      start();\n\n      document.addEventListener('visibilitychange', start);\n\n      return () => {\n        stop();\n        document.removeEventListener('visibilitychange', start);\n      };\n    },\n    [document, timeout, slideIndex, callbackFn],\n  );\n}\n"],"names":["React","useStableCallback","useDOM","useAutoPlay","timeout","slideIndex","callbackFnProp","document","callbackFn","useEffect","initializeAutoPlay","timeoutId","stop","clearTimeout","start","visibilityState","setTimeout","addEventListener","removeEventListener"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iBAAiB,QAAQ,gCAAgC;AAClE,SAASC,MAAM,QAAQ,gBAAgB;AAGvC,OAAO,SAASC,YACdC,OAAe,EACfC,UAAkB,EAClBC,cAA4B;IAE5B,MAAM,EAAEC,QAAQ,EAAE,GAAGL;IACrB,MAAMM,aAAaP,kBAAkBK;IAErCN,MAAMS,SAAS,CACb,SAASC;QACP,IAAI,CAACH,YAAY,CAACH,SAAS;YACzB;QACF;QAEA,IAAIO,YAAuB;QAE3B,MAAMC,OAAO;YACX,IAAID,WAAW;gBACbE,aAAaF;gBACbA,YAAY;YACd;QACF;QAEA,MAAMG,QAAQ;YACZ,OAAQP,SAASQ,eAAe;gBAC9B,KAAK;oBACHH;oBACAD,YAAYK,WAAWR,YAAYJ;oBACnC;gBACF,KAAK;oBACHQ;YACJ;QACF;QAEAE;QAEAP,SAASU,gBAAgB,CAAC,oBAAoBH;QAE9C,OAAO;YACLF;YACAL,SAASW,mBAAmB,CAAC,oBAAoBJ;QACnD;IACF,GACA;QAACP;QAAUH;QAASC;QAAYG;KAAW;AAE/C"}
+{"version":3,"sources":["../../../src/components/Gallery/hooks.ts"],"sourcesContent":["import * as React from 'react';\nimport { useStableCallback } from '../../hooks/useStableCallback';\nimport { useDOM } from '../../lib/dom';\nimport type { TimeoutId } from '../../types';\n\nexport function useAutoPlay(\n  timeout: number,\n  slideIndex: number,\n  callbackFnProp: VoidFunction,\n): void {\n  const { document } = useDOM();\n  const callbackFn = useStableCallback(callbackFnProp);\n\n  React.useEffect(\n    function initializeAutoPlay() {\n      if (!document || !timeout) {\n        return;\n      }\n\n      let timeoutId: TimeoutId = null;\n\n      const stop = () => {\n        if (timeoutId) {\n          clearTimeout(timeoutId);\n          timeoutId = null;\n        }\n      };\n\n      const start = () => {\n        switch (document.visibilityState) {\n          case 'visible':\n            stop();\n            timeoutId = setTimeout(callbackFn, timeout);\n            break;\n          case 'hidden':\n            stop();\n        }\n      };\n\n      start();\n\n      document.addEventListener('visibilitychange', start);\n\n      return () => {\n        stop();\n        document.removeEventListener('visibilitychange', start);\n      };\n    },\n    [document, timeout, slideIndex, callbackFn],\n  );\n}\n"],"names":["React","useStableCallback","useDOM","useAutoPlay","timeout","slideIndex","callbackFnProp","document","callbackFn","useEffect","initializeAutoPlay","timeoutId","stop","clearTimeout","start","visibilityState","setTimeout","addEventListener","removeEventListener"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iBAAiB,QAAQ,gCAAgC;AAClE,SAASC,MAAM,QAAQ,gBAAgB;AAGvC,OAAO,SAASC,YACdC,OAAe,EACfC,UAAkB,EAClBC,cAA4B;IAE5B,MAAM,EAAEC,QAAQ,EAAE,GAAGL;IACrB,MAAMM,aAAaP,kBAAkBK;IAErCN,MAAMS,SAAS,CACb,SAASC;QACP,IAAI,CAACH,YAAY,CAACH,SAAS;YACzB;QACF;QAEA,IAAIO,YAAuB;QAE3B,MAAMC,OAAO;YACX,IAAID,WAAW;gBACbE,aAAaF;gBACbA,YAAY;YACd;QACF;QAEA,MAAMG,QAAQ;YACZ,OAAQP,SAASQ,eAAe;gBAC9B,KAAK;oBACHH;oBACAD,YAAYK,WAAWR,YAAYJ;oBACnC;gBACF,KAAK;oBACHQ;YACJ;QACF;QAEAE;QAEAP,SAASU,gBAAgB,CAAC,oBAAoBH;QAE9C,OAAO;YACLF;YACAL,SAASW,mBAAmB,CAAC,oBAAoBJ;QACnD;IACF,GACA;QAACP;QAAUH;QAASC;QAAYG;KAAW;AAE/C"}

package/dist/components/Gradient/Gradient.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributesWithRootRef } from '../../types';
+import type { HTMLAttributesWithRootRef } from '../../types';
 export interface GradientProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     /**
      * Тип градиента

package/dist/components/Gradient/Gradient.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Gradient.d.ts","sourceRoot":"","sources":["../../../src/components/Gradient/Gradient.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AASxD,MAAM,WAAW,aAAc,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAC9E;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,CAAC;IACtC;;OAEG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;CACvB;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ,+BAIlB,aAAa,KAAG,KAAK,CAAC,SAYxB,CAAC"}
+{"version":3,"file":"Gradient.d.ts","sourceRoot":"","sources":["../../../src/components/Gradient/Gradient.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAS7D,MAAM,WAAW,aAAc,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAC9E;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,CAAC;IACtC;;OAEG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;CACvB;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ,+BAIlB,aAAa,KAAG,KAAK,CAAC,SAYxB,CAAC"}

package/dist/components/Gradient/Gradient.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Gradient/Gradient.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Gradient.module.css';\n\nconst modeStyles = {\n  overlay: styles['Gradient--mode-overlay'],\n  tint: styles['Gradient--mode-tint'],\n};\n\nexport interface GradientProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Тип градиента\n   */\n  mode?: 'tint' | 'default' | 'overlay';\n  /**\n   * Направление градиента\n   */\n  to?: 'top' | 'bottom';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Gradient\n */\nexport const Gradient = ({\n  mode = 'default',\n  to = 'top',\n  ...restProps\n}: GradientProps): React.ReactNode => {\n  return (\n    <RootComponent\n      role=\"presentation\"\n      {...restProps}\n      baseClassName={classNames(\n        styles['Gradient'],\n        mode !== 'default' && modeStyles[mode],\n        to === 'bottom' && styles['Gradient--to-bottom'],\n      )}\n    />\n  );\n};\n"],"names":["classNames","RootComponent","modeStyles","overlay","tint","Gradient","mode","to","restProps","role","baseClassName"],"mappings":";;;;AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,iCAAiC;AAG/D,MAAMC,aAAa;IACjBC,OAAO;IACPC,IAAI;AACN;AAaA;;CAEC,GACD,OAAO,MAAMC,WAAW;QAAC,EACvBC,OAAO,SAAS,EAChBC,KAAK,KAAK,EAEI,WADXC;QAFHF;QACAC;;IAGA,qBACE,KAACN;QACCQ,MAAK;OACDD;QACJE,eAAeV,2BAEbM,SAAS,aAAaJ,UAAU,CAACI,KAAK,EACtCC,OAAO;;AAIf,EAAE"}
+{"version":3,"sources":["../../../src/components/Gradient/Gradient.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Gradient.module.css';\n\nconst modeStyles = {\n  overlay: styles['Gradient--mode-overlay'],\n  tint: styles['Gradient--mode-tint'],\n};\n\nexport interface GradientProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Тип градиента\n   */\n  mode?: 'tint' | 'default' | 'overlay';\n  /**\n   * Направление градиента\n   */\n  to?: 'top' | 'bottom';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Gradient\n */\nexport const Gradient = ({\n  mode = 'default',\n  to = 'top',\n  ...restProps\n}: GradientProps): React.ReactNode => {\n  return (\n    <RootComponent\n      role=\"presentation\"\n      {...restProps}\n      baseClassName={classNames(\n        styles['Gradient'],\n        mode !== 'default' && modeStyles[mode],\n        to === 'bottom' && styles['Gradient--to-bottom'],\n      )}\n    />\n  );\n};\n"],"names":["classNames","RootComponent","modeStyles","overlay","tint","Gradient","mode","to","restProps","role","baseClassName"],"mappings":";;;;AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,iCAAiC;AAG/D,MAAMC,aAAa;IACjBC,OAAO;IACPC,IAAI;AACN;AAaA;;CAEC,GACD,OAAO,MAAMC,WAAW;QAAC,EACvBC,OAAO,SAAS,EAChBC,KAAK,KAAK,EAEI,WADXC;QAFHF;QACAC;;IAGA,qBACE,KAACN;QACCQ,MAAK;OACDD;QACJE,eAAeV,2BAEbM,SAAS,aAAaJ,UAAU,CAACI,KAAK,EACtCC,OAAO;;AAIf,EAAE"}

package/dist/components/Group/Group.d.ts

@@ -1,28 +1,19 @@
 import * as React from 'react';
-import { HTMLAttributesWithRootRef } from '../../types';
-export interface GroupProps extends HTMLAttributesWithRootRef<HTMLElement> {
+import { GroupContainer, type GroupContainerProps } from './GroupContainer';
+import { GroupDescription } from './GroupDescription';
+import { GroupExpandedContent } from './GroupExpandedContent';
+import { GroupHeader } from './GroupHeader';
+export interface GroupProps extends GroupContainerProps {
     header?: React.ReactNode;
     description?: React.ReactNode;
-    /**
-      `show` (только для `mode="plain"`) - разделитель всегда показывается
-      `hide` - разделитель всегда спрятан,
-      `auto` - разделитель рисуется автоматически между соседними группами.
-     */
-    separator?: 'show' | 'hide' | 'auto';
-    /**
-     * Режим отображения. Если установлен `card`, выглядит как карточка c
-     * обводкой и внешними отступами. Если `plain` — без отступов и обводки.
-     * По умолчанию режим отображения зависит от `sizeX` (`mode=card` при `sizeX=REGULAR` и `mode=plain` при `sizeX=COMPACT`)
-     * В модальных окнах по умолчанию `plain`.
-     */
-    mode?: 'plain' | 'card';
-    /**
-     * Отвечает за отступы вокруг контента в режиме `card`.
-     */
-    padding?: 's' | 'm';
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Group
  */
-export declare const Group: ({ header, description, children, separator, mode: modeProps, padding, tabIndex: tabIndexProp, ...restProps }: GroupProps) => React.ReactNode;
+export declare const Group: React.FC<GroupProps> & {
+    Container: typeof GroupContainer;
+    Header: typeof GroupHeader;
+    Description: typeof GroupDescription;
+    ExpandedContent: typeof GroupExpandedContent;
+};
 //# sourceMappingURL=Group.d.ts.map

package/dist/components/Group/Group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Group.d.ts","sourceRoot":"","sources":["../../../src/components/Group/Group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAqDxD,MAAM,WAAW,UAAW,SAAQ,yBAAyB,CAAC,WAAW,CAAC;IACxE,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IACrC;;;;;OAKG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,OAAO,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;CACrB;AAGD;;GAEG;AACH,eAAO,MAAM,KAAK,iHASf,UAAU,KAAG,KAAK,CAAC,SAiErB,CAAC"}
+{"version":3,"file":"Group.d.ts","sourceRoot":"","sources":["../../../src/components/Group/Group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5E,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,MAAM,WAAW,UAAW,SAAQ,mBAAmB;IACrD,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC/B;AAED;;GAEG;AACH,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAAC,GAAG;IACzC,SAAS,EAAE,OAAO,cAAc,CAAC;IACjC,MAAM,EAAE,OAAO,WAAW,CAAC;IAC3B,WAAW,EAAE,OAAO,gBAAgB,CAAC;IACrC,eAAe,EAAE,OAAO,oBAAoB,CAAC;CAS9C,CAAC"}

package/dist/components/Group/Group.js

@@ -1,105 +1,41 @@
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
-import { classNames, hasReactNode } from '@vkontakte/vkjs';
-import { useAdaptivity } from '../../hooks/useAdaptivity';
-import { warnOnce } from '../../lib/warnOnce';
-import { AppRootContext } from '../AppRoot/AppRootContext';
-import { ModalRootContext } from '../ModalRoot/ModalRootContext';
-import { RootComponent } from '../RootComponent/RootComponent';
-import { Footnote } from '../Typography/Footnote/Footnote';
-const sizeXClassNames = {
-    none: classNames("vkuiGroup--sizeX-none", 'vkuiInternalGroup--sizeX-none'),
-    regular: "vkuiGroup--sizeX-regular",
-    compact: "vkuiGroup--sizeX-compact"
-};
-const stylesMode = {
-    none: classNames("vkuiGroup--mode-none", 'vkuiInternalGroup--mode-none'),
-    plain: classNames("vkuiGroup--mode-plain", 'vkuiInternalGroup--mode-plain'),
-    card: classNames("vkuiGroup--mode-card", 'vkuiInternalGroup--mode-card')
-};
-const stylesPadding = {
-    s: "vkuiGroup--padding-s",
-    m: "vkuiGroup--padding-m"
-};
-/**
- * Вычисляем mode для Group.
- */ function useGroupMode(forcedMode, sizeX, isInsideModal) {
-    const { layout } = React.useContext(AppRootContext);
-    if (forcedMode) {
-        return forcedMode;
-    }
-    if (isInsideModal) {
-        return 'plain';
-    }
-    if (layout) {
-        return layout;
-    }
-    if (sizeX !== 'none') {
-        return sizeX === 'regular' ? 'card' : 'plain';
-    }
-    return 'none';
-}
-const warn = warnOnce('Group');
+import { hasReactNode } from '@vkontakte/vkjs';
+import { GroupContainer } from './GroupContainer';
+import { GroupDescription } from './GroupDescription';
+import { GroupExpandedContent } from './GroupExpandedContent';
+import { GroupHeader } from './GroupHeader';
 /**
  * @see https://vkcom.github.io/VKUI/#/Group
  */ export const Group = (_param)=>{
-    var { header, description, children, separator = 'auto', mode: modeProps, padding = 'm', tabIndex: tabIndexProp } = _param, restProps = _object_without_properties(_param, [
+    var { header, description, children } = _param, restProps = _object_without_properties(_param, [
         "header",
         "description",
-        "children",
-        "separator",
-        "mode",
-        "padding",
-        "tabIndex"
+        "children"
     ]);
-    const { isInsideModal } = React.useContext(ModalRootContext);
-    const { sizeX = 'none' } = useAdaptivity();
-    const mode = useGroupMode(modeProps, sizeX, isInsideModal);
-    const isTabPanel = restProps.role === 'tabpanel';
-    if (process.env.NODE_ENV === 'development' && isTabPanel && (!restProps['aria-controls'] || !restProps['id'])) {
-        warn('При использовании роли "tabpanel" необходимо задать значение свойств "aria-controls" и "id"');
-    }
-    const tabIndex = isTabPanel && tabIndexProp === undefined ? 0 : tabIndexProp;
-    let siblingSeparatorElement = null;
-    switch(separator){
-        case 'auto':
-            siblingSeparatorElement = /*#__PURE__*/ _jsx("div", {
-                className: "vkuiGroup__separator-sibling"
-            });
-            break;
-        case 'show':
-            siblingSeparatorElement = /*#__PURE__*/ _jsx("div", {
-                className: classNames("vkuiGroup__separator-sibling", mode === 'plain' || mode === 'none' ? "vkuiGroup__separator-sibling--forced" : undefined)
-            });
-            break;
-        case 'hide':
-            break;
-    }
-    return /*#__PURE__*/ _jsxs(_Fragment, {
+    return /*#__PURE__*/ _jsxs(GroupContainer, _object_spread_props(_object_spread({}, restProps), {
         children: [
-            /*#__PURE__*/ _jsxs(RootComponent, _object_spread_props(_object_spread({
-                Component: "section"
-            }, restProps), {
-                tabIndex: tabIndex,
-                baseClassName: classNames('vkuiInternalGroup', "vkuiGroup", sizeXClassNames[sizeX], mode === 'plain' && isInsideModal && "vkuiGroup--mode-plain-inside-modal", stylesMode[mode], stylesPadding[padding]),
-                children: [
-                    hasReactNode(header) && /*#__PURE__*/ _jsx("div", {
-                        className: "vkuiGroup__header",
-                        children: header
-                    }),
-                    children,
-                    hasReactNode(description) && /*#__PURE__*/ _jsx(Footnote, {
-                        className: "vkuiGroup__description",
-                        children: description
-                    })
-                ]
-            })),
-            siblingSeparatorElement
+            hasReactNode(header) && /*#__PURE__*/ _jsx(GroupHeader, {
+                children: header
+            }),
+            children,
+            hasReactNode(description) && /*#__PURE__*/ _jsx(GroupDescription, {
+                children: description
+            })
         ]
-    });
+    }));
 };
+Group.displayName = 'Group';
+Group.Container = GroupContainer;
+Group.Container.displayName = 'Group.Container';
+Group.Header = GroupHeader;
+Group.Header.displayName = 'Group.Header';
+Group.Description = GroupDescription;
+Group.Description.displayName = 'Group.Description';
+Group.ExpandedContent = GroupExpandedContent;
+Group.ExpandedContent.displayName = 'Group.ExpandedContent';
 
 //# sourceMappingURL=Group.js.map

package/dist/components/Group/Group.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Group/Group.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { SizeTypeValues } from '../../lib/adaptivity';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { AppRootContext } from '../AppRoot/AppRootContext';\nimport { ModalRootContext } from '../ModalRoot/ModalRootContext';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './Group.module.css';\n\nconst sizeXClassNames = {\n  none: classNames(styles['Group--sizeX-none'], 'vkuiInternalGroup--sizeX-none'),\n  regular: styles['Group--sizeX-regular'],\n  compact: styles['Group--sizeX-compact'],\n};\n\nconst stylesMode = {\n  none: classNames(styles['Group--mode-none'], 'vkuiInternalGroup--mode-none'),\n  plain: classNames(styles['Group--mode-plain'], 'vkuiInternalGroup--mode-plain'),\n  card: classNames(styles['Group--mode-card'], 'vkuiInternalGroup--mode-card'),\n};\n\nconst stylesPadding = {\n  s: styles['Group--padding-s'],\n  m: styles['Group--padding-m'],\n};\n\n/**\n * Вычисляем mode для Group.\n */\nfunction useGroupMode(\n  forcedMode: GroupProps['mode'],\n  sizeX: SizeTypeValues | 'none',\n  isInsideModal: boolean,\n): 'plain' | 'card' | 'none' {\n  const { layout } = React.useContext(AppRootContext);\n\n  if (forcedMode) {\n    return forcedMode;\n  }\n\n  if (isInsideModal) {\n    return 'plain';\n  }\n\n  if (layout) {\n    return layout;\n  }\n\n  if (sizeX !== 'none') {\n    return sizeX === 'regular' ? 'card' : 'plain';\n  }\n\n  return 'none';\n}\n\nexport interface GroupProps extends HTMLAttributesWithRootRef<HTMLElement> {\n  header?: React.ReactNode;\n  description?: React.ReactNode;\n  /**\n    `show` (только для `mode=\"plain\"`) - разделитель всегда показывается\n    `hide` - разделитель всегда спрятан,\n    `auto` - разделитель рисуется автоматически между соседними группами.\n   */\n  separator?: 'show' | 'hide' | 'auto';\n  /**\n   * Режим отображения. Если установлен `card`, выглядит как карточка c\n   * обводкой и внешними отступами. Если `plain` — без отступов и обводки.\n   * По умолчанию режим отображения зависит от `sizeX` (`mode=card` при `sizeX=REGULAR` и `mode=plain` при `sizeX=COMPACT`)\n   * В модальных окнах по умолчанию `plain`.\n   */\n  mode?: 'plain' | 'card';\n  /**\n   * Отвечает за отступы вокруг контента в режиме `card`.\n   */\n  padding?: 's' | 'm';\n}\n\nconst warn = warnOnce('Group');\n/**\n * @see https://vkcom.github.io/VKUI/#/Group\n */\nexport const Group = ({\n  header,\n  description,\n  children,\n  separator = 'auto',\n  mode: modeProps,\n  padding = 'm',\n  tabIndex: tabIndexProp,\n  ...restProps\n}: GroupProps): React.ReactNode => {\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const { sizeX = 'none' } = useAdaptivity();\n\n  const mode = useGroupMode(modeProps, sizeX, isInsideModal);\n\n  const isTabPanel = restProps.role === 'tabpanel';\n\n  if (\n    process.env.NODE_ENV === 'development' &&\n    isTabPanel &&\n    (!restProps['aria-controls'] || !restProps['id'])\n  ) {\n    warn(\n      'При использовании роли \"tabpanel\" необходимо задать значение свойств \"aria-controls\" и \"id\"',\n    );\n  }\n\n  const tabIndex = isTabPanel && tabIndexProp === undefined ? 0 : tabIndexProp;\n\n  let siblingSeparatorElement: React.ReactNode = null;\n  switch (separator) {\n    case 'auto':\n      siblingSeparatorElement = <div className={styles['Group__separator-sibling']} />;\n      break;\n    case 'show':\n      siblingSeparatorElement = (\n        <div\n          className={classNames(\n            styles['Group__separator-sibling'],\n            mode === 'plain' || mode === 'none'\n              ? styles['Group__separator-sibling--forced']\n              : undefined,\n          )}\n        />\n      );\n      break;\n    case 'hide':\n      break;\n  }\n\n  return (\n    <>\n      <RootComponent\n        Component=\"section\"\n        {...restProps}\n        tabIndex={tabIndex}\n        baseClassName={classNames(\n          'vkuiInternalGroup',\n          styles['Group'],\n          sizeXClassNames[sizeX],\n          mode === 'plain' && isInsideModal && styles['Group--mode-plain-inside-modal'],\n          stylesMode[mode],\n          stylesPadding[padding],\n        )}\n      >\n        {hasReactNode(header) && <div className={styles['Group__header']}>{header}</div>}\n        {children}\n        {hasReactNode(description) && (\n          <Footnote className={styles['Group__description']}>{description}</Footnote>\n        )}\n      </RootComponent>\n      {siblingSeparatorElement}\n    </>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivity","warnOnce","AppRootContext","ModalRootContext","RootComponent","Footnote","sizeXClassNames","none","regular","compact","stylesMode","plain","card","stylesPadding","s","m","useGroupMode","forcedMode","sizeX","isInsideModal","layout","useContext","warn","Group","header","description","children","separator","mode","modeProps","padding","tabIndex","tabIndexProp","restProps","isTabPanel","role","process","env","NODE_ENV","undefined","siblingSeparatorElement","div","className","Component","baseClassName"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,aAAa,QAAQ,4BAA4B;AAE1D,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,cAAc,QAAQ,4BAA4B;AAC3D,SAASC,gBAAgB,QAAQ,gCAAgC;AACjE,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,QAAQ,QAAQ,kCAAkC;AAG3D,MAAMC,kBAAkB;IACtBC,MAAMT,oCAAwC;IAC9CU,OAAO;IACPC,OAAO;AACT;AAEA,MAAMC,aAAa;IACjBH,MAAMT,mCAAuC;IAC7Ca,OAAOb,oCAAwC;IAC/Cc,MAAMd,mCAAuC;AAC/C;AAEA,MAAMe,gBAAgB;IACpBC,CAAC;IACDC,CAAC;AACH;AAEA;;CAEC,GACD,SAASC,aACPC,UAA8B,EAC9BC,KAA8B,EAC9BC,aAAsB;IAEtB,MAAM,EAAEC,MAAM,EAAE,GAAGvB,MAAMwB,UAAU,CAACnB;IAEpC,IAAIe,YAAY;QACd,OAAOA;IACT;IAEA,IAAIE,eAAe;QACjB,OAAO;IACT;IAEA,IAAIC,QAAQ;QACV,OAAOA;IACT;IAEA,IAAIF,UAAU,QAAQ;QACpB,OAAOA,UAAU,YAAY,SAAS;IACxC;IAEA,OAAO;AACT;AAwBA,MAAMI,OAAOrB,SAAS;AACtB;;CAEC,GACD,OAAO,MAAMsB,QAAQ;QAAC,EACpBC,MAAM,EACNC,WAAW,EACXC,QAAQ,EACRC,YAAY,MAAM,EAClBC,MAAMC,SAAS,EACfC,UAAU,GAAG,EACbC,UAAUC,YAAY,EAEX,WADRC;QAPHT;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;;IAGA,MAAM,EAAEZ,aAAa,EAAE,GAAGtB,MAAMwB,UAAU,CAAClB;IAC3C,MAAM,EAAEe,QAAQ,MAAM,EAAE,GAAGlB;IAE3B,MAAM4B,OAAOZ,aAAaa,WAAWX,OAAOC;IAE5C,MAAMe,aAAaD,UAAUE,IAAI,KAAK;IAEtC,IACEC,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBACzBJ,cACC,CAAA,CAACD,SAAS,CAAC,gBAAgB,IAAI,CAACA,SAAS,CAAC,KAAK,AAAD,GAC/C;QACAX,KACE;IAEJ;IAEA,MAAMS,WAAWG,cAAcF,iBAAiBO,YAAY,IAAIP;IAEhE,IAAIQ,0BAA2C;IAC/C,OAAQb;QACN,KAAK;YACHa,wCAA0B,KAACC;gBAAIC,SAAS;;YACxC;QACF,KAAK;YACHF,wCACE,KAACC;gBACCC,WAAW5C,2CAET8B,SAAS,WAAWA,SAAS,kDAEzBW;;YAIV;QACF,KAAK;YACH;IACJ;IAEA,qBACE;;0BACE,MAACnC;gBACCuC,WAAU;eACNV;gBACJF,UAAUA;gBACVa,eAAe9C,WACb,kCAEAQ,eAAe,CAACY,MAAM,EACtBU,SAAS,WAAWT,uDACpBT,UAAU,CAACkB,KAAK,EAChBf,aAAa,CAACiB,QAAQ;;oBAGvB/B,aAAayB,yBAAW,KAACiB;wBAAIC,SAAS;kCAA4BlB;;oBAClEE;oBACA3B,aAAa0B,8BACZ,KAACpB;wBAASqC,SAAS;kCAAiCjB;;;;YAGvDe;;;AAGP,EAAE"}
+{"version":3,"sources":["../../../src/components/Group/Group.tsx"],"sourcesContent":["import * as React from 'react';\nimport { hasReactNode } from '@vkontakte/vkjs';\nimport { GroupContainer, type GroupContainerProps } from './GroupContainer';\nimport { GroupDescription } from './GroupDescription';\nimport { GroupExpandedContent } from './GroupExpandedContent';\nimport { GroupHeader } from './GroupHeader';\n\nexport interface GroupProps extends GroupContainerProps {\n  header?: React.ReactNode;\n  description?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Group\n */\nexport const Group: React.FC<GroupProps> & {\n  Container: typeof GroupContainer;\n  Header: typeof GroupHeader;\n  Description: typeof GroupDescription;\n  ExpandedContent: typeof GroupExpandedContent;\n} = ({ header, description, children, ...restProps }: GroupProps): React.ReactNode => {\n  return (\n    <GroupContainer {...restProps}>\n      {hasReactNode(header) && <GroupHeader>{header}</GroupHeader>}\n      {children}\n      {hasReactNode(description) && <GroupDescription>{description}</GroupDescription>}\n    </GroupContainer>\n  );\n};\n\nGroup.displayName = 'Group';\nGroup.Container = GroupContainer;\nGroup.Container.displayName = 'Group.Container';\nGroup.Header = GroupHeader;\nGroup.Header.displayName = 'Group.Header';\nGroup.Description = GroupDescription;\nGroup.Description.displayName = 'Group.Description';\nGroup.ExpandedContent = GroupExpandedContent;\nGroup.ExpandedContent.displayName = 'Group.ExpandedContent';\n"],"names":["React","hasReactNode","GroupContainer","GroupDescription","GroupExpandedContent","GroupHeader","Group","header","description","children","restProps","displayName","Container","Header","Description","ExpandedContent"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,kBAAkB;AAC/C,SAASC,cAAc,QAAkC,mBAAmB;AAC5E,SAASC,gBAAgB,QAAQ,qBAAqB;AACtD,SAASC,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,WAAW,QAAQ,gBAAgB;AAO5C;;CAEC,GACD,OAAO,MAAMC,QAKT;QAAC,EAAEC,MAAM,EAAEC,WAAW,EAAEC,QAAQ,EAA4B,WAAvBC;QAAlCH;QAAQC;QAAaC;;IAC1B,qBACE,MAACP,wDAAmBQ;;YACjBT,aAAaM,yBAAW,KAACF;0BAAaE;;YACtCE;YACAR,aAAaO,8BAAgB,KAACL;0BAAkBK;;;;AAGvD,EAAE;AAEFF,MAAMK,WAAW,GAAG;AACpBL,MAAMM,SAAS,GAAGV;AAClBI,MAAMM,SAAS,CAACD,WAAW,GAAG;AAC9BL,MAAMO,MAAM,GAAGR;AACfC,MAAMO,MAAM,CAACF,WAAW,GAAG;AAC3BL,MAAMQ,WAAW,GAAGX;AACpBG,MAAMQ,WAAW,CAACH,WAAW,GAAG;AAChCL,MAAMS,eAAe,GAAGX;AACxBE,MAAMS,eAAe,CAACJ,WAAW,GAAG"}

package/dist/components/Group/GroupContainer.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import type { HasComponent, HTMLAttributesWithRootRef } from '../../types';
+export type GroupContainerProps = HTMLAttributesWithRootRef<HTMLElement> & HasComponent & {
+    /**
+    `show` (только для `mode="plain"`) - разделитель всегда показывается
+    `hide` - разделитель всегда спрятан,
+    `auto` - разделитель рисуется автоматически между соседними группами.
+   */
+    separator?: 'show' | 'hide' | 'auto';
+    /**
+     * Режим отображения. Если установлен `card`, выглядит как карточка c
+     * обводкой и внешними отступами. Если `plain` — без отступов и обводки.
+     * По умолчанию режим отображения зависит от `sizeX` (`mode=card` при `sizeX=REGULAR` и `mode=plain` при `sizeX=COMPACT`)
+     * В модальных окнах по умолчанию `plain`.
+     */
+    mode?: 'plain' | 'card';
+    /**
+     * Отвечает за отступы вокруг контента в режиме `card`.
+     */
+    padding?: 's' | 'm';
+};
+export declare const GroupContainer: React.FC<GroupContainerProps>;
+//# sourceMappingURL=GroupContainer.d.ts.map

package/dist/components/Group/GroupContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupContainer.d.ts","sourceRoot":"","sources":["../../../src/components/Group/GroupContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,YAAY,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAsD3E,MAAM,MAAM,mBAAmB,GAAG,yBAAyB,CAAC,WAAW,CAAC,GACtE,YAAY,GAAG;IACb;;;;KAIC;IACD,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IACrC;;;;;OAKG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,OAAO,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;CACrB,CAAC;AAIJ,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAmExD,CAAC"}

package/dist/components/Group/GroupContainer.js

@@ -0,0 +1,91 @@
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
+import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { useAdaptivity } from '../../hooks/useAdaptivity';
+import { warnOnce } from '../../lib/warnOnce';
+import { AppRootContext } from '../AppRoot/AppRootContext';
+import { ModalRootContext } from '../ModalRoot/ModalRootContext';
+import { RootComponent } from '../RootComponent/RootComponent';
+const sizeXClassNames = {
+    none: classNames("vkuiGroup--sizeX-none", 'vkuiInternalGroup--sizeX-none'),
+    regular: "vkuiGroup--sizeX-regular",
+    compact: "vkuiGroup--sizeX-compact"
+};
+const stylesMode = {
+    none: classNames("vkuiGroup--mode-none", 'vkuiInternalGroup--mode-none'),
+    plain: classNames("vkuiGroup--mode-plain", 'vkuiInternalGroup--mode-plain'),
+    card: classNames("vkuiGroup--mode-card", 'vkuiInternalGroup--mode-card')
+};
+const stylesPadding = {
+    s: "vkuiGroup--padding-s",
+    m: "vkuiGroup--padding-m"
+};
+/**
+ * Вычисляем mode для Group.
+ */ function useGroupMode(forcedMode, sizeX, isInsideModal) {
+    const { layout } = React.useContext(AppRootContext);
+    if (forcedMode) {
+        return forcedMode;
+    }
+    if (isInsideModal) {
+        return 'plain';
+    }
+    if (layout) {
+        return layout;
+    }
+    if (sizeX !== 'none') {
+        return sizeX === 'regular' ? 'card' : 'plain';
+    }
+    return 'none';
+}
+const warn = warnOnce('Group');
+export const GroupContainer = (_param)=>{
+    var { children, separator = 'auto', mode: modeProps, padding = 'm', tabIndex: tabIndexProp } = _param, restProps = _object_without_properties(_param, [
+        "children",
+        "separator",
+        "mode",
+        "padding",
+        "tabIndex"
+    ]);
+    const { isInsideModal } = React.useContext(ModalRootContext);
+    const { sizeX = 'none' } = useAdaptivity();
+    const mode = useGroupMode(modeProps, sizeX, isInsideModal);
+    const isTabPanel = restProps.role === 'tabpanel';
+    if (process.env.NODE_ENV === 'development' && isTabPanel && (!restProps['aria-controls'] || !restProps['id'])) {
+        warn('При использовании роли "tabpanel" необходимо задать значение свойств "aria-controls" и "id"');
+    }
+    const tabIndex = isTabPanel && tabIndexProp === undefined ? 0 : tabIndexProp;
+    let siblingSeparatorElement = null;
+    switch(separator){
+        case 'auto':
+            siblingSeparatorElement = /*#__PURE__*/ _jsx("div", {
+                className: "vkuiGroup__separator-sibling"
+            });
+            break;
+        case 'show':
+            siblingSeparatorElement = /*#__PURE__*/ _jsx("div", {
+                className: classNames("vkuiGroup__separator-sibling", mode === 'plain' || mode === 'none' ? "vkuiGroup__separator-sibling--forced" : undefined)
+            });
+            break;
+        case 'hide':
+            break;
+    }
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(RootComponent, _object_spread_props(_object_spread({
+                Component: "section"
+            }, restProps), {
+                tabIndex: tabIndex,
+                baseClassName: classNames('vkuiInternalGroup', "vkuiGroup", sizeXClassNames[sizeX], mode === 'plain' && isInsideModal && "vkuiGroup--mode-plain-inside-modal", stylesMode[mode], stylesPadding[padding]),
+                children: children
+            })),
+            siblingSeparatorElement
+        ]
+    });
+};
+GroupContainer.displayName = 'GroupContainer';
+
+//# sourceMappingURL=GroupContainer.js.map

package/dist/components/Group/GroupContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Group/GroupContainer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport type { SizeTypeValues } from '../../lib/adaptivity';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { HasComponent, HTMLAttributesWithRootRef } from '../../types';\nimport { AppRootContext } from '../AppRoot/AppRootContext';\nimport { ModalRootContext } from '../ModalRoot/ModalRootContext';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Group.module.css';\n\nconst sizeXClassNames = {\n  none: classNames(styles['Group--sizeX-none'], 'vkuiInternalGroup--sizeX-none'),\n  regular: styles['Group--sizeX-regular'],\n  compact: styles['Group--sizeX-compact'],\n};\n\nconst stylesMode = {\n  none: classNames(styles['Group--mode-none'], 'vkuiInternalGroup--mode-none'),\n  plain: classNames(styles['Group--mode-plain'], 'vkuiInternalGroup--mode-plain'),\n  card: classNames(styles['Group--mode-card'], 'vkuiInternalGroup--mode-card'),\n};\n\nconst stylesPadding = {\n  s: styles['Group--padding-s'],\n  m: styles['Group--padding-m'],\n};\n\ntype GroupMode = 'plain' | 'card' | 'none';\n\n/**\n * Вычисляем mode для Group.\n */\nfunction useGroupMode(\n  forcedMode: GroupContainerProps['mode'],\n  sizeX: SizeTypeValues | 'none',\n  isInsideModal: boolean,\n): GroupMode {\n  const { layout } = React.useContext(AppRootContext);\n\n  if (forcedMode) {\n    return forcedMode;\n  }\n\n  if (isInsideModal) {\n    return 'plain';\n  }\n\n  if (layout) {\n    return layout;\n  }\n\n  if (sizeX !== 'none') {\n    return sizeX === 'regular' ? 'card' : 'plain';\n  }\n\n  return 'none';\n}\n\nexport type GroupContainerProps = HTMLAttributesWithRootRef<HTMLElement> &\n  HasComponent & {\n    /**\n    `show` (только для `mode=\"plain\"`) - разделитель всегда показывается\n    `hide` - разделитель всегда спрятан,\n    `auto` - разделитель рисуется автоматически между соседними группами.\n   */\n    separator?: 'show' | 'hide' | 'auto';\n    /**\n     * Режим отображения. Если установлен `card`, выглядит как карточка c\n     * обводкой и внешними отступами. Если `plain` — без отступов и обводки.\n     * По умолчанию режим отображения зависит от `sizeX` (`mode=card` при `sizeX=REGULAR` и `mode=plain` при `sizeX=COMPACT`)\n     * В модальных окнах по умолчанию `plain`.\n     */\n    mode?: 'plain' | 'card';\n    /**\n     * Отвечает за отступы вокруг контента в режиме `card`.\n     */\n    padding?: 's' | 'm';\n  };\n\nconst warn = warnOnce('Group');\n\nexport const GroupContainer: React.FC<GroupContainerProps> = ({\n  children,\n  separator = 'auto',\n  mode: modeProps,\n  padding = 'm',\n  tabIndex: tabIndexProp,\n  ...restProps\n}: GroupContainerProps) => {\n  const { isInsideModal } = React.useContext(ModalRootContext);\n  const { sizeX = 'none' } = useAdaptivity();\n\n  const mode = useGroupMode(modeProps, sizeX, isInsideModal);\n\n  const isTabPanel = restProps.role === 'tabpanel';\n\n  if (\n    process.env.NODE_ENV === 'development' &&\n    isTabPanel &&\n    (!restProps['aria-controls'] || !restProps['id'])\n  ) {\n    warn(\n      'При использовании роли \"tabpanel\" необходимо задать значение свойств \"aria-controls\" и \"id\"',\n    );\n  }\n\n  const tabIndex = isTabPanel && tabIndexProp === undefined ? 0 : tabIndexProp;\n\n  let siblingSeparatorElement: React.ReactNode = null;\n  switch (separator) {\n    case 'auto':\n      siblingSeparatorElement = <div className={styles['Group__separator-sibling']} />;\n      break;\n    case 'show':\n      siblingSeparatorElement = (\n        <div\n          className={classNames(\n            styles['Group__separator-sibling'],\n            mode === 'plain' || mode === 'none'\n              ? styles['Group__separator-sibling--forced']\n              : undefined,\n          )}\n        />\n      );\n      break;\n    case 'hide':\n      break;\n  }\n  return (\n    <>\n      <RootComponent\n        Component=\"section\"\n        {...restProps}\n        tabIndex={tabIndex}\n        baseClassName={classNames(\n          'vkuiInternalGroup',\n          styles['Group'],\n          sizeXClassNames[sizeX],\n          mode === 'plain' && isInsideModal && styles['Group--mode-plain-inside-modal'],\n          stylesMode[mode],\n          stylesPadding[padding],\n        )}\n      >\n        {children}\n      </RootComponent>\n      {siblingSeparatorElement}\n    </>\n  );\n};\nGroupContainer.displayName = 'GroupContainer';\n"],"names":["React","classNames","useAdaptivity","warnOnce","AppRootContext","ModalRootContext","RootComponent","sizeXClassNames","none","regular","compact","stylesMode","plain","card","stylesPadding","s","m","useGroupMode","forcedMode","sizeX","isInsideModal","layout","useContext","warn","GroupContainer","children","separator","mode","modeProps","padding","tabIndex","tabIndexProp","restProps","isTabPanel","role","process","env","NODE_ENV","undefined","siblingSeparatorElement","div","className","Component","baseClassName","displayName"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,4BAA4B;AAE1D,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SAASC,cAAc,QAAQ,4BAA4B;AAC3D,SAASC,gBAAgB,QAAQ,gCAAgC;AACjE,SAASC,aAAa,QAAQ,iCAAiC;AAG/D,MAAMC,kBAAkB;IACtBC,MAAMP,oCAAwC;IAC9CQ,OAAO;IACPC,OAAO;AACT;AAEA,MAAMC,aAAa;IACjBH,MAAMP,mCAAuC;IAC7CW,OAAOX,oCAAwC;IAC/CY,MAAMZ,mCAAuC;AAC/C;AAEA,MAAMa,gBAAgB;IACpBC,CAAC;IACDC,CAAC;AACH;AAIA;;CAEC,GACD,SAASC,aACPC,UAAuC,EACvCC,KAA8B,EAC9BC,aAAsB;IAEtB,MAAM,EAAEC,MAAM,EAAE,GAAGrB,MAAMsB,UAAU,CAAClB;IAEpC,IAAIc,YAAY;QACd,OAAOA;IACT;IAEA,IAAIE,eAAe;QACjB,OAAO;IACT;IAEA,IAAIC,QAAQ;QACV,OAAOA;IACT;IAEA,IAAIF,UAAU,QAAQ;QACpB,OAAOA,UAAU,YAAY,SAAS;IACxC;IAEA,OAAO;AACT;AAuBA,MAAMI,OAAOpB,SAAS;AAEtB,OAAO,MAAMqB,iBAAgD;QAAC,EAC5DC,QAAQ,EACRC,YAAY,MAAM,EAClBC,MAAMC,SAAS,EACfC,UAAU,GAAG,EACbC,UAAUC,YAAY,EAEF,WADjBC;QALHP;QACAC;QACAC;QACAE;QACAC;;IAGA,MAAM,EAAEV,aAAa,EAAE,GAAGpB,MAAMsB,UAAU,CAACjB;IAC3C,MAAM,EAAEc,QAAQ,MAAM,EAAE,GAAGjB;IAE3B,MAAMyB,OAAOV,aAAaW,WAAWT,OAAOC;IAE5C,MAAMa,aAAaD,UAAUE,IAAI,KAAK;IAEtC,IACEC,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBACzBJ,cACC,CAAA,CAACD,SAAS,CAAC,gBAAgB,IAAI,CAACA,SAAS,CAAC,KAAK,AAAD,GAC/C;QACAT,KACE;IAEJ;IAEA,MAAMO,WAAWG,cAAcF,iBAAiBO,YAAY,IAAIP;IAEhE,IAAIQ,0BAA2C;IAC/C,OAAQb;QACN,KAAK;YACHa,wCAA0B,KAACC;gBAAIC,SAAS;;YACxC;QACF,KAAK;YACHF,wCACE,KAACC;gBACCC,WAAWxC,2CAET0B,SAAS,WAAWA,SAAS,kDAEzBW;;YAIV;QACF,KAAK;YACH;IACJ;IACA,qBACE;;0BACE,KAAChC;gBACCoC,WAAU;eACNV;gBACJF,UAAUA;gBACVa,eAAe1C,WACb,kCAEAM,eAAe,CAACY,MAAM,EACtBQ,SAAS,WAAWP,uDACpBT,UAAU,CAACgB,KAAK,EAChBb,aAAa,CAACe,QAAQ;0BAGvBJ;;YAEFc;;;AAGP,EAAE;AACFf,eAAeoB,WAAW,GAAG"}

package/dist/components/Group/GroupDescription.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import type { HasComponent, HTMLAttributesWithRootRef } from '../../types';
+export type GroupDescriptionProps = HTMLAttributesWithRootRef<HTMLElement> & HasComponent;
+export declare const GroupDescription: React.FC<GroupDescriptionProps>;
+//# sourceMappingURL=GroupDescription.d.ts.map

package/dist/components/Group/GroupDescription.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupDescription.d.ts","sourceRoot":"","sources":["../../../src/components/Group/GroupDescription.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,YAAY,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAI3E,MAAM,MAAM,qBAAqB,GAAG,yBAAyB,CAAC,WAAW,CAAC,GAAG,YAAY,CAAC;AAC1F,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAK5D,CAAC"}

package/dist/components/Group/GroupDescription.js

@@ -0,0 +1,17 @@
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { Footnote } from '../Typography/Footnote/Footnote';
+export const GroupDescription = (_param)=>{
+    var { className } = _param, restProps = _object_without_properties(_param, [
+        "className"
+    ]);
+    return /*#__PURE__*/ _jsx(Footnote, _object_spread({
+        className: classNames(className, "vkuiGroup__description")
+    }, restProps));
+};
+GroupDescription.displayName = 'GroupDescription';
+
+//# sourceMappingURL=GroupDescription.js.map

package/dist/components/Group/GroupDescription.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Group/GroupDescription.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HasComponent, HTMLAttributesWithRootRef } from '../../types';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport styles from './Group.module.css';\n\nexport type GroupDescriptionProps = HTMLAttributesWithRootRef<HTMLElement> & HasComponent;\nexport const GroupDescription: React.FC<GroupDescriptionProps> = ({\n  className,\n  ...restProps\n}: GroupDescriptionProps): React.ReactNode => (\n  <Footnote className={classNames(className, styles['Group__description'])} {...restProps} />\n);\nGroupDescription.displayName = 'GroupDescription';\n"],"names":["React","classNames","Footnote","GroupDescription","className","restProps","displayName"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,QAAQ,QAAQ,kCAAkC;AAI3D,OAAO,MAAMC,mBAAoD;QAAC,EAChEC,SAAS,EAEa,WADnBC;QADHD;;yBAGA,KAACF;QAASE,WAAWH,WAAWG;OAA8CC;EAC9E;AACFF,iBAAiBG,WAAW,GAAG"}

package/dist/components/Group/GroupExpandedContent.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import type { HasComponent, HTMLAttributesWithRootRef } from '../../types';
+export type GroupExpandedContentProps = HTMLAttributesWithRootRef<HTMLElement> & HasComponent & {
+    direction?: 'inline' | 'block';
+};
+export declare const GroupExpandedContent: React.FC<GroupExpandedContentProps>;
+//# sourceMappingURL=GroupExpandedContent.d.ts.map

package/dist/components/Group/GroupExpandedContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupExpandedContent.d.ts","sourceRoot":"","sources":["../../../src/components/Group/GroupExpandedContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,YAAY,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAS3E,MAAM,MAAM,yBAAyB,GAAG,yBAAyB,CAAC,WAAW,CAAC,GAC5E,YAAY,GAAG;IACb,SAAS,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;CAChC,CAAC;AACJ,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAWpE,CAAC"}

package/dist/components/Group/GroupExpandedContent.js

@@ -0,0 +1,23 @@
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
+import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { RootComponent } from '../RootComponent/RootComponent';
+const stylesDirection = {
+    inline: "vkuiGroup__expanded-content--inline",
+    block: "vkuiGroup__expanded-content--block"
+};
+export const GroupExpandedContent = (_param)=>{
+    var { direction = 'inline' } = _param, restProps = _object_without_properties(_param, [
+        "direction"
+    ]);
+    return /*#__PURE__*/ _jsx(RootComponent, _object_spread_props(_object_spread({
+        Component: "div"
+    }, restProps), {
+        baseClassName: classNames("vkuiGroup__expanded-content", stylesDirection[direction])
+    }));
+};
+
+//# sourceMappingURL=GroupExpandedContent.js.map

package/dist/components/Group/GroupExpandedContent.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Group/GroupExpandedContent.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HasComponent, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './Group.module.css';\n\nconst stylesDirection = {\n  inline: styles['Group__expanded-content--inline'],\n  block: styles['Group__expanded-content--block'],\n};\n\nexport type GroupExpandedContentProps = HTMLAttributesWithRootRef<HTMLElement> &\n  HasComponent & {\n    direction?: 'inline' | 'block';\n  };\nexport const GroupExpandedContent: React.FC<GroupExpandedContentProps> = ({\n  direction = 'inline',\n  ...restProps\n}: GroupExpandedContentProps) => {\n  return (\n    <RootComponent\n      Component=\"div\"\n      {...restProps}\n      baseClassName={classNames(styles['Group__expanded-content'], stylesDirection[direction])}\n    />\n  );\n};\n"],"names":["React","classNames","RootComponent","stylesDirection","inline","block","GroupExpandedContent","direction","restProps","Component","baseClassName"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,aAAa,QAAQ,iCAAiC;AAG/D,MAAMC,kBAAkB;IACtBC,MAAM;IACNC,KAAK;AACP;AAMA,OAAO,MAAMC,uBAA4D;QAAC,EACxEC,YAAY,QAAQ,EAEM,WADvBC;QADHD;;IAGA,qBACE,KAACL;QACCO,WAAU;OACND;QACJE,eAAeT,0CAA8CE,eAAe,CAACI,UAAU;;AAG7F,EAAE"}

package/dist/components/Group/GroupHeader.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import type { HasComponent, HTMLAttributesWithRootRef } from '../../types';
+export type GroupHeaderProps = HTMLAttributesWithRootRef<HTMLElement> & HasComponent;
+export declare const GroupHeader: React.FC<GroupHeaderProps>;
+//# sourceMappingURL=GroupHeader.d.ts.map

package/dist/components/Group/GroupHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupHeader.d.ts","sourceRoot":"","sources":["../../../src/components/Group/GroupHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,YAAY,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAG3E,MAAM,MAAM,gBAAgB,GAAG,yBAAyB,CAAC,WAAW,CAAC,GAAG,YAAY,CAAC;AACrF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAKlD,CAAC"}

package/dist/components/Group/GroupHeader.js

@@ -0,0 +1,16 @@
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+export const GroupHeader = (_param)=>{
+    var { className } = _param, restProps = _object_without_properties(_param, [
+        "className"
+    ]);
+    return /*#__PURE__*/ _jsx("div", _object_spread({
+        className: classNames(className, "vkuiGroup__header")
+    }, restProps));
+};
+GroupHeader.displayName = 'GroupHeader';
+
+//# sourceMappingURL=GroupHeader.js.map

package/dist/components/Group/GroupHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Group/GroupHeader.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HasComponent, HTMLAttributesWithRootRef } from '../../types';\nimport styles from './Group.module.css';\n\nexport type GroupHeaderProps = HTMLAttributesWithRootRef<HTMLElement> & HasComponent;\nexport const GroupHeader: React.FC<GroupHeaderProps> = ({\n  className,\n  ...restProps\n}: GroupHeaderProps): React.ReactNode => (\n  <div className={classNames(className, styles['Group__header'])} {...restProps} />\n);\nGroupHeader.displayName = 'GroupHeader';\n"],"names":["React","classNames","GroupHeader","className","restProps","div","displayName"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAK7C,OAAO,MAAMC,cAA0C;QAAC,EACtDC,SAAS,EAEQ,WADdC;QADHD;;yBAGA,KAACE;QAAIF,WAAWF,WAAWE;OAAyCC;EACpE;AACFF,YAAYI,WAAW,GAAG"}

package/dist/components/Header/Header.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { HasComponent, HTMLAttributesWithRootRef } from '../../types';
+import type { HasComponent, HTMLAttributesWithRootRef } from '../../types';
 export interface HeaderProps extends HTMLAttributesWithRootRef<HTMLElement>, HasComponent {
     mode?: 'primary' | 'secondary' | 'tertiary';
     size?: 'regular' | 'large';
@@ -14,9 +14,29 @@ export interface HeaderProps extends HTMLAttributesWithRootRef<HTMLElement>, Has
      */
     indicator?: React.ReactNode;
     multiline?: boolean;
+    /**
+     * Иконка слева (рекомендуется использовать размер 28px)
+     */
+    before?: React.ReactNode;
+    /**
+     * Иконка слева от title (рекомендуется использовать размер 16px)
+     */
+    beforeTitle?: React.ReactNode;
+    /**
+     * Иконка справа от title (рекомендуется использовать размер 16px)
+     */
+    afterTitle?: React.ReactNode;
+    /**
+     * Иконка слева от subtitle (рекомендуется использовать размер 12px)
+     */
+    beforeSubtitle?: React.ReactNode;
+    /**
+     * Иконка справа от subtitle (рекомендуется использовать размер 12px)
+     */
+    afterSubtitle?: React.ReactNode;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Header
  */
-export declare const Header: ({ mode, size, Component, children, subtitle, subtitleComponent, indicator, aside, multiline, ...restProps }: HeaderProps) => React.ReactNode;
+export declare const Header: ({ mode, size, Component, children, subtitle, subtitleComponent, indicator, aside, multiline, before, beforeTitle, afterTitle, beforeSubtitle, afterSubtitle, ...restProps }: HeaderProps) => React.ReactNode;
 //# sourceMappingURL=Header.d.ts.map

package/dist/components/Header/Header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../src/components/Header/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,YAAY,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAStE,MAAM,WAAW,WAAY,SAAQ,yBAAyB,CAAC,WAAW,CAAC,EAAE,YAAY;IACvF,IAAI,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;IAC5C,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,iBAAiB,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACtC;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AA6CD;;GAEG;AACH,eAAO,MAAM,MAAM,gHAWhB,WAAW,KAAG,KAAK,CAAC,SAsDtB,CAAC"}
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../src/components/Header/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,YAAY,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAS3E,MAAM,WAAW,WAAY,SAAQ,yBAAyB,CAAC,WAAW,CAAC,EAAE,YAAY;IACvF,IAAI,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;IAC5C,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,iBAAiB,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACtC;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACjC;AA6CD;;GAEG;AACH,eAAO,MAAM,MAAM,gLAgBhB,WAAW,KAAG,KAAK,CAAC,SAyEtB,CAAC"}