altum 0.0.11 → 0.0.12

package/CHANGELOG.md

@@ -8,6 +8,18 @@
 
 ## [Unreleased]
 
+## [0.0.12] — 2026-10-03
+
+**`Header`** — шапка страницы: `Title`, `Subtitle` и вкладки. Внутри **`Layout.Header`** черта на всю ширину и по нижнему краю, до контента полный `gap`.
+
+**`Layout`** — `padding` 12 / 20 / 28px. Низ шапки и верх подвала — половина `gap`. У sticky `variant` `primary` / `tinted` / `secondary` красит фон после сдвига скролла. Заливка промежутка через `::before` / `::after` снята.
+
+**Добавлено.** **`useStickyChrome`** в `altum/hooks`: флаг и `data-scrolled`, край `start` / `end`, свой scrollport или окно. **`Modal.Header`** собирает шапку через **`Header`**.
+
+**Несовместимо.** **`Tabs`**: `items` на корне, панели через `tabsRef`. Контекст и `Tabs.List` сняты.
+
+**Исправлено.** **`Tabs`** `line` — прямая черта без скруглённой заливки; `pill` снова берёт трек **`SegmentedControl`**.
+
 ## [0.0.11] — 2026-10-03
 
 **`Modal`** — `size` `sm` / `md` / `lg` (400 / 500 / 600px): ширина не больше окна и отступает на 16px от краёв. **`CommandPalette`** той же ширины, что **`Modal`** `md`.

package/dist/components/ConfirmDialog/ConfirmDialog.js

@@ -1 +1 @@
-"use client";import{jsxs as m,jsx as i}from"react/jsx-runtime";import{Button as o}from"../Button/Button.js";import{Modal as n}from"../Modal/Modal.js";import{Title as z}from"../Title/Title.js";import{useLocale as B}from"../../locales/localeContext.js";import{ruSlice as j}from"../../locales/slices/confirmDialog.ru.js";import{useFallbackId as w}from"../../core/utils/useFallbackId.js";const F={confirmDialog:j};function M({open:f,title:p,message:g,confirmLabel:b,cancelLabel:h,status:l="default",secondaryAction:e,onConfirm:u,onOpenChange:d,loading:a=!1,className:C,id:y,rootRef:v,...k}){const{t:c}=B(F),D=b??c("confirmDialog.confirm"),L=h??c("confirmDialog.cancel"),r=w(y),s=`${r}-title`,t=`${r}-message`,x=()=>{a||d(!1)};return m(n,{rootRef:v,open:f,onOpenChange:d,"aria-labelledby":s,"aria-describedby":t,className:C,id:r,...k,showClose:!1,children:[i(n.Header,{children:i(z,{level:3,id:s,children:p})}),i(n.Body,{id:t,children:g}),m(n.Footer,{align:e?"space-between":"end","data-variant":l,children:[e&&i(o,{variant:e.variant??"secondary",size:"md",onClick:e.onClick,disabled:a||e.disabled,children:e.label}),i(o,{variant:"secondary",size:"md",onClick:x,disabled:a,children:L}),i(o,{variant:l==="danger"?"danger":"primary",size:"md",onClick:u,loading:a,children:D})]})]})}export{M as ConfirmDialog};
+"use client";import{jsxs as m,jsx as a}from"react/jsx-runtime";import{Button as l}from"../Button/Button.js";import{Modal as i}from"../Modal/Modal.js";import{useLocale as x}from"../../locales/localeContext.js";import{ruSlice as B}from"../../locales/slices/confirmDialog.ru.js";import{useFallbackId as j}from"../../core/utils/useFallbackId.js";const w={confirmDialog:B};function F({open:f,title:g,message:p,confirmLabel:b,cancelLabel:h,status:o="default",secondaryAction:e,onConfirm:u,onOpenChange:d,loading:n=!1,className:C,id:y,rootRef:v,...k}){const{t:c}=x(w),z=b??c("confirmDialog.confirm"),D=h??c("confirmDialog.cancel"),r=j(y),s=`${r}-title`,t=`${r}-message`,L=()=>{n||d(!1)};return m(i,{rootRef:v,open:f,onOpenChange:d,"aria-labelledby":s,"aria-describedby":t,className:C,id:r,...k,showClose:!1,children:[a(i.Header,{children:a(i.Header.Title,{level:4,id:s,children:g})}),a(i.Body,{id:t,children:p}),m(i.Footer,{align:e?"space-between":"end","data-variant":o,children:[e&&a(l,{variant:e.variant??"secondary",size:"md",onClick:e.onClick,disabled:n||e.disabled,children:e.label}),a(l,{variant:"secondary",size:"md",onClick:L,disabled:n,children:D}),a(l,{variant:o==="danger"?"danger":"primary",size:"md",onClick:u,loading:n,children:z})]})]})}export{F as ConfirmDialog};

package/dist/components/Header/Header.js

@@ -0,0 +1 @@
+"use client";import{jsx as r}from"react/jsx-runtime";import{Text as f}from"../Text/Text.js";import{Title as n}from"../Title/Title.js";import{Tabs as p}from"../Tabs/Tabs.js";import{cn as t}from"../../core/utils/cn.js";import o from"./Header.module.css.js";const l=({className:e,rootRef:a,...s})=>r("div",{ref:a,"data-page-header":"",className:t(o.header,e),...s}),m=({className:e,level:a=3,...s})=>r(n,{level:a,className:t(o.title,e),...s}),i=({className:e,size:a="sm",color:s="secondary",...d})=>r(f,{size:a,color:s,className:e,...d}),c=({className:e,variant:a="line",...s})=>r(p,{...s,variant:a,className:t(o.tabs,e),"data-chrome":""}),N=Object.assign(l,{Title:m,Subtitle:i,Tabs:c});export{N as Header,l as HeaderRoot,i as HeaderSubtitle,c as HeaderTabs,m as HeaderTitle};

package/dist/components/Header/Header.module.css.js

@@ -0,0 +1 @@
+"use client";import{injectCss as a}from"../../core/utils/injectCss.js";var o=".RUooH{align-items:stretch;\u001e;display:flex;flex-direction:column;gap:\u00021);margin:0}.KJawI,.RUooH{min-width:0;width:100%}.KJawI{margin-top:\u00023)}";const t={header:"RUooH",tabs:"KJawI"};a(o);export{t as default};

package/dist/components/Layout/Layout.js

@@ -1 +1 @@
-"use client";import{jsx as u}from"react/jsx-runtime";import{cn as L}from"../../core/utils/cn.js";import o from"./Layout.module.css.js";function e(a,{as:t="div",className:r,sticky:c,align:g,padding:l,gap:y,style:f,rootRef:m,...p}){return u(t,{ref:m,...p,className:L(a,r),"data-padding":l,"data-gap":y,"data-sticky":c?"":void 0,"data-align":g,style:f})}const n=a=>e(o.root,a),s=({as:a="header",...t})=>e(o.header,{as:a,...t}),i=a=>e(o.content,a),d=({as:a="footer",align:t="start",...r})=>e(o.footer,{as:a,align:t,...r}),h=Object.assign(n,{Header:s,Content:i,Footer:d});export{h as Layout,i as LayoutContent,d as LayoutFooter,s as LayoutHeader,n as LayoutRoot};
+"use client";import{jsx as R}from"react/jsx-runtime";import{useRef as k}from"react";import{cn as L}from"../../core/utils/cn.js";import{uRef as h}from"../../core/utils/bundle.js";import{useStickyChrome as C}from"../../hooks/useStickyChrome.js";import s from"./Layout.module.css.js";function c(t,r,a){const o=k(null);return C(o,{enabled:r,edge:a,offset:a==="start"?0:1}),h(o,t)}function i(t,{as:r="div",className:a,sticky:o,variant:e,align:n,padding:f,gap:l,style:p,rootRef:g,...v}){return R(r,{ref:g,...v,className:L(t,a),"data-padding":f,"data-gap":l,"data-sticky":o?"":void 0,"data-variant":e,"data-align":n,style:p})}const d=t=>i(s.root,t),u=({as:t="header",sticky:r,variant:a,rootRef:o,...e})=>{const n=c(o,!!(r&&a),"start");return i(s.header,{as:t,sticky:r,variant:a,rootRef:n,...e})},m=t=>i(s.content,t),y=({as:t="footer",align:r="start",sticky:a,variant:o,rootRef:e,...n})=>{const f=c(e,!!(a&&o),"end");return i(s.footer,{as:t,align:r,sticky:a,variant:o,rootRef:f,...n})},b=Object.assign(d,{Header:u,Content:m,Footer:y});export{b as Layout,m as LayoutContent,y as LayoutFooter,u as LayoutHeader,d as LayoutRoot};

package/dist/components/Layout/Layout.module.css.js

@@ -1 +1 @@
-"use client";import{injectCss as a}from"../../core/utils/injectCss.js";var t=".tyzJ8{\u0014layout-pad:0;\u0014layout-gap:0;\u001e;display:flex;flex:1 1 auto;flex-direction:column;height:100%;min-height:0;min-width:0;overflow:hidden auto;width:100%}.tyzJ8[data-padding=sm]{\u0014layout-pad:\u00023)}.tyzJ8[data-padding=md]{\u0014layout-pad:\u00024)}.tyzJ8[data-padding=lg]{\u0014layout-pad:\u00026)}.tyzJ8[data-gap=sm]{\u0014layout-gap:\u00023)}.tyzJ8[data-gap=md]{\u0014layout-gap:\u00024)}.tyzJ8[data-gap=lg]{\u0014layout-gap:\u00026)}.tyzJ8[data-gap]{\u0011layout-gap)}.tyzJ8[data-padding]>:is(.j6ao5,.Wa4rZ,._266Qh){\u001e;padding-inline:\u0013layout-pad)}.tyzJ8[data-padding]>:is(.j6ao5,._266Qh:first-child,.Wa4rZ:first-child){padding-block-start:\u0013layout-pad)}.tyzJ8[data-padding]>:is(._266Qh,.j6ao5:last-child,.Wa4rZ:last-child){padding-block-end:\u0013layout-pad)}.tyzJ8 ._266Qh,.tyzJ8 .j6ao5{flex-shrink:0}.tyzJ8 .Wa4rZ{flex:1 0 auto;min-width:0}.tyzJ8 ._266Qh{align-items:center;display:flex;gap:\u00023);justify-content:flex-start}[data-align=center]:is(.tyzJ8 ._266Qh){justify-content:center}[data-align=end]:is(.tyzJ8 ._266Qh){justify-content:flex-end}[data-align=space-between]:is(.tyzJ8 ._266Qh){justify-content:space-between}.tyzJ8 ._266Qh[data-sticky],.tyzJ8 .j6ao5[data-sticky]{position:sticky;z-index:\u0013g-z-raised)}.tyzJ8 .j6ao5[data-sticky]{top:0}:is(.tyzJ8 .j6ao5[data-sticky]):after{background-color:inherit;content:\"\";\u000flayout-gap);left:calc(\u0013layout-pad)*-1);margin-top:1px;pointer-events:none;position:absolute;right:calc(\u0013layout-pad)*-1);top:100%}.tyzJ8 ._266Qh[data-sticky]{bottom:0}:is(.tyzJ8 ._266Qh[data-sticky]):before{background-color:inherit;bottom:100%;content:\"\";\u000flayout-gap);left:calc(\u0013layout-pad)*-1);margin-bottom:1px;pointer-events:none;position:absolute;right:calc(\u0013layout-pad)*-1)}";const o={root:"tyzJ8",header:"j6ao5",content:"Wa4rZ",footer:"_266Qh"};a(t);export{o as default};
+"use client";import{injectCss as a}from"../../core/utils/injectCss.js";var t=".tyzJ8{\u0014layout-pad:0;\u0014layout-gap:0;\u001e;display:flex;flex:1 1 auto;flex-direction:column;height:100%;min-height:0;min-width:0;overflow:hidden auto;width:100%}.tyzJ8[data-padding=sm]{\u0014layout-pad:\u00023)}.tyzJ8[data-padding=md]{\u0014layout-pad:\u00025)}.tyzJ8[data-padding=lg]{\u0014layout-pad:\u00027)}.tyzJ8[data-gap=sm]{\u0014layout-gap:\u00023)}.tyzJ8[data-gap=md]{\u0014layout-gap:\u00024)}.tyzJ8[data-gap=lg]{\u0014layout-gap:\u00026)}.tyzJ8[data-gap]{gap:calc(\u0013layout-gap)/2)}.tyzJ8[data-padding]>:is(.j6ao5,.Wa4rZ,._266Qh){\u001e;padding-inline:\u0013layout-pad)}.tyzJ8[data-padding]>:is(.j6ao5,._266Qh){padding-block:\u0013layout-pad)}.tyzJ8[data-gap]>.j6ao5{padding-bottom:calc(\u0013layout-gap)/2)}.tyzJ8[data-gap]>.j6ao5:has([data-page-header]){margin-bottom:calc(\u0013layout-gap)/-2);padding-bottom:0}.tyzJ8[data-gap]>.j6ao5:has([data-page-header])+.Wa4rZ{padding-top:\u0013layout-gap)}.tyzJ8[data-gap]>._266Qh{padding-top:calc(\u0013layout-gap)/2)}.tyzJ8[data-padding]>.Wa4rZ:first-child{padding-block-start:\u0013layout-pad)}.tyzJ8[data-padding]>.Wa4rZ:last-child{padding-block-end:\u0013layout-pad)}.tyzJ8 ._266Qh,.tyzJ8 .j6ao5{flex-shrink:0}.tyzJ8 .Wa4rZ{flex:1 0 auto;min-width:0}.tyzJ8 ._266Qh{align-items:center;display:flex;gap:\u00023);justify-content:flex-start}[data-align=center]:is(.tyzJ8 ._266Qh){justify-content:center}[data-align=end]:is(.tyzJ8 ._266Qh){justify-content:flex-end}[data-align=space-between]:is(.tyzJ8 ._266Qh){justify-content:space-between}.tyzJ8 ._266Qh[data-sticky],.tyzJ8 .j6ao5[data-sticky]{position:sticky;z-index:\u0013g-z-raised)}.tyzJ8 .j6ao5[data-sticky]{top:0}.tyzJ8 ._266Qh[data-sticky]{bottom:0}\u0016primary]:is(.tyzJ8 [data-sticky][data-scrolled]:is(.j6ao5,._266Qh)){background-color:\u0012\u0001bg) 42%,\u0001surface))}\u0016secondary]:is(.tyzJ8 [data-sticky][data-scrolled]:is(.j6ao5,._266Qh)){\u0007color-bg)}\u0016tinted]:is(.tyzJ8 [data-sticky][data-scrolled]:is(.j6ao5,._266Qh)){background-color:\u0012\u0001brand) 10%,\u0001surface))}";const d={root:"tyzJ8",header:"j6ao5",content:"Wa4rZ",footer:"_266Qh"};a(t);export{d as default};

