@shmidko61/lc-ui-kit 0.13.0 → 0.15.0

package/README.md

@@ -158,3 +158,57 @@ Alert, Toast и вызов через NotificationProvider/useNotifications до
 
 Для сравнения API со старой сборкой: pnpm test:compatibility /path/to/previous/package.
 Браузерные проверки: pnpm test:notifications; необходимы локальный Storybook на 6016 и headless Chrome с remote-debugging-port=9237.
+
+## Анимация
+
+Box и основанные на нём Flex и Grid принимают animation в base/md/lg/xl.
+
+```tsx
+<Box
+  animation={{
+    preset: 'spin',
+    duration: '800ms',
+    timingFunction: 'linear',
+    iterationCount: 'infinite',
+    delay: '0ms',
+    direction: 'normal',
+    fillMode: 'none',
+    playState: 'running',
+  }}
+  md={{ animation: { duration: '2s' } }}
+  lg={{ animation: { playState: 'paused' } }}
+  xl={{ animation: 'none' }}
+/>
+```
+
+Объекты наследуются по свойствам. none очищает все параметры, последующий объект начинает с defaults. Сокращение spin выбирает готовый preset; собственное имя @keyframes можно указать в preset. По умолчанию: preset none, duration 1s, timingFunction linear, iterationCount infinite, delay 0ms, direction normal, fillMode none, playState running. CSS animation в явном style имеет приоритет на всех брейкпоинтах. spin запускается через Web Animations API и по умолчанию отключается при prefers-reduced-motion. reducedMotion: keep сохраняет движение. Пользовательское имя CSS @keyframes использует CSS и требует настройки reduced motion в приложении.
+
+### Кадры через props
+
+Для собственной анимации без CSS @keyframes передайте keyframes:
+
+```tsx
+<Box
+  animation={{
+    keyframes: [{ transform: 'rotate(0deg)' }, { transform: 'rotate(360deg)' }],
+    duration: 800,
+    easing: 'linear',
+    iterations: Infinity,
+  }}
+  md={{ animation: { duration: 1500 } }}
+  lg={{ animation: { playState: 'paused' } }}
+  xl={{ animation: 'none' }}
+/>
+```
+
+easing и iterations — синонимы timingFunction и iterationCount; при наследовании побеждает значение, заданное на ближайшем брейкпоинте; в одном объекте синонимы easing/iterations имеют приоритет. Кадры запускаются через Web Animations API после монтирования в браузере. На сервере и без JavaScript элемент остаётся в исходном состоянии. duration и delay принимают число в миллисекундах или CSS-время в ms/s; для кадров CSS-переменные и calc() в этих полях не поддерживаются. Частичные md/lg/xl наследуют keyframes и остальные параметры, none очищает всё, keyframes: null сбрасывает кадры и возвращает выбранный preset. При смене параметров или брейкпоинта анимация запускается заново; при размонтировании останавливается.
+
+При prefers-reduced-motion кадры отключаются по умолчанию. reducedMotion: 'keep' сохраняет анимацию. Явный style.animation или style.animationName отключает Web Animation; style.animationDuration, animationDelay, animationTimingFunction, animationIterationCount, animationDirection, animationFillMode и animationPlayState переопределяют соответствующие параметры; отдельные свойства в style исключаются из кадров и сохраняют приоритет. Готовый preset spin тоже запускается через Web Animations API и не требует CSS @keyframes.
+
+## ProgressBar
+
+[Описание, API и примеры ProgressBar](src/progress-bar/README.md). Компонент доступен через subpath /progress-bar и корневой entrypoint. Storybook: Feedback/ProgressBar/Showcase.
+
+## Tabs
+
+[API, правила наследования и примеры Tabs](src/tabs/README.md). Импорт: @shmidko61/lc-ui-kit/tabs. Витрина: Navigation/Tabs/Showcase. Сборка растущего Storybook запускается с лимитом heap Node 8 ГБ.

package/dist/box/box.d.ts

@@ -8,5 +8,5 @@ type BoxComponentType = {
     displayName?: string;
 };
 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/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 { 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, UiKitTransformProps } from '../types/index';
 /**
  * Допустимые HTML-теги для Box.
  *
@@ -20,7 +20,7 @@ export type BoxBackgroundValue = UiKitBackgroundValue;
 /**
  * Стилевые props, общие для base-состояния и responsive overrides.
  */
-export type BoxStyleProps = UiKitDisplayProps & UiKitPositionProps & UiKitOverflowProps & UiKitAspectRatioProps & UiKitTransformProps & UiKitColorProps & UiKitOpacityProps & UiKitPointerEventsProps & UiKitBoxShadowProps & UiKitBackgroundProps & UiKitCursorProps & UiKitIndentationsProps & UiKitOutlineProps & UiKitListStyleProps & UiKitDimensionProps;
+export type BoxStyleProps = UiKitAnimationProps & UiKitDisplayProps & UiKitPositionProps & UiKitOverflowProps & UiKitAspectRatioProps & UiKitTransformProps & UiKitColorProps & UiKitOpacityProps & UiKitPointerEventsProps & UiKitBoxShadowProps & UiKitBackgroundProps & UiKitCursorProps & UiKitIndentationsProps & UiKitOutlineProps & UiKitListStyleProps & UiKitDimensionProps;
 /**
  * Собственные стилевые props Box поверх общих контрактов ui-kit.
  */

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

@@ -0,0 +1,8 @@
+import { CSSProperties, ForwardedRef } from 'react';
+import { ResponsiveAnimation } from '../types/index';
+/** Определяет, могут ли заданные настройки запустить Web Animations на каком-либо размере. */
+export declare function hasAnimationKeyframes(props: ResponsiveAnimation): boolean;
+/** Запускает кадры, наследует параметры на брейкпоинтах и освобождает браузерные ресурсы. */
+export declare function attachAnimation(element: Element, props: ResponsiveAnimation, style: CSSProperties | undefined): () => void;
+/** Объединяет публичный ref Box с жизненным циклом Web Animations React 19. */
+export declare function animationRef(ref: ForwardedRef<Element>, props: ResponsiveAnimation, style: CSSProperties | undefined): (element: Element | null) => (() => void) | void;

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

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

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

@@ -0,0 +1,3 @@
+import { BoxProps } from '..';
+/** Настройки анимации используют общий responsive-контракт Box без дублирования брейкпоинтов. */
+export type ResponsiveAnimation = Pick<BoxProps, 'animation' | 'md' | 'lg' | 'xl'>;

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

@@ -0,0 +1 @@
+export type { ResponsiveAnimation } from './box-animation.types';

package/dist/box.cjs

@@ -1 +1 @@
-"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;
+"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;