@shmidko61/lc-ui-kit 0.11.0 → 0.12.0

package/README.md

@@ -2,6 +2,30 @@
 
 Переиспользуемый React UI kit для LC-приложений.
 
+## Проверка перед релизом
+
+Из каталога `apps`:
+
+```bash
+corepack pnpm --filter @shmidko61/lc-ui-kit verify:package
+```
+
+Команда последовательно проверяет типы исходников, ESLint (включая Storybook),
+форматирование, production-сборку, публичные типы с `skipLibCheck: false`,
+саму защиту релиза на негативных примерах, ESM/CJS exports, все `.d.ts`,
+production safelist, hover, состав npm tarball и сборку Storybook.
+
+`prepublishOnly` запускает тот же `verify:package`. Если любая стадия падает,
+проверка завершается с ненулевым кодом и публикация не продолжается.
+`pack:check` использует локальный `npm pack --dry-run --ignore-scripts`:
+авторизация в registry не требуется, lifecycle не запускается повторно.
+
+Отдельные проверки доступны как `typecheck`, `lint`, `format:check`,
+`typecheck:package`, `test:checks`, `test:package`, `test:hover`, `pack:check`
+`test:states` и `storybook:build`. Проверки собранного пакета запускаются после `build`.
+ESLint использует отдельный `tsconfig.eslint.json`; конфигурация source
+typecheck и публичные props компонентов не меняются.
+
 ## Установка
 
 ```bash
@@ -69,3 +93,57 @@ breakpoints могут включить hover заново. Для сброса
 `hover={{ bg: color }}`. При использовании нового background в base-hover
 он наследуется на последующие breakpoints поверх старого `hoverBg`.
 Примеры доступны в Storybook: `UI Kit/Box/Hover`.
+
+## Focus, active и disabled
+
+Box и компоненты на его основе принимают `focusVisible`, `active` и
+`disabledStyle`. Для них доступны те же визуальные свойства, что для hover,
+а также `outlineColor`, `outlineWidth`, `outlineOffset`, `outlineStyle`.
+
+```tsx
+<Button
+  hover={{ bg: '#273B7D' }}
+  focusVisible={{
+    outlineColor: '#F4C542',
+    outlineWidth: '2px',
+    outlineOffset: '4px',
+  }}
+  active={{ bg: '#10183B', transform: 'scale(.98)' }}
+  md={{ focusVisible: { outlineColor: '#89A4D9' } }}
+  lg={{ active: null }}
+/>
+
+<Button
+  disabled
+  disabledStyle={{ bg: '#10183B', color: '#89A4D9', opacity: 0.8 }}
+>
+  Недоступно
+</Button>
+```
+
+`disabled` остаётся прежним boolean-пропом. `disabledStyle` только оформляет
+`:disabled`, `aria-disabled="true"` и `data-disabled="true"`; этот prop сам
+по себе не запрещает клики и не меняет фокусируемость. В частности, для
+произвольного Box с aria-disabled управление поведением остаётся у приложения.
+
+Свойства наследуются независимо в каждом состоянии: base → md → lg → xl.
+`null` очищает накопленные overrides, после чего работают нижележащие состояния
+или обычные стили текущего диапазона. Следующий breakpoint может включить
+состояние заново. Для disabled сброс возвращает обычное оформление, поэтому
+нужную disabled-прозрачность после reset можно явно задать на следующем breakpoint.
+
+При совпадении CSS-свойств приоритет такой:
+`disabledStyle → active → focusVisible → hover → обычные props`.
+Например, focus outline не отключает hover background. Для disabled-элементов
+интерактивные состояния исключены. Hover ограничен устройствами с точным
+указателем; focus-visible и active не ограничиваются pointer media query,
+поэтому работают и при клавиатурной навигации.
+
+Если задан `outlineWidth`, используется `outlineStyle: 'solid'`, кроме случая,
+когда стиль передан явно (включая `'none'`). Существующий focus ring Button
+остаётся доступен. Явный `style` имеет приоритет над всеми состояниями.
+Старые `hoverBg` и `activeBg` продолжают работать; новые background overrides
+соответствующего состояния имеют приоритет.
+
+Тип `StateStyleProps` экспортирован из корня пакета и `/box`.
+25 примеров доступны в Storybook: `UI Kit/Box/Interaction states`.

package/dist/box/box.d.ts

@@ -9,4 +9,4 @@ type BoxComponentType = {
 };
 export declare const Box: BoxComponentType;
 export type { BorderRadiusItem, BorderRadiusKeys, BorderRadiusSides, BorderWidthItem, BorderWidthSides, PositionValue, 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';
-export type { BoxAs, BoxBackgroundValue, BoxBreakpointProps, BoxComponentProps, BoxProps, HoverStyleProps, } from './box.types';
+export type { BoxAs, BoxBackgroundValue, BoxBreakpointProps, BoxComponentProps, BoxProps, HoverStyleProps, StateStyleProps, } from './box.types';

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

@@ -42,6 +42,20 @@ export type BoxBreakpointProps = BoxStyleProps & BoxOwnStyleProps & {
      * hover; следующие breakpoint-объекты могут включить его заново.
      */
     hover?: HoverStyleProps | null;
+    /**
+     * Оформление :focus-visible для клавиатурной навигации. Наследуется по
+     * md/lg/xl; null сбрасывает накопленные overrides. outlineWidth включает
+     * solid outline, если outlineStyle явно не передан.
+     */
+    focusVisible?: StateStyleProps | null;
+    /** Оформление :active при нажатии. Наследуется по md/lg/xl; null сбрасывает overrides. */
+    active?: StateStyleProps | null;
+    /**
+     * Оформление :disabled, aria-disabled="true" или data-disabled="true".
+     * Не отключает элемент: для Button используйте обычный boolean disabled.
+     * Наследуется по md/lg/xl; null сбрасывает визуальные overrides.
+     */
+    disabledStyle?: StateStyleProps | null;
 };
 /**
  * Визуальные hover-свойства без размеров и вложенных breakpoints.
@@ -49,6 +63,12 @@ export type BoxBreakpointProps = BoxStyleProps & BoxOwnStyleProps & {
  * Явный element-level `style` приоритетнее hover, disabled не реагирует.
  */
 export type HoverStyleProps = Pick<BoxStyleProps & BoxOwnStyleProps, 'bg' | 'background' | 'backgroundColor' | 'color' | 'border' | 'boxShadow' | 'opacity' | 'transform'>;
+/**
+ * Визуальные свойства focusVisible/active/disabledStyle без layout и вложенных
+ * breakpoints. Явный element-level style приоритетнее. Для совпадающих
+ * свойств порядок: disabledStyle → active → focusVisible → hover.
+ */
+export type StateStyleProps = HoverStyleProps & Pick<BoxStyleProps, 'outlineColor' | 'outlineWidth' | 'outlineOffset' | 'outlineStyle'>;
 /**
  * Responsive overrides Box.
  */

package/dist/box.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const so=require("react/jsx-runtime"),fo=require("react"),x=require("./responsive-style.config-B2m9jVlX.cjs");function D({background:t,backgroundColor:o,bg:i,bgSize:d,bgRepeat:a,bgPosition:f,border:c,boxShadow:n,color:r,cursor:g,opacity:u,overflow:b,overflowX:p,overflowY:v,pointerEvents:B,aspectRatio:m,transform:y,transformOrigin:h,p:E,m:G,outlineColor:z,outlineWidth:C,outlineOffset:T,outlineStyle:L,listStyle:k,display:P,position:l,width:w,maxWidth:N,minWidth:V,height:j,maxHeight:I,minHeight:O}){const e={};return i!==void 0?So(e,i):t!==void 0&&(e.background=A(t)),o!==void 0&&(e.backgroundColor=A(o)),d!==void 0&&(e.backgroundSize=ko(d)),a!==void 0&&(e.backgroundRepeat=Ro(a)),f!==void 0&&(e.backgroundPosition=xo(f)),go(e,c),n!==void 0&&(e.boxShadow=$(n)),r!==void 0&&(e.color=$(r)),g!==void 0&&(e.cursor=g),u!==void 0&&(e.opacity=typeof u=="number"?u:$(u)),b!==void 0&&(e.overflowX=b,e.overflowY=b),p!==void 0&&(e.overflowX=p),v!==void 0&&(e.overflowY=v),B!==void 0&&(e.pointerEvents=B),m!==void 0&&(e.aspectRatio=typeof m=="number"?String(m):$(m)),y!==void 0&&(e.transform=$(y)),h!==void 0&&(e.transformOrigin=$(h)),po(e,E),mo(e,G),z!==void 0&&(e.outlineColor=$(z)),C!==void 0&&(e.outlineWidth=C),T!==void 0&&(e.outlineOffset=T),L!==void 0&&(e.outlineStyle=L),k?.position!==void 0&&(e.listStylePosition=k.position),k?.type!==void 0&&(e.listStyleType=k.type),P!==void 0&&(e.display=yo(P)),l?.type!==void 0&&(e.position=l.type),l?.top!==void 0&&(e.top=H(l.top)),l?.left!==void 0&&(e.left=H(l.left)),l?.right!==void 0&&(e.right=H(l.right)),l?.bottom!==void 0&&(e.bottom=H(l.bottom)),l?.zIndex!==void 0&&(e.zIndex=l.zIndex),w!==void 0&&(e.width=R(w)),N!==void 0&&(e.maxWidth=R(N)),V!==void 0&&(e.minWidth=R(V)),j!==void 0&&(e.height=R(j)),I!==void 0&&(e.maxHeight=R(I)),O!==void 0&&(e.minHeight=R(O)),Object.keys(e).length>0?e:void 0}function uo(t){const o=[],i={},d=t.groupParent===!0;_(t,o,i,"","",d);for(const a of x.responsiveBreakpoints){const f=t[a];f&&_(f,o,i,`${a}:`,`${a}-`,d)}return co(t,o,i),{className:o.join(" "),style:Object.keys(i).length>0?i:void 0}}function co(t,o,i){const d=[t,...x.responsiveBreakpoints.map(n=>t[n]??{})],a=new Set;for(const n of d)n.hover===null&&a.add("backgroundColor"),Object.keys(X(n.hover??{})).forEach(r=>a.add(r));if(a.size===0)return;let f={},c={};d.forEach((n,r)=>{f={...f,...X(n)},n.hover===null?c={}:c={...c,...X(n.hover??{})};const g=r===0?"":`${x.responsiveBreakpoints[r-1]}:`;for(const u of a){const b=M(u),p=`--hover-${r}-${b}`,v=u==="color"?"inherit":"initial";let B=`var(--button-bg,${v})`,m=`var(--button-color,${v})`;for(let h=0;h<r;h+=1)B=`var(--${x.responsiveBreakpoints[h]}-button-bg,${B})`,m=`var(--${x.responsiveBreakpoints[h]}-button-color,${m})`;const y=u==="background"||u==="backgroundColor"?B:u==="color"?m:v;i[p]=String(c[u]??f[u]??y),o.push(`${g}[@media(hover:hover)_and_(pointer:fine)]:[&:hover:not(:disabled):not([aria-disabled=true]):not([data-disabled=true])]:[${b}:var(${p})]`)}})}function X(t){const o={...D(t)};if(o.borderWidth!==void 0){const i=String(o.borderWidth).split(/\s+(?![^()]*\))/),d=i[0],a=i[1]??d,f=i[2]??d,c=i[3]??a;Object.assign(o,{borderTopWidth:d,borderRightWidth:a,borderBottomWidth:f,borderLeftWidth:c}),delete o.borderWidth}if(o.borderRadius!==void 0){const[i,d=i]=String(o.borderRadius).split("/"),a=n=>{const r=n.trim().split(/\s+(?![^()]*\))/);return[r[0],r[1]??r[0],r[2]??r[0],r[3]??r[1]??r[0]]},f=a(i),c=a(d);["TopLeft","TopRight","BottomRight","BottomLeft"].forEach((n,r)=>{o[`border${n}Radius`]=`${f[r]} ${c[r]}`}),delete o.borderRadius}return o}function _(t,o,i,d="",a="",f=!1){const c=D(t);for(const[n,r]of Object.entries(c??{})){if(r==null)continue;const g=String(r),u=lo(n,g);if(u){o.push(`${d}${u}`);continue}const b=`${a}${M(n)}`,p=bo(n,b);p&&(i[`--${b}`]=g,o.push(`${d}${p}`))}if(t.bgGroup!==void 0){const n=`${a}group-background`;i[`--${n}`]=A(t.bgGroup),o.push(`${d}group-hover:[background:var(--${n})]`),f&&o.push(`${d}hover:[background:var(--${n})]`)}}function lo(t,o){if(t==="display")return o==="none"?"hidden":o;if(t==="position")return o==="inherit"?"[position:inherit]":o;if(t==="cursor")return`cursor-${o}`;if(t==="backgroundRepeat")return{"no-repeat":"bg-no-repeat",repeat:"bg-repeat",round:"bg-repeat-round",space:"bg-repeat-space","repeat-x":"bg-repeat-x","repeat-y":"bg-repeat-y"}[o];if(t==="backgroundSize")return{auto:"bg-auto",contain:"bg-contain",cover:"bg-cover"}[o];if(t==="backgroundPosition")return{bottom:"bg-bottom",center:"bg-center",left:"bg-left","left bottom":"bg-left-bottom","left top":"bg-left-top",right:"bg-right","right bottom":"bg-right-bottom","right top":"bg-right-top",top:"bg-top"}[o];if(t==="borderStyle")return o==="none"?"border-none":`border-${o}`;if(t==="outlineStyle")return o==="none"?"outline-none":`outline-${o}`;if(t==="listStylePosition")return`list-${o}`;if(t==="listStyleType")return`list-${o}`}function bo(t,o){const i=`var(--${o})`;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}]`}[t]}function M(t){return t.replace(/[A-Z]/g,o=>`-${o.toLowerCase()}`)}function po(t,o){if(o!==void 0){if(Array.isArray(o)){t.padding=o.map(s).join(" ");return}if(typeof o!="object"){t.padding=s(o);return}"px"in o&&o.px!==void 0&&(t.paddingLeft=s(o.px),t.paddingRight=s(o.px)),"py"in o&&o.py!==void 0&&(t.paddingTop=s(o.py),t.paddingBottom=s(o.py)),"pt"in o&&o.pt!==void 0&&(t.paddingTop=s(o.pt)),"pb"in o&&o.pb!==void 0&&(t.paddingBottom=s(o.pb)),"pl"in o&&o.pl!==void 0&&(t.paddingLeft=s(o.pl)),"pr"in o&&o.pr!==void 0&&(t.paddingRight=s(o.pr))}}function mo(t,o){if(o!==void 0){if(Array.isArray(o)){t.margin=o.map(s).join(" ");return}if(typeof o!="object"){t.margin=s(o);return}"mx"in o&&o.mx!==void 0&&(t.marginLeft=s(o.mx),t.marginRight=s(o.mx)),"my"in o&&o.my!==void 0&&(t.marginTop=s(o.my),t.marginBottom=s(o.my)),"mt"in o&&o.mt!==void 0&&(t.marginTop=s(o.mt)),"mb"in o&&o.mb!==void 0&&(t.marginBottom=s(o.mb)),"ml"in o&&o.ml!==void 0&&(t.marginLeft=s(o.ml)),"mr"in o&&o.mr!==void 0&&(t.marginRight=s(o.mr))}}function go(t,o){o&&(o.radius!==void 0&&ho(t,o.radius),o.color!==void 0&&(t.borderColor=$(o.color)),o.width!==void 0&&$o(t,o.width),o.style!==void 0&&(t.borderStyle=o.style))}function ho(t,o){if(vo(o)){o.topLeft!==void 0&&(t.borderTopLeftRadius=S(o.topLeft)),o.topRight!==void 0&&(t.borderTopRightRadius=S(o.topRight)),o.bottomLeft!==void 0&&(t.borderBottomLeftRadius=S(o.bottomLeft)),o.bottomRight!==void 0&&(t.borderBottomRightRadius=S(o.bottomRight));return}t.borderRadius=S(o)}function $o(t,o){if(Bo(o)){o.top!==void 0&&(t.borderTopWidth=W(o.top)),o.bottom!==void 0&&(t.borderBottomWidth=W(o.bottom)),o.left!==void 0&&(t.borderLeftWidth=W(o.left)),o.right!==void 0&&(t.borderRightWidth=W(o.right));return}t.borderWidth=W(o)}function vo(t){return typeof t=="object"}function Bo(t){return typeof t=="object"}function S(t){return t.startsWith("--")?`var(${t})`:t}function W(t){return t.startsWith("--")?`var(${t})`:t}function yo(t){return t==="hidden"?"none":t}function H(t){return typeof t=="number"?`${t}px`:t}function s(t){return typeof t=="number"?`${t}px`:t}function R(t){return typeof t=="number"?`${t}px`:t}function ko(t){return typeof t=="number"?`${t}px`:t}function Ro(t){return{"no-repeat":"no-repeat",repeat:"repeat","repeat-round":"round","repeat-space":"space","repeat-x":"repeat-x","repeat-y":"repeat-y"}[t]}function xo(t){return t.replace("-"," ")}function A(t){return $(t)}function So(t,o){const i=A(o);if(Wo(o)){t.background=i;return}t.backgroundColor=i}function Wo(t){const o=t.trim().toLowerCase();return o.includes("url(")||o.includes("gradient(")||o.includes("image-set(")||o.includes("cross-fade(")||o.includes("element(")||o.includes("paint(")}function $(t){return t.startsWith("--")?`var(${t})`:t}function zo(t,o){const{as:i,children:d,className:a,background:f,backgroundColor:c,bg:n,bgSize:r,bgRepeat:g,bgGroup:u,groupParent:b,bgPosition:p,border:v,boxShadow:B,color:m,cursor:y,opacity:h,overflow:E,overflowX:G,overflowY:z,pointerEvents:C,aspectRatio:T,transform:L,transformOrigin:k,p:P,m:l,outlineColor:w,outlineWidth:N,outlineOffset:V,outlineStyle:j,listStyle:I,display:O,position:e,width:F,maxWidth:K,minWidth:Z,height:J,hover:Q,maxHeight:U,minHeight:oo,md:to,lg:io,xl:eo,style:Y,...ro}=t,no=i??"div",q=uo({hover:Q,background:f,backgroundColor:c,bg:n,bgSize:r,bgRepeat:g,bgGroup:u,groupParent:b,bgPosition:p,border:v,boxShadow:B,color:m,cursor:y,opacity:h,overflow:E,overflowX:G,overflowY:z,pointerEvents:C,aspectRatio:T,transform:L,transformOrigin:k,p:P,m:l,outlineColor:w,outlineWidth:N,outlineOffset:V,outlineStyle:j,listStyle:I,display:O,position:e,width:F,maxWidth:K,minWidth:Z,height:J,maxHeight:U,minHeight:oo,md:to,lg:io,xl:eo}),ao=q.style||Y?{...q.style,...Y}:void 0;return so.jsx(no,{className:x.cn(q.className,b&&"group",a),ref:o,style:ao,...ro,children:d})}const Co=fo.forwardRef(zo);exports.Box=Co;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const bo=require("react/jsx-runtime"),po=require("react"),L=require("./responsive-style.config-B2m9jVlX.cjs");function K({background:t,backgroundColor:o,bg:e,bgSize:a,bgRepeat:n,bgPosition:s,border:m,boxShadow:c,color:r,cursor:u,opacity:l,overflow:d,overflowX:h,overflowY:y,pointerEvents:B,aspectRatio:v,transform:g,transformOrigin:b,p:S,m:x,outlineColor:k,outlineWidth:R,outlineOffset:W,outlineStyle:P,listStyle:C,display:w,position:p,width:N,maxWidth:j,minWidth:I,height:O,maxHeight:E,minHeight:A}){const i={};return e!==void 0?Lo(i,e):t!==void 0&&(i.background=G(t)),o!==void 0&&(i.backgroundColor=G(o)),a!==void 0&&(i.backgroundSize=zo(a)),n!==void 0&&(i.backgroundRepeat=To(n)),s!==void 0&&(i.backgroundPosition=Vo(s)),ko(i,m),c!==void 0&&(i.boxShadow=$(c)),r!==void 0&&(i.color=$(r)),u!==void 0&&(i.cursor=u),l!==void 0&&(i.opacity=typeof l=="number"?l:$(l)),d!==void 0&&(i.overflowX=d,i.overflowY=d),h!==void 0&&(i.overflowX=h),y!==void 0&&(i.overflowY=y),B!==void 0&&(i.pointerEvents=B),v!==void 0&&(i.aspectRatio=typeof v=="number"?String(v):$(v)),g!==void 0&&(i.transform=$(g)),b!==void 0&&(i.transformOrigin=$(b)),Bo(i,S),yo(i,x),k!==void 0&&(i.outlineColor=$(k)),R!==void 0&&(i.outlineWidth=R),W!==void 0&&(i.outlineOffset=W),P!==void 0&&(i.outlineStyle=P),C?.position!==void 0&&(i.listStylePosition=C.position),C?.type!==void 0&&(i.listStyleType=C.type),w!==void 0&&(i.display=Co(w)),p?.type!==void 0&&(i.position=p.type),p?.top!==void 0&&(i.top=H(p.top)),p?.left!==void 0&&(i.left=H(p.left)),p?.right!==void 0&&(i.right=H(p.right)),p?.bottom!==void 0&&(i.bottom=H(p.bottom)),p?.zIndex!==void 0&&(i.zIndex=p.zIndex),N!==void 0&&(i.width=z(N)),j!==void 0&&(i.maxWidth=z(j)),I!==void 0&&(i.minWidth=z(I)),O!==void 0&&(i.height=z(O)),E!==void 0&&(i.maxHeight=z(E)),A!==void 0&&(i.minHeight=z(A)),Object.keys(i).length>0?i:void 0}function mo(t){const o=[],e={},a=t.groupParent===!0;F(t,o,e,{isGroupParent:a});for(const n of L.responsiveBreakpoints){const s=t[n];s&&F(s,o,e,{classPrefix:`${n}:`,variablePrefix:`${n}-`,isGroupParent:a})}return go(t,o,e),{className:o.join(" "),style:Object.keys(e).length>0?e:void 0}}const q=[{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 go(t,o,e){const a=[t,...L.responsiveBreakpoints.map(r=>t[r]??{})],n=new Set;for(const r of q)for(const u of a)Object.keys(D(u,r.prop)).forEach(l=>n.add(l)),r.prop==="hover"&&u.hover===null&&n.add("backgroundColor");if(n.size===0)return;for(const r of n){const u=Y(r);for(const l of q)o.push(`[--ui-state-${l.name}-${u}:initial]`)}let s={};const m=new Map,c=new Map;a.forEach((r,u)=>{s={...s,...X(r)};const l=u===0?"":`${L.responsiveBreakpoints[u-1]}:`;for(const d of q){const h=m.get(d.name)??{},y=D(r,d.prop),B=r[d.prop]===null?{}:{...h,...y},v=c.get(d.name)??new Set;Object.keys(y).forEach(g=>v.add(g)),d.prop==="hover"&&r.hover===null&&v.add("backgroundColor"),m.set(d.name,B),c.set(d.name,v);for(const g of v){const b=Y(g),S=s[g]??vo(g,u),x=`--ui-state-normal-${u}-${b}`;e[x]=String(S);const k=`--${d.name}-${u}-${b}`;e[k]=String(B[g]??S);const R=`--ui-state-value-${d.name}-${u}-${b}`;e[R]=B[g]===void 0?"initial":`var(${k})`;const W=`var(--ui-state-disabled-${b},var(--ui-state-active-${b},var(--ui-state-focus-visible-${b},var(--ui-state-hover-${b},var(${x})))))`;o.push(`${l}${d.variant}:[--ui-state-${d.name}-${b}:var(${R})]`,`${l}${d.variant}:[${b}:${W}]`)}}})}function D(t,o){const e=t[o];return e?o!=="hover"&&"outlineWidth"in e&&e.outlineStyle===void 0?X({...e,outlineStyle:"solid"}):X(e):{}}function vo(t,o){const e=t==="color"?"inherit":"initial";if(t!=="background"&&t!=="backgroundColor"&&t!=="color")return e;const a=t==="color"?"color":"bg";let n=`var(--button-${a},${e})`;for(let s=0;s<o;s+=1)n=`var(--${L.responsiveBreakpoints[s]}-button-${a},${n})`;return n}function X(t){const o={...K(t)};if(o.borderWidth!==void 0){const e=String(o.borderWidth).split(/\s+(?![^()]*\))/),a=e[0],n=e[1]??a,s=e[2]??a,m=e[3]??n;Object.assign(o,{borderTopWidth:a,borderRightWidth:n,borderBottomWidth:s,borderLeftWidth:m}),delete o.borderWidth}if(o.borderRadius!==void 0){const[e,a=e]=String(o.borderRadius).split("/"),n=c=>{const r=c.trim().split(/\s+(?![^()]*\))/);return[r[0],r[1]??r[0],r[2]??r[0],r[3]??r[1]??r[0]]},s=n(e),m=n(a);["TopLeft","TopRight","BottomRight","BottomLeft"].forEach((c,r)=>{o[`border${c}Radius`]=`${s[r]} ${m[r]}`}),delete o.borderRadius}return o}function F(t,o,e,{classPrefix:a="",variablePrefix:n="",isGroupParent:s=!1}={}){const m=K(t);for(const[c,r]of Object.entries(m??{})){if(r==null)continue;const u=String(r),l=ho(c,u);if(l){o.push(`${a}${l}`);continue}const d=`${n}${Y(c)}`,h=$o(c,d);h&&(e[`--${d}`]=u,o.push(`${a}${h}`))}if(t.bgGroup!==void 0){const c=`${n}group-background`;e[`--${c}`]=G(t.bgGroup),o.push(`${a}group-hover:[background:var(--${c})]`),s&&o.push(`${a}hover:[background:var(--${c})]`)}}function ho(t,o){if(t==="display")return o==="none"?"hidden":o;if(t==="position")return o==="inherit"?"[position:inherit]":o;if(t==="cursor")return`cursor-${o}`;if(t==="backgroundRepeat")return{"no-repeat":"bg-no-repeat",repeat:"bg-repeat",round:"bg-repeat-round",space:"bg-repeat-space","repeat-x":"bg-repeat-x","repeat-y":"bg-repeat-y"}[o];if(t==="backgroundSize")return{auto:"bg-auto",contain:"bg-contain",cover:"bg-cover"}[o];if(t==="backgroundPosition")return{bottom:"bg-bottom",center:"bg-center",left:"bg-left","left bottom":"bg-left-bottom","left top":"bg-left-top",right:"bg-right","right bottom":"bg-right-bottom","right top":"bg-right-top",top:"bg-top"}[o];if(t==="borderStyle")return o==="none"?"border-none":`border-${o}`;if(t==="outlineStyle")return o==="none"?"outline-none":`outline-${o}`;if(t==="listStylePosition")return`list-${o}`;if(t==="listStyleType")return`list-${o}`}function $o(t,o){const e=`var(--${o})`;return{background:`[background:${e}]`,backgroundColor:`bg-[${e}]`,backgroundPosition:`bg-[position:${e}]`,backgroundSize:`bg-[length:${e}]`,aspectRatio:`[aspect-ratio:${e}]`,borderBottomLeftRadius:`rounded-bl-[${e}]`,borderBottomRightRadius:`rounded-br-[${e}]`,borderBottomWidth:`border-b-[length:${e}]`,borderColor:`border-[color:${e}]`,borderLeftWidth:`border-l-[length:${e}]`,borderRadius:`rounded-[${e}]`,borderRightWidth:`border-r-[length:${e}]`,borderTopLeftRadius:`rounded-tl-[${e}]`,borderTopRightRadius:`rounded-tr-[${e}]`,borderTopWidth:`border-t-[length:${e}]`,borderWidth:`border-[length:${e}]`,boxShadow:`[box-shadow:${e}]`,bottom:`bottom-[${e}]`,color:`[color:${e}]`,height:`h-[${e}]`,left:`left-[${e}]`,margin:`m-[${e}]`,marginBottom:`mb-[${e}]`,marginLeft:`ml-[${e}]`,marginRight:`mr-[${e}]`,marginTop:`mt-[${e}]`,maxHeight:`max-h-[${e}]`,maxWidth:`max-w-[${e}]`,minHeight:`min-h-[${e}]`,minWidth:`min-w-[${e}]`,outlineColor:`outline-[color:${e}]`,outlineOffset:`outline-offset-[${e}]`,outlineWidth:`outline-[length:${e}]`,opacity:`[opacity:${e}]`,overflowX:`[overflow-x:${e}]`,overflowY:`[overflow-y:${e}]`,padding:`p-[${e}]`,paddingBottom:`pb-[${e}]`,paddingLeft:`pl-[${e}]`,paddingRight:`pr-[${e}]`,paddingTop:`pt-[${e}]`,pointerEvents:`[pointer-events:${e}]`,right:`right-[${e}]`,top:`top-[${e}]`,transform:`[transform:${e}]`,transformOrigin:`[transform-origin:${e}]`,width:`w-[${e}]`,zIndex:`z-[${e}]`}[t]}function Y(t){return t.replace(/[A-Z]/g,o=>`-${o.toLowerCase()}`)}function Bo(t,o){if(o!==void 0){if(Array.isArray(o)){t.padding=o.map(f).join(" ");return}if(typeof o!="object"){t.padding=f(o);return}"px"in o&&o.px!==void 0&&(t.paddingLeft=f(o.px),t.paddingRight=f(o.px)),"py"in o&&o.py!==void 0&&(t.paddingTop=f(o.py),t.paddingBottom=f(o.py)),"pt"in o&&o.pt!==void 0&&(t.paddingTop=f(o.pt)),"pb"in o&&o.pb!==void 0&&(t.paddingBottom=f(o.pb)),"pl"in o&&o.pl!==void 0&&(t.paddingLeft=f(o.pl)),"pr"in o&&o.pr!==void 0&&(t.paddingRight=f(o.pr))}}function yo(t,o){if(o!==void 0){if(Array.isArray(o)){t.margin=o.map(f).join(" ");return}if(typeof o!="object"){t.margin=f(o);return}"mx"in o&&o.mx!==void 0&&(t.marginLeft=f(o.mx),t.marginRight=f(o.mx)),"my"in o&&o.my!==void 0&&(t.marginTop=f(o.my),t.marginBottom=f(o.my)),"mt"in o&&o.mt!==void 0&&(t.marginTop=f(o.mt)),"mb"in o&&o.mb!==void 0&&(t.marginBottom=f(o.mb)),"ml"in o&&o.ml!==void 0&&(t.marginLeft=f(o.ml)),"mr"in o&&o.mr!==void 0&&(t.marginRight=f(o.mr))}}function ko(t,o){o&&(o.radius!==void 0&&Ro(t,o.radius),o.color!==void 0&&(t.borderColor=$(o.color)),o.width!==void 0&&So(t,o.width),o.style!==void 0&&(t.borderStyle=o.style))}function Ro(t,o){if(xo(o)){o.topLeft!==void 0&&(t.borderTopLeftRadius=T(o.topLeft)),o.topRight!==void 0&&(t.borderTopRightRadius=T(o.topRight)),o.bottomLeft!==void 0&&(t.borderBottomLeftRadius=T(o.bottomLeft)),o.bottomRight!==void 0&&(t.borderBottomRightRadius=T(o.bottomRight));return}t.borderRadius=T(o)}function So(t,o){if(Wo(o)){o.top!==void 0&&(t.borderTopWidth=V(o.top)),o.bottom!==void 0&&(t.borderBottomWidth=V(o.bottom)),o.left!==void 0&&(t.borderLeftWidth=V(o.left)),o.right!==void 0&&(t.borderRightWidth=V(o.right));return}t.borderWidth=V(o)}function xo(t){return typeof t=="object"}function Wo(t){return typeof t=="object"}function T(t){return t.startsWith("--")?`var(${t})`:t}function V(t){return t.startsWith("--")?`var(${t})`:t}function Co(t){return t==="hidden"?"none":t}function H(t){return typeof t=="number"?`${t}px`:t}function f(t){return typeof t=="number"?`${t}px`:t}function z(t){return typeof t=="number"?`${t}px`:t}function zo(t){return typeof t=="number"?`${t}px`:t}function To(t){return{"no-repeat":"no-repeat",repeat:"repeat","repeat-round":"round","repeat-space":"space","repeat-x":"repeat-x","repeat-y":"repeat-y"}[t]}function Vo(t){return t.replace("-"," ")}function G(t){return $(t)}function Lo(t,o){const e=G(o);if(Po(o)){t.background=e;return}t.backgroundColor=e}function Po(t){const o=t.trim().toLowerCase();return o.includes("url(")||o.includes("gradient(")||o.includes("image-set(")||o.includes("cross-fade(")||o.includes("element(")||o.includes("paint(")}function $(t){return t.startsWith("--")?`var(${t})`:t}function wo(t,o){const{as:e,children:a,className:n,background:s,backgroundColor:m,bg:c,bgSize:r,bgRepeat:u,bgGroup:l,groupParent:d,bgPosition:h,border:y,boxShadow:B,color:v,cursor:g,opacity:b,overflow:S,overflowX:x,overflowY:k,pointerEvents:R,aspectRatio:W,transform:P,transformOrigin:C,p:w,m:p,outlineColor:N,outlineWidth:j,outlineOffset:I,outlineStyle:O,listStyle:E,display:A,position:i,width:Z,maxWidth:J,minWidth:Q,height:U,hover:oo,focusVisible:to,active:eo,disabledStyle:io,maxHeight:ro,minHeight:no,md:ao,lg:so,xl:fo,style:_,...co}=t,uo=e??"div",M=mo({hover:oo,focusVisible:to,active:eo,disabledStyle:io,background:s,backgroundColor:m,bg:c,bgSize:r,bgRepeat:u,bgGroup:l,groupParent:d,bgPosition:h,border:y,boxShadow:B,color:v,cursor:g,opacity:b,overflow:S,overflowX:x,overflowY:k,pointerEvents:R,aspectRatio:W,transform:P,transformOrigin:C,p:w,m:p,outlineColor:N,outlineWidth:j,outlineOffset:I,outlineStyle:O,listStyle:E,display:A,position:i,width:Z,maxWidth:J,minWidth:Q,height:U,maxHeight:ro,minHeight:no,md:ao,lg:so,xl:fo}),lo=M.style||_?{...M.style,..._}:void 0;return bo.jsx(uo,{className:L.cn(M.className,d&&"group",n),ref:o,style:lo,...co,children:a})}const No=po.forwardRef(wo);exports.Box=No;