package/dist/components/Modal/Modal.js

@@ -1 +1 @@
-"use client";import{jsx as a}from"react/jsx-runtime";import{cn as d}from"../../core/utils/cn.js";import{useLocale as y}from"../../locales/localeContext.js";import{ruSlice as g}from"../../locales/slices/modal.ru.js";import{DialogLayout as u}from"../DialogLayout/DialogLayout.js";import{Layout as t}from"../Layout/Layout.js";import{Overlay as R}from"../Overlay/Overlay.js";import n from"./Modal.module.css.js";import h from"../../styles/overlayScrim.module.css.js";const v={modal:g},C=({rootRef:e,...o})=>a(t.Header,{rootRef:e,sticky:!0,...o}),N=({className:e,rootRef:o,...r})=>a(t.Content,{rootRef:o,...r,className:d(n.body,e)}),L=({align:e="end",rootRef:o,...r})=>a(t.Footer,{rootRef:o,sticky:!0,align:e,...r}),O=({open:e,onOpenChange:o,children:r,size:i="md",className:s,"aria-labelledby":l,"aria-label":m,"aria-describedby":c,rootRef:f,...p})=>{const{t:b}=y(v);return a(R,{variant:"modal",open:e,onOpenChange:o,hostClassName:h.host,"aria-labelledby":m?void 0:l,"aria-label":m??(l?void 0:b("modal.ariaLabel")),"aria-describedby":c,children:a(u,{rootRef:f,...p,variant:"floating",radius:"lg",className:d(n.modalContent,s),"data-size":i!=="md"?i:void 0,onClose:()=>o(!1),children:a(t,{padding:"md",gap:"md",children:r})})})},F=Object.assign(O,{Header:C,Body:N,Footer:L});export{F as Modal};
+"use client";import{jsx as r}from"react/jsx-runtime";import{cn as m}from"../../core/utils/cn.js";import{useLocale as g}from"../../locales/localeContext.js";import{ruSlice as h}from"../../locales/slices/modal.ru.js";import{DialogLayout as u}from"../DialogLayout/DialogLayout.js";import{Header as t}from"../Header/Header.js";import{Layout as i}from"../Layout/Layout.js";import{Overlay as v}from"../Overlay/Overlay.js";import s from"./Modal.module.css.js";import R from"../../styles/overlayScrim.module.css.js";const C={modal:h},L=({rootRef:o,children:e,...a})=>r(i.Header,{rootRef:o,variant:"primary",sticky:!0,...a,children:r(t,{children:e})}),N=({className:o,rootRef:e,...a})=>r(i.Content,{rootRef:e,...a,className:m(s.body,o)}),O=({align:o="end",rootRef:e,...a})=>r(i.Footer,{rootRef:e,variant:"primary",sticky:!0,align:o,...a}),T=({open:o,onOpenChange:e,children:a,size:l="md",className:c,"aria-labelledby":n,"aria-label":d,"aria-describedby":f,rootRef:p,...b})=>{const{t:y}=g(C);return r(v,{variant:"modal",open:o,onOpenChange:e,hostClassName:R.host,"aria-labelledby":d?void 0:n,"aria-label":d??(n?void 0:y("modal.ariaLabel")),"aria-describedby":f,children:r(u,{rootRef:p,...b,variant:"floating",radius:"lg",className:m(s.modalContent,c),"data-size":l!=="md"?l:void 0,onClose:()=>e(!1),children:r(i,{padding:"md",gap:"lg",children:a})})})},j=Object.assign(T,{Header:Object.assign(L,{Title:t.Title,Subtitle:t.Subtitle,Tabs:t.Tabs}),Body:N,Footer:O});export{j as Modal};

package/dist/components/Tabs/Tabs.js

@@ -1 +1 @@
-"use client";import{jsx as l,jsxs as N,Fragment as I}from"react/jsx-runtime";import{useId as x,useMemo as R,createContext as D,useContext as P}from"react";import d from"./Tabs.module.css.js";import j from"../../styles/utilities.module.css.js";import{SegmentedControl as B}from"../SegmentedControl/SegmentedControl.js";import{cn as m}from"../../core/utils/cn.js";import{useControlledStateWithCallback as M}from"../../hooks/useControlledState.js";import{tabTriggerDomId as b,tabPanelDomId as v}from"./Tabs.utils.js";const f=D(null);function p(){return P(f)}const S=({className:t,items:o,rootRef:r,...i})=>{const a=p(),n=a?.tabsId??"",s=R(()=>o.map(e=>({value:e.value,disabled:e.disabled,id:b(n,e.value),controls:v(n,e.value),label:N(I,{children:[e.label,e.badgeDot?l("span",{className:d.tabBadgeDot,"aria-hidden":!0}):null,!e.badgeDot&&e.badge!=null?l("span",{className:m(j.fCenter,d.tabBadge),children:e.badge}):null]})})),[o,n]);return a==null?null:l(B,{...i,rootRef:r,className:m(d.tabsHeader,t),options:s,value:a.value,onChange:a.onChange,orientation:a.orientation,variant:a.variant==="pill"?"pill":"plain",width:"auto",itemRole:"tab","aria-orientation":a.orientation})},T=({value:t,className:o,children:r,forceMount:i,hidden:a,rootRef:n,...s})=>{const e=p(),u=e?.tabsId??"",c=e!=null&&e.value!==t;return l("div",{ref:n,className:m(d.tabPanel,o),tabIndex:0,...s,hidden:a??(e==null?void 0:c),role:"tabpanel",id:v(u,t),"aria-labelledby":b(u,t),children:r})},h=({value:t,defaultValue:o,onChange:r,variant:i="line",orientation:a="horizontal",className:n,children:s,rootRef:e,...u})=>{const c=x(),[g,C]=M(t,o??"",r);return l(f.Provider,{value:{tabsId:c,value:g,onChange:C,orientation:a,variant:i},children:l("div",{ref:e,...u,className:m(d.tabsContainer,n),"data-orientation":a,"data-variant":i,children:s})})},V=Object.assign(h,{Root:h,List:S,Panel:T});export{V as Tabs};
+"use client";import{jsxs as F,Fragment as x,jsx as u}from"react/jsx-runtime";import{useId as A,useMemo as I,useState as P,useLayoutEffect as R}from"react";import m from"./Tabs.module.css.js";import j from"../../styles/utilities.module.css.js";import{SegmentedControl as y}from"../SegmentedControl/SegmentedControl.js";import{cn as v}from"../../core/utils/cn.js";import{useControlledStateWithCallback as M}from"../../hooks/useControlledState.js";import{tabPanelDomId as p,tabTriggerDomId as g}from"./Tabs.utils.js";function S(a){const[d,s]=P({value:"",id:""});return R(()=>{let n,o=0;const t=()=>{const i=a.current;if(!i){o=requestAnimationFrame(t);return}const l=()=>{s({value:i.getAttribute("data-value")??"",id:i.id})};l(),n=new MutationObserver(l),n.observe(i,{attributes:!0,attributeFilter:["data-value"]})};return t(),()=>{cancelAnimationFrame(o),n?.disconnect()}},[a]),d}const k=({value:a,tabsRef:d,className:s,children:n,forceMount:o,hidden:t,rootRef:i,...l})=>{const r=S(d),b=r.value!==a;return u("div",{ref:i,className:v(m.tabPanel,s),tabIndex:0,...l,hidden:t??b,role:"tabpanel",id:r.id?p(r.id,a):void 0,"aria-labelledby":r.id?g(r.id,a):void 0,children:n})},w=({items:a,value:d,defaultValue:s,onChange:n,variant:o="line",orientation:t="horizontal",className:i,rootRef:l,id:r,...b})=>{const h=A(),c=r??h,N=a.find(e=>!e.disabled)?.value??"",[f,C]=M(d,s??N,n),D=I(()=>a.map(e=>({value:e.value,disabled:e.disabled,id:g(c,e.value),controls:p(c,e.value),label:F(x,{children:[e.label,e.badgeDot?u("span",{className:m.tabBadgeDot,"aria-hidden":!0}):null,!e.badgeDot&&e.badge!=null?u("span",{className:v(j.fCenter,m.tabBadge),children:e.badge}):null]})})),[a,c]);return u("div",{...b,ref:l,id:c,className:v(m.tabs,i),"data-value":f,"data-orientation":t!=="horizontal"?t:void 0,"data-variant":o!=="line"?o:void 0,children:u(y,{className:m.tabsHeader,options:D,value:f,onChange:C,orientation:t,variant:o==="pill"?"pill":"plain",width:"auto",itemRole:"tab","aria-orientation":t})})},z=Object.assign(w,{Panel:k});export{z as Tabs};

package/dist/components/Tabs/Tabs.module.css.js

