@clickhouse/click-ui 0.0.88 → 0.0.89

package/dist/click-ui.es.js

@@ -6122,6 +6122,9 @@ const z4 = Sd, G4 = A4, K4 = Fd, q4 = Od, Y4 = Pd, X4 = Dd, J4 = Ad, Q4 = Zd, e5
     }
     &:visited {
       color: ${e.click.genericMenu.item.color.text.default};
+      a {
+        color: ${e.click.genericMenu.item.color.text.default}; 
+      }
     }
   `), i2 = (e) => /* @__PURE__ */ o.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "10", viewBox: "0 0 30 10", fill: "none", ...e, children: /* @__PURE__ */ o.jsx("path", { d: "M0 -1L15 9L30 -1", strokeWidth: "1.5", strokeLinejoin: "round" }) }), tn = (e) => (t) => {
   e.forEach((n) => {
@@ -10663,7 +10666,7 @@ const Ig = k.div.withConfig({
   ...h
 }) => /* @__PURE__ */ o.jsx(Pg, { $alignItems: e, $fillWidth: n, $gapSize: r, $grow: i, $shrink: a, $isResponsive: s, $justifyContent: l, $maxWidth: c, $minWidth: d, $orientation: f, $paddingSize: u, $wrap: p, "data-testid": "container", ...h, children: t }), Pg = k.div.withConfig({
   componentId: "sc-bcplth-0"
-})(["display:flex;flex-grow:", ";flex-shrink:", ";flex-wrap:", ";gap:", ";max-width:", ";min-width:", ";padding:", ";background-color:", ";width:", ";flex-direction:", ";align-items:", ";justify-content:", ";@media (max-width:", "){width:", ";flex-direction:", ";}"], ({
+})(["display:flex;flex-grow:", ";flex-shrink:", ";flex-wrap:", ";gap:", ";max-width:", ";min-width:", ";padding:", ";width:", ";flex-direction:", ";align-items:", ";justify-content:", ";@media (max-width:", "){width:", ";flex-direction:", ";}"], ({
   $grow: e = "1"
 }) => e === "1" ? "1" : `${e}`, ({
   $shrink: e = "0"
@@ -10680,8 +10683,6 @@ const Ig = k.div.withConfig({
   theme: e,
   $paddingSize: t
 }) => e.click.container.space[t], ({
-  theme: e
-}) => e.click.global.color.background.muted, ({
   $fillWidth: e = !0
 }) => e === !0 ? "100%" : "auto", ({
   $orientation: e = "horizontal"

package/dist/click-ui.umd.js

@@ -218,6 +218,9 @@ Check the top-level render call using <`+G+">.")}return A}}function yl(k,A){{if(
     }
     &:visited {
       color: ${e.click.genericMenu.item.color.text.default};
+      a {
+        color: ${e.click.genericMenu.item.color.text.default}; 
+      }
     }
   `),mo=e=>o.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"10",viewBox:"0 0 30 10",fill:"none",...e,children:o.jsx("path",{d:"M0 -1L15 9L30 -1",strokeWidth:"1.5",strokeLinejoin:"round"})}),_1=e=>t=>{e.forEach(n=>{typeof n=="function"?n(t):n!=null&&(n.current=t)})},E9=x.div.withConfig({componentId:"sc-1ibz5fp-0"})(["display:inline-block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;justify-content:flex-start;width:100%;width:-webkit-fill-available;width:fill-available;width:stretch;& > *:not(button){overflow:hidden;text-overflow:ellipsis;}"]),K3=c.forwardRef(({component:e,...t},n)=>o.jsx(E9,{as:e??"div",ref:_1([n,r=>{r&&r.scrollWidth>r.clientWidth&&(r.title=r.innerText)}]),...t})),F9=x.div.withConfig({componentId:"sc-1likhxd-0"})(["display:flex;align-items:center;justify-content:flex-start;width:100%;width:-webkit-fill-available;width:fill-available;width:stretch;gap:",";"],({theme:e})=>e.click.sidebar.navigation.item.default.space.gap),ht=({icon:e,iconDir:t="start",size:n="sm",width:r,height:i,children:a,...s})=>o.jsxs(F9,{...s,children:[e&&t==="start"&&o.jsx(oe,{name:e,size:n,width:r,height:i}),o.jsx(K3,{children:a}),e&&t==="end"&&o.jsx(oe,{name:e,size:n,width:r,height:i})]}),Ke=e=>o.jsx(m9,{...e}),q3=x(cn).withConfig({componentId:"sc-18bhwbw-0"})(['position:relative;display:flex;&[data-state="open"]{',"}"],({theme:e})=>`
       font: ${e.click.genericMenu.item.typography.label.hover};
@@ -448,7 +451,7 @@ https://github.com/highlightjs/highlight.js/issues/2277`),fe=F,W=R);const ie={co
     gap:  0.625rem;
     top: ${e.click.codeblock.space.y};
     right: ${e.click.codeblock.space.x};
-  `),Qp=({children:e,language:t,theme:n,showLineNumbers:r,showWrapButton:i=!1,wrapLines:a=!1,onCopy:s,onCopyError:l,...d})=>{const[f,u]=c.useState(!1),[p,h]=c.useState(!1),[g,b]=c.useState(a),C=Wp(n),v=async()=>{try{await navigator.clipboard.writeText(e),typeof s=="function"&&s(e),u(!0),setTimeout(()=>u(!1),2e3)}catch(y){let j="Unable to copy code";y instanceof Error&&(j=y.message),h(!0),typeof l=="function"&&l(j),setTimeout(()=>h(!1),2e3)}},m=()=>{b(y=>!y)},w=y=>o.jsx(Xp,{...y});return o.jsxs(qp,{$theme:n,...d,children:[o.jsxs(Jp,{children:[i&&o.jsx(o5,{as:mt,$copied:!1,$error:!1,icon:"document",onClick:m}),o.jsx(o5,{as:mt,$copied:f,$error:p,icon:f?"check":p?"warning":"copy",onClick:v})]}),o.jsx(Yp,{language:t,style:C,CodeTag:w,renderer:({rows:y,stylesheet:j,useInlineStyles:S})=>y.map((L,$)=>{const M=L.children,_=M==null?void 0:M.shift();return _&&(L.children=[_,{children:M,properties:{className:[]},tagName:"span",type:"element"}]),x2({node:L,stylesheet:j,useInlineStyles:S,key:$})}),showLineNumbers:r,wrapLines:g||a,wrapLongLines:g||a,children:e})]})},eh=({alignItems:e="center",children:t,fillWidth:n=!1,gap:r="none",grow:i="1",shrink:a="0",isResponsive:s,justifyContent:l="start",maxWidth:d,minWidth:f,orientation:u="horizontal",padding:p="none",wrap:h="nowrap",...g})=>o.jsx(th,{$alignItems:e,$fillWidth:n,$gapSize:r,$grow:i,$shrink:a,$isResponsive:s,$justifyContent:l,$maxWidth:d,$minWidth:f,$orientation:u,$paddingSize:p,$wrap:h,"data-testid":"container",...g,children:t}),th=x.div.withConfig({componentId:"sc-bcplth-0"})(["display:flex;flex-grow:",";flex-shrink:",";flex-wrap:",";gap:",";max-width:",";min-width:",";padding:",";background-color:",";width:",";flex-direction:",";align-items:",";justify-content:",";@media (max-width:","){width:",";flex-direction:",";}"],({$grow:e="1"})=>e==="1"?"1":`${e}`,({$shrink:e="0"})=>e==="0"?"0":`${e}`,({$wrap:e="nowrap"})=>e==="nowrap"?"nowrap":`${e}`,({theme:e,$gapSize:t})=>e.click.container.gap[t],({$maxWidth:e="100%"})=>e===""?"none":`${e}`,({$minWidth:e="auto"})=>e===""?"none":`${e}`,({theme:e,$paddingSize:t})=>e.click.container.space[t],({theme:e})=>e.click.global.color.background.muted,({$fillWidth:e=!0})=>e===!0?"100%":"auto",({$orientation:e="horizontal"})=>e==="horizontal"?"row":"column",({$alignItems:e="center"})=>e==="center"?"center":`${e}`,({$justifyContent:e="left"})=>e==="start"?"start":`${e}`,({theme:e})=>e.breakpoint.sizes.md,({$isResponsive:e=!0,$fillWidth:t=!0})=>e===!0||t===!0?"100%":"auto",({$isResponsive:e=!0})=>e===!0?"column":"auto"),r5="Dialog",[i5,KS]=Te(r5),[nh,gt]=i5(r5),a5=e=>{const{__scopeDialog:t,children:n,open:r,defaultOpen:i,onOpenChange:a,modal:s=!0}=e,l=c.useRef(null),d=c.useRef(null),[f=!1,u]=Be({prop:r,defaultProp:i,onChange:a});return c.createElement(nh,{scope:t,triggerRef:l,contentRef:d,contentId:Je(),titleId:Je(),descriptionId:Je(),open:f,onOpenChange:u,onOpenToggle:c.useCallback(()=>u(p=>!p),[u]),modal:s},n)},oh="DialogTrigger",s5=c.forwardRef((e,t)=>{const{__scopeDialog:n,...r}=e,i=gt(oh,n),a=me(t,i.triggerRef);return c.createElement(re.button,E({type:"button","aria-haspopup":"dialog","aria-expanded":i.open,"aria-controls":i.contentId,"data-state":O2(i.open)},r,{ref:a,onClick:Z(e.onClick,i.onOpenToggle)}))}),l5="DialogPortal",[rh,c5]=i5(l5,{forceMount:void 0}),d5=e=>{const{__scopeDialog:t,forceMount:n,children:r,container:i}=e,a=gt(l5,t);return c.createElement(rh,{scope:t,forceMount:n},c.Children.map(r,s=>c.createElement(Ae,{present:n||a.open},c.createElement($1,{asChild:!0,container:i},s))))},I2="DialogOverlay",f5=c.forwardRef((e,t)=>{const n=c5(I2,e.__scopeDialog),{forceMount:r=n.forceMount,...i}=e,a=gt(I2,e.__scopeDialog);return a.modal?c.createElement(Ae,{present:r||a.open},c.createElement(ih,E({},i,{ref:t}))):null}),ih=c.forwardRef((e,t)=>{const{__scopeDialog:n,...r}=e,i=gt(I2,n);return c.createElement(Kr,{as:r1,allowPinchZoom:!0,shards:[i.contentRef]},c.createElement(re.div,E({"data-state":O2(i.open)},r,{ref:t,style:{pointerEvents:"auto",...r.style}})))}),vn="DialogContent",u5=c.forwardRef((e,t)=>{const n=c5(vn,e.__scopeDialog),{forceMount:r=n.forceMount,...i}=e,a=gt(vn,e.__scopeDialog);return c.createElement(Ae,{present:r||a.open},a.modal?c.createElement(ah,E({},i,{ref:t})):c.createElement(sh,E({},i,{ref:t})))}),ah=c.forwardRef((e,t)=>{const n=gt(vn,e.__scopeDialog),r=c.useRef(null),i=me(t,n.contentRef,r);return c.useEffect(()=>{const a=r.current;if(a)return Rr(a)},[]),c.createElement(p5,E({},e,{ref:i,trapFocus:n.open,disableOutsidePointerEvents:!0,onCloseAutoFocus:Z(e.onCloseAutoFocus,a=>{var s;a.preventDefault(),(s=n.triggerRef.current)===null||s===void 0||s.focus()}),onPointerDownOutside:Z(e.onPointerDownOutside,a=>{const s=a.detail.originalEvent,l=s.button===0&&s.ctrlKey===!0;(s.button===2||l)&&a.preventDefault()}),onFocusOutside:Z(e.onFocusOutside,a=>a.preventDefault())}))}),sh=c.forwardRef((e,t)=>{const n=gt(vn,e.__scopeDialog),r=c.useRef(!1),i=c.useRef(!1);return c.createElement(p5,E({},e,{ref:t,trapFocus:!1,disableOutsidePointerEvents:!1,onCloseAutoFocus:a=>{var s;if((s=e.onCloseAutoFocus)===null||s===void 0||s.call(e,a),!a.defaultPrevented){var l;r.current||(l=n.triggerRef.current)===null||l===void 0||l.focus(),a.preventDefault()}r.current=!1,i.current=!1},onInteractOutside:a=>{var s,l;(s=e.onInteractOutside)===null||s===void 0||s.call(e,a),a.defaultPrevented||(r.current=!0,a.detail.originalEvent.type==="pointerdown"&&(i.current=!0));const d=a.target;((l=n.triggerRef.current)===null||l===void 0?void 0:l.contains(d))&&a.preventDefault(),a.detail.originalEvent.type==="focusin"&&i.current&&a.preventDefault()}}))}),p5=c.forwardRef((e,t)=>{const{__scopeDialog:n,trapFocus:r,onOpenAutoFocus:i,onCloseAutoFocus:a,...s}=e,l=gt(vn,n),d=c.useRef(null),f=me(t,d);return jr(),c.createElement(c.Fragment,null,c.createElement(_r,{asChild:!0,loop:!0,trapped:r,onMountAutoFocus:i,onUnmountAutoFocus:a},c.createElement(m1,E({role:"dialog",id:l.contentId,"aria-describedby":l.descriptionId,"aria-labelledby":l.titleId,"data-state":O2(l.open)},s,{ref:f,onDismiss:()=>l.onOpenChange(!1)}))),!1)}),lh="DialogTitle",ch=c.forwardRef((e,t)=>{const{__scopeDialog:n,...r}=e,i=gt(lh,n);return c.createElement(re.h2,E({id:i.titleId},r,{ref:t}))}),dh="DialogDescription",fh=c.forwardRef((e,t)=>{const{__scopeDialog:n,...r}=e,i=gt(dh,n);return c.createElement(re.p,E({id:i.descriptionId},r,{ref:t}))}),uh="DialogClose",Eo=c.forwardRef((e,t)=>{const{__scopeDialog:n,...r}=e,i=gt(uh,n);return c.createElement(re.button,E({type:"button"},r,{ref:t,onClick:Z(e.onClick,()=>i.onOpenChange(!1))}))});function O2(e){return e?"open":"closed"}const ph=a5,hh=s5,gh=d5,bh=f5,Ch=u5,h5=Eo,Jt=({children:e,...t})=>o.jsx(ph,{...t,children:e}),vh=x(hh).withConfig({componentId:"sc-1wr6otn-0"})(["width:fit-content;background:transparent;border:none;cursor:pointer;"]),g5=({children:e,...t})=>o.jsx(vh,{...t,children:e});g5.displayName="DialogTrigger",Jt.Trigger=g5;const b5=({label:e="Close",type:t="secondary",...n})=>o.jsx(h5,{asChild:!0,children:o.jsx(hn,{type:t,label:e,...n})});b5.displayName="DialogClose",Jt.Close=b5;const mh=x.keyframes({"0%":{opacity:0},"100%":{opacity:1}}),xh=x.keyframes({"0%":{opacity:0,transform:"translate(-50%, -48%) scale(.96)"},"100%":{opacity:1,transform:"translate(-50%, -50%) scale(1)"}}),wh=x(bh).withConfig({componentId:"sc-1wr6otn-1"})(["background-color:",";position:fixed;inset:0;animation:"," 150ms cubic-bezier(0.16,1,0.3,1);"],({theme:e})=>e.click.dialog.color.opaqueBackground.default,mh),kh=x(Ch).withConfig({componentId:"sc-1wr6otn-2"})(["background:",";border-radius:",";padding:"," ",";box-shadow:",";border:1px solid ",";width:75%;max-width:670px;position:fixed;top:50%;left:50%;max-height:75%;overflow:auto;transform:translate(-50%,-50%);animation:"," 150ms cubic-bezier(0.16,1,0.3,1);outline:none;"],({theme:e})=>e.click.dialog.color.background.default,({theme:e})=>e.click.dialog.radii.all,({theme:e})=>e.click.dialog.space.y,({theme:e})=>e.click.dialog.space.x,({theme:e})=>e.click.dialog.shadow.default,({theme:e})=>e.click.global.color.stroke.default,xh),yh=x.div.withConfig({componentId:"sc-1wr6otn-3"})(["display:flex;justify-content:space-between;align-items:center;min-height:",";"],({theme:e})=>e.sizes[9]),$h=x.h2.withConfig({componentId:"sc-1wr6otn-4"})(["font:",";padding:0;margin:0;"],({theme:e})=>e.click.dialog.typography.title.default),Lh=({onClose:e})=>o.jsx(h5,{asChild:!0,children:o.jsx(vr,{onClick:e,children:o.jsx(oe,{name:"cross",size:"lg"})})}),C5=({title:e,children:t,showClose:n,onClose:r,forceMount:i,container:a,showOverlay:s=!0,...l})=>o.jsxs(gh,{forceMount:i,container:a,children:[s&&o.jsx(wh,{}),o.jsxs(kh,{...l,children:[o.jsxs(yh,{children:[o.jsx($h,{children:e}),n&&o.jsx(Lh,{onClose:r})]}),o.jsx(fi,{size:"sm"}),t]})]});C5.displayName="DialogContent",Jt.Content=C5;const jh=x.div.withConfig({componentId:"sc-6eozxy-0"})(["display:flex;justify-content:flex-end;gap:",";"],e=>e.theme.click.dialog.space.gap),Mh=({open:e,onCancel:t,title:n,message:r,loading:i,primaryActionType:a="primary",primaryActionLabel:s="Confirm",secondaryActionLabel:l="Cancel",onConfirm:d,children:f,showClose:u})=>{if(f&&r)throw new Error("You can't pass children and message props at the same time");return o.jsx(Jt,{open:e,onOpenChange:p=>{!p&&t&&t()},children:o.jsxs(Jt.Content,{title:n,showClose:u,children:[f||o.jsx(Kt,{children:r}),o.jsx(g1,{size:"xl"}),o.jsxs(jh,{children:[o.jsx(Jt.Close,{label:l}),o.jsx(Jt.Close,{loading:!!i,disabled:!!i,type:a,label:s,onClick:()=>{d&&d()}})]})]})})},Qt=({modal:e=!1,...t})=>o.jsx(a5,{modal:e,...t}),v5=({children:e,...t})=>o.jsx(s5,{asChild:!0,...t,children:o.jsx("div",{children:e})});v5.displayName="Flyout.Trigger",Qt.Trigger=v5;const Sh=x.keyframes({"0%":{maxWidth:0,minWidth:0},"100%":{maxWidth:"fit-content",minWidth:"var(--flyout-width, 100%)"}}),_h=x(u5).withConfig({componentId:"sc-1vtv6sf-0"})(["display:flex;flex-direction:column;align-items:center;overflow:hidden;flex:1;top:0;right:0;bottom:0;width:100%;--flyout-width:",";animation:"," 500ms cubic-bezier(0.16,1,0.3,1) forwards;",""],({theme:e,$size:t="default"})=>e.click.flyout.size[t].width,Sh,({theme:e,$strategy:t})=>`
+  `),Qp=({children:e,language:t,theme:n,showLineNumbers:r,showWrapButton:i=!1,wrapLines:a=!1,onCopy:s,onCopyError:l,...d})=>{const[f,u]=c.useState(!1),[p,h]=c.useState(!1),[g,b]=c.useState(a),C=Wp(n),v=async()=>{try{await navigator.clipboard.writeText(e),typeof s=="function"&&s(e),u(!0),setTimeout(()=>u(!1),2e3)}catch(y){let j="Unable to copy code";y instanceof Error&&(j=y.message),h(!0),typeof l=="function"&&l(j),setTimeout(()=>h(!1),2e3)}},m=()=>{b(y=>!y)},w=y=>o.jsx(Xp,{...y});return o.jsxs(qp,{$theme:n,...d,children:[o.jsxs(Jp,{children:[i&&o.jsx(o5,{as:mt,$copied:!1,$error:!1,icon:"document",onClick:m}),o.jsx(o5,{as:mt,$copied:f,$error:p,icon:f?"check":p?"warning":"copy",onClick:v})]}),o.jsx(Yp,{language:t,style:C,CodeTag:w,renderer:({rows:y,stylesheet:j,useInlineStyles:S})=>y.map((L,$)=>{const M=L.children,_=M==null?void 0:M.shift();return _&&(L.children=[_,{children:M,properties:{className:[]},tagName:"span",type:"element"}]),x2({node:L,stylesheet:j,useInlineStyles:S,key:$})}),showLineNumbers:r,wrapLines:g||a,wrapLongLines:g||a,children:e})]})},eh=({alignItems:e="center",children:t,fillWidth:n=!1,gap:r="none",grow:i="1",shrink:a="0",isResponsive:s,justifyContent:l="start",maxWidth:d,minWidth:f,orientation:u="horizontal",padding:p="none",wrap:h="nowrap",...g})=>o.jsx(th,{$alignItems:e,$fillWidth:n,$gapSize:r,$grow:i,$shrink:a,$isResponsive:s,$justifyContent:l,$maxWidth:d,$minWidth:f,$orientation:u,$paddingSize:p,$wrap:h,"data-testid":"container",...g,children:t}),th=x.div.withConfig({componentId:"sc-bcplth-0"})(["display:flex;flex-grow:",";flex-shrink:",";flex-wrap:",";gap:",";max-width:",";min-width:",";padding:",";width:",";flex-direction:",";align-items:",";justify-content:",";@media (max-width:","){width:",";flex-direction:",";}"],({$grow:e="1"})=>e==="1"?"1":`${e}`,({$shrink:e="0"})=>e==="0"?"0":`${e}`,({$wrap:e="nowrap"})=>e==="nowrap"?"nowrap":`${e}`,({theme:e,$gapSize:t})=>e.click.container.gap[t],({$maxWidth:e="100%"})=>e===""?"none":`${e}`,({$minWidth:e="auto"})=>e===""?"none":`${e}`,({theme:e,$paddingSize:t})=>e.click.container.space[t],({$fillWidth:e=!0})=>e===!0?"100%":"auto",({$orientation:e="horizontal"})=>e==="horizontal"?"row":"column",({$alignItems:e="center"})=>e==="center"?"center":`${e}`,({$justifyContent:e="left"})=>e==="start"?"start":`${e}`,({theme:e})=>e.breakpoint.sizes.md,({$isResponsive:e=!0,$fillWidth:t=!0})=>e===!0||t===!0?"100%":"auto",({$isResponsive:e=!0})=>e===!0?"column":"auto"),r5="Dialog",[i5,KS]=Te(r5),[nh,gt]=i5(r5),a5=e=>{const{__scopeDialog:t,children:n,open:r,defaultOpen:i,onOpenChange:a,modal:s=!0}=e,l=c.useRef(null),d=c.useRef(null),[f=!1,u]=Be({prop:r,defaultProp:i,onChange:a});return c.createElement(nh,{scope:t,triggerRef:l,contentRef:d,contentId:Je(),titleId:Je(),descriptionId:Je(),open:f,onOpenChange:u,onOpenToggle:c.useCallback(()=>u(p=>!p),[u]),modal:s},n)},oh="DialogTrigger",s5=c.forwardRef((e,t)=>{const{__scopeDialog:n,...r}=e,i=gt(oh,n),a=me(t,i.triggerRef);return c.createElement(re.button,E({type:"button","aria-haspopup":"dialog","aria-expanded":i.open,"aria-controls":i.contentId,"data-state":O2(i.open)},r,{ref:a,onClick:Z(e.onClick,i.onOpenToggle)}))}),l5="DialogPortal",[rh,c5]=i5(l5,{forceMount:void 0}),d5=e=>{const{__scopeDialog:t,forceMount:n,children:r,container:i}=e,a=gt(l5,t);return c.createElement(rh,{scope:t,forceMount:n},c.Children.map(r,s=>c.createElement(Ae,{present:n||a.open},c.createElement($1,{asChild:!0,container:i},s))))},I2="DialogOverlay",f5=c.forwardRef((e,t)=>{const n=c5(I2,e.__scopeDialog),{forceMount:r=n.forceMount,...i}=e,a=gt(I2,e.__scopeDialog);return a.modal?c.createElement(Ae,{present:r||a.open},c.createElement(ih,E({},i,{ref:t}))):null}),ih=c.forwardRef((e,t)=>{const{__scopeDialog:n,...r}=e,i=gt(I2,n);return c.createElement(Kr,{as:r1,allowPinchZoom:!0,shards:[i.contentRef]},c.createElement(re.div,E({"data-state":O2(i.open)},r,{ref:t,style:{pointerEvents:"auto",...r.style}})))}),vn="DialogContent",u5=c.forwardRef((e,t)=>{const n=c5(vn,e.__scopeDialog),{forceMount:r=n.forceMount,...i}=e,a=gt(vn,e.__scopeDialog);return c.createElement(Ae,{present:r||a.open},a.modal?c.createElement(ah,E({},i,{ref:t})):c.createElement(sh,E({},i,{ref:t})))}),ah=c.forwardRef((e,t)=>{const n=gt(vn,e.__scopeDialog),r=c.useRef(null),i=me(t,n.contentRef,r);return c.useEffect(()=>{const a=r.current;if(a)return Rr(a)},[]),c.createElement(p5,E({},e,{ref:i,trapFocus:n.open,disableOutsidePointerEvents:!0,onCloseAutoFocus:Z(e.onCloseAutoFocus,a=>{var s;a.preventDefault(),(s=n.triggerRef.current)===null||s===void 0||s.focus()}),onPointerDownOutside:Z(e.onPointerDownOutside,a=>{const s=a.detail.originalEvent,l=s.button===0&&s.ctrlKey===!0;(s.button===2||l)&&a.preventDefault()}),onFocusOutside:Z(e.onFocusOutside,a=>a.preventDefault())}))}),sh=c.forwardRef((e,t)=>{const n=gt(vn,e.__scopeDialog),r=c.useRef(!1),i=c.useRef(!1);return c.createElement(p5,E({},e,{ref:t,trapFocus:!1,disableOutsidePointerEvents:!1,onCloseAutoFocus:a=>{var s;if((s=e.onCloseAutoFocus)===null||s===void 0||s.call(e,a),!a.defaultPrevented){var l;r.current||(l=n.triggerRef.current)===null||l===void 0||l.focus(),a.preventDefault()}r.current=!1,i.current=!1},onInteractOutside:a=>{var s,l;(s=e.onInteractOutside)===null||s===void 0||s.call(e,a),a.defaultPrevented||(r.current=!0,a.detail.originalEvent.type==="pointerdown"&&(i.current=!0));const d=a.target;((l=n.triggerRef.current)===null||l===void 0?void 0:l.contains(d))&&a.preventDefault(),a.detail.originalEvent.type==="focusin"&&i.current&&a.preventDefault()}}))}),p5=c.forwardRef((e,t)=>{const{__scopeDialog:n,trapFocus:r,onOpenAutoFocus:i,onCloseAutoFocus:a,...s}=e,l=gt(vn,n),d=c.useRef(null),f=me(t,d);return jr(),c.createElement(c.Fragment,null,c.createElement(_r,{asChild:!0,loop:!0,trapped:r,onMountAutoFocus:i,onUnmountAutoFocus:a},c.createElement(m1,E({role:"dialog",id:l.contentId,"aria-describedby":l.descriptionId,"aria-labelledby":l.titleId,"data-state":O2(l.open)},s,{ref:f,onDismiss:()=>l.onOpenChange(!1)}))),!1)}),lh="DialogTitle",ch=c.forwardRef((e,t)=>{const{__scopeDialog:n,...r}=e,i=gt(lh,n);return c.createElement(re.h2,E({id:i.titleId},r,{ref:t}))}),dh="DialogDescription",fh=c.forwardRef((e,t)=>{const{__scopeDialog:n,...r}=e,i=gt(dh,n);return c.createElement(re.p,E({id:i.descriptionId},r,{ref:t}))}),uh="DialogClose",Eo=c.forwardRef((e,t)=>{const{__scopeDialog:n,...r}=e,i=gt(uh,n);return c.createElement(re.button,E({type:"button"},r,{ref:t,onClick:Z(e.onClick,()=>i.onOpenChange(!1))}))});function O2(e){return e?"open":"closed"}const ph=a5,hh=s5,gh=d5,bh=f5,Ch=u5,h5=Eo,Jt=({children:e,...t})=>o.jsx(ph,{...t,children:e}),vh=x(hh).withConfig({componentId:"sc-1wr6otn-0"})(["width:fit-content;background:transparent;border:none;cursor:pointer;"]),g5=({children:e,...t})=>o.jsx(vh,{...t,children:e});g5.displayName="DialogTrigger",Jt.Trigger=g5;const b5=({label:e="Close",type:t="secondary",...n})=>o.jsx(h5,{asChild:!0,children:o.jsx(hn,{type:t,label:e,...n})});b5.displayName="DialogClose",Jt.Close=b5;const mh=x.keyframes({"0%":{opacity:0},"100%":{opacity:1}}),xh=x.keyframes({"0%":{opacity:0,transform:"translate(-50%, -48%) scale(.96)"},"100%":{opacity:1,transform:"translate(-50%, -50%) scale(1)"}}),wh=x(bh).withConfig({componentId:"sc-1wr6otn-1"})(["background-color:",";position:fixed;inset:0;animation:"," 150ms cubic-bezier(0.16,1,0.3,1);"],({theme:e})=>e.click.dialog.color.opaqueBackground.default,mh),kh=x(Ch).withConfig({componentId:"sc-1wr6otn-2"})(["background:",";border-radius:",";padding:"," ",";box-shadow:",";border:1px solid ",";width:75%;max-width:670px;position:fixed;top:50%;left:50%;max-height:75%;overflow:auto;transform:translate(-50%,-50%);animation:"," 150ms cubic-bezier(0.16,1,0.3,1);outline:none;"],({theme:e})=>e.click.dialog.color.background.default,({theme:e})=>e.click.dialog.radii.all,({theme:e})=>e.click.dialog.space.y,({theme:e})=>e.click.dialog.space.x,({theme:e})=>e.click.dialog.shadow.default,({theme:e})=>e.click.global.color.stroke.default,xh),yh=x.div.withConfig({componentId:"sc-1wr6otn-3"})(["display:flex;justify-content:space-between;align-items:center;min-height:",";"],({theme:e})=>e.sizes[9]),$h=x.h2.withConfig({componentId:"sc-1wr6otn-4"})(["font:",";padding:0;margin:0;"],({theme:e})=>e.click.dialog.typography.title.default),Lh=({onClose:e})=>o.jsx(h5,{asChild:!0,children:o.jsx(vr,{onClick:e,children:o.jsx(oe,{name:"cross",size:"lg"})})}),C5=({title:e,children:t,showClose:n,onClose:r,forceMount:i,container:a,showOverlay:s=!0,...l})=>o.jsxs(gh,{forceMount:i,container:a,children:[s&&o.jsx(wh,{}),o.jsxs(kh,{...l,children:[o.jsxs(yh,{children:[o.jsx($h,{children:e}),n&&o.jsx(Lh,{onClose:r})]}),o.jsx(fi,{size:"sm"}),t]})]});C5.displayName="DialogContent",Jt.Content=C5;const jh=x.div.withConfig({componentId:"sc-6eozxy-0"})(["display:flex;justify-content:flex-end;gap:",";"],e=>e.theme.click.dialog.space.gap),Mh=({open:e,onCancel:t,title:n,message:r,loading:i,primaryActionType:a="primary",primaryActionLabel:s="Confirm",secondaryActionLabel:l="Cancel",onConfirm:d,children:f,showClose:u})=>{if(f&&r)throw new Error("You can't pass children and message props at the same time");return o.jsx(Jt,{open:e,onOpenChange:p=>{!p&&t&&t()},children:o.jsxs(Jt.Content,{title:n,showClose:u,children:[f||o.jsx(Kt,{children:r}),o.jsx(g1,{size:"xl"}),o.jsxs(jh,{children:[o.jsx(Jt.Close,{label:l}),o.jsx(Jt.Close,{loading:!!i,disabled:!!i,type:a,label:s,onClick:()=>{d&&d()}})]})]})})},Qt=({modal:e=!1,...t})=>o.jsx(a5,{modal:e,...t}),v5=({children:e,...t})=>o.jsx(s5,{asChild:!0,...t,children:o.jsx("div",{children:e})});v5.displayName="Flyout.Trigger",Qt.Trigger=v5;const Sh=x.keyframes({"0%":{maxWidth:0,minWidth:0},"100%":{maxWidth:"fit-content",minWidth:"var(--flyout-width, 100%)"}}),_h=x(u5).withConfig({componentId:"sc-1vtv6sf-0"})(["display:flex;flex-direction:column;align-items:center;overflow:hidden;flex:1;top:0;right:0;bottom:0;width:100%;--flyout-width:",";animation:"," 500ms cubic-bezier(0.16,1,0.3,1) forwards;",""],({theme:e,$size:t="default"})=>e.click.flyout.size[t].width,Sh,({theme:e,$strategy:t})=>`
     position: ${t};
     height: ${t==="relative"?"100%":"auto"};
     padding: ${e.click.flyout.space.y} ${e.click.flyout.space.x};

package/package.json

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