https://avaloniaui.net/assets/ComponentSetupSection-z8iEPjBl.js

1import{j as e}from"./jsx-runtime-u17CrQMm.js";import{P as u,d as R}from"./MarketingLayout-DDrv-W3y.js";import{G as N,C as S,S as T,e as k,d as C,l as E,t as I,H as P,R as A,g as M,b as O,E as w,a as $,D as z}from"./tokens-C2m5-FTJ.js";import{u as L}from"./TestimonialsSection-0JN2rV7o.js";import{r as x}from"./chunk-LFPYN7LY-BFxOW0GP.js";import{a as B}from"./hooks-D-LcsWY0.js";import{C as D}from"./CodeSlab-DfYsMKa9.js";import{h as F}from"./highlight-BoMxLRRQ.js";import{P as U}from"./PillToggle-BUYSIAdE.js";function Z({id:i,features:n,heading:c="Powerful features, yet simple to use.",lead:h,ground:p=N.lift,docsHref:g=R("/docs/welcome","component-features"),trialHref:d}){const f=L("avalonia"),a=d??f,m=n.length%3===0?3:2;return e.jsx("section",{id:i,style:{background:p},children:e.jsxs("div",{className:T,style:{maxWidth:S},children:[e.jsx("p",{className:"mb-5",style:k,children:"Features"}),e.jsx("h2",{style:C,children:c}),h&&e.jsx("p",{className:"mt-6",style:E,children:h}),e.jsx("div",{className:"ruled-grid mt-14","data-cols":m,children:n.map(t=>e.jsxs("div",{children:[t.icon&&e.jsx("div",{className:"mb-5",style:{color:"var(--fg-heading)","--icon-knockout":p},children:t.icon}),e.jsxs("div",{className:"flex items-center gap-2.5 mb-3",children:[e.jsx("h3",{style:I,children:t.title}),t.badge&&e.jsx("span",{className:"shrink-0",style:{...M,lineHeight:"20px",padding:"1px 10px",borderRadius:A.pill,border:`1px solid ${P}`},children:t.badge})]}),e.jsx("p",{style:O,children:t.description})]},t.title))}),e.jsxs("div",{className:"section-footer-row",children:[e.jsx(u,{to:a,variant:"dark",size:"md",children:"Start free trial"}),e.jsx(u,{to:g,variant:"ghost-dark",size:"md",children:"Read the docs"})]})]})})}const j=Number.parseInt(z.base,10);function _({code:i,language:n,onLift:c}){return e.jsx(D,{code:i,language:n,onLift:c,children:F(i,n)})}function ee({tabs:i,ground:n=N.rest,docsHref:c=R("/docs/welcome","component-setup"),trialHref:h}){const p=L("avalonia"),g=h??p,[d,f]=x.useState(i[0]?.label??""),a=Math.max(0,i.findIndex(s=>s.label===d)),m=B(),t=x.useRef(null),v=x.useRef(null),H=s=>{v.current=t.current?.getBoundingClientRect().height??null,f(s)};return x.useLayoutEffect(()=>{const s=t.current,l=v.current;if(v.current=null,!s||l===null||m)return;s.style.transition="",s.style.height="";const r=s.getBoundingClientRect().height;if(Math.abs(r-l)<1)return;s.style.height=`${l}px`,s.style.overflow="hidden",s.getBoundingClientRect().height,s.style.transition=`height ${j}ms ${w}`,s.style.height=`${r}px`;const o=y=>{y&&(y.target!==s||y.propertyName!=="height")||(s.style.height="",s.style.overflow="",s.style.transition="",s.removeEventListener("transitionend",o),window.clearTimeout(b))},b=window.setTimeout(o,j+80);return s.addEventListener("transitionend",o),()=>{s.removeEventListener("transitionend",o),window.clearTimeout(b)}},[d,m]),e.jsx("section",{style:{background:n},children:e.jsx("div",{className:T,style:{maxWidth:S},children:e.jsxs("div",{className:"flex flex-col lg:flex-row gap-12 lg:gap-20",children:[e.jsxs("div",{className:"lg:w-[38%] shrink-0",children:[e.jsx("p",{className:"mb-5",style:k,children:"Setup"}),e.jsx("h2",{style:C,children:"Simple installation and implementation."}),e.jsx("p",{className:"mt-6 mb-10",style:E,children:"Add the package, drop the control into your view, and bind it. There is no renderer to configure and no per-platform code to write."}),e.jsxs("div",{className:"flex flex-wrap items-center gap-4",children:[e.jsx(u,{to:g,variant:"dark",size:"md",children:"Start free trial"}),e.jsx(u,{to:c,variant:"ghost-dark",size:"md",children:"Read the docs"})]})]}),e.jsxs("div",{className:"lg:w-[62%] min-w-0",children:[i.length>1&&e.jsx("div",{className:"mb-8",children:e.jsx(U,{options:i.map(s=>s.label),value:d,onChange:H,buttonClassName:"px-5",ariaLabel:"Setup step group"})}),e.jsx("div",{ref:t,className:"relative",children:i.map((s,l)=>e.jsx("div",{className:l===a?"space-y-7":"space-y-7 absolute inset-x-0 top-0","aria-hidden":l!==a,inert:l!==a,style:{opacity:l===a?1:0,transition:m?void 0:`opacity ${j}ms ${w}`,pointerEvents:l===a?void 0:"none"},children:s.steps.map((r,o)=>e.jsxs("div",{children:[e.jsxs("div",{className:"flex items-start gap-3 mb-3",children:[e.jsx("span",{className:"flex items-center justify-center shrink-0",style:{width:"26px",height:"26px",marginTop:"1px",borderRadius:A.pill,background:"var(--fg-heading)",color:"var(--color-snow)",fontFamily:"var(--font-sans-vf)",fontSize:"13px",fontWeight:500},children:o+1}),e.jsx("p",{style:{...$,lineHeight:"28px"},children:r.label})]}),e.jsx(_,{code:r.code,language:r.language,onLift:n===N.lift})]},r.label))},s.label))})]})]})})})}export{Z as C,ee as a};