@@ -1 +1 @@
-"use client";import{injectCss as a}from"../../core/utils/injectCss.js";var t="._5vkAh{display:flex;flex-direction:column;font-family:\u0013g-font-family-ui);width:100%}._5vkAh\u0015vertical]{align-items:flex-start;flex-direction:row;gap:\u00024)}._5vkAh\u0016line] ._38Fo5{\u0014button-group-gap:\u00024);background:#0000;border:none;border-bottom:\u000bcolor-border);border-radius:0;box-shadow:none;margin-bottom:\u00024);overflow-x:auto;padding:0;width:100%}:is(._5vkAh\u0016line] ._38Fo5) button{flex:0 0 auto}:is(._5vkAh\u0016line] ._38Fo5) button[aria-selected=true],:is(._5vkAh\u0016line] ._38Fo5) button[aria-selected=true]:hover:not(:disabled){background-color:initial;box-shadow:inset 0 -2px 0 \u0001tabs-indicator)}._5vkAh\u0015vertical]\u0016line] ._38Fo5{border-bottom:none;border-right:\u000bcolor-panel-border);margin-bottom:0;min-width:140px;overflow:visible;width:max-content}:is(._5vkAh\u0015vertical]\u0016line] ._38Fo5) button[aria-selected=true],:is(._5vkAh\u0015vertical]\u0016line] ._38Fo5) button[aria-selected=true]:hover:not(:disabled){box-shadow:inset -2px 0 0 \u0001tabs-indicator)}._38Fo5{flex-shrink:0;max-width:100%;overflow-x:auto}.Zw2N-{\u0007color-option-hover);\bg-radius-pill);color:\u0001text-secondary);display:inline-flex;\fbadge-font-size);font-weight:\u0004bold);\u000fbadge-size-md);line-height:1;min-width:\u0013badge-size-md);padding:0 \u00021)}._38Fo5 [aria-selected=true] .Zw2N-{background-color:\u0012\u0001brand) 18%,#0000);color:\u0001brand)}.z6b3L{\u0007color-status-error);border-radius:50%;flex-shrink:0;height:\u00022);width:\u00022)}.eAxHF{flex:1;min-width:0}";const o={tabsContainer:"_5vkAh",tabsHeader:"_38Fo5",tabBadge:"Zw2N-",tabBadgeDot:"z6b3L",tabPanel:"eAxHF"};a(t);export{o as default};
+"use client";import{injectCss as a}from"../../core/utils/injectCss.js";var t=".QzIkz{font-family:\u0013g-font-family-ui);min-width:0;width:100%}.QzIkz:not(\u0016pill]) ._38Fo5{\u0014button-group-gap:\u00024);\u0014button-group-height:auto;\u0014button-group-pad:0;\u0014btn-height:auto;\u0014btn-pad-x:0;\u0014btn-shadow:0 0 0 0 #0000;\u0014bg-thumb:#0000;\u0014bg-thumb-shadow:none;align-items:flex-end;background:#0000;border:none;border-bottom:\u000bcolor-border);border-radius:0;box-shadow:none;height:auto;margin-bottom:\u00024);overflow-x:auto;padding:0;width:100%}:is(.QzIkz:not(\u0016pill]) ._38Fo5) button,:is(.QzIkz:not(\u0016pill]) ._38Fo5) button:hover:not(:disabled){\u0014btn-height:auto;background:#0000;background-color:initial;border:solid #0000;border-radius:0;border-width:0 0 2px;box-shadow:none;flex:0 0 auto;height:auto;line-height:1.3;margin-bottom:-1px;min-height:0;padding:\u00023) \u00021)}:is(.QzIkz:not(\u0016pill]) ._38Fo5) button[aria-selected=true],:is(.QzIkz:not(\u0016pill]) ._38Fo5) button[aria-selected=true]:hover:not(:disabled){background-color:initial;border-bottom-color:\u0001tabs-indicator);box-shadow:none;color:\u0001type)}.QzIkz\u0015vertical]:not(\u0016pill]) ._38Fo5{align-items:stretch;border-bottom:none;border-right:\u000bcolor-panel-border);margin-bottom:0;min-width:140px;overflow:visible;width:max-content}:is(.QzIkz\u0015vertical]:not(\u0016pill]) ._38Fo5) button,:is(.QzIkz\u0015vertical]:not(\u0016pill]) ._38Fo5) button:hover:not(:disabled){border-bottom-width:0;border-inline-end-width:2px;margin-bottom:0;margin-inline-end:-1px;padding:\u00022) \u00023)}:is(.QzIkz\u0015vertical]:not(\u0016pill]) ._38Fo5) button[aria-selected=true],:is(.QzIkz\u0015vertical]:not(\u0016pill]) ._38Fo5) button[aria-selected=true]:hover:not(:disabled){border-bottom-color:#0000;border-inline-end-color:\u0001tabs-indicator);box-shadow:none}.QzIkz[data-chrome]:not(\u0016pill]) ._38Fo5{\u001e;margin-bottom:0;margin-inline:calc(\u0013layout-pad, 0px)*-1);max-width:none;padding-inline:\u0013layout-pad,0);width:calc(100% + \u0013layout-pad, 0px)*2)}._38Fo5{flex-shrink:0;max-width:100%;overflow-x:auto}.Zw2N-{\u0007color-option-hover);\bg-radius-pill);color:\u0001text-secondary);display:inline-flex;\fbadge-font-size);font-weight:\u0004bold);\u000fbadge-size-md);line-height:1;min-width:\u0013badge-size-md);padding:0 \u00021)}._38Fo5 [aria-selected=true] .Zw2N-{background-color:\u0012\u0001brand) 18%,#0000);color:\u0001brand)}.z6b3L{\u0007color-status-error);border-radius:50%;flex-shrink:0;height:\u00022);width:\u00022)}.eAxHF{flex:1;min-width:0}";const o={tabs:"QzIkz",tabsHeader:"_38Fo5",tabBadge:"Zw2N-",tabBadgeDot:"z6b3L",tabPanel:"eAxHF"};a(t);export{o as default};

package/dist/entries/hooks.js

@@ -1 +1 @@
-"use client";import{useOutsideClick as r}from"../hooks/useOutsideClick.js";import{useDocumentKeyDown as s}from"../hooks/useDocumentKeyDown.js";import{useControlledState as m,useControlledStateWithCallback as E}from"../hooks/useControlledState.js";import{useNow as i}from"../hooks/useNow.js";import{MOBILE_MEDIA_QUERY as l,SIDEBAR_LARGE_MEDIA_QUERY as p,SIDEBAR_MEDIUM_MEDIA_QUERY as x,useIsMobile as I,useIsSidebarLarge as M,useIsSidebarMedium as a,useMediaQuery as D}from"../hooks/useMediaQuery.js";import{REDUCED_MOTION_QUERY as _,usePrefersReducedMotion as n}from"../hooks/usePrefersReducedMotion.js";import{useLongPress as A}from"../hooks/useLongPress.js";import{useForm as S}from"../hooks/useForm.js";import{useFormContext as Q,useFormProvider as b}from"../hooks/useFormProvider.js";import{checkedValue as O,compose as Y,fieldRules as k,pattern as B,required as F}from"../shared/form/formRules.js";export{l as MOBILE_MEDIA_QUERY,_ as REDUCED_MOTION_QUERY,p as SIDEBAR_LARGE_MEDIA_QUERY,x as SIDEBAR_MEDIUM_MEDIA_QUERY,O as checkedValue,Y as compose,k as fieldRules,B as pattern,F as required,m as useControlledState,E as useControlledStateWithCallback,s as useDocumentKeyDown,S as useForm,Q as useFormContext,b as useFormProvider,I as useIsMobile,M as useIsSidebarLarge,a as useIsSidebarMedium,A as useLongPress,D as useMediaQuery,i as useNow,r as useOutsideClick,n as usePrefersReducedMotion};
+"use client";import{useOutsideClick as r}from"../hooks/useOutsideClick.js";import{useDocumentKeyDown as s}from"../hooks/useDocumentKeyDown.js";import{useControlledState as m,useControlledStateWithCallback as i}from"../hooks/useControlledState.js";import{useNow as d}from"../hooks/useNow.js";import{MOBILE_MEDIA_QUERY as p,SIDEBAR_LARGE_MEDIA_QUERY as l,SIDEBAR_MEDIUM_MEDIA_QUERY as x,useIsMobile as I,useIsSidebarLarge as M,useIsSidebarMedium as a,useMediaQuery as D}from"../hooks/useMediaQuery.js";import{REDUCED_MOTION_QUERY as _,usePrefersReducedMotion as c}from"../hooks/usePrefersReducedMotion.js";import{useLongPress as C}from"../hooks/useLongPress.js";import{useStickyChrome as A}from"../hooks/useStickyChrome.js";import{useForm as Q}from"../hooks/useForm.js";import{useFormContext as k,useFormProvider as L}from"../hooks/useFormProvider.js";import{checkedValue as Y,compose as h,fieldRules as y,pattern as B,required as F}from"../shared/form/formRules.js";export{p as MOBILE_MEDIA_QUERY,_ as REDUCED_MOTION_QUERY,l as SIDEBAR_LARGE_MEDIA_QUERY,x as SIDEBAR_MEDIUM_MEDIA_QUERY,Y as checkedValue,h as compose,y as fieldRules,B as pattern,F as required,m as useControlledState,i as useControlledStateWithCallback,s as useDocumentKeyDown,Q as useForm,k as useFormContext,L as useFormProvider,I as useIsMobile,M as useIsSidebarLarge,a as useIsSidebarMedium,C as useLongPress,D as useMediaQuery,d as useNow,r as useOutsideClick,c as usePrefersReducedMotion,A as useStickyChrome};

package/dist/hooks/useStickyChrome.js

@@ -0,0 +1 @@
+"use client";import{useState as p,useLayoutEffect as w}from"react";const g=e=>{const t=getComputedStyle(e).overflowY;return t==="auto"||t==="scroll"||t==="overlay"},h=(e,t)=>{if(t)return t;let r=e.parentElement;for(;r;){if(g(r))return r;r=r.parentElement}return window},a=e=>e===window,y=e=>{const t=a(e)?document.scrollingElement??document.documentElement:e;return{top:t.scrollTop,max:t.scrollHeight-t.clientHeight}},L=(e,t,r,o)=>e==="start"?t>o:r>0&&t<r-o,S=(e,t)=>{e.addEventListener("scroll",t,{passive:!0});const r=new ResizeObserver(t),o=a(e)?document.documentElement:e,s=a(e)?document.body:e;r.observe(o);const n=()=>{Array.from(s.children).forEach(u=>{u instanceof HTMLElement&&r.observe(u)})};n();const c=new MutationObserver(()=>{n(),t()});return c.observe(s,{childList:!0}),()=>{e.removeEventListener("scroll",t),r.disconnect(),c.disconnect()}};function x(e,t={}){const{enabled:r=!0,edge:o="start",scrollRef:s,attribute:n="data-scrolled",offset:c=1}=t,[u,v]=p(!1);return w(()=>{const l=e.current,m=i=>{l&&n&&l.toggleAttribute(n,i),v(i)};if(!l||!r){m(!1);return}const d=h(l,s?.current??null),f=()=>{const{top:i,max:E}=y(d);m(L(o,i,E,c))};f();const b=S(d,f);return()=>{b(),n&&l.removeAttribute(n)}},[n,o,r,c,e,s]),u}export{x as useStickyChrome};

package/dist/index.js

