@daisforge/ui 1.20.0 → 1.22.0

package/components/TourWidget/TourWidget.palette.d.ts

@@ -0,0 +1,36 @@
+export declare const tourWidgetThemePalettes: {
+    light: {
+        "--tour-widget-theme-background": string;
+        "--tour-widget-theme-gradient-vertical": string;
+        "--tour-widget-theme-gradient-horizontal": string;
+        "--tour-widget-theme-gradient-opacity": string;
+        "--tour-widget-theme-gradient-vertical-blur": string;
+        "--tour-widget-theme-gradient-horizontal-blur": string;
+        "--tour-widget-theme-oval-background": string;
+        "--tour-widget-theme-oval-vertical-opacity": string;
+        "--tour-widget-theme-oval-horizontal-opacity": string;
+        "--tour-widget-theme-oval-vertical-blur": string;
+        "--tour-widget-theme-oval-horizontal-blur": string;
+        "--tour-widget-theme-shape-opacity": string;
+        "--tour-widget-theme-shape-start": string;
+        "--tour-widget-theme-shape-middle": string;
+        "--tour-widget-theme-shape-end": string;
+    };
+    dark: {
+        "--tour-widget-theme-background": string;
+        "--tour-widget-theme-gradient-vertical": string;
+        "--tour-widget-theme-gradient-horizontal": string;
+        "--tour-widget-theme-gradient-opacity": string;
+        "--tour-widget-theme-gradient-vertical-blur": string;
+        "--tour-widget-theme-gradient-horizontal-blur": string;
+        "--tour-widget-theme-oval-background": string;
+        "--tour-widget-theme-oval-vertical-opacity": string;
+        "--tour-widget-theme-oval-horizontal-opacity": string;
+        "--tour-widget-theme-oval-vertical-blur": string;
+        "--tour-widget-theme-oval-horizontal-blur": string;
+        "--tour-widget-theme-shape-opacity": string;
+        "--tour-widget-theme-shape-start": string;
+        "--tour-widget-theme-shape-middle": string;
+        "--tour-widget-theme-shape-end": string;
+    };
+};

package/components/TourWidget/TourWidget.styled.d.ts

