@shmidko61/lc-ui-kit 0.15.0 → 0.16.1

package/README.md

@@ -212,3 +212,10 @@ easing и iterations — синонимы timingFunction и iterationCount; пр
 ## Tabs
 
 [API, правила наследования и примеры Tabs](src/tabs/README.md). Импорт: @shmidko61/lc-ui-kit/tabs. Витрина: Navigation/Tabs/Showcase. Сборка растущего Storybook запускается с лимитом heap Node 8 ГБ.
+
+## Оформление нативной прокрутки
+
+Box/Flex поддерживают типизированный `scrollbar` в base/md/lg/xl, цветовые токены,
+CSS-размеры, частичное наследование и сброс через `null`. Оформление не включает
+overflow. [API и ограничения](./src/box/README.md). Storybook: **UI Kit / Scrollbar**
+(16 примеров, включая вложенность, сбросы и style escape hatch).

package/dist/accordion.cjs

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

package/dist/accordion.js

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

package/dist/box/box.d.ts

@@ -8,5 +8,6 @@ type BoxComponentType = {
     displayName?: string;
 };
 export declare const Box: BoxComponentType;
+export type { ScrollbarLength, ScrollbarStyleProps, UiKitScrollbarProps } from '../types/index';
 export type { BorderRadiusItem, BorderRadiusKeys, BorderRadiusSides, BorderWidthItem, BorderWidthSides, PositionValue, UiKitAnimation, UiKitAnimationProps, UiKitAnimationValue, UiKitAnyIndentationMargin, UiKitAnyIndentationPadding, UiKitArrayIndentation, UiKitAspectRatioProps, UiKitAspectRatioValue, UiKitAxisIndentationMargin, UiKitAxisIndentationPadding, UiKitBackgroundProps, UiKitBorderColor, UiKitBorderProps, UiKitBorderRadius, UiKitBorderWidth, UiKitBoxShadowProps, UiKitBoxShadowValue, UiKitColorProps, UiKitColorValue, UiKitCursorProps, UiKitDimensionProps, UiKitDisplayProps, UiKitIndentations, UiKitIndentationsProps, UiKitListStyleProps, UiKitMarginArrayIndentation, UiKitMarginIndentation, UiKitMixedXAxisIndentationMargin, UiKitMixedXAxisIndentationPadding, UiKitMixedYAxisIndentationMargin, UiKitMixedYAxisIndentationPadding, UiKitOpacityProps, UiKitOpacityValue, UiKitOutlineProps, UiKitOverflowProps, UiKitOverflowValue, UiKitPointerEventsProps, UiKitPointerEventsValue, UiKitPositionProps, UiKitTransformOriginValue, UiKitTransformProps, UiKitTransformValue, } from '../types/index';
 export type { BoxAs, BoxBackgroundValue, BoxBreakpointProps, BoxComponentProps, BoxProps, HoverStyleProps, StateStyleProps, } from './box.types';

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

@@ -1,6 +1,6 @@
 import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';
 import { ResponsiveStyleBreakpoint } from '../shared/responsive-style/responsive-style.types';
-import { UiKitAnimationProps, UiKitAspectRatioProps, UiKitBackgroundProps, UiKitBackgroundValue, UiKitBorderProps, UiKitBoxShadowProps, UiKitColorProps, UiKitCursorProps, UiKitDimensionProps, UiKitDisplayProps, UiKitIndentationsProps, UiKitListStyleProps, UiKitOpacityProps, UiKitOutlineProps, UiKitOverflowProps, UiKitPointerEventsProps, UiKitPositionProps, UiKitTransformProps } from '../types/index';
+import { UiKitAnimationProps, UiKitAspectRatioProps, UiKitBackgroundProps, UiKitBackgroundValue, UiKitBorderProps, UiKitBoxShadowProps, UiKitColorProps, UiKitCursorProps, UiKitDimensionProps, UiKitDisplayProps, UiKitIndentationsProps, UiKitListStyleProps, UiKitOpacityProps, UiKitOutlineProps, UiKitOverflowProps, UiKitPointerEventsProps, UiKitPositionProps, UiKitScrollbarProps, UiKitTransformProps } from '../types/index';
 /**
  * Допустимые HTML-теги для Box.
  *
@@ -20,7 +20,7 @@ export type BoxBackgroundValue = UiKitBackgroundValue;
 /**
  * Стилевые props, общие для base-состояния и responsive overrides.
  */
-export type BoxStyleProps = UiKitAnimationProps & UiKitDisplayProps & UiKitPositionProps & UiKitOverflowProps & UiKitAspectRatioProps & UiKitTransformProps & UiKitColorProps & UiKitOpacityProps & UiKitPointerEventsProps & UiKitBoxShadowProps & UiKitBackgroundProps & UiKitCursorProps & UiKitIndentationsProps & UiKitOutlineProps & UiKitListStyleProps & UiKitDimensionProps;
+export type BoxStyleProps = UiKitAnimationProps & UiKitScrollbarProps & UiKitDisplayProps & UiKitPositionProps & UiKitOverflowProps & UiKitAspectRatioProps & UiKitTransformProps & UiKitColorProps & UiKitOpacityProps & UiKitPointerEventsProps & UiKitBoxShadowProps & UiKitBackgroundProps & UiKitCursorProps & UiKitIndentationsProps & UiKitOutlineProps & UiKitListStyleProps & UiKitDimensionProps;
 /**
  * Собственные стилевые props Box поверх общих контрактов ui-kit.
  */

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

@@ -0,0 +1,7 @@
+import { ScrollbarPlanProps, ScrollbarVariableStyle } from '../types/index';
+/**
+ * Накапливает поля base/md/lg/xl и передаёт их через CSS variables + safelisted utilities.
+ * После null накопление начинается заново. Не создаёт классов, если prop не использован.
+ * Переменные --lc-scrollbar-* являются локальными точками переопределения через style.
+ */
+export declare function assignScrollbarPlan(props: ScrollbarPlanProps, classNames: Array<string>, style: ScrollbarVariableStyle): void;

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

@@ -1 +1,2 @@
 export { animationRef, hasAnimationKeyframes } from './box-animation.helpers';
+export { assignScrollbarPlan } from './box-scrollbar.helpers';

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