@@ -1 +1 @@
-"use client";import{ru as e}from"./locales/ru.js";import{en as p}from"./locales/en.js";import{Accordion as f}from"./components/Accordion/Accordion.js";import{ActionItem as i}from"./components/ActionList/ActionItem.js";import{ActionList as l}from"./components/ActionList/ActionList.js";import{ActionSheetTrigger as d}from"./components/ActionSheetTrigger/ActionSheetTrigger.js";import{Alert as u}from"./components/Alert/Alert.js";import{AspectRatio as S}from"./components/AspectRatio/AspectRatio.js";import{Attachment as g}from"./components/Attachment/Attachment.js";import{AutocompleteField as h}from"./components/AutocompleteField/AutocompleteField.js";import{Avatar as T,AvatarGroup as P}from"./components/Avatar/Avatar.js";import{Badge as y}from"./components/Badge/Badge.js";import{BarChart as B}from"./components/BarChart/BarChart.js";import{Box as G}from"./components/Box/Box.js";import{Bubble as I}from"./components/Bubble/Bubble.js";import{Button as w}from"./components/Button/Button.js";import{ButtonGroup as M}from"./components/ButtonGroup/ButtonGroup.js";import{ButtonIcon as H}from"./components/ButtonIcon/ButtonIcon.js";import{Calendar as O}from"./components/Calendar/Calendar.js";import{CalendarBoard as V}from"./components/CalendarBoard/CalendarBoard.js";import{Card as W}from"./components/Card/Card.js";import{Checkbox as j,CheckboxGroup as q}from"./components/Checkbox/Checkbox.js";import{Chip as J,ChipGroup as Q}from"./components/Chip/Chip.js";import{Collapse as Y}from"./components/Collapse/Collapse.js";import{ColorSwatchGroup as $}from"./components/ColorSwatchGroup/ColorSwatchGroup.js";import{CommandPalette as ro}from"./components/CommandPalette/CommandPalette.js";import{ConfirmDialog as to}from"./components/ConfirmDialog/ConfirmDialog.js";import{Container as mo,Page as fo}from"./components/Container/Container.js";import{ControlRow as io}from"./components/Layout/ControlRow.js";import{DateField as lo}from"./components/DateField/DateField.js";import{DateRangeField as so}from"./components/DateRangeField/DateRangeField.js";import{DayStripCalendar as co}from"./components/DayStripCalendar/DayStripCalendar.js";import{DescriptionList as Co}from"./components/DescriptionList/DescriptionList.js";import{DialogLayout as Lo}from"./components/DialogLayout/DialogLayout.js";import{DonutChart as Fo}from"./components/DonutChart/DonutChart.js";import{Dropdown as Po}from"./components/Dropdown/Dropdown.js";import{EmptyState as yo}from"./components/EmptyState/EmptyState.js";import{FieldBaseButton as Bo,FieldBaseIcon as vo,TextField as Go}from"./components/TextField/TextField.js";import{FieldGroup as Io}from"./components/FieldGroup/FieldGroup.js";import{FieldLabel as wo}from"./components/FieldLabel/FieldLabel.js";import{Fieldset as Mo}from"./components/Fieldset/Fieldset.js";import{FileList as Ho}from"./components/FileList/FileList.js";import{FileUploader as Oo}from"./components/FileUploader/FileUploader.js";import{FormMessage as Vo}from"./components/FormMessage/FormMessage.js";import{Gap as Wo}from"./components/Gap/Gap.js";import{Grid as jo,GridItem as qo}from"./components/Grid/Grid.js";import{ImageCrop as Jo}from"./components/ImageCrop/ImageCrop.js";import{ImageGallery as Xo}from"./components/ImageGallery/ImageGallery.js";import{ImageLightbox as _o}from"./components/ImageLightbox/ImageLightbox.js";import{Inline as or}from"./components/Layout/Inline.js";import{Item as er}from"./components/Item/Item.js";import{Kbd as pr,KbdGroup as mr}from"./components/Kbd/Kbd.js";import{Layout as xr,LayoutContent as ir,LayoutFooter as ar,LayoutHeader as lr,LayoutRoot as nr}from"./components/Layout/Layout.js";import{LayoutItem as sr}from"./components/Layout/LayoutItem.js";import{LineChart as cr}from"./components/LineChart/LineChart.js";import{Link as Cr}from"./components/Link/Link.js";import{Listbox as Lr}from"./components/Listbox/Listbox.js";import{LiveRegion as Fr}from"./components/LiveRegion/LiveRegion.js";import{LocaleProvider as Pr}from"./components/LocaleProvider/LocaleProvider.js";import{Marker as yr}from"./components/Marker/Marker.js";import{MaskedField as Br}from"./components/MaskedField/MaskedField.js";import{Media as Gr}from"./components/Media/Media.js";import{Menu as Ir}from"./components/Menu/Menu.js";import{Modal as wr}from"./components/Modal/Modal.js";import{MultiSelect as Mr}from"./components/MultiSelect/MultiSelect.js";import{Notification as Hr}from"./components/Notification/Notification.js";import{NotificationProvider as Or,useNotify as Ur}from"./components/Notification/toast.js";import{NumberField as Er}from"./components/NumberField/NumberField.js";import{Overflow as Zr}from"./components/Overflow/Overflow.js";import{Overlay as qr}from"./components/Overlay/Overlay.js";import{Pagination as Jr}from"./components/Pagination/Pagination.js";import{PasswordField as Xr,getPasswordStrength as Yr}from"./components/PasswordField/PasswordField.js";import{PinInput as $r}from"./components/PinInput/PinInput.js";import{Popover as re}from"./components/Popover/Popover.js";import{PopupSwitch as te}from"./components/PopupSwitch/PopupSwitch.js";import{Progress as me,ProgressCircle as fe}from"./components/Progress/Progress.js";import{PullToRefresh as ie}from"./components/PullToRefresh/PullToRefresh.js";import{Radio as le,RadioGroup as ne}from"./components/Radio/Radio.js";import{Rating as se}from"./components/Rating/Rating.js";import{RelativeTime as ce,formatRelativeTime as Se}from"./components/RelativeTime/RelativeTime.js";import{SafeArea as ge}from"./components/SafeArea/SafeArea.js";import{ScrollArea as he}from"./components/ScrollArea/ScrollArea.js";import{SearchField as Te}from"./components/SearchField/SearchField.js";import{SegmentedControl as be}from"./components/SegmentedControl/SegmentedControl.js";import{Select as Ae}from"./components/Select/Select.js";import{Separator as ve}from"./components/Separator/Separator.js";import{Sheet as ke}from"./components/Sheet/Sheet.js";import{Sidebar as Re}from"./components/Sidebar/Sidebar.js";import{Skeleton as De}from"./components/Skeleton/Skeleton.js";import{SkipLink as Ne}from"./components/SkipLink/SkipLink.js";import{Slider as Ke}from"./components/Slider/Slider.js";import{SortableList as Ue}from"./components/SortableList/SortableList.js";import{Spinner as Ee}from"./components/Spinner/Spinner.js";import{Split as Ze}from"./components/Layout/Split.js";import{Stack as qe}from"./components/Layout/Stack.js";import{StatBadge as Je}from"./components/StatBadge/StatBadge.js";import{Steps as Xe}from"./components/Steps/Steps.js";import{SuggestField as _e}from"./components/SuggestField/SuggestField.js";import{SwipeToAction as ot}from"./components/SwipeToAction/SwipeToAction.js";import{Switch as et}from"./components/Switch/Switch.js";import{Table as pt}from"./components/Table/Table.js";import{Tabs as ft}from"./components/Tabs/Tabs.js";import{Text as it}from"./components/Text/Text.js";import{TextareaField as lt}from"./components/TextareaField/TextareaField.js";import{ThemeProvider as dt,useTheme as st}from"./components/ThemeProvider/ThemeProvider.js";import{TimeField as ct}from"./components/TimeField/TimeField.js";import{Timeline as Ct}from"./components/Timeline/Timeline.js";import{Title as Lt}from"./components/Title/Title.js";import{Tooltip as Ft}from"./components/Tooltip/Tooltip.js";import{UploadZone as Pt}from"./components/UploadZone/UploadZone.js";import{VirtualList as yt}from"./components/VirtualList/VirtualList.js";import{VisuallyHidden as Bt}from"./components/VisuallyHidden/VisuallyHidden.js";import{WheelTimePicker as Gt}from"./components/WheelTimePicker/WheelTimePicker.js";import{dismiss as It,dismissAll as Rt,notify as wt}from"./components/Notification/toast.utils.js";import{useCalendarBoardContext as Mt,useCalendarBoardTaskHover as Nt}from"./components/CalendarBoard/CalendarBoard.context.js";import{useLocale as Kt,useT as Ot}from"./locales/localeContext.js";export{f as Accordion,i as ActionItem,l as ActionList,d as ActionSheetTrigger,u as Alert,S as AspectRatio,g as Attachment,h as AutocompleteField,T as Avatar,P as AvatarGroup,y as Badge,B as BarChart,G as Box,I as Bubble,w as Button,M as ButtonGroup,H as ButtonIcon,O as Calendar,V as CalendarBoard,W as Card,j as Checkbox,q as CheckboxGroup,J as Chip,Q as ChipGroup,Y as Collapse,$ as ColorSwatchGroup,ro as CommandPalette,to as ConfirmDialog,mo as Container,io as ControlRow,lo as DateField,so as DateRangeField,co as DayStripCalendar,Co as DescriptionList,Lo as DialogLayout,Fo as DonutChart,Po as Dropdown,yo as EmptyState,Bo as FieldBaseButton,vo as FieldBaseIcon,Io as FieldGroup,wo as FieldLabel,Mo as Fieldset,Ho as FileList,Oo as FileUploader,Vo as FormMessage,Wo as Gap,jo as Grid,qo as GridItem,Jo as ImageCrop,Xo as ImageGallery,_o as ImageLightbox,or as Inline,er as Item,pr as Kbd,mr as KbdGroup,xr as Layout,ir as LayoutContent,ar as LayoutFooter,lr as LayoutHeader,sr as LayoutItem,nr as LayoutRoot,cr as LineChart,Cr as Link,Lr as Listbox,Fr as LiveRegion,Pr as LocaleProvider,yr as Marker,Br as MaskedField,Gr as Media,Ir as Menu,wr as Modal,Mr as MultiSelect,Hr as Notification,Or as NotificationProvider,Er as NumberField,Zr as Overflow,qr as Overlay,fo as Page,Jr as Pagination,Xr as PasswordField,$r as PinInput,re as Popover,te as PopupSwitch,me as Progress,fe as ProgressCircle,ie as PullToRefresh,le as Radio,ne as RadioGroup,se as Rating,ce as RelativeTime,ge as SafeArea,he as ScrollArea,Te as SearchField,be as SegmentedControl,Ae as Select,ve as Separator,ke as Sheet,Re as Sidebar,De as Skeleton,Ne as SkipLink,Ke as Slider,Ue as SortableList,Ee as Spinner,Ze as Split,qe as Stack,Je as StatBadge,Xe as Steps,_e as SuggestField,ot as SwipeToAction,et as Switch,pt as Table,ft as Tabs,it as Text,Go as TextField,lt as TextareaField,dt as ThemeProvider,ct as TimeField,Ct as Timeline,Lt as Title,Ft as Tooltip,Pt as UploadZone,yt as VirtualList,Bt as VisuallyHidden,Gt as WheelTimePicker,It as dismiss,Rt as dismissAll,p as en,Se as formatRelativeTime,Yr as getPasswordStrength,wt as notify,e as ru,Mt as useCalendarBoardContext,Nt as useCalendarBoardTaskHover,Kt as useLocale,Ur as useNotify,Ot as useT,st as useTheme};
+"use client";import{ru as e}from"./locales/ru.js";import{en as p}from"./locales/en.js";import{Accordion as f}from"./components/Accordion/Accordion.js";import{ActionItem as a}from"./components/ActionList/ActionItem.js";import{ActionList as l}from"./components/ActionList/ActionList.js";import{ActionSheetTrigger as n}from"./components/ActionSheetTrigger/ActionSheetTrigger.js";import{Alert as u}from"./components/Alert/Alert.js";import{AspectRatio as S}from"./components/AspectRatio/AspectRatio.js";import{Attachment as g}from"./components/Attachment/Attachment.js";import{AutocompleteField as T}from"./components/AutocompleteField/AutocompleteField.js";import{Avatar as F,AvatarGroup as b}from"./components/Avatar/Avatar.js";import{Badge as y}from"./components/Badge/Badge.js";import{BarChart as B}from"./components/BarChart/BarChart.js";import{Box as G}from"./components/Box/Box.js";import{Bubble as k}from"./components/Bubble/Bubble.js";import{Button as w}from"./components/Button/Button.js";import{ButtonGroup as H}from"./components/ButtonGroup/ButtonGroup.js";import{ButtonIcon as N}from"./components/ButtonIcon/ButtonIcon.js";import{Calendar as O}from"./components/Calendar/Calendar.js";import{CalendarBoard as V}from"./components/CalendarBoard/CalendarBoard.js";import{Card as W}from"./components/Card/Card.js";import{Checkbox as j,CheckboxGroup as q}from"./components/Checkbox/Checkbox.js";import{Chip as J,ChipGroup as Q}from"./components/Chip/Chip.js";import{Collapse as Y}from"./components/Collapse/Collapse.js";import{ColorSwatchGroup as $}from"./components/ColorSwatchGroup/ColorSwatchGroup.js";import{CommandPalette as ro}from"./components/CommandPalette/CommandPalette.js";import{ConfirmDialog as to}from"./components/ConfirmDialog/ConfirmDialog.js";import{Container as mo,Page as fo}from"./components/Container/Container.js";import{ControlRow as ao}from"./components/Layout/ControlRow.js";import{DateField as lo}from"./components/DateField/DateField.js";import{DateRangeField as so}from"./components/DateRangeField/DateRangeField.js";import{DayStripCalendar as co}from"./components/DayStripCalendar/DayStripCalendar.js";import{DescriptionList as Co}from"./components/DescriptionList/DescriptionList.js";import{DialogLayout as Lo}from"./components/DialogLayout/DialogLayout.js";import{DonutChart as ho}from"./components/DonutChart/DonutChart.js";import{Dropdown as bo}from"./components/Dropdown/Dropdown.js";import{EmptyState as yo}from"./components/EmptyState/EmptyState.js";import{FieldBaseButton as Bo,FieldBaseIcon as vo,TextField as Go}from"./components/TextField/TextField.js";import{FieldGroup as ko}from"./components/FieldGroup/FieldGroup.js";import{FieldLabel as wo}from"./components/FieldLabel/FieldLabel.js";import{Fieldset as Ho}from"./components/Fieldset/Fieldset.js";import{FileList as No}from"./components/FileList/FileList.js";import{FileUploader as Oo}from"./components/FileUploader/FileUploader.js";import{FormMessage as Vo}from"./components/FormMessage/FormMessage.js";import{Gap as Wo}from"./components/Gap/Gap.js";import{Grid as jo,GridItem as qo}from"./components/Grid/Grid.js";import{Header as Jo,HeaderRoot as Qo,HeaderSubtitle as Xo,HeaderTabs as Yo,HeaderTitle as _o}from"./components/Header/Header.js";import{ImageCrop as or}from"./components/ImageCrop/ImageCrop.js";import{ImageGallery as er}from"./components/ImageGallery/ImageGallery.js";import{ImageLightbox as pr}from"./components/ImageLightbox/ImageLightbox.js";import{Inline as fr}from"./components/Layout/Inline.js";import{Item as ar}from"./components/Item/Item.js";import{Kbd as lr,KbdGroup as dr}from"./components/Kbd/Kbd.js";import{Layout as sr,LayoutContent as ur,LayoutFooter as cr,LayoutHeader as Sr,LayoutRoot as Cr}from"./components/Layout/Layout.js";import{LayoutItem as Lr}from"./components/Layout/LayoutItem.js";import{LineChart as hr}from"./components/LineChart/LineChart.js";import{Link as br}from"./components/Link/Link.js";import{Listbox as yr}from"./components/Listbox/Listbox.js";import{LiveRegion as Br}from"./components/LiveRegion/LiveRegion.js";import{LocaleProvider as Gr}from"./components/LocaleProvider/LocaleProvider.js";import{Marker as kr}from"./components/Marker/Marker.js";import{MaskedField as wr}from"./components/MaskedField/MaskedField.js";import{Media as Hr}from"./components/Media/Media.js";import{Menu as Nr}from"./components/Menu/Menu.js";import{Modal as Or}from"./components/Modal/Modal.js";import{MultiSelect as Vr}from"./components/MultiSelect/MultiSelect.js";import{Notification as Wr}from"./components/Notification/Notification.js";import{NotificationProvider as jr,useNotify as qr}from"./components/Notification/toast.js";import{NumberField as Jr}from"./components/NumberField/NumberField.js";import{Overflow as Xr}from"./components/Overflow/Overflow.js";import{Overlay as _r}from"./components/Overlay/Overlay.js";import{Pagination as oe}from"./components/Pagination/Pagination.js";import{PasswordField as ee,getPasswordStrength as te}from"./components/PasswordField/PasswordField.js";import{PinInput as me}from"./components/PinInput/PinInput.js";import{Popover as xe}from"./components/Popover/Popover.js";import{PopupSwitch as ie}from"./components/PopupSwitch/PopupSwitch.js";import{Progress as de,ProgressCircle as ne}from"./components/Progress/Progress.js";import{PullToRefresh as ue}from"./components/PullToRefresh/PullToRefresh.js";import{Radio as Se,RadioGroup as Ce}from"./components/Radio/Radio.js";import{Rating as Le}from"./components/Rating/Rating.js";import{RelativeTime as he,formatRelativeTime as Fe}from"./components/RelativeTime/RelativeTime.js";import{SafeArea as Pe}from"./components/SafeArea/SafeArea.js";import{ScrollArea as Ae}from"./components/ScrollArea/ScrollArea.js";import{SearchField as ve}from"./components/SearchField/SearchField.js";import{SegmentedControl as Re}from"./components/SegmentedControl/SegmentedControl.js";import{Select as Ie}from"./components/Select/Select.js";import{Separator as De}from"./components/Separator/Separator.js";import{Sheet as Me}from"./components/Sheet/Sheet.js";import{Sidebar as Ke}from"./components/Sidebar/Sidebar.js";import{Skeleton as Ue}from"./components/Skeleton/Skeleton.js";import{SkipLink as Ee}from"./components/SkipLink/SkipLink.js";import{Slider as Ze}from"./components/Slider/Slider.js";import{SortableList as qe}from"./components/SortableList/SortableList.js";import{Spinner as Je}from"./components/Spinner/Spinner.js";import{Split as Xe}from"./components/Layout/Split.js";import{Stack as _e}from"./components/Layout/Stack.js";import{StatBadge as ot}from"./components/StatBadge/StatBadge.js";import{Steps as et}from"./components/Steps/Steps.js";import{SuggestField as pt}from"./components/SuggestField/SuggestField.js";import{SwipeToAction as ft}from"./components/SwipeToAction/SwipeToAction.js";import{Switch as at}from"./components/Switch/Switch.js";import{Table as lt}from"./components/Table/Table.js";import{Tabs as nt}from"./components/Tabs/Tabs.js";import{Text as ut}from"./components/Text/Text.js";import{TextareaField as St}from"./components/TextareaField/TextareaField.js";import{ThemeProvider as gt,useTheme as Lt}from"./components/ThemeProvider/ThemeProvider.js";import{TimeField as ht}from"./components/TimeField/TimeField.js";import{Timeline as bt}from"./components/Timeline/Timeline.js";import{Title as yt}from"./components/Title/Title.js";import{Tooltip as Bt}from"./components/Tooltip/Tooltip.js";import{UploadZone as Gt}from"./components/UploadZone/UploadZone.js";import{VirtualList as kt}from"./components/VirtualList/VirtualList.js";import{VisuallyHidden as wt}from"./components/VisuallyHidden/VisuallyHidden.js";import{WheelTimePicker as Ht}from"./components/WheelTimePicker/WheelTimePicker.js";import{dismiss as Nt,dismissAll as Kt,notify as Ot}from"./components/Notification/toast.utils.js";import{useCalendarBoardContext as Vt,useCalendarBoardTaskHover as Et}from"./components/CalendarBoard/CalendarBoard.context.js";import{useLocale as Zt,useT as jt}from"./locales/localeContext.js";export{f as Accordion,a as ActionItem,l as ActionList,n as ActionSheetTrigger,u as Alert,S as AspectRatio,g as Attachment,T as AutocompleteField,F as Avatar,b as AvatarGroup,y as Badge,B as BarChart,G as Box,k as Bubble,w as Button,H as ButtonGroup,N as ButtonIcon,O as Calendar,V as CalendarBoard,W as Card,j as Checkbox,q as CheckboxGroup,J as Chip,Q as ChipGroup,Y as Collapse,$ as ColorSwatchGroup,ro as CommandPalette,to as ConfirmDialog,mo as Container,ao as ControlRow,lo as DateField,so as DateRangeField,co as DayStripCalendar,Co as DescriptionList,Lo as DialogLayout,ho as DonutChart,bo as Dropdown,yo as EmptyState,Bo as FieldBaseButton,vo as FieldBaseIcon,ko as FieldGroup,wo as FieldLabel,Ho as Fieldset,No as FileList,Oo as FileUploader,Vo as FormMessage,Wo as Gap,jo as Grid,qo as GridItem,Jo as Header,Qo as HeaderRoot,Xo as HeaderSubtitle,Yo as HeaderTabs,_o as HeaderTitle,or as ImageCrop,er as ImageGallery,pr as ImageLightbox,fr as Inline,ar as Item,lr as Kbd,dr as KbdGroup,sr as Layout,ur as LayoutContent,cr as LayoutFooter,Sr as LayoutHeader,Lr as LayoutItem,Cr as LayoutRoot,hr as LineChart,br as Link,yr as Listbox,Br as LiveRegion,Gr as LocaleProvider,kr as Marker,wr as MaskedField,Hr as Media,Nr as Menu,Or as Modal,Vr as MultiSelect,Wr as Notification,jr as NotificationProvider,Jr as NumberField,Xr as Overflow,_r as Overlay,fo as Page,oe as Pagination,ee as PasswordField,me as PinInput,xe as Popover,ie as PopupSwitch,de as Progress,ne as ProgressCircle,ue as PullToRefresh,Se as Radio,Ce as RadioGroup,Le as Rating,he as RelativeTime,Pe as SafeArea,Ae as ScrollArea,ve as SearchField,Re as SegmentedControl,Ie as Select,De as Separator,Me as Sheet,Ke as Sidebar,Ue as Skeleton,Ee as SkipLink,Ze as Slider,qe as SortableList,Je as Spinner,Xe as Split,_e as Stack,ot as StatBadge,et as Steps,pt as SuggestField,ft as SwipeToAction,at as Switch,lt as Table,nt as Tabs,ut as Text,Go as TextField,St as TextareaField,gt as ThemeProvider,ht as TimeField,bt as Timeline,yt as Title,Bt as Tooltip,Gt as UploadZone,kt as VirtualList,wt as VisuallyHidden,Ht as WheelTimePicker,Nt as dismiss,Kt as dismissAll,p as en,Fe as formatRelativeTime,te as getPasswordStrength,Ot as notify,e as ru,Vt as useCalendarBoardContext,Et as useCalendarBoardTaskHover,Zt as useLocale,qr as useNotify,jt as useT,Lt as useTheme};