@@ -5,6 +5,7 @@ import { Typography } from '../Typography';
 type CssProp = string | CSSObject | FlattenSimpleInterpolation;
 type StyledContainerProps = {
     $orientation: TourWidgetOrientation;
+    $isDark: boolean;
     $css?: CssProp;
 };
 export declare const StyledContainer: import('styled-components').StyledComponent<"div", import('styled-components').DefaultTheme, {
@@ -18,6 +19,9 @@ export declare const StyledShapeGradient: import('styled-components').StyledComp
 export declare const StyledGradient: import('styled-components').StyledComponent<"div", import('styled-components').DefaultTheme, {
     className: string;
 }, "className">;
+export declare const StyledOvalGradient: import('styled-components').StyledComponent<"div", import('styled-components').DefaultTheme, {
+    className: string;
+}, "className">;
 export declare const StyledHeader: import('styled-components').StyledComponent<"div", import('styled-components').DefaultTheme, {
     className: string;
 } & {

package/components/TourWidget/TourWidget.tokens.d.ts

@@ -0,0 +1,52 @@
+export declare const tourWidgetTokens: {
+    readonly background: "--tour-widget-background";
+    readonly borderRadius: "--tour-widget-border-radius";
+    readonly bulletActiveBackground: "--tour-widget-bullet-active-background";
+    readonly bulletBackground: "--tour-widget-bullet-background";
+    readonly bulletsOffset: "--tour-widget-bullets-offset";
+    readonly bulletsWidth: "--tour-widget-bullets-width";
+    readonly contentBorderRadius: "--tour-widget-content-border-radius";
+    readonly gradientBackground: "--tour-widget-gradient-background";
+    readonly gradientBlur: "--tour-widget-gradient-blur";
+    readonly gradientFrameBottom: "--tour-widget-gradient-frame-bottom";
+    readonly gradientFrameFade: "--tour-widget-gradient-frame-fade";
+    readonly gradientFrameHeight: "--tour-widget-gradient-frame-height";
+    readonly gradientFrameLeft: "--tour-widget-gradient-frame-left";
+    readonly gradientFrameRight: "--tour-widget-gradient-frame-right";
+    readonly gradientHeight: "--tour-widget-gradient-height";
+    readonly gradientLeft: "--tour-widget-gradient-left";
+    readonly gradientOpacity: "--tour-widget-gradient-opacity";
+    readonly gradientTop: "--tour-widget-gradient-top";
+    readonly gradientWidth: "--tour-widget-gradient-width";
+    readonly inlineOvalDisplay: "--tour-widget-inline-oval-display";
+    readonly minWidth: "--tour-widget-min-width";
+    readonly ovalBackground: "--tour-widget-oval-background";
+    readonly ovalBlur: "--tour-widget-oval-blur";
+    readonly ovalBorderRadius: "--tour-widget-oval-border-radius";
+    readonly ovalFrameDisplay: "--tour-widget-oval-frame-display";
+    readonly ovalFrameHeight: "--tour-widget-oval-frame-height";
+    readonly ovalHeight: "--tour-widget-oval-height";
+    readonly ovalLeft: "--tour-widget-oval-left";
+    readonly ovalOpacity: "--tour-widget-oval-opacity";
+    readonly ovalTop: "--tour-widget-oval-top";
+    readonly ovalWidth: "--tour-widget-oval-width";
+    readonly shapeGradientMaskMiddle: "--tour-widget-shape-gradient-mask-middle";
+    readonly shapeGradientMaskStart: "--tour-widget-shape-gradient-mask-start";
+    readonly shapeGradientOpacity: "--tour-widget-shape-gradient-opacity";
+    readonly shapeGradientPathOpacity: "--tour-widget-shape-gradient-path-opacity";
+    readonly themeBackground: "--tour-widget-theme-background";
+    readonly themeGradientHorizontal: "--tour-widget-theme-gradient-horizontal";
+    readonly themeGradientHorizontalBlur: "--tour-widget-theme-gradient-horizontal-blur";
+    readonly themeGradientOpacity: "--tour-widget-theme-gradient-opacity";
+    readonly themeGradientVertical: "--tour-widget-theme-gradient-vertical";
+    readonly themeGradientVerticalBlur: "--tour-widget-theme-gradient-vertical-blur";
+    readonly themeOvalBackground: "--tour-widget-theme-oval-background";
+    readonly themeOvalHorizontalBlur: "--tour-widget-theme-oval-horizontal-blur";
+    readonly themeOvalHorizontalOpacity: "--tour-widget-theme-oval-horizontal-opacity";
+    readonly themeOvalVerticalBlur: "--tour-widget-theme-oval-vertical-blur";
+    readonly themeOvalVerticalOpacity: "--tour-widget-theme-oval-vertical-opacity";
+    readonly themeShapeEnd: "--tour-widget-theme-shape-end";
+    readonly themeShapeMiddle: "--tour-widget-theme-shape-middle";
+    readonly themeShapeOpacity: "--tour-widget-theme-shape-opacity";
+    readonly themeShapeStart: "--tour-widget-theme-shape-start";
+};

package/components/TourWidget/hooks/useIsDarkTheme.d.ts

@@ -0,0 +1 @@
+export declare const useIsDarkTheme: () => boolean;

package/components/TourWidget/index.cjs

@@ -1,22 +1,22 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),_=require("../../chunks/utils-ChDQGRjv.cjs"),u=require("react"),k=require("../../chunks/AnalyticalWidget-YytE3Rlw.cjs"),f=require("@salutejs/sdds-themes/tokens/sdds_finai"),n=require("styled-components"),d="TourWidget__",e={root:`${d}root`,horizontal:`${d}horizontal`,vertical:`${d}vertical`,header:`${d}header`,headerTitle:`${d}header-title`,headerDescription:`${d}header-description`,content:`${d}content`,footer:`${d}footer`,gradient:`${d}gradient`,shapeGradient:`${d}shape-gradient`,bullets:`${d}bullets`,bulletsTrack:`${d}bullets-track`,bullet:`${d}bullet`,bulletActive:`${d}bullet-active`,bulletEdge:`${d}bullet-edge`},j=u.createContext({}),M=j.Provider,G=()=>u.useContext(j),l={verticalGreen:"56 255 62",horizontalGreen:"56 255 136",cyanSolid:"0 224 255",verticalBlue:"16 194 219",horizontalBlue:"16 138 219",verticalSlateBlue:"110 135 219",horizontalSlateBlue:"90 117 207",cyan:"0, 224, 255",blue:"25, 154, 240",periwinkle:"153, 176, 254",green:"#56ff71",greenTransparent:"rgba(86, 255, 113, 0)"},v={vertical:`linear-gradient(
-    -45.68deg,
-    rgb(${l.verticalGreen}) 16.982%,
-    rgb(${l.cyanSolid}) 16.982%,
-    rgb(${l.verticalBlue}) 44.903%,
-    rgb(${l.verticalSlateBlue}) 69.826%
-  )`,horizontal:`linear-gradient(
-    -45.68deg,
-    rgb(${l.horizontalGreen}) 16.982%,
-    rgb(${l.cyanSolid}) 16.982%,
-    rgb(${l.horizontalBlue}) 44.903%,
-    rgb(${l.horizontalSlateBlue}) 69.826%
-  )`,fallback:`linear-gradient(
-    90deg,
-    rgba(${l.periwinkle}, 0.56) 0%,
-    rgba(${l.blue}, 0.76) 50%,
-    rgba(${l.cyan}, 0.84) 100%
-  )`,oval:`linear-gradient(
-    180deg,
-    ${l.green} 0%,
-    ${l.greenTransparent} 100%
-  )`},p={radius:"14px",contentRadius:"6px",cardBg:()=>f.onDarkSurfaceSolidCardBrightness,titleColor:()=>f.onDarkTextPrimary,descriptionColor:()=>f.onDarkTextSecondary},P=n.css(["--tour-widget-gradient-frame-height:42%;--tour-widget-gradient-frame-left:0;--tour-widget-gradient-frame-right:0;--tour-widget-gradient-frame-bottom:0;--tour-widget-gradient-frame-fade:60%;--tour-widget-gradient-background:",";--tour-widget-gradient-width:115%;--tour-widget-gradient-height:100%;--tour-widget-gradient-left:-15%;--tour-widget-gradient-top:80%;--tour-widget-gradient-blur:34px;--tour-widget-gradient-opacity:1;--tour-widget-oval-width:50%;--tour-widget-oval-height:90%;--tour-widget-oval-left:90%;--tour-widget-oval-top:70%;--tour-widget-oval-blur:37px;--tour-widget-oval-opacity:1;"],v.vertical),F=n.css(["--tour-widget-gradient-frame-height:42%;--tour-widget-gradient-frame-left:0;--tour-widget-gradient-frame-right:0;--tour-widget-gradient-frame-bottom:0;--tour-widget-gradient-frame-fade:78%;--tour-widget-gradient-background:",";--tour-widget-gradient-width:115%;--tour-widget-gradient-height:100%;--tour-widget-gradient-left:-10%;--tour-widget-gradient-top:60%;--tour-widget-gradient-blur:46px;--tour-widget-gradient-opacity:1;--tour-widget-oval-width:40%;--tour-widget-oval-height:126%;--tour-widget-oval-left:78%;--tour-widget-oval-top:34%;--tour-widget-oval-blur:86px;--tour-widget-oval-opacity:0.82;"],v.horizontal),U=n.css([""," display:flex;flex-direction:column;& .","{padding:10px 10px 0 10px;}& .","{padding-top:24px;padding-inline:10px;}& .","{padding:24px 10px 10px;}"],P,e.content,e.header,e.footer),q=n.css([""," display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:max-content minmax(0,1fr) max-content;align-items:stretch;& .","{grid-column:1 / span 1;grid-row:1 / span 1;padding:10px 10px 0;}& .","{grid-column:1 / span 1;grid-row:3 / span 1;align-self:end;margin-top:0;padding:24px 10px 10px;}&:has(> .","){grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;column-gap:24px;}&:has(> .",") .","{grid-column:1;grid-row:1 / 4;padding:10px 0 10px 10px;}&:has(> .",") .","{grid-column:2;grid-row:1;padding:10px 10px 0 0;}&:has(> .",") .","{grid-column:2;grid-row:3;padding:0 10px 10px 0;}"],F,e.header,e.footer,e.content,e.content,e.content,e.content,e.header,e.content,e.footer),Z=({$orientation:t})=>t==="vertical"?U:q,X=n.div.attrs({className:e.root}).withConfig({displayName:"TourWidgetstyled__StyledContainer"})(["position:relative;isolation:isolate;overflow:hidden;min-width:var(--tour-widget-min-width,auto);width:fit-content;color:",";background:var(--tour-widget-background,",");border-radius:var(--tour-widget-border-radius,",");& >:not(.","):not(.","){position:relative;z-index:1;}"," ",""],p.titleColor,p.cardBg,p.radius,e.gradient,e.shapeGradient,Z,({$css:t})=>t),V=n.svg.attrs({className:e.shapeGradient,focusable:"false",preserveAspectRatio:"none"}).withConfig({displayName:"TourWidgetstyled__StyledShapeGradient"})(["position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;opacity:var(--tour-widget-shape-gradient-opacity,0.84);-webkit-mask-image:linear-gradient( to bottom,transparent 42%,rgba(0,0,0,0.55) 58%,#000 100% );mask-image:linear-gradient( to bottom,transparent 42%,rgba(0,0,0,0.55) 58%,#000 100% );& path{opacity:var(--tour-widget-shape-gradient-path-opacity,0.86);}"]),J=n.div.attrs({className:e.gradient}).withConfig({displayName:"TourWidgetstyled__StyledGradient"})(["position:absolute;z-index:0;left:var(--tour-widget-gradient-frame-left,0);right:var(--tour-widget-gradient-frame-right,0);bottom:var(--tour-widget-gradient-frame-bottom,0);height:var(--tour-widget-gradient-frame-height,36%);overflow:hidden;border-radius:inherit;pointer-events:none;mask-image:linear-gradient( to bottom,transparent 0%,#000 var(--tour-widget-gradient-frame-fade,24%),#000 100% );&::before,&::after{content:'';position:absolute;pointer-events:none;}&::before{width:var(--tour-widget-gradient-width);height:var(--tour-widget-gradient-height);left:var(--tour-widget-gradient-left);top:var(--tour-widget-gradient-top);background:var( --tour-widget-gradient-background,"," );filter:blur(var(--tour-widget-gradient-blur,69px));opacity:var(--tour-widget-gradient-opacity,1);}&::after{width:var(--tour-widget-oval-width);height:var(--tour-widget-oval-height);left:var(--tour-widget-oval-left);top:var(--tour-widget-oval-top);background:var( --tour-widget-oval-background,"," );filter:blur(var(--tour-widget-oval-blur,127px));opacity:var(--tour-widget-oval-opacity,1);}"],v.fallback,v.oval),K=n.div.attrs({className:e.header}).withConfig({displayName:"TourWidgetstyled__StyledHeader"})(["min-width:0;display:flex;flex-direction:column;row-gap:4px;",""],({$css:t})=>t),Q=n(k.Typography).attrs({className:e.headerTitle}).withConfig({displayName:"TourWidgetstyled__StyledHeaderTitle"})(["min-width:0;color:",";white-space:pre-line;"],p.titleColor),Y=n(k.Typography).attrs({className:e.headerDescription}).withConfig({displayName:"TourWidgetstyled__StyledHeaderDescription"})(["min-width:0;color:",";white-space:pre-line;"],p.descriptionColor),tt=n.div.attrs({className:e.content}).withConfig({displayName:"TourWidgetstyled__StyledContent"})(["& img,& picture,& video,& canvas,& svg{display:block;object-fit:cover;border-radius:var(--tour-widget-content-border-radius,",");}",""],p.contentRadius,({$css:t})=>t),et=n.div.attrs({className:e.footer}).withConfig({displayName:"TourWidgetstyled__StyledFooter"})(["min-width:0;",""],({$css:t})=>t),rt=n.div.attrs({className:e.bullets}).withConfig({displayName:"TourWidgetstyled__StyledBullets"})(["display:inline-block;width:var(--tour-widget-bullets-width,auto);min-width:0;overflow:hidden;",""],({$css:t})=>t),it=n.div.attrs({className:e.bulletsTrack}).withConfig({displayName:"TourWidgetstyled__StyledBulletsTrack"})(["display:flex;align-items:center;gap:8px;transform:translateX(var(--tour-widget-bullets-offset,0px));transition:transform 300ms ease;will-change:transform;"]),at=n.span.attrs({className:e.bullet}).withConfig({displayName:"TourWidgetstyled__StyledBullet"})(["display:block;flex:0 0 8px;width:8px;height:8px;border-radius:100%;background:var( --tour-widget-bullet-background,"," );transform:scale(1);transform-origin:center;transition:background-color 300ms ease,opacity 300ms ease,transform 300ms ease;&.","{background:var( --tour-widget-bullet-active-background,"," );}&.","{transform:scale(0.75);}",""],f.onDarkSurfaceTransparentTertiary,e.bulletActive,f.onDarkTextPrimary,e.bulletEdge,({$css:t})=>t),b=u.forwardRef(({index:t,active:a,className:o,"aria-label":g,...i},c)=>{const{activeStepIndex:s}=G(),w=a??(typeof t=="number"&&s===t);return r.jsx(at,{ref:c,className:_.mCls(w&&e.bulletActive,o),"aria-current":w?"step":void 0,"aria-label":g??(typeof t=="number"?`Шаг ${t+1}`:void 0),...i})});b.displayName="TourWidget.Bullet";const y=7,O=8,z=8,ot=O+z,$=(t,a,o)=>Math.min(Math.max(t,a),o),dt=t=>Number.isFinite(t)?Math.max(0,Math.floor(t)):0,nt=t=>t>0?t*O+(t-1)*z:0,S=u.forwardRef(({count:t,style:a,"aria-label":o,...g},i)=>{const{activeStepIndex:c=0}=G(),s=dt(t),w=Number.isFinite(c)?Math.floor(c):0,x=s>0?$(w,0,s-1):0,T=Math.min(s,y),L=Math.max(0,s-T),m=s>y?$(x-Math.floor(y/2),0,L):0,N=m+T-1,A=m>0,I=N<s-1,D={...a,"--tour-widget-bullets-offset":`-${m*ot}px`,"--tour-widget-bullets-width":`${nt(T)}px`};return r.jsx(rt,{ref:i,"aria-label":o??(s>0?`Шаг ${x+1} из ${s}`:void 0),style:D,...g,children:r.jsx(it,{children:Array.from({length:s},(ut,h)=>{const H=s>y&&(h===m&&A||h===N&&I);return r.jsx(b,{index:h,active:h===x,className:H?e.bulletEdge:void 0},h)})})})});S.displayName="TourWidget.Bullets";const C=u.forwardRef(({children:t,...a},o)=>r.jsx(tt,{ref:o,...a,children:t}));C.displayName="TourWidget.Content";const W=u.forwardRef(({children:t,...a},o)=>r.jsx(et,{ref:o,...a,children:t}));W.displayName="TourWidget.Footer";const B=u.forwardRef(({title:t,description:a,children:o,...g},i)=>r.jsxs(K,{ref:i,...g,children:[t!=null&&r.jsx(Q,{variant:"H3",bold:!0,children:t}),a!=null&&r.jsx(Y,{variant:"TextM",children:a}),o]}));B.displayName="TourWidget.Header";const lt={vertical:{viewBox:"0 0 286 480",gradient:{x1:"0",y1:"318",x2:"286",y2:"480",middleOffset:"0.5",startOpacity:"0.56",middleOpacity:"0.62",endOpacity:"0.74"},filter:{x:"-20%",y:"-30%",width:"140%",height:"170%",blur:"18"},path:"M0 318 C 34 420 138 454 286 426 L286 482 L0 482 Z"},horizontal:{viewBox:"0 0 720 260",gradient:{x1:"0",y1:"170",x2:"720",y2:"260",middleOffset:"0.55",startOpacity:"0.5",middleOpacity:"0.58",endOpacity:"0.7"},filter:{x:"-12%",y:"-40%",width:"124%",height:"190%",blur:"22"},path:"M0 172 C 88 228 330 252 720 206 L720 262 L0 262 Z"}},R=({orientation:t})=>{const a=u.useId().replace(/[^a-zA-Z0-9_-]/g,""),o=`tour-widget-tail-gradient-${a}`,g=`tour-widget-tail-blur-${a}`,i=lt[t];return r.jsxs(r.Fragment,{children:[r.jsxs(V,{"aria-hidden":!0,viewBox:i.viewBox,children:[r.jsxs("defs",{children:[r.jsxs("linearGradient",{id:o,x1:i.gradient.x1,y1:i.gradient.y1,x2:i.gradient.x2,y2:i.gradient.y2,gradientUnits:"userSpaceOnUse",children:[r.jsx("stop",{offset:"0",stopColor:"#6e87db",stopOpacity:i.gradient.startOpacity}),r.jsx("stop",{offset:i.gradient.middleOffset,stopColor:"#00e0ff",stopOpacity:i.gradient.middleOpacity}),r.jsx("stop",{offset:"1",stopColor:"#56ff88",stopOpacity:i.gradient.endOpacity})]}),r.jsx("filter",{id:g,x:i.filter.x,y:i.filter.y,width:i.filter.width,height:i.filter.height,children:r.jsx("feGaussianBlur",{stdDeviation:i.filter.blur})})]}),r.jsx("path",{d:i.path,fill:`url(#${o})`,filter:`url(#${g})`})]}),r.jsx(J,{"aria-hidden":!0})]})};R.displayName="TourWidget.Gradient";const st={horizontal:e.horizontal,vertical:e.vertical},gt=u.forwardRef(({children:t,orientation:a="vertical",activeStepIndex:o,className:g,...i},c)=>r.jsx(M,{value:{activeStepIndex:o},children:r.jsxs(X,{ref:c,$orientation:a,className:_.mCls(st[a],g),...i,children:[r.jsx(R,{orientation:a}),t]})})),E=Object.assign(gt,{Header:B,Content:C,Footer:W,Bullet:b,Bullets:S});E.displayName="TourWidget";exports.TourWidget=E;exports.TourWidgetBullet=b;exports.TourWidgetBullets=S;exports.TourWidgetContent=C;exports.TourWidgetFooter=W;exports.TourWidgetHeader=B;exports.tourWidgetClassNames=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),_=require("../../chunks/utils-ChDQGRjv.cjs"),g=require("react"),z=require("../../chunks/AnalyticalWidget-YytE3Rlw.cjs"),h=require("@salutejs/sdds-themes/tokens/sdds_finai"),n=require("styled-components"),l="TourWidget__",a={root:`${l}root`,horizontal:`${l}horizontal`,vertical:`${l}vertical`,header:`${l}header`,headerTitle:`${l}header-title`,headerDescription:`${l}header-description`,content:`${l}content`,footer:`${l}footer`,gradient:`${l}gradient`,shapeGradient:`${l}shape-gradient`,bullets:`${l}bullets`,bulletsTrack:`${l}bullets-track`,bullet:`${l}bullet`,bulletActive:`${l}bullet-active`,bulletEdge:`${l}bullet-edge`},M=g.createContext({}),U=M.Provider,$=()=>g.useContext(M),e={background:"--tour-widget-background",borderRadius:"--tour-widget-border-radius",bulletActiveBackground:"--tour-widget-bullet-active-background",bulletBackground:"--tour-widget-bullet-background",bulletsOffset:"--tour-widget-bullets-offset",bulletsWidth:"--tour-widget-bullets-width",contentBorderRadius:"--tour-widget-content-border-radius",gradientBackground:"--tour-widget-gradient-background",gradientBlur:"--tour-widget-gradient-blur",gradientFrameBottom:"--tour-widget-gradient-frame-bottom",gradientFrameFade:"--tour-widget-gradient-frame-fade",gradientFrameHeight:"--tour-widget-gradient-frame-height",gradientFrameLeft:"--tour-widget-gradient-frame-left",gradientFrameRight:"--tour-widget-gradient-frame-right",gradientHeight:"--tour-widget-gradient-height",gradientLeft:"--tour-widget-gradient-left",gradientOpacity:"--tour-widget-gradient-opacity",gradientTop:"--tour-widget-gradient-top",gradientWidth:"--tour-widget-gradient-width",inlineOvalDisplay:"--tour-widget-inline-oval-display",minWidth:"--tour-widget-min-width",ovalBackground:"--tour-widget-oval-background",ovalBlur:"--tour-widget-oval-blur",ovalBorderRadius:"--tour-widget-oval-border-radius",ovalFrameDisplay:"--tour-widget-oval-frame-display",ovalFrameHeight:"--tour-widget-oval-frame-height",ovalHeight:"--tour-widget-oval-height",ovalLeft:"--tour-widget-oval-left",ovalOpacity:"--tour-widget-oval-opacity",ovalTop:"--tour-widget-oval-top",ovalWidth:"--tour-widget-oval-width",shapeGradientMaskMiddle:"--tour-widget-shape-gradient-mask-middle",shapeGradientMaskStart:"--tour-widget-shape-gradient-mask-start",shapeGradientOpacity:"--tour-widget-shape-gradient-opacity",shapeGradientPathOpacity:"--tour-widget-shape-gradient-path-opacity",themeBackground:"--tour-widget-theme-background",themeGradientHorizontal:"--tour-widget-theme-gradient-horizontal",themeGradientHorizontalBlur:"--tour-widget-theme-gradient-horizontal-blur",themeGradientOpacity:"--tour-widget-theme-gradient-opacity",themeGradientVertical:"--tour-widget-theme-gradient-vertical",themeGradientVerticalBlur:"--tour-widget-theme-gradient-vertical-blur",themeOvalBackground:"--tour-widget-theme-oval-background",themeOvalHorizontalBlur:"--tour-widget-theme-oval-horizontal-blur",themeOvalHorizontalOpacity:"--tour-widget-theme-oval-horizontal-opacity",themeOvalVerticalBlur:"--tour-widget-theme-oval-vertical-blur",themeOvalVerticalOpacity:"--tour-widget-theme-oval-vertical-opacity",themeShapeEnd:"--tour-widget-theme-shape-end",themeShapeMiddle:"--tour-widget-theme-shape-middle",themeShapeOpacity:"--tour-widget-theme-shape-opacity",themeShapeStart:"--tour-widget-theme-shape-start"},H=`linear-gradient(
+  270deg,
+  #00dfff 33.759%,
+  #51b7fb 63.268%,
+  #bbb0fc 84.246%
+)`,F=`linear-gradient(
+  180deg,
+  #56ff71 0%,
+  rgba(86, 255, 113, 0) 100%
+)`,v={light:{[e.themeBackground]:h.onLightSurfaceSolidPrimary,[e.themeGradientVertical]:H,[e.themeGradientHorizontal]:H,[e.themeGradientOpacity]:"0.53",[e.themeGradientVerticalBlur]:"45px",[e.themeGradientHorizontalBlur]:"45px",[e.themeOvalBackground]:F,[e.themeOvalVerticalOpacity]:"0.42",[e.themeOvalHorizontalOpacity]:"0.42",[e.themeOvalVerticalBlur]:"48px",[e.themeOvalHorizontalBlur]:"48px",[e.themeShapeOpacity]:"0.32",[e.themeShapeStart]:"#bbb0fc",[e.themeShapeMiddle]:"#00dfff",[e.themeShapeEnd]:"#56ff71"},dark:{[e.themeBackground]:h.onDarkSurfaceSolidCardBrightness,[e.themeGradientVertical]:`linear-gradient(
+      -45.68deg,
+      rgb(56 255 62) 16.982%,
+      rgb(0 224 255) 16.982%,
+      rgb(16 194 219) 44.903%,
+      rgb(110 135 219) 69.826%
+    )`,[e.themeGradientHorizontal]:`linear-gradient(
+      -45.68deg,
+      rgb(56 255 136) 16.982%,
+      rgb(0 224 255) 16.982%,
+      rgb(16 138 219) 44.903%,
+      rgb(90 117 207) 69.826%
+    )`,[e.themeGradientOpacity]:"1",[e.themeGradientVerticalBlur]:"34px",[e.themeGradientHorizontalBlur]:"46px",[e.themeOvalBackground]:F,[e.themeOvalVerticalOpacity]:"1",[e.themeOvalHorizontalOpacity]:"0.82",[e.themeOvalVerticalBlur]:"37px",[e.themeOvalHorizontalBlur]:"86px",[e.themeShapeOpacity]:"0.84",[e.themeShapeStart]:"#6e87db",[e.themeShapeMiddle]:"#00e0ff",[e.themeShapeEnd]:"#56ff88"}},x=v.light,u={radius:"14px",contentRadius:"6px",cardBg:()=>`var(${e.themeBackground}, ${h.onLightSurfaceSolidPrimary})`,titleColor:()=>h.textPrimary,descriptionColor:()=>h.textPrimary},Z=n.css(["",":20%;",":0;",":0;",":0;",":60%;",":var( ",","," );",":115%;",":100%;",":-15%;",":60%;",":var( ",",45px );",":var( ",",0.53 );",":none;",":block;",":32%;",":50%;",":84%;",":94%;",":45%;",":100%;",":78%;",":35%;",":var(",",48px);",":var( ",",0.42 );"],e.gradientFrameHeight,e.gradientFrameLeft,e.gradientFrameRight,e.gradientFrameBottom,e.gradientFrameFade,e.gradientBackground,e.themeGradientVertical,x[e.themeGradientVertical],e.gradientWidth,e.gradientHeight,e.gradientLeft,e.gradientTop,e.gradientBlur,e.themeGradientVerticalBlur,e.gradientOpacity,e.themeGradientOpacity,e.inlineOvalDisplay,e.ovalFrameDisplay,e.ovalFrameHeight,e.ovalBorderRadius,e.shapeGradientMaskStart,e.shapeGradientMaskMiddle,e.ovalWidth,e.ovalHeight,e.ovalLeft,e.ovalTop,e.ovalBlur,e.themeOvalVerticalBlur,e.ovalOpacity,e.themeOvalVerticalOpacity),X=n.css(["",":30%;",":0;",":0;",":0;",":78%;",":var( ",","," );",":115%;",":100%;",":-10%;",":55%;",":var( ",",45px );",":var( ",",0.53 );",":none;",":block;",":42%;",":50%;",":76%;",":88%;",":30%;",":120%;",":84%;",":20%;",":var(",",48px);",":var( ",",0.42 );"],e.gradientFrameHeight,e.gradientFrameLeft,e.gradientFrameRight,e.gradientFrameBottom,e.gradientFrameFade,e.gradientBackground,e.themeGradientHorizontal,x[e.themeGradientHorizontal],e.gradientWidth,e.gradientHeight,e.gradientLeft,e.gradientTop,e.gradientBlur,e.themeGradientHorizontalBlur,e.gradientOpacity,e.themeGradientOpacity,e.inlineOvalDisplay,e.ovalFrameDisplay,e.ovalFrameHeight,e.ovalBorderRadius,e.shapeGradientMaskStart,e.shapeGradientMaskMiddle,e.ovalWidth,e.ovalHeight,e.ovalLeft,e.ovalTop,e.ovalBlur,e.themeOvalHorizontalBlur,e.ovalOpacity,e.themeOvalHorizontalOpacity),J=n.css([""," display:flex;flex-direction:column;& .","{padding:12px 12px 0;}& .","{padding-top:24px;padding-inline:12px;}& .","{padding:24px 12px 12px;}"],Z,a.content,a.header,a.footer),K=n.css([""," display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:max-content minmax(0,1fr) max-content;align-items:stretch;& .","{grid-column:1 / span 1;grid-row:1 / span 1;padding:12px 12px 0;}& .","{grid-column:1 / span 1;grid-row:3 / span 1;align-self:end;margin-top:0;padding:24px 12px 12px;}&:has(> .","){grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;column-gap:24px;}&:has(> .",") .","{grid-column:1;grid-row:1 / 4;padding:12px 0 12px 12px;}&:has(> .",") .","{grid-column:2;grid-row:1;padding:12px 12px 0 0;}&:has(> .",") .","{grid-column:2;grid-row:3;padding:0 12px 12px 0;}"],X,a.header,a.footer,a.content,a.content,a.content,a.content,a.header,a.content,a.footer),Q=({$orientation:t})=>t==="vertical"?J:K,Y=n.div.attrs({className:a.root}).withConfig({displayName:"TourWidgetstyled__StyledContainer"})(["position:relative;isolation:isolate;overflow:hidden;box-sizing:border-box;min-width:var(",",auto);width:fit-content;color:",";border:4px solid transparent;background:linear-gradient( var(",",","),var(",",",") ) padding-box,"," border-box;border-radius:var(",",",");& >:not(.","):not(.","){position:relative;z-index:1;}"," "," ",""],e.minWidth,u.titleColor,e.background,u.cardBg,e.background,u.cardBg,h.outlineAccentGradient,e.borderRadius,u.radius,a.gradient,a.shapeGradient,({$isDark:t})=>v[t?"dark":"light"],Q,({$css:t})=>t),ee=n.svg.attrs({className:a.shapeGradient,focusable:"false",preserveAspectRatio:"none"}).withConfig({displayName:"TourWidgetstyled__StyledShapeGradient"})(["position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;clip-path:inset( 0 round max(0px,calc(var(",",",") - 4px)) );opacity:var( ",",var(",",0.32) );-webkit-mask-image:linear-gradient( to bottom,transparent var(",",42%),rgba(0,0,0,0.55) var(",",58%),#000 100% );mask-image:linear-gradient( to bottom,transparent var(",",42%),rgba(0,0,0,0.55) var(",",58%),#000 100% );& path{opacity:var(",",0.86);}"],e.borderRadius,u.radius,e.shapeGradientOpacity,e.themeShapeOpacity,e.shapeGradientMaskStart,e.shapeGradientMaskMiddle,e.shapeGradientMaskStart,e.shapeGradientMaskMiddle,e.shapeGradientPathOpacity),L=n.div.attrs({className:a.gradient}).withConfig({displayName:"TourWidgetstyled__StyledGradient"})(["position:absolute;z-index:0;left:var(",",0);right:var(",",0);bottom:var(",",0);height:var(",",36%);overflow:hidden;border-radius:max(0px,calc(var(",",",") - 4px));pointer-events:none;mask-image:linear-gradient( to bottom,transparent 0%,#000 var(",",24%),#000 100% );&::before,&::after{content:'';position:absolute;pointer-events:none;}&::before{width:var(",");height:var(",");left:var(",");top:var(",");background:var( ",","," );filter:blur(var(",",69px));opacity:var(",",1);}&::after{display:var(",",block);width:var(",");height:var(",");left:var(",");top:var(",");border-radius:var(",",0);background:var( ",",var( ",","," ) );filter:blur(var(",",127px));opacity:var(",",1);}"],e.gradientFrameLeft,e.gradientFrameRight,e.gradientFrameBottom,e.gradientFrameHeight,e.borderRadius,u.radius,e.gradientFrameFade,e.gradientWidth,e.gradientHeight,e.gradientLeft,e.gradientTop,e.gradientBackground,x[e.themeGradientHorizontal],e.gradientBlur,e.gradientOpacity,e.inlineOvalDisplay,e.ovalWidth,e.ovalHeight,e.ovalLeft,e.ovalTop,e.ovalBorderRadius,e.ovalBackground,e.themeOvalBackground,x[e.themeOvalBackground],e.ovalBlur,e.ovalOpacity),te=n(L).withConfig({displayName:"TourWidgetstyled__StyledOvalGradient"})(["display:var(",",none);height:var(",",0%);mask-image:linear-gradient(to bottom,transparent 0%,#000 40%,#000 100%);&::before{display:none;}&::after{display:block;}"],e.ovalFrameDisplay,e.ovalFrameHeight),ae=n.div.attrs({className:a.header}).withConfig({displayName:"TourWidgetstyled__StyledHeader"})(["min-width:0;display:flex;flex-direction:column;row-gap:4px;",""],({$css:t})=>t),re=n(z.Typography).attrs({className:a.headerTitle}).withConfig({displayName:"TourWidgetstyled__StyledHeaderTitle"})(["min-width:0;color:",";white-space:pre-line;"],u.titleColor),ie=n(z.Typography).attrs({className:a.headerDescription}).withConfig({displayName:"TourWidgetstyled__StyledHeaderDescription"})(["min-width:0;color:",";white-space:pre-line;"],u.descriptionColor),oe=n.div.attrs({className:a.content}).withConfig({displayName:"TourWidgetstyled__StyledContent"})(["& img,& picture,& video,& canvas,& svg{display:block;object-fit:cover;border-radius:var(",",",");}",""],e.contentBorderRadius,u.contentRadius,({$css:t})=>t),de=n.div.attrs({className:a.footer}).withConfig({displayName:"TourWidgetstyled__StyledFooter"})(["min-width:0;",""],({$css:t})=>t),ne=n.div.attrs({className:a.bullets}).withConfig({displayName:"TourWidgetstyled__StyledBullets"})(["display:inline-block;width:var(",",auto);min-width:0;overflow:hidden;",""],e.bulletsWidth,({$css:t})=>t),le=n.div.attrs({className:a.bulletsTrack}).withConfig({displayName:"TourWidgetstyled__StyledBulletsTrack"})(["display:flex;align-items:center;gap:8px;transform:translateX(var(",",0px));transition:transform 300ms ease;will-change:transform;"],e.bulletsOffset),se=n.span.attrs({className:a.bullet}).withConfig({displayName:"TourWidgetstyled__StyledBullet"})(["display:block;flex:0 0 8px;width:8px;height:8px;border-radius:100%;background:var(",",",");transform:scale(1);transform-origin:center;transition:background-color 300ms ease,opacity 300ms ease,transform 300ms ease;&.","{background:var(",",",");}&.","{transform:scale(0.75);}",""],e.bulletBackground,h.surfaceTransparentTertiary,a.bulletActive,e.bulletActiveBackground,h.textPrimary,a.bulletEdge,({$css:t})=>t),w=g.forwardRef(({index:t,active:i,className:d,"aria-label":c,...o},p)=>{const{activeStepIndex:s}=$(),y=i??(typeof t=="number"&&s===t);return r.jsx(se,{ref:p,className:_.mCls(y&&a.bulletActive,d),"aria-current":y?"step":void 0,"aria-label":c??(typeof t=="number"?`Шаг ${t+1}`:void 0),...o})});w.displayName="TourWidget.Bullet";const b=7,j=8,R=8,ge=j+R,N=(t,i,d)=>Math.min(Math.max(t,i),d),ce=t=>Number.isFinite(t)?Math.max(0,Math.floor(t)):0,ue=t=>t>0?t*j+(t-1)*R:0,k=g.forwardRef(({count:t,style:i,"aria-label":d,...c},o)=>{const{activeStepIndex:p=0}=$(),s=ce(t),y=Number.isFinite(p)?Math.floor(p):0,B=s>0?N(y,0,s-1):0,O=Math.min(s,b),V=Math.max(0,s-O),f=s>b?N(B-Math.floor(b/2),0,V):0,C=f+O-1,A=f>0,P=C<s-1,I={...i,[e.bulletsOffset]:`-${f*ge}px`,[e.bulletsWidth]:`${ue(O)}px`};return r.jsx(ne,{ref:o,"aria-label":d??(s>0?`Шаг ${B+1} из ${s}`:void 0),style:I,...c,children:r.jsx(le,{children:Array.from({length:s},(ye,m)=>{const q=s>b&&(m===f&&A||m===C&&P);return r.jsx(w,{index:m,active:m===B,className:q?a.bulletEdge:void 0},m)})})})});k.displayName="TourWidget.Bullets";const T=g.forwardRef(({children:t,...i},d)=>r.jsx(oe,{ref:d,...i,children:t}));T.displayName="TourWidget.Content";const G=g.forwardRef(({children:t,...i},d)=>r.jsx(de,{ref:d,...i,children:t}));G.displayName="TourWidget.Footer";const W=g.forwardRef(({title:t,description:i,children:d,...c},o)=>r.jsxs(ae,{ref:o,...c,children:[t!=null&&r.jsx(re,{variant:"H3",bold:!0,children:t}),i!=null&&r.jsx(ie,{variant:"TextM",children:i}),d]}));W.displayName="TourWidget.Header";const he={vertical:{viewBox:"0 0 286 480",gradient:{x1:"0",y1:"318",x2:"286",y2:"480",middleOffset:"0.5",startOpacity:"0.56",middleOpacity:"0.62",endOpacity:"0.74"},filter:{x:"-20%",y:"-30%",width:"140%",height:"170%",blur:"18"},path:"M0 318 C 34 420 138 454 286 426 L286 482 L0 482 Z"},horizontal:{viewBox:"0 0 720 260",gradient:{x1:"0",y1:"170",x2:"720",y2:"260",middleOffset:"0.55",startOpacity:"0.5",middleOpacity:"0.58",endOpacity:"0.7"},filter:{x:"-12%",y:"-40%",width:"124%",height:"190%",blur:"22"},path:"M0 172 C 88 228 330 252 720 206 L720 262 L0 262 Z"}},E=({orientation:t})=>{const i=g.useId().replace(/[^a-zA-Z0-9_-]/g,""),d=`tour-widget-tail-gradient-${i}`,c=`tour-widget-tail-blur-${i}`,o=he[t];return r.jsxs(r.Fragment,{children:[r.jsxs(ee,{"aria-hidden":!0,viewBox:o.viewBox,children:[r.jsxs("defs",{children:[r.jsxs("linearGradient",{id:d,x1:o.gradient.x1,y1:o.gradient.y1,x2:o.gradient.x2,y2:o.gradient.y2,gradientUnits:"userSpaceOnUse",children:[r.jsx("stop",{offset:"0",stopColor:`var(${e.themeShapeStart}, ${v.light[e.themeShapeStart]})`,stopOpacity:o.gradient.startOpacity}),r.jsx("stop",{offset:o.gradient.middleOffset,stopColor:`var(${e.themeShapeMiddle}, ${v.light[e.themeShapeMiddle]})`,stopOpacity:o.gradient.middleOpacity}),r.jsx("stop",{offset:"1",stopColor:`var(${e.themeShapeEnd}, ${v.light[e.themeShapeEnd]})`,stopOpacity:o.gradient.endOpacity})]}),r.jsx("filter",{id:c,x:o.filter.x,y:o.filter.y,width:o.filter.width,height:o.filter.height,children:r.jsx("feGaussianBlur",{stdDeviation:o.filter.blur})})]}),r.jsx("path",{d:o.path,fill:`url(#${d})`,filter:`url(#${c})`})]}),r.jsx(L,{"aria-hidden":!0}),r.jsx(te,{"aria-hidden":!0})]})};E.displayName="TourWidget.Gradient";const S=()=>{var t;return!!((t=document.documentElement.getAttribute("data-theme"))!=null&&t.toLowerCase().includes("dark"))},pe=()=>{const[t,i]=g.useState(S);return g.useEffect(()=>{i(S());const d=new MutationObserver(()=>i(S()));return d.observe(document.documentElement,{attributes:!0,attributeFilter:["data-theme"]}),()=>d.disconnect()},[]),t},me={horizontal:a.horizontal,vertical:a.vertical},ve=g.forwardRef(({children:t,orientation:i="vertical",activeStepIndex:d,className:c,...o},p)=>{const s=pe();return r.jsx(U,{value:{activeStepIndex:d},children:r.jsxs(Y,{ref:p,$orientation:i,$isDark:s,className:_.mCls(me[i],c),...o,children:[r.jsx(E,{orientation:i}),t]})})}),D=Object.assign(ve,{Header:W,Content:T,Footer:G,Bullet:w,Bullets:k});D.displayName="TourWidget";exports.TourWidget=D;exports.TourWidgetBullet=w;exports.TourWidgetBullets=k;exports.TourWidgetContent=T;exports.TourWidgetFooter=G;exports.TourWidgetHeader=W;exports.tourWidgetClassNames=a;exports.tourWidgetTokens=e;

package/components/TourWidget/index.d.ts

@@ -5,4 +5,5 @@ export { TourWidgetFooter } from './components/TourWidgetFooter';
 export { TourWidgetHeader } from './components/TourWidgetHeader';
 export { TourWidget } from './TourWidget';
 export { tourWidgetClassNames } from './TourWidget.classNames';
+export { tourWidgetTokens } from './TourWidget.tokens';
 export type { TourWidgetBulletProps, TourWidgetBulletsProps, TourWidgetContentProps, TourWidgetCss, TourWidgetFooterProps, TourWidgetHeaderProps, TourWidgetOrientation, TourWidgetProps, } from './types';