@@ -0,0 +1,7 @@
+import { CSSProperties } from 'react';
+import { responsiveBreakpoints } from '../../shared/responsive-style/index';
+import { UiKitScrollbarProps } from '../../types/index';
+/** Вход responsive-планировщика; Flex использует тот же контракт через Box. */
+export type ScrollbarPlanProps = UiKitScrollbarProps & Partial<Record<(typeof responsiveBreakpoints)[number], UiKitScrollbarProps>>;
+/** Inline style с локальными CSS-переменными, до применения потребительского style. */
+export type ScrollbarVariableStyle = CSSProperties & Record<`--${string}`, string | number>;

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

@@ -1 +1,2 @@
 export type { ResponsiveAnimation } from './box-animation.types';
+export type { ScrollbarPlanProps, ScrollbarVariableStyle } from './box-scrollbar.types';

package/dist/box.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const $t=require("react/jsx-runtime"),ot=require("react"),B=require("./responsive-style.config-B2m9jVlX.cjs");function it({background:o,backgroundColor:t,bg:i,bgSize:e,bgRepeat:s,bgPosition:a,border:f,boxShadow:d,color:n,cursor:l,opacity:b,overflow:u,overflowX:h,overflowY:y,pointerEvents:p,aspectRatio:c,transform:$,transformOrigin:v,p:C,m:W,outlineColor:x,outlineWidth:S,outlineOffset:R,outlineStyle:N,listStyle:w,display:I,position:g,width:P,maxWidth:V,minWidth:j,height:M,maxHeight:O,minHeight:A}){const r={};return i!==void 0?Mt(r,i):o!==void 0&&(r.background=q(o)),t!==void 0&&(r.backgroundColor=q(t)),e!==void 0&&(r.backgroundSize=Pt(e)),s!==void 0&&(r.backgroundRepeat=Vt(s)),a!==void 0&&(r.backgroundPosition=jt(a)),wt(r,f),d!==void 0&&(r.boxShadow=k(d)),n!==void 0&&(r.color=k(n)),l!==void 0&&(r.cursor=l),b!==void 0&&(r.opacity=typeof b=="number"?b:k(b)),u!==void 0&&(r.overflowX=u,r.overflowY=u),h!==void 0&&(r.overflowX=h),y!==void 0&&(r.overflowY=y),p!==void 0&&(r.pointerEvents=p),c!==void 0&&(r.aspectRatio=typeof c=="number"?String(c):k(c)),$!==void 0&&(r.transform=k($)),v!==void 0&&(r.transformOrigin=k(v)),Ct(r,C),Wt(r,W),x!==void 0&&(r.outlineColor=k(x)),S!==void 0&&(r.outlineWidth=S),R!==void 0&&(r.outlineOffset=R),N!==void 0&&(r.outlineStyle=N),w?.position!==void 0&&(r.listStylePosition=w.position),w?.type!==void 0&&(r.listStyleType=w.type),I!==void 0&&(r.display=It(I)),g?.type!==void 0&&(r.position=g.type),g?.top!==void 0&&(r.top=F(g.top)),g?.left!==void 0&&(r.left=F(g.left)),g?.right!==void 0&&(r.right=F(g.right)),g?.bottom!==void 0&&(r.bottom=F(g.bottom)),g?.zIndex!==void 0&&(r.zIndex=g.zIndex),P!==void 0&&(r.width=z(P)),V!==void 0&&(r.maxWidth=z(V)),j!==void 0&&(r.minWidth=z(j)),M!==void 0&&(r.height=z(M)),O!==void 0&&(r.maxHeight=z(O)),A!==void 0&&(r.minHeight=z(A)),Object.keys(r).length>0?r:void 0}function yt(o){const t=[],i={},e=o.groupParent===!0;Q(o,t,i,{isGroupParent:e});for(const s of B.responsiveBreakpoints){const a=o[s];a&&Q(a,t,i,{classPrefix:`${s}:`,variablePrefix:`${s}-`,isGroupParent:e})}return Bt(o,t,i),kt(o,t,i),{className:t.join(" "),style:Object.keys(i).length>0?i:void 0}}function Bt(o,t,i){let e={};const s=[{value:o.animation,prefix:"",variable:""},...B.responsiveBreakpoints.map(a=>({value:o[a]?.animation,prefix:a+":",variable:a+"-"}))];for(const a of s)if(a.value!==void 0){if(a.value==="none")e={},i[`--${a.variable}animation`]="none";else{const f=a.value==="spin"?{preset:"spin",keyframes:null}:a.value;e={...e,...f,...f.easing!==void 0?{timingFunction:f.easing}:{},...f.iterations!==void 0?{iterationCount:f.iterations===1/0?"infinite":f.iterations}:{}};const d=e.keyframes||e.preset==="spin"?"none":e.preset??"none";i[`--${a.variable}animation`]=[d,typeof e.duration=="number"?e.duration+"ms":e.duration??"1s",e.timingFunction??"linear",typeof e.delay=="number"?e.delay+"ms":e.delay??"0ms",e.iterationCount??"infinite",e.direction??"normal",e.fillMode??"none",e.playState??"running"].join(" ")}t.push(`${a.prefix}[animation:var(--${a.variable}animation)]`)}}const G=[{prop:"hover",name:"hover",variant:"[@media(hover:hover)_and_(pointer:fine)]:[&:hover:not(:disabled):not([aria-disabled=true]):not([data-disabled=true])]"},{prop:"focusVisible",name:"focus-visible",variant:"[&:focus-visible:not(:disabled):not([aria-disabled=true]):not([data-disabled=true])]"},{prop:"active",name:"active",variant:"[&:active:not(:disabled):not([aria-disabled=true]):not([data-disabled=true])]"},{prop:"disabledStyle",name:"disabled",variant:"[&:is(:disabled,[aria-disabled=true],[data-disabled=true]):is(:disabled,[aria-disabled=true],[data-disabled=true])]"}];function kt(o,t,i){const e=[o,...B.responsiveBreakpoints.map(n=>o[n]??{})],s=new Set;for(const n of G)for(const l of e)Object.keys(Z(l,n.prop)).forEach(b=>s.add(b)),n.prop==="hover"&&l.hover===null&&s.add("backgroundColor");if(s.size===0)return;for(const n of s){const l=X(n);for(const b of G)t.push(`[--ui-state-${b.name}-${l}:initial]`)}let a={};const f=new Map,d=new Map;e.forEach((n,l)=>{a={...a,...K(n)};const b=l===0?"":`${B.responsiveBreakpoints[l-1]}:`;for(const u of G){const h=f.get(u.name)??{},y=Z(n,u.prop),p=n[u.prop]===null?{}:{...h,...y},c=d.get(u.name)??new Set;Object.keys(y).forEach($=>c.add($)),u.prop==="hover"&&n.hover===null&&c.add("backgroundColor"),f.set(u.name,p),d.set(u.name,c);for(const $ of c){const v=X($),C=a[$]??xt($,l),W=`--ui-state-normal-${l}-${v}`;i[W]=String(C);const x=`--${u.name}-${l}-${v}`;i[x]=String(p[$]??C);const S=`--ui-state-value-${u.name}-${l}-${v}`;i[S]=p[$]===void 0?"initial":`var(${x})`;const R=`var(--ui-state-disabled-${v},var(--ui-state-active-${v},var(--ui-state-focus-visible-${v},var(--ui-state-hover-${v},var(${W})))))`;t.push(`${b}${u.variant}:[--ui-state-${u.name}-${v}:var(${S})]`,`${b}${u.variant}:[${v}:${R}]`)}}})}function Z(o,t){const i=o[t];return i?t!=="hover"&&"outlineWidth"in i&&i.outlineStyle===void 0?K({...i,outlineStyle:"solid"}):K(i):{}}function xt(o,t){const i=o==="color"?"inherit":"initial";if(o!=="background"&&o!=="backgroundColor"&&o!=="color")return i;const e=o==="color"?"color":"bg";let s=`var(--button-${e},${i})`;for(let a=0;a<t;a+=1)s=`var(--${B.responsiveBreakpoints[a]}-button-${e},${s})`;return s}function K(o){const t={...it(o)};if(t.borderWidth!==void 0){const i=String(t.borderWidth).split(/\s+(?![^()]*\))/),e=i[0],s=i[1]??e,a=i[2]??e,f=i[3]??s;Object.assign(t,{borderTopWidth:e,borderRightWidth:s,borderBottomWidth:a,borderLeftWidth:f}),delete t.borderWidth}if(t.borderRadius!==void 0){const[i,e=i]=String(t.borderRadius).split("/"),s=d=>{const n=d.trim().split(/\s+(?![^()]*\))/);return[n[0],n[1]??n[0],n[2]??n[0],n[3]??n[1]??n[0]]},a=s(i),f=s(e);["TopLeft","TopRight","BottomRight","BottomLeft"].forEach((d,n)=>{t[`border${d}Radius`]=`${a[n]} ${f[n]}`}),delete t.borderRadius}return t}function Q(o,t,i,{classPrefix:e="",variablePrefix:s="",isGroupParent:a=!1}={}){const f=it(o);for(const[d,n]of Object.entries(f??{})){if(n==null)continue;const l=String(n),b=St(d,l);if(b){t.push(`${e}${b}`);continue}const u=`${s}${X(d)}`,h=Rt(d,u);h&&(i[`--${u}`]=l,t.push(`${e}${h}`))}if(o.bgGroup!==void 0){const d=`${s}group-background`;i[`--${d}`]=q(o.bgGroup),t.push(`${e}group-hover:[background:var(--${d})]`),a&&t.push(`${e}hover:[background:var(--${d})]`)}}function St(o,t){if(o==="display")return t==="none"?"hidden":t;if(o==="position")return t==="inherit"?"[position:inherit]":t;if(o==="cursor")return`cursor-${t}`;if(o==="backgroundRepeat")return{"no-repeat":"bg-no-repeat",repeat:"bg-repeat",round:"bg-repeat-round",space:"bg-repeat-space","repeat-x":"bg-repeat-x","repeat-y":"bg-repeat-y"}[t];if(o==="backgroundSize")return{auto:"bg-auto",contain:"bg-contain",cover:"bg-cover"}[t];if(o==="backgroundPosition")return{bottom:"bg-bottom",center:"bg-center",left:"bg-left","left bottom":"bg-left-bottom","left top":"bg-left-top",right:"bg-right","right bottom":"bg-right-bottom","right top":"bg-right-top",top:"bg-top"}[t];if(o==="borderStyle")return t==="none"?"border-none":`border-${t}`;if(o==="outlineStyle")return t==="none"?"outline-none":`outline-${t}`;if(o==="listStylePosition")return`list-${t}`;if(o==="listStyleType")return`list-${t}`}function Rt(o,t){const i=`var(--${t})`;return{background:`[background:${i}]`,backgroundColor:`bg-[${i}]`,backgroundPosition:`bg-[position:${i}]`,backgroundSize:`bg-[length:${i}]`,aspectRatio:`[aspect-ratio:${i}]`,borderBottomLeftRadius:`rounded-bl-[${i}]`,borderBottomRightRadius:`rounded-br-[${i}]`,borderBottomWidth:`border-b-[length:${i}]`,borderColor:`border-[color:${i}]`,borderLeftWidth:`border-l-[length:${i}]`,borderRadius:`rounded-[${i}]`,borderRightWidth:`border-r-[length:${i}]`,borderTopLeftRadius:`rounded-tl-[${i}]`,borderTopRightRadius:`rounded-tr-[${i}]`,borderTopWidth:`border-t-[length:${i}]`,borderWidth:`border-[length:${i}]`,boxShadow:`[box-shadow:${i}]`,bottom:`bottom-[${i}]`,color:`[color:${i}]`,height:`h-[${i}]`,left:`left-[${i}]`,margin:`m-[${i}]`,marginBottom:`mb-[${i}]`,marginLeft:`ml-[${i}]`,marginRight:`mr-[${i}]`,marginTop:`mt-[${i}]`,maxHeight:`max-h-[${i}]`,maxWidth:`max-w-[${i}]`,minHeight:`min-h-[${i}]`,minWidth:`min-w-[${i}]`,outlineColor:`outline-[color:${i}]`,outlineOffset:`outline-offset-[${i}]`,outlineWidth:`outline-[length:${i}]`,opacity:`[opacity:${i}]`,overflowX:`[overflow-x:${i}]`,overflowY:`[overflow-y:${i}]`,padding:`p-[${i}]`,paddingBottom:`pb-[${i}]`,paddingLeft:`pl-[${i}]`,paddingRight:`pr-[${i}]`,paddingTop:`pt-[${i}]`,pointerEvents:`[pointer-events:${i}]`,right:`right-[${i}]`,top:`top-[${i}]`,transform:`[transform:${i}]`,transformOrigin:`[transform-origin:${i}]`,width:`w-[${i}]`,zIndex:`z-[${i}]`}[o]}function X(o){return o.replace(/[A-Z]/g,t=>`-${t.toLowerCase()}`)}function Ct(o,t){if(t!==void 0){if(Array.isArray(t)){o.padding=t.map(m).join(" ");return}if(typeof t!="object"){o.padding=m(t);return}"px"in t&&t.px!==void 0&&(o.paddingLeft=m(t.px),o.paddingRight=m(t.px)),"py"in t&&t.py!==void 0&&(o.paddingTop=m(t.py),o.paddingBottom=m(t.py)),"pt"in t&&t.pt!==void 0&&(o.paddingTop=m(t.pt)),"pb"in t&&t.pb!==void 0&&(o.paddingBottom=m(t.pb)),"pl"in t&&t.pl!==void 0&&(o.paddingLeft=m(t.pl)),"pr"in t&&t.pr!==void 0&&(o.paddingRight=m(t.pr))}}function Wt(o,t){if(t!==void 0){if(Array.isArray(t)){o.margin=t.map(m).join(" ");return}if(typeof t!="object"){o.margin=m(t);return}"mx"in t&&t.mx!==void 0&&(o.marginLeft=m(t.mx),o.marginRight=m(t.mx)),"my"in t&&t.my!==void 0&&(o.marginTop=m(t.my),o.marginBottom=m(t.my)),"mt"in t&&t.mt!==void 0&&(o.marginTop=m(t.mt)),"mb"in t&&t.mb!==void 0&&(o.marginBottom=m(t.mb)),"ml"in t&&t.ml!==void 0&&(o.marginLeft=m(t.ml)),"mr"in t&&t.mr!==void 0&&(o.marginRight=m(t.mr))}}function wt(o,t){t&&(t.radius!==void 0&&zt(o,t.radius),t.color!==void 0&&(o.borderColor=k(t.color)),t.width!==void 0&&Tt(o,t.width),t.style!==void 0&&(o.borderStyle=t.style))}function zt(o,t){if(Lt(t)){t.topLeft!==void 0&&(o.borderTopLeftRadius=T(t.topLeft)),t.topRight!==void 0&&(o.borderTopRightRadius=T(t.topRight)),t.bottomLeft!==void 0&&(o.borderBottomLeftRadius=T(t.bottomLeft)),t.bottomRight!==void 0&&(o.borderBottomRightRadius=T(t.bottomRight));return}o.borderRadius=T(t)}function Tt(o,t){if(Nt(t)){t.top!==void 0&&(o.borderTopWidth=L(t.top)),t.bottom!==void 0&&(o.borderBottomWidth=L(t.bottom)),t.left!==void 0&&(o.borderLeftWidth=L(t.left)),t.right!==void 0&&(o.borderRightWidth=L(t.right));return}o.borderWidth=L(t)}function Lt(o){return typeof o=="object"}function Nt(o){return typeof o=="object"}function T(o){return o.startsWith("--")?`var(${o})`:o}function L(o){return o.startsWith("--")?`var(${o})`:o}function It(o){return o==="hidden"?"none":o}function F(o){return typeof o=="number"?`${o}px`:o}function m(o){return typeof o=="number"?`${o}px`:o}function z(o){return typeof o=="number"?`${o}px`:o}function Pt(o){return typeof o=="number"?`${o}px`:o}function Vt(o){return{"no-repeat":"no-repeat",repeat:"repeat","repeat-round":"round","repeat-space":"space","repeat-x":"repeat-x","repeat-y":"repeat-y"}[o]}function jt(o){return o.replace("-"," ")}function q(o){return k(o)}function Mt(o,t){const i=q(t);if(Ot(t)){o.background=i;return}o.backgroundColor=i}function Ot(o){const t=o.trim().toLowerCase();return t.includes("url(")||t.includes("gradient(")||t.includes("image-set(")||t.includes("cross-fade(")||t.includes("element(")||t.includes("paint(")}function k(o){return o.startsWith("--")?`var(${o})`:o}function At(o){return[o.animation,...B.responsiveBreakpoints.map(t=>o[t]?.animation)].some(t=>t==="spin"||typeof t=="object"&&t!==null&&(Array.isArray(t.keyframes)||t.preset==="spin"))}function U(o,t){if(typeof o=="number")return Number.isFinite(o)?o:t;if(o===void 0)return t;const i=/^\s*(-?(?:\d+(?:\.\d*)?|\.\d+))(ms|s)\s*$/.exec(o);return i?Number(i[1])*(i[2]==="s"?1e3:1):t}function tt(o,t,i){const e=B.responsiveBreakpoints.map(n=>window.matchMedia("(min-width: "+B.responsiveBreakpointMinWidth[n]+")")),s=window.matchMedia("(prefers-reduced-motion: reduce)");let a,f="";const d=()=>{let n={};const l=[t.animation,...B.responsiveBreakpoints.map((p,c)=>e[c].matches?t[p]?.animation:void 0)];for(const p of l)if(p!==void 0)if(p==="none")n={};else{const c=p==="spin"?{preset:"spin",keyframes:null}:p;n={...n,...c,...c.easing!==void 0?{timingFunction:c.easing}:{},...c.iterations!==void 0?{iterationCount:c.iterations===1/0?"infinite":c.iterations}:{}}}const b=n.keyframes??(n.preset==="spin"?[{transform:"rotate(0deg)"},{transform:"rotate(360deg)"}]:void 0),u=i?.animation!==void 0||i?.animationName!==void 0||s.matches&&n.reducedMotion!=="keep",h=b?.map(p=>Object.fromEntries(Object.entries(p).filter(([c])=>c==="offset"||c==="easing"||c==="composite"||!(c in(i??{}))))),y=JSON.stringify([h,n,u]);f!==y&&(f=y,a?.cancel(),a=void 0,!(!h?.length||u||typeof o.animate!="function")&&(a=o.animate(h,{duration:Math.max(0,U(i?.animationDuration??n.duration,1e3)),delay:U(i?.animationDelay??n.delay,0),easing:i?.animationTimingFunction??n.timingFunction??"linear",iterations:i?.animationIterationCount!==void 0?i.animationIterationCount==="infinite"?1/0:Math.max(0,Number(i.animationIterationCount)):n.iterationCount==="infinite"||n.iterationCount===void 0?1/0:Math.max(0,n.iterationCount),direction:i?.animationDirection??n.direction??"normal",fill:i?.animationFillMode??n.fillMode??"none"}),(i?.animationPlayState??n.playState)==="paused"&&a.pause()))};for(const n of[...e,s])n.addEventListener("change",d);return d(),()=>{for(const n of[...e,s])n.removeEventListener("change",d);a?.cancel()}}function Et(o,t,i){return e=>{if(typeof o=="function"){const a=o(e);if(!e)return;const f=tt(e,t,i);return()=>{f(),typeof a=="function"?a():o(null)}}if(o&&(o.current=e),!e)return;const s=tt(e,t,i);return()=>{s(),o&&(o.current=null)}}}function Ft(o,t){const{as:i,children:e,className:s,background:a,backgroundColor:f,bg:d,bgSize:n,bgRepeat:l,bgGroup:b,groupParent:u,bgPosition:h,border:y,boxShadow:p,color:c,cursor:$,opacity:v,overflow:C,overflowX:W,overflowY:x,pointerEvents:S,animation:R,aspectRatio:N,transform:w,transformOrigin:I,p:g,m:P,outlineColor:V,outlineWidth:j,outlineOffset:M,outlineStyle:O,listStyle:A,display:r,position:nt,width:et,maxWidth:rt,minWidth:at,height:st,hover:dt,focusVisible:ut,active:ct,disabledStyle:ft,maxHeight:lt,minHeight:mt,md:Y,lg:_,xl:J,style:E,...bt}=o,pt=i??"div",D={hover:dt,focusVisible:ut,active:ct,disabledStyle:ft,background:a,backgroundColor:f,bg:d,bgSize:n,bgRepeat:l,bgGroup:b,groupParent:u,bgPosition:h,border:y,boxShadow:p,color:c,cursor:$,opacity:v,overflow:C,overflowX:W,overflowY:x,pointerEvents:S,animation:R,aspectRatio:N,transform:w,transformOrigin:I,p:g,m:P,outlineColor:V,outlineWidth:j,outlineOffset:M,outlineStyle:O,listStyle:A,display:r,position:nt,width:et,maxWidth:rt,minWidth:at,height:st,maxHeight:lt,minHeight:mt,md:Y,lg:_,xl:J},vt=JSON.stringify([R,Y?.animation,_?.animation,J?.animation,E]),gt=ot.useMemo(()=>Et(t,D,E),[t,vt]),H=yt(D),ht=H.style||E?{...H.style,...E}:void 0;return $t.jsx(pt,{className:B.cn(H.className,u&&"group",s),ref:At(D)?gt:t,style:ht,...bt,children:e})}const qt=ot.forwardRef(Ft);exports.Box=qt;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Bt=require("react/jsx-runtime"),nt=require("react"),y=require("./responsive-style.config-B2m9jVlX.cjs"),L=require("./responsive-style.utils-BdyoDkKg.cjs");function xt(o){return[o.animation,...y.responsiveBreakpoints.map(t=>o[t]?.animation)].some(t=>t==="spin"||typeof t=="object"&&t!==null&&(Array.isArray(t.keyframes)||t.preset==="spin"))}function U(o,t){if(typeof o=="number")return Number.isFinite(o)?o:t;if(o===void 0)return t;const i=/^\s*(-?(?:\d+(?:\.\d*)?|\.\d+))(ms|s)\s*$/.exec(o);return i?Number(i[1])*(i[2]==="s"?1e3:1):t}function tt(o,t,i){const n=y.responsiveBreakpoints.map(e=>window.matchMedia("(min-width: "+y.responsiveBreakpointMinWidth[e]+")")),s=window.matchMedia("(prefers-reduced-motion: reduce)");let r,d="";const u=()=>{let e={};const c=[t.animation,...y.responsiveBreakpoints.map((g,m)=>n[m].matches?t[g]?.animation:void 0)];for(const g of c)if(g!==void 0)if(g==="none")e={};else{const m=g==="spin"?{preset:"spin",keyframes:null}:g;e={...e,...m,...m.easing!==void 0?{timingFunction:m.easing}:{},...m.iterations!==void 0?{iterationCount:m.iterations===1/0?"infinite":m.iterations}:{}}}const b=e.keyframes??(e.preset==="spin"?[{transform:"rotate(0deg)"},{transform:"rotate(360deg)"}]:void 0),l=i?.animation!==void 0||i?.animationName!==void 0||s.matches&&e.reducedMotion!=="keep",f=b?.map(g=>Object.fromEntries(Object.entries(g).filter(([m])=>m==="offset"||m==="easing"||m==="composite"||!(m in(i??{}))))),p=JSON.stringify([f,e,l]);d!==p&&(d=p,r?.cancel(),r=void 0,!(!f?.length||l||typeof o.animate!="function")&&(r=o.animate(f,{duration:Math.max(0,U(i?.animationDuration??e.duration,1e3)),delay:U(i?.animationDelay??e.delay,0),easing:i?.animationTimingFunction??e.timingFunction??"linear",iterations:i?.animationIterationCount!==void 0?i.animationIterationCount==="infinite"?1/0:Math.max(0,Number(i.animationIterationCount)):e.iterationCount==="infinite"||e.iterationCount===void 0?1/0:Math.max(0,e.iterationCount),direction:i?.animationDirection??e.direction??"normal",fill:i?.animationFillMode??e.fillMode??"none"}),(i?.animationPlayState??e.playState)==="paused"&&r.pause()))};for(const e of[...n,s])e.addEventListener("change",u);return u(),()=>{for(const e of[...n,s])e.removeEventListener("change",u);r?.cancel()}}function St(o,t,i){return n=>{if(typeof o=="function"){const r=o(n);if(!n)return;const d=tt(n,t,i);return()=>{d(),typeof r=="function"?r():o(null)}}if(o&&(o.current=n),!n)return;const s=tt(n,t,i);return()=>{s(),o&&(o.current=null)}}}function Rt(o,t,i){if(o.scrollbar===void 0&&y.responsiveBreakpoints.every(r=>o[r]?.scrollbar===void 0))return;let n={};const s=[{value:o.scrollbar,prefix:"",variable:""},...y.responsiveBreakpoints.map(r=>({value:o[r]?.scrollbar,prefix:`${r}:`,variable:`${r}-`}))];t.push("lc-scrollbar");for(const[r,{value:d,prefix:u,variable:e}]of s.entries()){if(d!==void 0&&(n=d===null?{}:{...n,...Object.fromEntries(Object.entries(d).filter(([,f])=>f!==void 0))}),Object.entries(n).some(([f,p])=>f==="buttons"?p==="hidden":f!=="fallbackWidth"&&p!=null&&(typeof p!="number"||Number.isFinite(p)&&p>=0))){const f=y.responsiveBreakpoints[r],p=`${u}${f?`max-${f}:`:""}`;t.push(`${p}lc-scrollbar-custom`)}if(d===void 0)continue;const c=n.thumbColor,b=n.trackColor,l={size:_(n.size,"auto"),"thumb-color":c==null?"initial":L.normalizeCssTokenValue(c),"track-color":b==null?"initial":L.normalizeCssTokenValue(b),"thumb-radius":_(n.thumbRadius,"initial"),"track-radius":_(n.trackRadius,"initial"),buttons:n.buttons==="hidden"?"none":"initial",width:n.fallbackWidth??"auto",colors:c==null&&b==null?"auto":`${c==null?"CanvasText":L.normalizeCssTokenValue(c)} ${b==null?"Canvas":L.normalizeCssTokenValue(b)}`};for(const[f,p]of Object.entries(l))i[`--${e}scrollbar-${f}`]=p,t.push(`${u}[--lc-scrollbar-${f}:var(--${e}scrollbar-${f})]`)}}function _(o,t){return o==null?t:typeof o=="number"?Number.isFinite(o)&&o>=0?`${o}px`:t:L.normalizeCssTokenValue(o)}function et({background:o,backgroundColor:t,bg:i,bgSize:n,bgRepeat:s,bgPosition:r,border:d,boxShadow:u,color:e,cursor:c,opacity:b,overflow:l,overflowX:f,overflowY:p,pointerEvents:g,aspectRatio:m,transform:k,transformOrigin:h,p:R,m:C,outlineColor:x,outlineWidth:S,outlineOffset:W,outlineStyle:V,listStyle:z,display:N,position:$,width:P,maxWidth:I,minWidth:O,height:M,maxHeight:A,minHeight:E}){const a={};return i!==void 0?Dt(a,i):o!==void 0&&(a.background=D(o)),t!==void 0&&(a.backgroundColor=D(t)),n!==void 0&&(a.backgroundSize=Et(n)),s!==void 0&&(a.backgroundRepeat=Ft(s)),r!==void 0&&(a.backgroundPosition=qt(r)),Nt(a,d),u!==void 0&&(a.boxShadow=B(u)),e!==void 0&&(a.color=B(e)),c!==void 0&&(a.cursor=c),b!==void 0&&(a.opacity=typeof b=="number"?b:B(b)),l!==void 0&&(a.overflowX=l,a.overflowY=l),f!==void 0&&(a.overflowX=f),p!==void 0&&(a.overflowY=p),g!==void 0&&(a.pointerEvents=g),m!==void 0&&(a.aspectRatio=typeof m=="number"?String(m):B(m)),k!==void 0&&(a.transform=B(k)),h!==void 0&&(a.transformOrigin=B(h)),jt(a,R),Lt(a,C),x!==void 0&&(a.outlineColor=B(x)),S!==void 0&&(a.outlineWidth=S),W!==void 0&&(a.outlineOffset=W),V!==void 0&&(a.outlineStyle=V),z?.position!==void 0&&(a.listStylePosition=z.position),z?.type!==void 0&&(a.listStyleType=z.type),N!==void 0&&(a.display=At(N)),$?.type!==void 0&&(a.position=$.type),$?.top!==void 0&&(a.top=q($.top)),$?.left!==void 0&&(a.left=q($.left)),$?.right!==void 0&&(a.right=q($.right)),$?.bottom!==void 0&&(a.bottom=q($.bottom)),$?.zIndex!==void 0&&(a.zIndex=$.zIndex),P!==void 0&&(a.width=T(P)),I!==void 0&&(a.maxWidth=T(I)),O!==void 0&&(a.minWidth=T(O)),M!==void 0&&(a.height=T(M)),A!==void 0&&(a.maxHeight=T(A)),E!==void 0&&(a.minHeight=T(E)),Object.keys(a).length>0?a:void 0}function Ct(o){const t=[],i={},n=o.groupParent===!0;it(o,t,i,{isGroupParent:n});for(const s of y.responsiveBreakpoints){const r=o[s];r&&it(r,t,i,{classPrefix:`${s}:`,variablePrefix:`${s}-`,isGroupParent:n})}return Rt(o,t,i),Wt(o,t,i),zt(o,t,i),{className:t.join(" "),style:Object.keys(i).length>0?i:void 0}}function Wt(o,t,i){let n={};const s=[{value:o.animation,prefix:"",variable:""},...y.responsiveBreakpoints.map(r=>({value:o[r]?.animation,prefix:r+":",variable:r+"-"}))];for(const r of s)if(r.value!==void 0){if(r.value==="none")n={},i[`--${r.variable}animation`]="none";else{const d=r.value==="spin"?{preset:"spin",keyframes:null}:r.value;n={...n,...d,...d.easing!==void 0?{timingFunction:d.easing}:{},...d.iterations!==void 0?{iterationCount:d.iterations===1/0?"infinite":d.iterations}:{}};const u=n.keyframes||n.preset==="spin"?"none":n.preset??"none";i[`--${r.variable}animation`]=[u,typeof n.duration=="number"?n.duration+"ms":n.duration??"1s",n.timingFunction??"linear",typeof n.delay=="number"?n.delay+"ms":n.delay??"0ms",n.iterationCount??"infinite",n.direction??"normal",n.fillMode??"none",n.playState??"running"].join(" ")}t.push(`${r.prefix}[animation:var(--${r.variable}animation)]`)}}const K=[{prop:"hover",name:"hover",variant:"[@media(hover:hover)_and_(pointer:fine)]:[&:hover:not(:disabled):not([aria-disabled=true]):not([data-disabled=true])]"},{prop:"focusVisible",name:"focus-visible",variant:"[&:focus-visible:not(:disabled):not([aria-disabled=true]):not([data-disabled=true])]"},{prop:"active",name:"active",variant:"[&:active:not(:disabled):not([aria-disabled=true]):not([data-disabled=true])]"},{prop:"disabledStyle",name:"disabled",variant:"[&:is(:disabled,[aria-disabled=true],[data-disabled=true]):is(:disabled,[aria-disabled=true],[data-disabled=true])]"}];function zt(o,t,i){const n=[o,...y.responsiveBreakpoints.map(e=>o[e]??{})],s=new Set;for(const e of K)for(const c of n)Object.keys(ot(c,e.prop)).forEach(b=>s.add(b)),e.prop==="hover"&&c.hover===null&&s.add("backgroundColor");if(s.size===0)return;for(const e of s){const c=Y(e);for(const b of K)t.push(`[--ui-state-${b.name}-${c}:initial]`)}let r={};const d=new Map,u=new Map;n.forEach((e,c)=>{r={...r,...X(e)};const b=c===0?"":`${y.responsiveBreakpoints[c-1]}:`;for(const l of K){const f=d.get(l.name)??{},p=ot(e,l.prop),g=e[l.prop]===null?{}:{...f,...p},m=u.get(l.name)??new Set;Object.keys(p).forEach(k=>m.add(k)),l.prop==="hover"&&e.hover===null&&m.add("backgroundColor"),d.set(l.name,g),u.set(l.name,m);for(const k of m){const h=Y(k),R=r[k]??Tt(k,c),C=`--ui-state-normal-${c}-${h}`;i[C]=String(R);const x=`--${l.name}-${c}-${h}`;i[x]=String(g[k]??R);const S=`--ui-state-value-${l.name}-${c}-${h}`;i[S]=g[k]===void 0?"initial":`var(${x})`;const W=`var(--ui-state-disabled-${h},var(--ui-state-active-${h},var(--ui-state-focus-visible-${h},var(--ui-state-hover-${h},var(${C})))))`;t.push(`${b}${l.variant}:[--ui-state-${l.name}-${h}:var(${S})]`,`${b}${l.variant}:[${h}:${W}]`)}}})}function ot(o,t){const i=o[t];return i?t!=="hover"&&"outlineWidth"in i&&i.outlineStyle===void 0?X({...i,outlineStyle:"solid"}):X(i):{}}function Tt(o,t){const i=o==="color"?"inherit":"initial";if(o!=="background"&&o!=="backgroundColor"&&o!=="color")return i;const n=o==="color"?"color":"bg";let s=`var(--button-${n},${i})`;for(let r=0;r<t;r+=1)s=`var(--${y.responsiveBreakpoints[r]}-button-${n},${s})`;return s}function X(o){const t={...et(o)};if(t.borderWidth!==void 0){const i=String(t.borderWidth).split(/\s+(?![^()]*\))/),n=i[0],s=i[1]??n,r=i[2]??n,d=i[3]??s;Object.assign(t,{borderTopWidth:n,borderRightWidth:s,borderBottomWidth:r,borderLeftWidth:d}),delete t.borderWidth}if(t.borderRadius!==void 0){const[i,n=i]=String(t.borderRadius).split("/"),s=u=>{const e=u.trim().split(/\s+(?![^()]*\))/);return[e[0],e[1]??e[0],e[2]??e[0],e[3]??e[1]??e[0]]},r=s(i),d=s(n);["TopLeft","TopRight","BottomRight","BottomLeft"].forEach((u,e)=>{t[`border${u}Radius`]=`${r[e]} ${d[e]}`}),delete t.borderRadius}return t}function it(o,t,i,{classPrefix:n="",variablePrefix:s="",isGroupParent:r=!1}={}){const d=et(o);for(const[u,e]of Object.entries(d??{})){if(e==null)continue;const c=String(e),b=Vt(u,c);if(b){t.push(`${n}${b}`);continue}const l=`${s}${Y(u)}`,f=wt(u,l);f&&(i[`--${l}`]=c,t.push(`${n}${f}`))}if(o.bgGroup!==void 0){const u=`${s}group-background`;i[`--${u}`]=D(o.bgGroup),t.push(`${n}group-hover:[background:var(--${u})]`),r&&t.push(`${n}hover:[background:var(--${u})]`)}}function Vt(o,t){if(o==="display")return t==="none"?"hidden":t;if(o==="position")return t==="inherit"?"[position:inherit]":t;if(o==="cursor")return`cursor-${t}`;if(o==="backgroundRepeat")return{"no-repeat":"bg-no-repeat",repeat:"bg-repeat",round:"bg-repeat-round",space:"bg-repeat-space","repeat-x":"bg-repeat-x","repeat-y":"bg-repeat-y"}[t];if(o==="backgroundSize")return{auto:"bg-auto",contain:"bg-contain",cover:"bg-cover"}[t];if(o==="backgroundPosition")return{bottom:"bg-bottom",center:"bg-center",left:"bg-left","left bottom":"bg-left-bottom","left top":"bg-left-top",right:"bg-right","right bottom":"bg-right-bottom","right top":"bg-right-top",top:"bg-top"}[t];if(o==="borderStyle")return t==="none"?"border-none":`border-${t}`;if(o==="outlineStyle")return t==="none"?"outline-none":`outline-${t}`;if(o==="listStylePosition")return`list-${t}`;if(o==="listStyleType")return`list-${t}`}function wt(o,t){const i=`var(--${t})`;return{background:`[background:${i}]`,backgroundColor:`bg-[${i}]`,backgroundPosition:`bg-[position:${i}]`,backgroundSize:`bg-[length:${i}]`,aspectRatio:`[aspect-ratio:${i}]`,borderBottomLeftRadius:`rounded-bl-[${i}]`,borderBottomRightRadius:`rounded-br-[${i}]`,borderBottomWidth:`border-b-[length:${i}]`,borderColor:`border-[color:${i}]`,borderLeftWidth:`border-l-[length:${i}]`,borderRadius:`rounded-[${i}]`,borderRightWidth:`border-r-[length:${i}]`,borderTopLeftRadius:`rounded-tl-[${i}]`,borderTopRightRadius:`rounded-tr-[${i}]`,borderTopWidth:`border-t-[length:${i}]`,borderWidth:`border-[length:${i}]`,boxShadow:`[box-shadow:${i}]`,bottom:`bottom-[${i}]`,color:`[color:${i}]`,height:`h-[${i}]`,left:`left-[${i}]`,margin:`m-[${i}]`,marginBottom:`mb-[${i}]`,marginLeft:`ml-[${i}]`,marginRight:`mr-[${i}]`,marginTop:`mt-[${i}]`,maxHeight:`max-h-[${i}]`,maxWidth:`max-w-[${i}]`,minHeight:`min-h-[${i}]`,minWidth:`min-w-[${i}]`,outlineColor:`outline-[color:${i}]`,outlineOffset:`outline-offset-[${i}]`,outlineWidth:`outline-[length:${i}]`,opacity:`[opacity:${i}]`,overflowX:`[overflow-x:${i}]`,overflowY:`[overflow-y:${i}]`,padding:`p-[${i}]`,paddingBottom:`pb-[${i}]`,paddingLeft:`pl-[${i}]`,paddingRight:`pr-[${i}]`,paddingTop:`pt-[${i}]`,pointerEvents:`[pointer-events:${i}]`,right:`right-[${i}]`,top:`top-[${i}]`,transform:`[transform:${i}]`,transformOrigin:`[transform-origin:${i}]`,width:`w-[${i}]`,zIndex:`z-[${i}]`}[o]}function Y(o){return o.replace(/[A-Z]/g,t=>`-${t.toLowerCase()}`)}function jt(o,t){if(t!==void 0){if(Array.isArray(t)){o.padding=t.map(v).join(" ");return}if(typeof t!="object"){o.padding=v(t);return}"px"in t&&t.px!==void 0&&(o.paddingLeft=v(t.px),o.paddingRight=v(t.px)),"py"in t&&t.py!==void 0&&(o.paddingTop=v(t.py),o.paddingBottom=v(t.py)),"pt"in t&&t.pt!==void 0&&(o.paddingTop=v(t.pt)),"pb"in t&&t.pb!==void 0&&(o.paddingBottom=v(t.pb)),"pl"in t&&t.pl!==void 0&&(o.paddingLeft=v(t.pl)),"pr"in t&&t.pr!==void 0&&(o.paddingRight=v(t.pr))}}function Lt(o,t){if(t!==void 0){if(Array.isArray(t)){o.margin=t.map(v).join(" ");return}if(typeof t!="object"){o.margin=v(t);return}"mx"in t&&t.mx!==void 0&&(o.marginLeft=v(t.mx),o.marginRight=v(t.mx)),"my"in t&&t.my!==void 0&&(o.marginTop=v(t.my),o.marginBottom=v(t.my)),"mt"in t&&t.mt!==void 0&&(o.marginTop=v(t.mt)),"mb"in t&&t.mb!==void 0&&(o.marginBottom=v(t.mb)),"ml"in t&&t.ml!==void 0&&(o.marginLeft=v(t.ml)),"mr"in t&&t.mr!==void 0&&(o.marginRight=v(t.mr))}}function Nt(o,t){t&&(t.radius!==void 0&&Pt(o,t.radius),t.color!==void 0&&(o.borderColor=B(t.color)),t.width!==void 0&&It(o,t.width),t.style!==void 0&&(o.borderStyle=t.style))}function Pt(o,t){if(Ot(t)){t.topLeft!==void 0&&(o.borderTopLeftRadius=w(t.topLeft)),t.topRight!==void 0&&(o.borderTopRightRadius=w(t.topRight)),t.bottomLeft!==void 0&&(o.borderBottomLeftRadius=w(t.bottomLeft)),t.bottomRight!==void 0&&(o.borderBottomRightRadius=w(t.bottomRight));return}o.borderRadius=w(t)}function It(o,t){if(Mt(t)){t.top!==void 0&&(o.borderTopWidth=j(t.top)),t.bottom!==void 0&&(o.borderBottomWidth=j(t.bottom)),t.left!==void 0&&(o.borderLeftWidth=j(t.left)),t.right!==void 0&&(o.borderRightWidth=j(t.right));return}o.borderWidth=j(t)}function Ot(o){return typeof o=="object"}function Mt(o){return typeof o=="object"}function w(o){return o.startsWith("--")?`var(${o})`:o}function j(o){return o.startsWith("--")?`var(${o})`:o}function At(o){return o==="hidden"?"none":o}function q(o){return typeof o=="number"?`${o}px`:o}function v(o){return typeof o=="number"?`${o}px`:o}function T(o){return typeof o=="number"?`${o}px`:o}function Et(o){return typeof o=="number"?`${o}px`:o}function Ft(o){return{"no-repeat":"no-repeat",repeat:"repeat","repeat-round":"round","repeat-space":"space","repeat-x":"repeat-x","repeat-y":"repeat-y"}[o]}function qt(o){return o.replace("-"," ")}function D(o){return B(o)}function Dt(o,t){const i=D(t);if(Ht(t)){o.background=i;return}o.backgroundColor=i}function Ht(o){const t=o.trim().toLowerCase();return t.includes("url(")||t.includes("gradient(")||t.includes("image-set(")||t.includes("cross-fade(")||t.includes("element(")||t.includes("paint(")}function B(o){return o.startsWith("--")?`var(${o})`:o}function Gt(o,t){const{as:i,children:n,className:s,background:r,backgroundColor:d,bg:u,bgSize:e,bgRepeat:c,bgGroup:b,groupParent:l,bgPosition:f,border:p,boxShadow:g,color:m,cursor:k,opacity:h,overflow:R,overflowX:C,overflowY:x,scrollbar:S,pointerEvents:W,animation:V,aspectRatio:z,transform:N,transformOrigin:$,p:P,m:I,outlineColor:O,outlineWidth:M,outlineOffset:A,outlineStyle:E,listStyle:a,display:rt,position:at,width:st,maxWidth:dt,minWidth:ut,height:ct,hover:lt,focusVisible:ft,active:mt,disabledStyle:bt,maxHeight:pt,minHeight:vt,md:J,lg:Z,xl:Q,style:F,...gt}=o,ht=i??"div",H={hover:lt,focusVisible:ft,active:mt,disabledStyle:bt,background:r,backgroundColor:d,bg:u,bgSize:e,bgRepeat:c,bgGroup:b,groupParent:l,bgPosition:f,border:p,boxShadow:g,color:m,cursor:k,opacity:h,overflow:R,overflowX:C,overflowY:x,scrollbar:S,pointerEvents:W,animation:V,aspectRatio:z,transform:N,transformOrigin:$,p:P,m:I,outlineColor:O,outlineWidth:M,outlineOffset:A,outlineStyle:E,listStyle:a,display:rt,position:at,width:st,maxWidth:dt,minWidth:ut,height:ct,maxHeight:pt,minHeight:vt,md:J,lg:Z,xl:Q},$t=JSON.stringify([V,J?.animation,Z?.animation,Q?.animation,F]),yt=nt.useMemo(()=>St(t,H,F),[t,$t]),G=Ct(H),kt=G.style||F?{...G.style,...F}:void 0;return Bt.jsx(ht,{className:y.cn(G.className,l&&"group",s),ref:xt(H)?yt:t,style:kt,...gt,children:n})}const _t=nt.forwardRef(Gt);exports.Box=_t;