package/docs/COMPONENTS.md

@@ -61,7 +61,7 @@
 | Компонент | Описание |
 |-----------|----------|
 | **DialogLayout** | Поверхность `Box` с крестиком в правом верхнем углу поверх контента. `onClose`, `showClose`. |
-| **Modal** | Составной диалог: корень — **`DialogLayout`**, шапка / тело / футер — **`Layout`**. `Header` / `Body` / `Footer`. Заголовок — **`Title`**. Ряд действий — **`ControlRow`** внутри `Footer`. `open` / `onOpenChange`, `showClose`, `size` `sm` / `md` / `lg` на корне. |
+| **Modal** | Составной диалог: корень — **`DialogLayout`**, шапка — **`Header`** внутри **`Layout.Header`**, тело и футер — **`Layout`**. `Header` / `Header.Title` / `Header.Subtitle` / `Header.Tabs` / `Body` / `Footer`. Ряд действий — **`ControlRow`** внутри `Footer`. `open` / `onOpenChange`, `showClose`, `size` `sm` / `md` / `lg` на корне. |
 | **ConfirmDialog** | Готовый диалог на **`Modal`**: отмена + подтверждение, `confirmLabel`, `secondaryAction`, `status="danger"`, `onOpenChange`. |
 | **Sheet** | Панель: поверхность **`Box`**, шапка / тело / футер — **`Layout`**. `Header` / `Body` / `Footer`. Заголовок — **`Title`**. Крестик — `showClose` на `Header`. `mode` / `direction` / `showHandle`. Слой — нативный `<dialog>`. |
 | **ImageLightbox** | Полноэкранный просмотр; `open` / `onOpenChange`. |
