@clickhouse/click-ui 0.0.91 → 0.0.92

package/dist/click-ui.es.js

@@ -7301,7 +7301,9 @@ const Yu = Uu, Xu = zu, Ju = Ku, YS = ({
   theme: e
 }) => e.click.button.group.radii.all, ({
   $fillWidth: e
-}) => e ? "100%" : "auto"), Eo = "var(--click-button-button-group-radii-end)", dp = `${Eo} 0px 0px ${Eo}`, fp = `0px ${Eo} ${Eo} 0px`, up = "var(--click-button-button-group-radii-center)", pp = k.button.withConfig({
+}) => e ? "100%" : "auto"), Eo = "var(--click-button-button-group-radii-end)", dp = `${Eo} 0px 0px ${Eo}`, fp = `0px ${Eo} ${Eo} 0px`, up = "var(--click-button-button-group-radii-center)", pp = k.button.attrs((e) => ({
+  "aria-pressed": e.$active
+})).withConfig({
   componentId: "sc-ukgugp-1"
 })(["box-sizing:border-box;display:flex;flex-direction:row;justify-content:center;align-items:center;border:none;background:", ";color:", ";font:", ";padding:", " ", ";gap:", ";", " cursor:pointer;&:hover{background:", ";font:", ";}&:disabled{cursor:not-allowed;font:", ";background:", ";}&:active,&:focus{background:", ";font:", ";&:disabled{background:", ";}}border-radius:", ";"], ({
   $active: e,

package/dist/click-ui.umd.js

@@ -318,7 +318,7 @@ Check the top-level render call using <`+G+">.")}return T}}function yl(k,T){{if(
   `),yf=x.div.withConfig({componentId:"sc-u5029o-2"})(["",""],({$state:e="default",$size:t="lg",theme:n})=>`
     color: ${n.click.bigStat.color.title[e]};
     font: ${n.click.bigStat.typography[t].title[e]};
-  `),$f=({options:e,selected:t,fillWidth:n,onClick:r,type:i,...a})=>{const s=e.length-1,l=e.map(({value:d,label:f,...u},p)=>{const h=p===0?"left":p===s?"right":"center";return o.jsx(_f,{$active:d===t,$position:h,$fillWidth:n,$type:i,onClick:()=>r==null?void 0:r(d),role:"button",...u,children:f},d)});return o.jsx(Lf,{$fillWidth:n,$type:i,...a,children:l})},Lf=x.div.withConfig({componentId:"sc-ukgugp-0"})(["box-sizing:border-box;display:inline-flex;flex-direction:row;justify-content:center;align-items:center;padding:0px;gap:",";border:1px solid ",";background:",";border-radius:",";width:",";"],({theme:e,$type:t="default"})=>e.click.button.group.space.gap[t],({theme:e,$type:t="default"})=>e.click.button.group.color.panel.stroke[t],({theme:e})=>e.click.button.group.color.background.panel,({theme:e})=>e.click.button.group.radii.all,({$fillWidth:e})=>e?"100%":"auto"),yo="var(--click-button-button-group-radii-end)",jf=`${yo} 0px 0px ${yo}`,Mf=`0px ${yo} ${yo} 0px`,Sf="var(--click-button-button-group-radii-center)",_f=x.button.withConfig({componentId:"sc-ukgugp-1"})(["box-sizing:border-box;display:flex;flex-direction:row;justify-content:center;align-items:center;border:none;background:",";color:",";font:",";padding:"," ",";gap:",";"," cursor:pointer;&:hover{background:",";font:",";}&:disabled{cursor:not-allowed;font:",";background:",";}&:active,&:focus{background:",";font:",";&:disabled{background:",";}}border-radius:",";"],({$active:e,theme:t})=>e?t.click.button.group.color.background.active:t.click.button.group.color.background.default,({theme:e})=>e.click.button.group.color.text.default,({theme:e})=>e.click.button.group.typography.label.default,({theme:e})=>e.click.button.basic.space.y,({theme:e})=>e.click.button.basic.space.x,({theme:e})=>e.click.button.basic.space.group,({$fillWidth:e=!1})=>e?"flex: 1;":"",({theme:e})=>e.click.button.group.color.background.hover,({theme:e})=>e.click.button.group.typography.label.hover,({theme:e})=>e.click.button.group.typography.label.disabled,({theme:e,$active:t})=>e.click.button.group.color.background[t?"disabled-active":"disabled"],({theme:e})=>e.click.button.group.color.background.active,({theme:e})=>e.click.button.group.typography.label.active,({theme:e})=>e.click.button.group.color.background["disabled-active"],({theme:e,$type:t,$position:n})=>t==="borderless"?e.click.button.group.radii.all:n==="left"?jf:n==="right"?Mf:Sf),gn=({type:e="primary",iconLeft:t,iconRight:n,align:r="center",children:i,fillWidth:a,label:s,loading:l=!1,disabled:d,...f})=>o.jsxs(Ff,{$styleType:e,$align:r,$fillWidth:a,disabled:d||l,role:"button",...f,children:[t&&o.jsx(w4,{name:t,"aria-hidden":!0,size:"sm"}),s??i,n&&o.jsx(w4,{name:n,"aria-hidden":!0,size:"sm"}),l&&o.jsx(Ef,{children:o.jsx(re,{name:"loading-animated","data-testid":"click-ui-loading-icon","aria-label":"loading"})})]}),Ef=x.div.withConfig({componentId:"sc-1k4tz4c-0"})(["position:absolute;background-color:inherit;top:0;left:0;bottom:0;right:0;display:flex;align-content:center;justify-content:center;"]),Ff=x(xr).withConfig({componentId:"sc-1k4tz4c-1"})(["width:",";color:",";background-color:",";border:"," solid ",";font:",";position:relative;display:flex;align-items:center;justify-content:",";white-space:nowrap;&:hover{background-color:",";border:"," solid ",";transition:",";font:",";}&:active,&:focus{background-color:",";border:1px solid ",";font:",";}&:disabled,&:disabled:hover,&:disabled:active{background-color:",";color:",";border:"," solid ",";font:",";}"],({$fillWidth:e})=>e?"100%":"revert",({$styleType:e="primary",theme:t})=>t.click.button.basic.color[e].text.default,({$styleType:e="primary",theme:t})=>t.click.button.basic.color[e].background.default,({theme:e})=>e.click.button.stroke,({$styleType:e="primary",theme:t})=>t.click.button.basic.color[e].stroke.default,({theme:e})=>e.click.button.basic.typography.label.default,({$align:e})=>e==="left"?"flex-start":"center",({$styleType:e="primary",theme:t})=>t.click.button.basic.color[e].background.hover,({theme:e})=>e.click.button.stroke,({$styleType:e="primary",theme:t})=>t.click.button.basic.color[e].stroke.hover,({theme:e})=>e.transition.default,({theme:e})=>e.click.button.basic.typography.label.hover,({$styleType:e="primary",theme:t})=>t.click.button.basic.color[e].background.active,({$styleType:e="primary",theme:t})=>t.click.button.basic.color[e].stroke.active,({theme:e})=>e.click.button.basic.typography.label.active,({$styleType:e="primary",theme:t})=>t.click.button.basic.color[e].background.disabled,({$styleType:e="primary",theme:t})=>t.click.button.basic.color[e].text.disabled,({theme:e})=>e.click.button.stroke,({$styleType:e="primary",theme:t})=>t.click.button.basic.color[e].stroke.disabled,({theme:e})=>e.click.button.basic.typography.label.disabled),w4=x(re).withConfig({componentId:"sc-1k4tz4c-2"})(["height:",";width:",";svg{height:",";width:",";}"],({theme:e})=>e.click.button.basic.size.icon.all,({theme:e})=>e.click.button.basic.size.icon.all,({theme:e})=>e.click.button.basic.size.icon.all,({theme:e})=>e.click.button.basic.size.icon.all),g2=c.forwardRef(({size:e,family:t,type:n,color:r,children:i,...a},s)=>o.jsx(If,{ref:s,$color:r,$size:e,$family:t,as:n,...a,children:i})),If=x.div.withConfig({componentId:"sc-1bq7thb-0"})(["font:",";color:",";margin:0;padding:0;font-style:inherit;a,a:visited{color:",";cursor:pointer;}a:hover{color:",";}"],({$size:e="md",$family:t="product",theme:n})=>n.typography.styles[t].titles[e],({$color:e="default",theme:t})=>t.click.global.color.title[e],({$color:e="default",theme:t})=>t.click.global.color.title[e],({theme:e})=>e.click.global.color.title.muted),Of=c.forwardRef(({color:e,size:t,weight:n,className:r,children:i,component:a,...s},l)=>o.jsx(Hf,{as:a??"p",ref:l,$color:e,$size:t,$weight:n,className:r,...s,children:i})),Hf=x.p.withConfig({componentId:"sc-6r74pj-0"})(["font:",";color:",";margin:0;"],({$size:e="md",$weight:t="normal",theme:n})=>n.typography.styles.product.text[t][e],({$color:e="default",theme:t})=>t.click.global.color.text[e]),Kt=x(Of).withConfig({componentId:"sc-6r74pj-1"})([""]);Kt.displayName="Text";const Pf=x.div.withConfig({componentId:"sc-1drx130-0"})(["display:flex;justify-content:space-between;align-items:center;"]),Df=x.div.withConfig({componentId:"sc-1drx130-1"})(["display:flex;align-items:center;gap:",";h3,svg{color:",";}"],({theme:e})=>e.click.card.secondary.space.gap,({$disabled:e,theme:t})=>e==!0?t.click.global.color.text.muted:t.click.global.color.text.default),Tf=x.div.withConfig({componentId:"sc-1drx130-2"})(["display:flex;flex-direction:column;flex:1;"]),Af=x.a.withConfig({componentId:"sc-1drx130-3"})(["display:flex;align-items:center;color:",";text-decoration:none;"],({theme:e})=>e.click.card.secondary.color.link.default),Vf=x(re).withConfig({componentId:"sc-1drx130-4"})(["color:",";height:",";width:",";"],({theme:e})=>e.click.card.secondary.color.link.default,({theme:e})=>e.click.image.md.size.height,({theme:e})=>e.click.image.md.size.width),b2=x(Kt).withConfig({componentId:"sc-1drx130-5"})([""]),C2=x(Vf).withConfig({componentId:"sc-1drx130-6"})([""]),Zf=x.div.withConfig({componentId:"sc-1drx130-7"})(["background-color:",";border-radius:",";border:",";max-width:420px;min-width:320px;display:flex;flex-direction:column;padding:",";gap:",";box-shadow:",";&:hover,:focus{background-color:",";cursor:pointer;",",","{color:",";}}&[disabled],&[disabled]:hover,&[disabled]:active{background-color:",";color:",";border:1px solid ",";cursor:not-allowed;",",","{color:",";}}"],({theme:e})=>e.click.card.secondary.color.background.default,({theme:e})=>e.click.card.secondary.radii.all,({theme:e})=>`1px solid ${e.click.card.secondary.color.stroke.default}`,({theme:e})=>e.click.card.secondary.space.all,({theme:e})=>e.click.card.secondary.space.gap,({$hasShadow:e,theme:t})=>e?t.shadow[1]:"none",({theme:e})=>e.click.card.secondary.color.background.hover,b2,C2,({theme:e})=>e.click.card.secondary.color.link.hover,({theme:e})=>e.click.card.secondary.color.background.disabled,({theme:e})=>e.click.card.secondary.color.title.disabled,({theme:e})=>e.click.card.secondary.color.stroke.disabled,b2,C2,({theme:e})=>e.click.card.secondary.color.link.disabled),Nf=({title:e,icon:t,badgeState:n,badgeText:r="",hasShadow:i=!1,disabled:a=!1,description:s,infoUrl:l,infoText:d})=>o.jsxs(Zf,{$disabled:a,tabIndex:0,$hasShadow:i,children:[o.jsxs(Pf,{children:[o.jsxs(Df,{$disabled:a,children:[o.jsx(re,{name:t,size:"lg","area-hidden":""}),o.jsx(g2,{type:"h3",children:e})]}),r&&o.jsx(h2,{text:r,state:a==!0?"disabled":n})]}),o.jsx(Tf,{children:o.jsx(Kt,{color:"muted",children:s})}),(l||d)&&o.jsxs(Af,{href:a?void 0:l,as:a||!l||l.length===0?"div":"a",children:[o.jsx(b2,{children:d}),o.jsx(C2,{name:"chevron-right"})]})]}),Bf=x.div.withConfig({componentId:"sc-2dguvi-0"})(["background-color:",";border-radius:",";border:",";display:flex;width:100%;max-width:100%;text-align:",";flex-direction:column;padding:",";gap:",";box-shadow:",";&:hover,&:focus{background-color:",";cursor:pointer;button{background-color:",";border-color:",";&:active{background-color:",";border-color:",";}}}&:active{border-color:",";}&[disabled],&[disabled]:hover,&[disabled]:active{background-color:",";color:",";border:1px solid ",";cursor:not-allowed;button{background-color:",";border-color:",";&:active{background-color:",";border-color:",";}}}",""],({theme:e})=>e.click.card.primary.color.background.default,({theme:e})=>e.click.card.primary.radii.all,({theme:e})=>`1px solid ${e.click.card.primary.color.stroke.default}`,({$alignContent:e})=>e==="start"?"left":e==="end"?"right":"center",({$size:e="md",theme:t})=>`${t.click.card.primary.space[e].x} ${t.click.card.primary.space[e].y}`,({$size:e="md",theme:t})=>t.click.card.primary.space[e].gap,({$hasShadow:e,theme:t})=>e?t.shadow[1]:"none",({theme:e})=>e.click.card.secondary.color.background.hover,({theme:e})=>e.click.button.basic.color.primary.background.hover,({theme:e})=>e.click.button.basic.color.primary.stroke.hover,({theme:e})=>e.click.button.basic.color.primary.background.active,({theme:e})=>e.click.button.basic.color.primary.stroke.active,({theme:e})=>e.click.button.basic.color.primary.stroke.active,({theme:e})=>e.click.card.primary.color.background.disabled,({theme:e})=>e.click.card.primary.color.title.disabled,({theme:e})=>e.click.card.primary.color.stroke.disabled,({theme:e})=>e.click.button.basic.color.primary.background.disabled,({theme:e})=>e.click.button.basic.color.primary.stroke.disabled,({theme:e})=>e.click.button.basic.color.primary.background.disabled,({theme:e})=>e.click.button.basic.color.primary.stroke.disabled,({$isSelected:e,theme:t})=>e?`border-color: ${t.click.button.basic.color.primary.stroke.active};`:""),Uf=x.div.withConfig({componentId:"sc-2dguvi-1"})(["display:flex;flex-direction:column;align-items:",";gap:",";h3{color:",";}svg{height:",";width:",";}"],({$alignContent:e="center"})=>["start","end"].includes(e)?`flex-${e}`:e,({$size:e="md",theme:t})=>t.click.card.primary.space[e].gap,({$disabled:e,theme:t})=>e==!0?t.click.global.color.text.muted:t.click.global.color.text.default,({$size:e="md",theme:t})=>t.click.card.primary.size.icon[e].all,({$size:e="md",theme:t})=>t.click.card.primary.size.icon[e].all),Rf=x.div.withConfig({componentId:"sc-2dguvi-2"})(["width:100%;display:flex;flex-direction:column;align-self:",";gap:",";flex:1;"],({$alignContent:e="center"})=>["start","end"].includes(e)?`flex-${e}`:e,({$size:e="md",theme:t})=>t.click.card.primary.space[e].gap),Wf=({alignContent:e,title:t,icon:n,hasShadow:r=!1,description:i,infoUrl:a,infoText:s,size:l,disabled:d=!1,onButtonClick:f,isSelected:u,children:p,...h})=>{const g=C=>{typeof f=="function"&&f(C),a&&a.length>0&&window.open(a,"_blank")},b=a||typeof f=="function"?gn:"div";return o.jsxs(Bf,{$alignContent:e,$hasShadow:r,$size:l,$disabled:d,$isSelected:u,tabIndex:0,...h,children:[(n||t)&&o.jsxs(Uf,{$size:l,$disabled:d,$alignContent:e,children:[n&&o.jsx(re,{name:n,"aria-hidden":!0}),t&&o.jsx(g2,{type:"h3",children:t})]}),(i||p)&&o.jsxs(Rf,{$size:l,$alignContent:e,children:[i&&o.jsx(Kt,{color:"muted",children:i}),p]}),l=="sm"&&o.jsx(fi,{size:"sm"}),s&&o.jsx(b,{onClick:g,disabled:d,children:s})]})},zf=x.div.withConfig({componentId:"sc-1qnbjoa-0"})(["display:flex;flex-direction:column;align-items:center;width:fit-content;max-width:100%;gap:inherit;"]),E1=x.div.withConfig({componentId:"sc-1qnbjoa-1"})(["display:flex;flex-direction:column;align-self:center;gap:",";flex:1;"],({theme:e})=>e.click.card.horizontal.space.gap),Gf=x.div.withConfig({componentId:"sc-1qnbjoa-2"})(["display:inline-flex;width:100%;max-width:100%;align-items:center;justify-content:flex-start;",""],({theme:e,$color:t,$isSelected:n,$disabled:r})=>`
+  `),$f=({options:e,selected:t,fillWidth:n,onClick:r,type:i,...a})=>{const s=e.length-1,l=e.map(({value:d,label:f,...u},p)=>{const h=p===0?"left":p===s?"right":"center";return o.jsx(_f,{$active:d===t,$position:h,$fillWidth:n,$type:i,onClick:()=>r==null?void 0:r(d),role:"button",...u,children:f},d)});return o.jsx(Lf,{$fillWidth:n,$type:i,...a,children:l})},Lf=x.div.withConfig({componentId:"sc-ukgugp-0"})(["box-sizing:border-box;display:inline-flex;flex-direction:row;justify-content:center;align-items:center;padding:0px;gap:",";border:1px solid ",";background:",";border-radius:",";width:",";"],({theme:e,$type:t="default"})=>e.click.button.group.space.gap[t],({theme:e,$type:t="default"})=>e.click.button.group.color.panel.stroke[t],({theme:e})=>e.click.button.group.color.background.panel,({theme:e})=>e.click.button.group.radii.all,({$fillWidth:e})=>e?"100%":"auto"),yo="var(--click-button-button-group-radii-end)",jf=`${yo} 0px 0px ${yo}`,Mf=`0px ${yo} ${yo} 0px`,Sf="var(--click-button-button-group-radii-center)",_f=x.button.attrs(e=>({"aria-pressed":e.$active})).withConfig({componentId:"sc-ukgugp-1"})(["box-sizing:border-box;display:flex;flex-direction:row;justify-content:center;align-items:center;border:none;background:",";color:",";font:",";padding:"," ",";gap:",";"," cursor:pointer;&:hover{background:",";font:",";}&:disabled{cursor:not-allowed;font:",";background:",";}&:active,&:focus{background:",";font:",";&:disabled{background:",";}}border-radius:",";"],({$active:e,theme:t})=>e?t.click.button.group.color.background.active:t.click.button.group.color.background.default,({theme:e})=>e.click.button.group.color.text.default,({theme:e})=>e.click.button.group.typography.label.default,({theme:e})=>e.click.button.basic.space.y,({theme:e})=>e.click.button.basic.space.x,({theme:e})=>e.click.button.basic.space.group,({$fillWidth:e=!1})=>e?"flex: 1;":"",({theme:e})=>e.click.button.group.color.background.hover,({theme:e})=>e.click.button.group.typography.label.hover,({theme:e})=>e.click.button.group.typography.label.disabled,({theme:e,$active:t})=>e.click.button.group.color.background[t?"disabled-active":"disabled"],({theme:e})=>e.click.button.group.color.background.active,({theme:e})=>e.click.button.group.typography.label.active,({theme:e})=>e.click.button.group.color.background["disabled-active"],({theme:e,$type:t,$position:n})=>t==="borderless"?e.click.button.group.radii.all:n==="left"?jf:n==="right"?Mf:Sf),gn=({type:e="primary",iconLeft:t,iconRight:n,align:r="center",children:i,fillWidth:a,label:s,loading:l=!1,disabled:d,...f})=>o.jsxs(Ff,{$styleType:e,$align:r,$fillWidth:a,disabled:d||l,role:"button",...f,children:[t&&o.jsx(w4,{name:t,"aria-hidden":!0,size:"sm"}),s??i,n&&o.jsx(w4,{name:n,"aria-hidden":!0,size:"sm"}),l&&o.jsx(Ef,{children:o.jsx(re,{name:"loading-animated","data-testid":"click-ui-loading-icon","aria-label":"loading"})})]}),Ef=x.div.withConfig({componentId:"sc-1k4tz4c-0"})(["position:absolute;background-color:inherit;top:0;left:0;bottom:0;right:0;display:flex;align-content:center;justify-content:center;"]),Ff=x(xr).withConfig({componentId:"sc-1k4tz4c-1"})(["width:",";color:",";background-color:",";border:"," solid ",";font:",";position:relative;display:flex;align-items:center;justify-content:",";white-space:nowrap;&:hover{background-color:",";border:"," solid ",";transition:",";font:",";}&:active,&:focus{background-color:",";border:1px solid ",";font:",";}&:disabled,&:disabled:hover,&:disabled:active{background-color:",";color:",";border:"," solid ",";font:",";}"],({$fillWidth:e})=>e?"100%":"revert",({$styleType:e="primary",theme:t})=>t.click.button.basic.color[e].text.default,({$styleType:e="primary",theme:t})=>t.click.button.basic.color[e].background.default,({theme:e})=>e.click.button.stroke,({$styleType:e="primary",theme:t})=>t.click.button.basic.color[e].stroke.default,({theme:e})=>e.click.button.basic.typography.label.default,({$align:e})=>e==="left"?"flex-start":"center",({$styleType:e="primary",theme:t})=>t.click.button.basic.color[e].background.hover,({theme:e})=>e.click.button.stroke,({$styleType:e="primary",theme:t})=>t.click.button.basic.color[e].stroke.hover,({theme:e})=>e.transition.default,({theme:e})=>e.click.button.basic.typography.label.hover,({$styleType:e="primary",theme:t})=>t.click.button.basic.color[e].background.active,({$styleType:e="primary",theme:t})=>t.click.button.basic.color[e].stroke.active,({theme:e})=>e.click.button.basic.typography.label.active,({$styleType:e="primary",theme:t})=>t.click.button.basic.color[e].background.disabled,({$styleType:e="primary",theme:t})=>t.click.button.basic.color[e].text.disabled,({theme:e})=>e.click.button.stroke,({$styleType:e="primary",theme:t})=>t.click.button.basic.color[e].stroke.disabled,({theme:e})=>e.click.button.basic.typography.label.disabled),w4=x(re).withConfig({componentId:"sc-1k4tz4c-2"})(["height:",";width:",";svg{height:",";width:",";}"],({theme:e})=>e.click.button.basic.size.icon.all,({theme:e})=>e.click.button.basic.size.icon.all,({theme:e})=>e.click.button.basic.size.icon.all,({theme:e})=>e.click.button.basic.size.icon.all),g2=c.forwardRef(({size:e,family:t,type:n,color:r,children:i,...a},s)=>o.jsx(If,{ref:s,$color:r,$size:e,$family:t,as:n,...a,children:i})),If=x.div.withConfig({componentId:"sc-1bq7thb-0"})(["font:",";color:",";margin:0;padding:0;font-style:inherit;a,a:visited{color:",";cursor:pointer;}a:hover{color:",";}"],({$size:e="md",$family:t="product",theme:n})=>n.typography.styles[t].titles[e],({$color:e="default",theme:t})=>t.click.global.color.title[e],({$color:e="default",theme:t})=>t.click.global.color.title[e],({theme:e})=>e.click.global.color.title.muted),Of=c.forwardRef(({color:e,size:t,weight:n,className:r,children:i,component:a,...s},l)=>o.jsx(Hf,{as:a??"p",ref:l,$color:e,$size:t,$weight:n,className:r,...s,children:i})),Hf=x.p.withConfig({componentId:"sc-6r74pj-0"})(["font:",";color:",";margin:0;"],({$size:e="md",$weight:t="normal",theme:n})=>n.typography.styles.product.text[t][e],({$color:e="default",theme:t})=>t.click.global.color.text[e]),Kt=x(Of).withConfig({componentId:"sc-6r74pj-1"})([""]);Kt.displayName="Text";const Pf=x.div.withConfig({componentId:"sc-1drx130-0"})(["display:flex;justify-content:space-between;align-items:center;"]),Df=x.div.withConfig({componentId:"sc-1drx130-1"})(["display:flex;align-items:center;gap:",";h3,svg{color:",";}"],({theme:e})=>e.click.card.secondary.space.gap,({$disabled:e,theme:t})=>e==!0?t.click.global.color.text.muted:t.click.global.color.text.default),Tf=x.div.withConfig({componentId:"sc-1drx130-2"})(["display:flex;flex-direction:column;flex:1;"]),Af=x.a.withConfig({componentId:"sc-1drx130-3"})(["display:flex;align-items:center;color:",";text-decoration:none;"],({theme:e})=>e.click.card.secondary.color.link.default),Vf=x(re).withConfig({componentId:"sc-1drx130-4"})(["color:",";height:",";width:",";"],({theme:e})=>e.click.card.secondary.color.link.default,({theme:e})=>e.click.image.md.size.height,({theme:e})=>e.click.image.md.size.width),b2=x(Kt).withConfig({componentId:"sc-1drx130-5"})([""]),C2=x(Vf).withConfig({componentId:"sc-1drx130-6"})([""]),Zf=x.div.withConfig({componentId:"sc-1drx130-7"})(["background-color:",";border-radius:",";border:",";max-width:420px;min-width:320px;display:flex;flex-direction:column;padding:",";gap:",";box-shadow:",";&:hover,:focus{background-color:",";cursor:pointer;",",","{color:",";}}&[disabled],&[disabled]:hover,&[disabled]:active{background-color:",";color:",";border:1px solid ",";cursor:not-allowed;",",","{color:",";}}"],({theme:e})=>e.click.card.secondary.color.background.default,({theme:e})=>e.click.card.secondary.radii.all,({theme:e})=>`1px solid ${e.click.card.secondary.color.stroke.default}`,({theme:e})=>e.click.card.secondary.space.all,({theme:e})=>e.click.card.secondary.space.gap,({$hasShadow:e,theme:t})=>e?t.shadow[1]:"none",({theme:e})=>e.click.card.secondary.color.background.hover,b2,C2,({theme:e})=>e.click.card.secondary.color.link.hover,({theme:e})=>e.click.card.secondary.color.background.disabled,({theme:e})=>e.click.card.secondary.color.title.disabled,({theme:e})=>e.click.card.secondary.color.stroke.disabled,b2,C2,({theme:e})=>e.click.card.secondary.color.link.disabled),Nf=({title:e,icon:t,badgeState:n,badgeText:r="",hasShadow:i=!1,disabled:a=!1,description:s,infoUrl:l,infoText:d})=>o.jsxs(Zf,{$disabled:a,tabIndex:0,$hasShadow:i,children:[o.jsxs(Pf,{children:[o.jsxs(Df,{$disabled:a,children:[o.jsx(re,{name:t,size:"lg","area-hidden":""}),o.jsx(g2,{type:"h3",children:e})]}),r&&o.jsx(h2,{text:r,state:a==!0?"disabled":n})]}),o.jsx(Tf,{children:o.jsx(Kt,{color:"muted",children:s})}),(l||d)&&o.jsxs(Af,{href:a?void 0:l,as:a||!l||l.length===0?"div":"a",children:[o.jsx(b2,{children:d}),o.jsx(C2,{name:"chevron-right"})]})]}),Bf=x.div.withConfig({componentId:"sc-2dguvi-0"})(["background-color:",";border-radius:",";border:",";display:flex;width:100%;max-width:100%;text-align:",";flex-direction:column;padding:",";gap:",";box-shadow:",";&:hover,&:focus{background-color:",";cursor:pointer;button{background-color:",";border-color:",";&:active{background-color:",";border-color:",";}}}&:active{border-color:",";}&[disabled],&[disabled]:hover,&[disabled]:active{background-color:",";color:",";border:1px solid ",";cursor:not-allowed;button{background-color:",";border-color:",";&:active{background-color:",";border-color:",";}}}",""],({theme:e})=>e.click.card.primary.color.background.default,({theme:e})=>e.click.card.primary.radii.all,({theme:e})=>`1px solid ${e.click.card.primary.color.stroke.default}`,({$alignContent:e})=>e==="start"?"left":e==="end"?"right":"center",({$size:e="md",theme:t})=>`${t.click.card.primary.space[e].x} ${t.click.card.primary.space[e].y}`,({$size:e="md",theme:t})=>t.click.card.primary.space[e].gap,({$hasShadow:e,theme:t})=>e?t.shadow[1]:"none",({theme:e})=>e.click.card.secondary.color.background.hover,({theme:e})=>e.click.button.basic.color.primary.background.hover,({theme:e})=>e.click.button.basic.color.primary.stroke.hover,({theme:e})=>e.click.button.basic.color.primary.background.active,({theme:e})=>e.click.button.basic.color.primary.stroke.active,({theme:e})=>e.click.button.basic.color.primary.stroke.active,({theme:e})=>e.click.card.primary.color.background.disabled,({theme:e})=>e.click.card.primary.color.title.disabled,({theme:e})=>e.click.card.primary.color.stroke.disabled,({theme:e})=>e.click.button.basic.color.primary.background.disabled,({theme:e})=>e.click.button.basic.color.primary.stroke.disabled,({theme:e})=>e.click.button.basic.color.primary.background.disabled,({theme:e})=>e.click.button.basic.color.primary.stroke.disabled,({$isSelected:e,theme:t})=>e?`border-color: ${t.click.button.basic.color.primary.stroke.active};`:""),Uf=x.div.withConfig({componentId:"sc-2dguvi-1"})(["display:flex;flex-direction:column;align-items:",";gap:",";h3{color:",";}svg{height:",";width:",";}"],({$alignContent:e="center"})=>["start","end"].includes(e)?`flex-${e}`:e,({$size:e="md",theme:t})=>t.click.card.primary.space[e].gap,({$disabled:e,theme:t})=>e==!0?t.click.global.color.text.muted:t.click.global.color.text.default,({$size:e="md",theme:t})=>t.click.card.primary.size.icon[e].all,({$size:e="md",theme:t})=>t.click.card.primary.size.icon[e].all),Rf=x.div.withConfig({componentId:"sc-2dguvi-2"})(["width:100%;display:flex;flex-direction:column;align-self:",";gap:",";flex:1;"],({$alignContent:e="center"})=>["start","end"].includes(e)?`flex-${e}`:e,({$size:e="md",theme:t})=>t.click.card.primary.space[e].gap),Wf=({alignContent:e,title:t,icon:n,hasShadow:r=!1,description:i,infoUrl:a,infoText:s,size:l,disabled:d=!1,onButtonClick:f,isSelected:u,children:p,...h})=>{const g=C=>{typeof f=="function"&&f(C),a&&a.length>0&&window.open(a,"_blank")},b=a||typeof f=="function"?gn:"div";return o.jsxs(Bf,{$alignContent:e,$hasShadow:r,$size:l,$disabled:d,$isSelected:u,tabIndex:0,...h,children:[(n||t)&&o.jsxs(Uf,{$size:l,$disabled:d,$alignContent:e,children:[n&&o.jsx(re,{name:n,"aria-hidden":!0}),t&&o.jsx(g2,{type:"h3",children:t})]}),(i||p)&&o.jsxs(Rf,{$size:l,$alignContent:e,children:[i&&o.jsx(Kt,{color:"muted",children:i}),p]}),l=="sm"&&o.jsx(fi,{size:"sm"}),s&&o.jsx(b,{onClick:g,disabled:d,children:s})]})},zf=x.div.withConfig({componentId:"sc-1qnbjoa-0"})(["display:flex;flex-direction:column;align-items:center;width:fit-content;max-width:100%;gap:inherit;"]),E1=x.div.withConfig({componentId:"sc-1qnbjoa-1"})(["display:flex;flex-direction:column;align-self:center;gap:",";flex:1;"],({theme:e})=>e.click.card.horizontal.space.gap),Gf=x.div.withConfig({componentId:"sc-1qnbjoa-2"})(["display:inline-flex;width:100%;max-width:100%;align-items:center;justify-content:flex-start;",""],({theme:e,$color:t,$isSelected:n,$disabled:r})=>`
     background: ${e.click.card.horizontal[t].color.background.default};
     color: ${e.click.card.horizontal[t].color.title.default};
     border-radius: ${e.click.card.horizontal.radii.all};

package/dist/components/Icon/types.d.ts

@@ -4,7 +4,7 @@ import { FlagName, FlagProps } from "../icons/Flags";
 import { LogoName } from "../Logos/types";
 import { PaymentName, PaymentProps } from "../icons/Payments";
 export type IconSize = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
-export declare const ICON_NAMES: readonly ["activity", "alarm", "arrow-down", "arrow-right", "arrow-triangle", "arrow-directions", "arrow-up", "auth-app", "auth-sms", "backups", "bar-chart", "bell", "beta", "blog", "book", "brackets", "briefcase", "building", "burger-menu", "cards", "cell-tower", "chat", "check", "check-in-circle", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "circle", "clock", "cloud", "code", "code-in-square", "connect", "connect-alt", "console", "copy", "cross", "credit-card", "data", "database", "disk", "display", "document", "dot", "dots-horizontal", "dots-triangle", "dots-vertical", "dots-vertical-double", "download", "download-in-circle", "email", "empty", "eye", "eye-closed", "filter", "fire", "flag", "flask", "folder-closed", "folder-open", "gear", "gift", "git-merge", "history", "horizontal-loading", "home", "http", "info-in-circle", "information", "insert-row", "integrations", "key", "keys", "lifebuoy", "light-bulb", "lightening", "line-in-circle", "loading", "loading-animated", "metrics", "metrics-alt", "no-cloud", "payment", "pencil", "pie-chart", "play", "play-in-circle", "plus", "popout", "puzzle-piece", "query", "question", "refresh", "rocket", "search", "secure", "server", "services", "settings", "share", "share-arrow", "share-network", "slide-in", "slide-out", "sort-alt", "sort", "sparkle", "speaker", "speed", "star", "support", "table", "taxi", "trash", "upload", "url", "user", "users", "warning", "waves"];
+export declare const ICON_NAMES: readonly ["activity", "alarm", "arrow-down", "arrow-right", "arrow-triangle", "arrow-directions", "arrow-up", "auth-app", "auth-sms", "backups", "bar-chart", "bell", "beta", "blog", "book", "brackets", "briefcase", "building", "burger-menu", "cards", "cell-tower", "chat", "check", "check-in-circle", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "circle", "clock", "cloud", "code", "code-in-square", "connect", "connect-alt", "console", "copy", "cross", "credit-card", "data", "database", "disk", "display", "document", "dot", "dots-horizontal", "dots-triangle", "dots-vertical", "dots-vertical-double", "download", "download-in-circle", "email", "empty", "enter", "eye", "eye-closed", "filter", "fire", "flag", "flask", "folder-closed", "folder-open", "gear", "gift", "git-merge", "history", "horizontal-loading", "home", "http", "info-in-circle", "information", "insert-row", "integrations", "key", "keys", "lifebuoy", "light-bulb", "lightening", "line-in-circle", "loading", "loading-animated", "metrics", "metrics-alt", "no-cloud", "payment", "pencil", "pie-chart", "play", "play-in-circle", "plus", "popout", "puzzle-piece", "query", "question", "refresh", "rocket", "search", "secure", "server", "services", "settings", "share", "share-arrow", "share-network", "slide-in", "slide-out", "sort-alt", "sort", "sparkle", "speaker", "speed", "star", "support", "table", "taxi", "trash", "upload", "url", "user", "users", "warning", "waves"];
 export type IconName = (typeof ICON_NAMES)[number];
 export interface IconProps extends SVGAttributes<HTMLOrSVGElement> {
     name: IconName;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clickhouse/click-ui",
-  "version": "0.0.91",
+  "version": "0.0.92",
   "description": "Official ClickHouse design system react library",
   "type": "module",
   "license": "Apache-2.0",