@@ -80,7 +80,7 @@
 | **Pagination** | Постраничная навигация. Без `children` — `Controls`; опционально `totalItems` / `pageSize` / `onPageSizeChange`. Составной: `Summary`, `Controls`, `PageSize`. |
 | **Sidebar** | Составной: `Root`, `Header`, `Title`, `Content`, `Group`, `GroupLabel`, `Item`, `Footer`, `MobileTrigger`. Шапка, меню и футер — `Layout`. Кнопка сворачивания — на корне, по центру правой границы. `value` / `onChange`; десктопный rail + мобильный Sheet. |
 | **Steps** | Мастер: горизонтальный/вертикальный, статус шага. `onStepClick` слушает список. Узел — `rootRef`. Ориентация, размер, соединители и статус — `data-*`. |
-| **Tabs** | Список — **`SegmentedControl`** (`itemRole="tab"`): `Tabs.List` принимает `items` (`value`, `label`, `badge`, `badgeDot`, `disabled`), панели — `Tabs.Panel`; `value` / `defaultValue` / `onChange`. `pill` — заливка выбранной вкладки, `line` — черта у выбранной. |
+| **Tabs** | Список — **`SegmentedControl`** (`itemRole="tab"`): `items` на корне (`value`, `label`, `badge`, `badgeDot`, `disabled`). Панель — `Tabs.Panel` с тем же `rootRef` в `tabsRef`, без контекста. `value` / `defaultValue` / `onChange`. `pill` — заливка выбранной вкладки, `line` — черта у выбранной. |
 
 ---
 
@@ -120,7 +120,8 @@
 
 | Компонент | Описание |
 |-----------|----------|
-| **Layout** | Панель: скролл на корне; `Header` / `Footer` sticky; алиасы `Inline` / `Split` / `ControlRow` / `Item`. |
+| **Header** | Шапка страницы: `Title`, `Subtitle` и вкладки `Tabs` в одной колонке. |
+| **Layout** | Панель: скролл на корне; `Header` / `Footer` sticky. `padding` 12 / 20 / 28px. У sticky `variant` красит фон после сдвига скролла. |
 | **Stack** / **Inline** / **Split** / **ControlRow** / **LayoutItem** | Flex-примитивы (вертикаль / чипы / края / ряд контролов / `grow`). |
 | **Grid** / **GridItem** | CSS Grid; скалярные `columns` / `span`, `mode` autoFit/autoFill. |
 | **Container** / **Page** | Колонка с max-width (`sm`…`xl` / `full`) и оболочка страницы. |

package/docs/LAYOUT.md

@@ -60,13 +60,19 @@ import {
 
 | Часть | Роль | Ключевые пропсы |
 |-------|------|-----------------|
-| `Layout` | Корень-scrollport (`overflow-y: auto`, flex-колонка) | `as`, `padding` (отступ корня), `gap` (между секциями). Оба: `sm` 12px, `md` 16px, `lg` 24px |
-| `Layout.Header` | Шапка | `sticky`, `as="header"` |
+| `Layout` | Корень-scrollport (`overflow-y: auto`, flex-колонка) | `as`, `padding` (`sm` 12px, `md` 20px, `lg` 28px), `gap` (12 / 16 / 24px) |
+| `Layout.Header` | Шапка | `sticky`, `variant` (`primary` \| `tinted` \| `secondary`), `as="header"` |
 | `Layout.Content` | Середина (без собственного overflow) | `as` |
-| `Layout.Footer` | Низ с действиями | `sticky`, `align` (`start` \| `center` \| `end` \| `space-between`), `as="footer"` |
+| `Layout.Footer` | Низ с действиями | `sticky`, `variant`, `align` (`start` \| `center` \| `end` \| `space-between`), `as="footer"` |
 
 `sticky` — элемент остаётся у края при скролле **`Layout`**. Без `sticky` Header/Footer уезжают вместе с контентом.
 
+`variant` вместе со `sticky` красит шапку, когда скролл ушёл от верха, и подвал, пока список не докручен до низа. Без `variant` фон не появляется.
+
+`gap` делится пополам. Нижнее поле `Layout.Header` и верхнее поле `Layout.Footer` — половина `gap`, вторая половина остаётся зазором между секциями. Сверху и по бокам остаётся `padding`.
+
+**`Header`** внутри `Layout.Header`: черта вкладок на всю ширину панели и совпадает с нижним краем шапки. До контента остаётся полный `gap`, фон липкой шапки под черту не заходит.
+
 ### Когда использовать
 
 - диалог / sheet / sidebar с заголовком и кнопками внизу;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "altum",
-	"version": "0.0.11",
+	"version": "0.0.12",
 	"description": "Библиотека React + TypeScript UI-компонентов: CSS Modules, токены ThemeProvider, адаптация overlay/sheet.",
 	"license": "MIT",
 	"author": "Alexander <azeeson@gmail.com>",

package/types/entries/hooks.d.ts

@@ -45,6 +45,16 @@ interface UseLongPressHandlers {
 }
 declare function useLongPress(onLongPress: () => void, options?: UseLongPressOptions): UseLongPressHandlers;
 
+type StickyChromeEdge = 'start' | 'end';
+interface UseStickyChromeOptions {
+    enabled?: boolean;
+    edge?: StickyChromeEdge;
+    scrollRef?: RefObject<HTMLElement | null>;
+    attribute?: string | false;
+    offset?: number;
+}
+declare function useStickyChrome(ref: RefObject<HTMLElement | null>, options?: UseStickyChromeOptions): boolean;
+
 type FormErrors<T extends Record<string, unknown>> = Partial<Record<keyof T, string>>;
 type FieldValidate<T extends Record<string, unknown>, K extends keyof T> = (value: T[K], values: T) => string | undefined;
 interface RegisterOptions<T extends Record<string, unknown>, K extends keyof T> {
@@ -109,5 +119,5 @@ interface ValidationRules {
 declare function fieldRules(rules: ValidationRules): FormRule;
 declare function checkedValue(payload: unknown): boolean;
 
-export { MOBILE_MEDIA_QUERY, REDUCED_MOTION_QUERY, SIDEBAR_LARGE_MEDIA_QUERY, SIDEBAR_MEDIUM_MEDIA_QUERY, checkedValue, compose, fieldRules, pattern, required, useControlledState, useControlledStateWithCallback, useDocumentKeyDown, useForm, useFormContext, useFormProvider, useIsMobile, useIsSidebarLarge, useIsSidebarMedium, useLongPress, useMediaQuery, useNow, useOutsideClick, usePrefersReducedMotion };
-export type { DocumentKeyDownTarget, FieldValidate, FormErrors, FormRule, RegisterOptions, UseDocumentKeyDownOptions, UseFormReturn, UseLongPressHandlers, UseLongPressOptions, UseOutsideClickOptions, ValidationRules };
+export { MOBILE_MEDIA_QUERY, REDUCED_MOTION_QUERY, SIDEBAR_LARGE_MEDIA_QUERY, SIDEBAR_MEDIUM_MEDIA_QUERY, checkedValue, compose, fieldRules, pattern, required, useControlledState, useControlledStateWithCallback, useDocumentKeyDown, useForm, useFormContext, useFormProvider, useIsMobile, useIsSidebarLarge, useIsSidebarMedium, useLongPress, useMediaQuery, useNow, useOutsideClick, usePrefersReducedMotion, useStickyChrome };
+export type { DocumentKeyDownTarget, FieldValidate, FormErrors, FormRule, RegisterOptions, StickyChromeEdge, UseDocumentKeyDownOptions, UseFormReturn, UseLongPressHandlers, UseLongPressOptions, UseOutsideClickOptions, UseStickyChromeOptions, ValidationRules };

package/types/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { ComponentPropsWithoutRef, Ref, ReactNode, AnchorHTMLAttributes, ButtonHTMLAttributes, MouseEvent, CSSProperties, ReactElement, AriaRole, MutableRefObject, ElementType, FC, HTMLAttributes } from 'react';
+import React__default, { ComponentPropsWithoutRef, Ref, ReactNode, AnchorHTMLAttributes, ButtonHTMLAttributes, MouseEvent, CSSProperties, ReactElement, AriaRole, MutableRefObject, RefObject, ElementType, FC, HTMLAttributes } from 'react';
 
 type AccordionVariant = 'bordered' | 'flush';
 interface AccordionItemData {
@@ -1149,34 +1149,25 @@ interface TabsItem {
     badge?: ReactNode;
     badgeDot?: boolean;
 }
-interface TabsProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'onChange' | 'defaultValue'> {
+interface TabsProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onChange' | 'defaultValue'> {
+    items: TabsItem[];
     value?: string;
     defaultValue?: string;
     onChange?: (id: string) => void;
     variant?: TabsVariant;
     orientation?: TabsOrientation;
-    children: React__default.ReactNode;
-    rootRef?: Ref<HTMLDivElement>;
-}
-interface TabsListProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {
-    items: TabsItem[];
     rootRef?: Ref<HTMLDivElement>;
 }
-interface TabsTriggerProps extends Omit<React__default.ButtonHTMLAttributes<HTMLButtonElement>, 'value'> {
-    value: string;
-    badge?: React__default.ReactNode;
-    badgeDot?: boolean;
-}
-interface TabsPanelProps extends React__default.HTMLAttributes<HTMLDivElement> {
+interface TabsPanelProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {
+    children?: ReactNode;
     value: string;
+    tabsRef: RefObject<HTMLDivElement | null>;
     forceMount?: boolean;
     rootRef?: Ref<HTMLDivElement>;
 }
 
-declare const Tabs: (({ value: valueProp, defaultValue, onChange, variant, orientation, className, children, rootRef, ...rest }: TabsProps) => React.JSX.Element) & {
-    Root: ({ value: valueProp, defaultValue, onChange, variant, orientation, className, children, rootRef, ...rest }: TabsProps) => React.JSX.Element;
-    List: ({ className, items, rootRef, ...rest }: TabsListProps) => React.JSX.Element | null;
-    Panel: ({ value, className, children, forceMount: _forceMount, hidden, rootRef, ...rest }: TabsPanelProps) => React.JSX.Element;
+declare const Tabs: (({ items, value: valueProp, defaultValue, onChange, variant, orientation, className, rootRef, id: idProp, ...rest }: TabsProps) => React.JSX.Element) & {
+    Panel: ({ value, tabsRef, className, children, forceMount: _forceMount, hidden, rootRef, ...rest }: TabsPanelProps) => React.JSX.Element;
 };
 
 type TextSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
@@ -1523,12 +1514,26 @@ interface LocaleProviderProps {
 
 declare const LocaleProvider: React__default.FC<LocaleProviderProps>;
 
+interface HeaderProps extends ComponentPropsWithoutRef<'div'> {
+    rootRef?: Ref<HTMLDivElement>;
+}
+
 interface TitleProps extends ComponentPropsWithoutRef<'h2'> {
     level?: 1 | 2 | 3 | 4;
     weight?: 'normal' | 'medium' | 'bold';
     rootRef?: Ref<HTMLHeadingElement>;
 }
 
+declare const HeaderRoot: ({ className, rootRef, ...rest }: HeaderProps) => React.JSX.Element;
+declare const HeaderTitle: ({ className, level, ...rest }: TitleProps) => React.JSX.Element;
+declare const HeaderSubtitle: ({ className, size, color, ...rest }: TextProps) => React.JSX.Element;
+declare const HeaderTabs: ({ className, variant, ...rest }: TabsProps) => React.JSX.Element;
+declare const Header: (({ className, rootRef, ...rest }: HeaderProps) => React.JSX.Element) & {
+    Title: ({ className, level, ...rest }: TitleProps) => React.JSX.Element;
+    Subtitle: ({ className, size, color, ...rest }: TextProps) => React.JSX.Element;
+    Tabs: ({ className, variant, ...rest }: TabsProps) => React.JSX.Element;
+};
+
 declare const Title: ({ level, weight, className, rootRef, ...rest }: TitleProps) => React.JSX.Element;
 
 type TooltipSide = AnchorSide;
@@ -1550,7 +1555,7 @@ type TooltipBaseProps = {
 };
 type TooltipProps = WithEnrichedChildren<TooltipBaseProps, TooltipTriggerProps>;
 
-declare const Tooltip: ({ content, side, children, className, disabled, open, defaultOpen, openDelay, closeDelay, wrap: _wrap, rootRef, }: TooltipProps) => string | number | boolean | React.JSX.Element | Iterable<ReactNode> | null | undefined;
+declare const Tooltip: ({ content, side, children, className, disabled, open, defaultOpen, openDelay, closeDelay, wrap: _wrap, rootRef, }: TooltipProps) => string | number | boolean | Iterable<ReactNode> | React.JSX.Element | null | undefined;
 
 interface UploadZoneProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'onChange'> {
     onChange?: (files: FileList) => void;
@@ -1878,6 +1883,7 @@ type LayoutGap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 type LayoutAlign = 'start' | 'center' | 'end' | 'baseline' | 'stretch';
 type LayoutJustify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
 type LayoutSpacing = 'sm' | 'md' | 'lg';
+type LayoutChromeVariant = 'primary' | 'tinted' | 'secondary';
 interface LayoutRootProps extends ComponentPropsWithoutRef<'div'> {
     children?: ReactNode;
     rootRef?: LayoutNodeRef;
@@ -1889,6 +1895,7 @@ interface LayoutHeaderProps extends ComponentPropsWithoutRef<'header'> {
     children?: ReactNode;
     rootRef?: LayoutNodeRef;
     sticky?: boolean;
+    variant?: LayoutChromeVariant;
     as?: ElementType;
 }
 interface LayoutContentProps extends ComponentPropsWithoutRef<'div'> {
@@ -1901,6 +1908,7 @@ interface LayoutFooterProps extends Omit<ComponentPropsWithoutRef<'footer'>, 'al
     children?: ReactNode;
     rootRef?: LayoutNodeRef;
     sticky?: boolean;
+    variant?: LayoutChromeVariant;
     align?: LayoutFooterAlign;
     as?: ElementType;
 }
@@ -1958,13 +1966,13 @@ type ControlRowComponent = {
 declare const ControlRow: ControlRowComponent;
 
 declare const LayoutRoot: (props: LayoutRootProps) => React.JSX.Element;
-declare const LayoutHeader: ({ as, ...props }: LayoutHeaderProps) => React.JSX.Element;
+declare const LayoutHeader: ({ as, sticky, variant, rootRef, ...props }: LayoutHeaderProps) => React.JSX.Element;
 declare const LayoutContent: (props: LayoutContentProps) => React.JSX.Element;
-declare const LayoutFooter: ({ as, align, ...props }: LayoutFooterProps) => React.JSX.Element;
+declare const LayoutFooter: ({ as, align, sticky, variant, rootRef, ...props }: LayoutFooterProps) => React.JSX.Element;
 declare const Layout: ((props: LayoutRootProps) => React.JSX.Element) & {
-    Header: ({ as, ...props }: LayoutHeaderProps) => React.JSX.Element;
+    Header: ({ as, sticky, variant, rootRef, ...props }: LayoutHeaderProps) => React.JSX.Element;
     Content: (props: LayoutContentProps) => React.JSX.Element;
-    Footer: ({ as, align, ...props }: LayoutFooterProps) => React.JSX.Element;
+    Footer: ({ as, align, sticky, variant, rootRef, ...props }: LayoutFooterProps) => React.JSX.Element;
 };
 
 type GridGapToken = SpacingToken;
@@ -2046,7 +2054,11 @@ interface ModalFooterProps extends Omit<ComponentPropsWithoutRef<'footer'>, 'ali
 type ModalProps = ModalRootProps;
 
 declare const Modal: (({ open, onOpenChange, children, size, className, "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, rootRef, ...rest }: ModalRootProps) => React.JSX.Element) & {
-    Header: ({ rootRef, ...props }: ModalHeaderProps) => React.JSX.Element;
+    Header: (({ rootRef, children, ...props }: ModalHeaderProps) => React.JSX.Element) & {
+        Title: ({ className, level, ...rest }: TitleProps) => React.JSX.Element;
+        Subtitle: ({ className, size, color, ...rest }: TextProps) => React.JSX.Element;
+        Tabs: ({ className, variant, ...rest }: TabsProps) => React.JSX.Element;
+    };
     Body: ({ className, rootRef, ...props }: ModalBodyProps) => React.JSX.Element;
     Footer: ({ align, rootRef, ...props }: ModalFooterProps) => React.JSX.Element;
 };
@@ -2740,8 +2752,8 @@ declare const CalendarBoard: (({ children, view: controlledView, defaultView, on
     Week: ({ className, showScheduleHeader, showScheduleNav, rootRef, ...rest }: CalendarBoardWeekProps) => React.JSX.Element;
     Day: ({ className, showScheduleHeader, showScheduleNav, rootRef, ...rest }: CalendarBoardDayProps) => React.JSX.Element;
     Year: ({ className, rootRef, ...rest }: CalendarBoardYearProps) => React.JSX.Element;
-    TaskChip: ({ task, layout, continuesBefore, continuesAfter, timeLabel, className, style, highlighted: highlightedProp, rootRef, ...rest }: CalendarBoardTaskChipProps) => string | number | boolean | React.JSX.Element | Iterable<React.ReactNode> | null | undefined;
+    TaskChip: ({ task, layout, continuesBefore, continuesAfter, timeLabel, className, style, highlighted: highlightedProp, rootRef, ...rest }: CalendarBoardTaskChipProps) => string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;
 };
 
-export { Accordion, ActionItem, ActionList, ActionSheetTrigger, Alert, AspectRatio, Attachment, AutocompleteField, Avatar, AvatarGroup, Badge, BarChart, Box, Bubble, Button, ButtonGroup, ButtonIcon, Calendar, CalendarBoard, Card, Checkbox, CheckboxGroup, Chip, ChipGroup, Collapse, ColorSwatchGroup, CommandPalette, ConfirmDialog, Container, ControlRow, DateField, DateRangeField, DayStripCalendar, DescriptionList, DialogLayout, DonutChart, Dropdown, EmptyState, FieldBaseButton, FieldBaseIcon, FieldGroup, FieldLabel, Fieldset, FileList$1 as FileList, FileUploader, FormMessage, Gap, Grid, GridItem, ImageCrop, ImageGallery, ImageLightbox, Inline, Item, Kbd, KbdGroup, Layout, LayoutContent, LayoutFooter, LayoutHeader, LayoutItem, LayoutRoot, LineChart, Link, Listbox, LiveRegion, LocaleProvider, Marker, MaskedField, Media, Menu, Modal, MultiSelect, Notification, NotificationProvider, NumberField, Overflow, Overlay, Page, Pagination, PasswordField, PinInput, Popover, PopupSwitch, Progress, ProgressCircle, PullToRefresh, Radio, RadioGroup, Rating, RelativeTime, SafeArea, ScrollArea, SearchField, SegmentedControl, Select, Separator, Sheet, Sidebar, Skeleton, SkipLink, Slider, SortableList, Spinner, Split, Stack, StatBadge, Steps, SuggestField, SwipeToAction, Switch, Table, Tabs, Text, TextField, TextareaField, ThemeProvider, TimeField, Timeline, Title, Tooltip, UploadZone, VirtualList, VisuallyHidden, WheelTimePicker, dismiss, dismissAll, en, formatRelativeTime, getPasswordStrength, notify, ru, useCalendarBoardContext, useCalendarBoardTaskHover, useLocale, useNotify, useT, useTheme };
-export type { AccordionItemData, AccordionItemProps, AccordionProps, AccordionVariant, ActionItemProps, ActionListEntry, ActionListGroup, ActionListItem, ActionListProps, ActionListSeparator, ActionSheetTriggerProps, AlertLayout, AlertProps, AlertVariant, AspectRatioProps, AttachmentProps, AttachmentSize, AttachmentStatus, AutocompleteFieldOption, AutocompleteFieldProps, AvatarGroupProps, AvatarProps, AvatarSize, AvatarStatus, BadgePosition, BadgeProps, BadgeSize, BadgeVariant, BarChartDataset, BarChartProps, BoxAs, BoxBorderStyle, BoxProps, BoxRadius, BoxShadow, BoxVariant, BubbleAlign, BubbleProps, BubbleReaction, BubbleVariant, ButtonGroupItemFit, ButtonGroupOrientation, ButtonGroupRootProps, ButtonGroupVariant, ButtonIconProps, ButtonProps, ButtonVariant, CalendarBoardBodyProps, CalendarBoardDayCellRenderProps, CalendarBoardDayProps, CalendarBoardHeaderProps, CalendarBoardMonthProps, CalendarBoardNavProps, CalendarBoardProviderProps, CalendarBoardRootProps, CalendarBoardTask, CalendarBoardTaskChipProps, CalendarBoardTaskLayout, CalendarBoardTaskRenderProps, CalendarBoardTitleProps, CalendarBoardView, CalendarBoardWeekProps, CalendarBoardYearMonthRenderProps, CalendarBoardYearProps, CalendarBodyProps, CalendarContextValue, CalendarDayCell, CalendarDayCellRenderProps, CalendarHeaderProps, CalendarNavProps, CalendarProviderProps, CalendarRootProps, CalendarScheduleEvent, CalendarSelectionMode, CalendarTitleProps, CalendarViewMode, CardProps, CardVariant, CheckboxGroupProps, CheckboxMode, CheckboxProps, ChipGroupGap, ChipGroupProps, ChipMode, ChipProps, ChipVariant, CollapseProps, ColorSwatchGroupProps, Column, ActionListGroup as CommandPaletteGroup, ActionListItem as CommandPaletteItem, CommandPaletteProps, ConfirmDialogProps, ConfirmDialogSecondaryAction, ContainerProps, ContainerSize, ControlRowProps, ControlSize, DateFieldProps, DateRangeFieldProps, DateRangeValue, DayStripCalendarProps, DayStripDayRenderProps, DeepPartialMessages, DescriptionListItem, DescriptionListProps, DialogLayoutProps, DonutChartProps, DropdownAlign, DropdownPanelScroll, DropdownPanelState, DropdownPopup, DropdownPopupRole, DropdownProps, DropdownTriggerAttrs, DropdownTriggerMode, DropdownTriggerSlotProps, DropdownWidthMode, EmptyStateProps, EmptyStateSize, FieldBaseButtonProps, FieldBaseIconProps, FieldBaseProps, FieldGroupProps, FieldGroupWidth, FieldLabelAlign, FieldLabelJustify, FieldLabelLayout, FieldLabelProps, FieldWidth, FieldsetProps, FieldsetVariant, FileListItemProps, FileListItemStatus, FileListRootProps, FileUploaderFile, FileUploaderProps, FormMessageProps, FormMessageVariant, GapOrientation, GapProps, GridGapToken, GridItemProps, GridMode, GridProps, ImageCropProps, ImageCropResult, ImageCropShape, ImageGalleryItem, ImageGalleryProps, ImageLightboxProps, InlineProps, ItemMediaVariant, ItemProps, ItemSize, ItemVariant, KbdGroupProps, KbdProps, LabelSide, LayoutAlign, LayoutContentProps, LayoutFooterAlign, LayoutFooterProps, LayoutGap, LayoutHeaderProps, LayoutItemProps, LayoutJustify, LayoutRootProps, LayoutSpacing, LineChartProps, LinkProps, LinkSize, LinkStatus, LinkVariant, ListboxEntry, ListboxFilterFn, ListboxGroup, ListboxHandle, ListboxNavigation, ListboxOption, ListboxProps, ListboxSeparator, LiveRegionProps, LocaleCode, LocaleProviderProps, MarkerProps, MarkerVariant, MaskedFieldProps, MediaProps, MenuProps, MenuTrigger, Messages, ModalBodyProps, ModalFooterAlign, ModalFooterProps, ModalHeaderProps, ModalProps, ModalRootProps, MultiSelectOption, MultiSelectProps, NotificationAction, NotificationItem, NotificationPosition, NotificationProps, NotificationProviderProps, NotificationViewportProps, NotifyInput, NumberFieldProps, OverflowDisplay, OverflowFit, OverflowGap, OverflowItemProps, OverflowProps, OverlayBaseProps, OverlayFloatingProps, OverlayModalProps, OverlayProps, OverlaySheetProps, OverlaySheetSide, OverlayVariant, PageProps, PaginationControlsProps, PaginationPageSizeProps, PaginationProps, PaginationRootProps, PaginationSummaryProps, PasswordFieldProps, PasswordStrength, PinInputProps, PopoverContentVariant, PopoverProps, PopoverTargetAction, PopoverTriggerSlotProps, PopupSwitchAlign, PopupSwitchOption, PopupSwitchProps, PopupSwitchVariant, PopupSwitchWidth, ProgressCircleProps, ProgressProps, ProgressVariant, PullToRefreshProps, RadioGroupProps, RadioProps, RangeValue, RatingProps, RelativeTimeProps, ResolvedListboxGroup, SafeAreaEdges, SafeAreaProps, ScrollAreaProps, SearchFieldProps, SegmentOption, SegmentedControlProps, SegmentedControlVariant, SegmentedItemFit, SelectInputProps, SelectOption, SelectProps, SelectSelectionMode, SeparatorOrientation, SeparatorProps, SeparatorSpace, SheetBodyProps, SheetDirection, SheetFooterAlign, SheetFooterProps, SheetHeaderProps, SheetMode, SheetProps, SidebarContentProps, SidebarFooterProps, SidebarGroupLabelProps, SidebarGroupProps, SidebarHeaderProps, SidebarItemProps, SidebarMobileTriggerProps, SidebarProps, SidebarTitleProps, SkeletonProps, SkeletonVariant, SkipLinkProps, SliderProps, SliderRangeProps, SliderSingleProps, SortableItem, SortableListProps, SortableListVariant, SpinnerProps, SpinnerSize, SpinnerVariant, SplitProps, StackProps, StatBadgeProps, StepItem, StepStatus, StepsProps, SuggestFieldOption, SuggestFieldProps, SwipeAction, SwipeToActionProps, SwitchLabelSide, SwitchProps, TableDensity, TableEmptyConfig, TablePagination, TableProps, TableRowActionsProps, TableSortDirection, TabsItem, TabsListProps, TabsOrientation, TabsPanelProps, TabsProps, TabsTriggerProps, TabsVariant, TextFieldAs, TextFieldProps, TextFieldRef, TextProps, TextareaFieldProps, Theme, ThemeApplyTarget, ThemeProviderProps, TimeFieldProps, TimePopupProps, TimeValue, TimelineItem, TimelineItemStatus, TimelineProps, TitleProps, TooltipProps, TooltipSide, TooltipTriggerProps, TranslationParams, UploadZoneProps, VirtualListAlign, VirtualListHandle, VirtualListOnRangeChangeOptions, VirtualListProps, VirtualListRange, VirtualListRenderItemInfo, VirtualScrollMetrics, VirtualScrollMetricsStore, VisuallyHiddenProps, WheelTimePickerProps };
+export { Accordion, ActionItem, ActionList, ActionSheetTrigger, Alert, AspectRatio, Attachment, AutocompleteField, Avatar, AvatarGroup, Badge, BarChart, Box, Bubble, Button, ButtonGroup, ButtonIcon, Calendar, CalendarBoard, Card, Checkbox, CheckboxGroup, Chip, ChipGroup, Collapse, ColorSwatchGroup, CommandPalette, ConfirmDialog, Container, ControlRow, DateField, DateRangeField, DayStripCalendar, DescriptionList, DialogLayout, DonutChart, Dropdown, EmptyState, FieldBaseButton, FieldBaseIcon, FieldGroup, FieldLabel, Fieldset, FileList$1 as FileList, FileUploader, FormMessage, Gap, Grid, GridItem, Header, HeaderRoot, HeaderSubtitle, HeaderTabs, HeaderTitle, ImageCrop, ImageGallery, ImageLightbox, Inline, Item, Kbd, KbdGroup, Layout, LayoutContent, LayoutFooter, LayoutHeader, LayoutItem, LayoutRoot, LineChart, Link, Listbox, LiveRegion, LocaleProvider, Marker, MaskedField, Media, Menu, Modal, MultiSelect, Notification, NotificationProvider, NumberField, Overflow, Overlay, Page, Pagination, PasswordField, PinInput, Popover, PopupSwitch, Progress, ProgressCircle, PullToRefresh, Radio, RadioGroup, Rating, RelativeTime, SafeArea, ScrollArea, SearchField, SegmentedControl, Select, Separator, Sheet, Sidebar, Skeleton, SkipLink, Slider, SortableList, Spinner, Split, Stack, StatBadge, Steps, SuggestField, SwipeToAction, Switch, Table, Tabs, Text, TextField, TextareaField, ThemeProvider, TimeField, Timeline, Title, Tooltip, UploadZone, VirtualList, VisuallyHidden, WheelTimePicker, dismiss, dismissAll, en, formatRelativeTime, getPasswordStrength, notify, ru, useCalendarBoardContext, useCalendarBoardTaskHover, useLocale, useNotify, useT, useTheme };
+export type { AccordionItemData, AccordionItemProps, AccordionProps, AccordionVariant, ActionItemProps, ActionListEntry, ActionListGroup, ActionListItem, ActionListProps, ActionListSeparator, ActionSheetTriggerProps, AlertLayout, AlertProps, AlertVariant, AspectRatioProps, AttachmentProps, AttachmentSize, AttachmentStatus, AutocompleteFieldOption, AutocompleteFieldProps, AvatarGroupProps, AvatarProps, AvatarSize, AvatarStatus, BadgePosition, BadgeProps, BadgeSize, BadgeVariant, BarChartDataset, BarChartProps, BoxAs, BoxBorderStyle, BoxProps, BoxRadius, BoxShadow, BoxVariant, BubbleAlign, BubbleProps, BubbleReaction, BubbleVariant, ButtonGroupItemFit, ButtonGroupOrientation, ButtonGroupRootProps, ButtonGroupVariant, ButtonIconProps, ButtonProps, ButtonVariant, CalendarBoardBodyProps, CalendarBoardDayCellRenderProps, CalendarBoardDayProps, CalendarBoardHeaderProps, CalendarBoardMonthProps, CalendarBoardNavProps, CalendarBoardProviderProps, CalendarBoardRootProps, CalendarBoardTask, CalendarBoardTaskChipProps, CalendarBoardTaskLayout, CalendarBoardTaskRenderProps, CalendarBoardTitleProps, CalendarBoardView, CalendarBoardWeekProps, CalendarBoardYearMonthRenderProps, CalendarBoardYearProps, CalendarBodyProps, CalendarContextValue, CalendarDayCell, CalendarDayCellRenderProps, CalendarHeaderProps, CalendarNavProps, CalendarProviderProps, CalendarRootProps, CalendarScheduleEvent, CalendarSelectionMode, CalendarTitleProps, CalendarViewMode, CardProps, CardVariant, CheckboxGroupProps, CheckboxMode, CheckboxProps, ChipGroupGap, ChipGroupProps, ChipMode, ChipProps, ChipVariant, CollapseProps, ColorSwatchGroupProps, Column, ActionListGroup as CommandPaletteGroup, ActionListItem as CommandPaletteItem, CommandPaletteProps, ConfirmDialogProps, ConfirmDialogSecondaryAction, ContainerProps, ContainerSize, ControlRowProps, ControlSize, DateFieldProps, DateRangeFieldProps, DateRangeValue, DayStripCalendarProps, DayStripDayRenderProps, DeepPartialMessages, DescriptionListItem, DescriptionListProps, DialogLayoutProps, DonutChartProps, DropdownAlign, DropdownPanelScroll, DropdownPanelState, DropdownPopup, DropdownPopupRole, DropdownProps, DropdownTriggerAttrs, DropdownTriggerMode, DropdownTriggerSlotProps, DropdownWidthMode, EmptyStateProps, EmptyStateSize, FieldBaseButtonProps, FieldBaseIconProps, FieldBaseProps, FieldGroupProps, FieldGroupWidth, FieldLabelAlign, FieldLabelJustify, FieldLabelLayout, FieldLabelProps, FieldWidth, FieldsetProps, FieldsetVariant, FileListItemProps, FileListItemStatus, FileListRootProps, FileUploaderFile, FileUploaderProps, FormMessageProps, FormMessageVariant, GapOrientation, GapProps, GridGapToken, GridItemProps, GridMode, GridProps, HeaderProps, ImageCropProps, ImageCropResult, ImageCropShape, ImageGalleryItem, ImageGalleryProps, ImageLightboxProps, InlineProps, ItemMediaVariant, ItemProps, ItemSize, ItemVariant, KbdGroupProps, KbdProps, LabelSide, LayoutAlign, LayoutChromeVariant, LayoutContentProps, LayoutFooterAlign, LayoutFooterProps, LayoutGap, LayoutHeaderProps, LayoutItemProps, LayoutJustify, LayoutRootProps, LayoutSpacing, LineChartProps, LinkProps, LinkSize, LinkStatus, LinkVariant, ListboxEntry, ListboxFilterFn, ListboxGroup, ListboxHandle, ListboxNavigation, ListboxOption, ListboxProps, ListboxSeparator, LiveRegionProps, LocaleCode, LocaleProviderProps, MarkerProps, MarkerVariant, MaskedFieldProps, MediaProps, MenuProps, MenuTrigger, Messages, ModalBodyProps, ModalFooterAlign, ModalFooterProps, ModalHeaderProps, ModalProps, ModalRootProps, MultiSelectOption, MultiSelectProps, NotificationAction, NotificationItem, NotificationPosition, NotificationProps, NotificationProviderProps, NotificationViewportProps, NotifyInput, NumberFieldProps, OverflowDisplay, OverflowFit, OverflowGap, OverflowItemProps, OverflowProps, OverlayBaseProps, OverlayFloatingProps, OverlayModalProps, OverlayProps, OverlaySheetProps, OverlaySheetSide, OverlayVariant, PageProps, PaginationControlsProps, PaginationPageSizeProps, PaginationProps, PaginationRootProps, PaginationSummaryProps, PasswordFieldProps, PasswordStrength, PinInputProps, PopoverContentVariant, PopoverProps, PopoverTargetAction, PopoverTriggerSlotProps, PopupSwitchAlign, PopupSwitchOption, PopupSwitchProps, PopupSwitchVariant, PopupSwitchWidth, ProgressCircleProps, ProgressProps, ProgressVariant, PullToRefreshProps, RadioGroupProps, RadioProps, RangeValue, RatingProps, RelativeTimeProps, ResolvedListboxGroup, SafeAreaEdges, SafeAreaProps, ScrollAreaProps, SearchFieldProps, SegmentOption, SegmentedControlProps, SegmentedControlVariant, SegmentedItemFit, SelectInputProps, SelectOption, SelectProps, SelectSelectionMode, SeparatorOrientation, SeparatorProps, SeparatorSpace, SheetBodyProps, SheetDirection, SheetFooterAlign, SheetFooterProps, SheetHeaderProps, SheetMode, SheetProps, SidebarContentProps, SidebarFooterProps, SidebarGroupLabelProps, SidebarGroupProps, SidebarHeaderProps, SidebarItemProps, SidebarMobileTriggerProps, SidebarProps, SidebarTitleProps, SkeletonProps, SkeletonVariant, SkipLinkProps, SliderProps, SliderRangeProps, SliderSingleProps, SortableItem, SortableListProps, SortableListVariant, SpinnerProps, SpinnerSize, SpinnerVariant, SplitProps, StackProps, StatBadgeProps, StepItem, StepStatus, StepsProps, SuggestFieldOption, SuggestFieldProps, SwipeAction, SwipeToActionProps, SwitchLabelSide, SwitchProps, TableDensity, TableEmptyConfig, TablePagination, TableProps, TableRowActionsProps, TableSortDirection, TabsItem, TabsOrientation, TabsPanelProps, TabsProps, TabsVariant, TextFieldAs, TextFieldProps, TextFieldRef, TextProps, TextareaFieldProps, Theme, ThemeApplyTarget, ThemeProviderProps, TimeFieldProps, TimePopupProps, TimeValue, TimelineItem, TimelineItemStatus, TimelineProps, TitleProps, TooltipProps, TooltipSide, TooltipTriggerProps, TranslationParams, UploadZoneProps, VirtualListAlign, VirtualListHandle, VirtualListOnRangeChangeOptions, VirtualListProps, VirtualListRange, VirtualListRenderItemInfo, VirtualScrollMetrics, VirtualScrollMetricsStore, VisuallyHiddenProps, WheelTimePickerProps };