@clickhouse/click-ui 0.0.100 → 0.0.101

package/dist/click-ui.es.js

@@ -6640,7 +6640,7 @@ const $D = G(y7).withConfig({
   ] }) : null;
 }, fx = G.div.withConfig({
   componentId: "sc-1wvczk0-0"
-})(["display:flex;border-radius:", ";justify-content:", ";overflow:hidden;background-color:", ";color:", ";"], ({
+})(["display:flex;border-radius:", ";justify-content:", ";overflow:hidden;background-color:", ";color:", ";width:100%;"], ({
   $type: e,
   theme: t
 }) => e === "banner" ? t.sizes[0] : t.click.alert.radii.end, ({
@@ -23531,13 +23531,17 @@ const vM = G.div.withConfig({
       " rows"
     ] }),
     /* @__PURE__ */ r.jsxs(v0, { gap: "xxs", children: [
-      /* @__PURE__ */ r.jsx(Yr, { icon: "chevron-left", type: "ghost", disabled: t === 1, "data-testid": "prev-btn" }),
+      /* @__PURE__ */ r.jsx(Yr, { icon: "chevron-left", type: "ghost", disabled: t === 1, onClick: () => {
+        i(t - 1);
+      }, "data-testid": "prev-btn" }),
       /* @__PURE__ */ r.jsx(v0, { maxWidth: "50px", children: /* @__PURE__ */ r.jsx(fM, { onChange: $, value: t, loading: !1, onKeyDown: M, min: 1, max: e }) }),
       !!e && /* @__PURE__ */ r.jsxs(Yo, { component: "div", color: "muted", size: "sm", children: [
         "of ",
         w(e)
       ] }),
-      /* @__PURE__ */ r.jsx(Yr, { icon: "chevron-right", type: "ghost", disabled: !!e && t === e, "data-testid": "next-btn" })
+      /* @__PURE__ */ r.jsx(Yr, { icon: "chevron-right", type: "ghost", disabled: !!e && t === e, onClick: () => {
+        i(t + 1);
+      }, "data-testid": "next-btn" })
     ] }),
     n.length > 0 && /* @__PURE__ */ r.jsxs(vM, { as: vl, onSelect: _, value: l.toString(), children: [
       /* @__PURE__ */ r.jsx(vl.Item, { value: "-1", children: "All rows" }),

package/dist/click-ui.umd.js

@@ -242,7 +242,7 @@ Check the top-level render call using <`+_e+">.")}return Ce}}function _n(Y,Ce){{
       font: ${e.click.accordion[t].typography.label.hover};
       cursor: pointer;
     }
-  `),al=W.div.withConfig({componentId:"sc-1ysh219-1"})(["display:flex;align-items:center;justify-content:center;transition:transform 200ms cubic-bezier(0.87,0,0.13,1);","[data-state='open'] &{transform:rotate(90deg);}"],sc),kb=W.div.withConfig({componentId:"sc-1ysh219-2"})(["display:flex;align-items:center;justify-content:center;"]),Sb=W(yb).withConfig({componentId:"sc-1ysh219-3"})([""]);W(qu).withConfig({componentId:"sc-1ysh219-4"})(["","{gap:",";}p{margin:0;}","{visibility:hidden;}&:hover ","{visibility:revert;}&:active ","{visibility:revert;}","[data-state='open'] ","{visibility:revert;}"],sc,({theme:e})=>e.click.sidebar.navigation.item.default.space.gap,al,al,al,sc,al);const Lb=W(qu).withConfig({componentId:"sc-1ysh219-5"})([""]),$b={neutral:"information",success:"check",warning:"warning",danger:"warning",info:"information"},ll=({text:e,title:t="",size:n="small",state:o="neutral",type:i="default",showIcon:a=!0,dismissible:s,customIcon:c,...u})=>{const[g,b]=p.useState(!0);return g?r.jsxs(Mb,{$size:n,$state:o,$type:i,"data-testid":"click-alert",...u,children:[s&&i==="banner"&&r.jsx(Qu,{}),a&&r.jsx(jb,{$state:o,$size:n,$type:i,children:r.jsx(Eb,{$size:n,size:"sm","aria-hidden":!0,name:c||$b[o]})}),r.jsxs(_b,{$state:o,$size:n,children:[t&&r.jsx(Ib,{$size:n,children:t}),r.jsx(Tb,{$size:n,children:e})]}),s&&r.jsx(Qu,{"data-testid":"click-alert-dismiss-button",onClick:()=>b(!1),children:r.jsx(et,{name:"cross","aria-label":"close"})})]}):null},Mb=W.div.withConfig({componentId:"sc-1wvczk0-0"})(["display:flex;border-radius:",";justify-content:",";overflow:hidden;background-color:",";color:",";"],({$type:e,theme:t})=>e==="banner"?t.sizes[0]:t.click.alert.radii.end,({$type:e})=>e==="banner"?"center":"start",({$state:e="neutral",theme:t})=>t.click.alert.color.background[e],({$state:e="neutral",theme:t})=>t.click.alert.color.text[e]),jb=W.div.withConfig({componentId:"sc-1wvczk0-1"})(["display:flex;align-items:center;background-color:",";",""],({$state:e="neutral",$type:t,theme:n})=>t==="banner"?"none":n.click.alert.color.iconBackground[e],({$state:e="neutral",$size:t,theme:n})=>`
+  `),al=W.div.withConfig({componentId:"sc-1ysh219-1"})(["display:flex;align-items:center;justify-content:center;transition:transform 200ms cubic-bezier(0.87,0,0.13,1);","[data-state='open'] &{transform:rotate(90deg);}"],sc),kb=W.div.withConfig({componentId:"sc-1ysh219-2"})(["display:flex;align-items:center;justify-content:center;"]),Sb=W(yb).withConfig({componentId:"sc-1ysh219-3"})([""]);W(qu).withConfig({componentId:"sc-1ysh219-4"})(["","{gap:",";}p{margin:0;}","{visibility:hidden;}&:hover ","{visibility:revert;}&:active ","{visibility:revert;}","[data-state='open'] ","{visibility:revert;}"],sc,({theme:e})=>e.click.sidebar.navigation.item.default.space.gap,al,al,al,sc,al);const Lb=W(qu).withConfig({componentId:"sc-1ysh219-5"})([""]),$b={neutral:"information",success:"check",warning:"warning",danger:"warning",info:"information"},ll=({text:e,title:t="",size:n="small",state:o="neutral",type:i="default",showIcon:a=!0,dismissible:s,customIcon:c,...u})=>{const[g,b]=p.useState(!0);return g?r.jsxs(Mb,{$size:n,$state:o,$type:i,"data-testid":"click-alert",...u,children:[s&&i==="banner"&&r.jsx(Qu,{}),a&&r.jsx(jb,{$state:o,$size:n,$type:i,children:r.jsx(Eb,{$size:n,size:"sm","aria-hidden":!0,name:c||$b[o]})}),r.jsxs(_b,{$state:o,$size:n,children:[t&&r.jsx(Ib,{$size:n,children:t}),r.jsx(Tb,{$size:n,children:e})]}),s&&r.jsx(Qu,{"data-testid":"click-alert-dismiss-button",onClick:()=>b(!1),children:r.jsx(et,{name:"cross","aria-label":"close"})})]}):null},Mb=W.div.withConfig({componentId:"sc-1wvczk0-0"})(["display:flex;border-radius:",";justify-content:",";overflow:hidden;background-color:",";color:",";width:100%;"],({$type:e,theme:t})=>e==="banner"?t.sizes[0]:t.click.alert.radii.end,({$type:e})=>e==="banner"?"center":"start",({$state:e="neutral",theme:t})=>t.click.alert.color.background[e],({$state:e="neutral",theme:t})=>t.click.alert.color.text[e]),jb=W.div.withConfig({componentId:"sc-1wvczk0-1"})(["display:flex;align-items:center;background-color:",";",""],({$state:e="neutral",$type:t,theme:n})=>t==="banner"?"none":n.click.alert.color.iconBackground[e],({$state:e="neutral",$size:t,theme:n})=>`
     color: ${n.click.alert.color.iconForeground[e]};
     padding: ${n.click.alert[t].space.y} ${n.click.alert[t].space.x};
   `),Eb=W(et).withConfig({componentId:"sc-1wvczk0-2"})(["",""],({$size:e,theme:t})=>`
@@ -736,7 +736,7 @@ Error generating stack: `+$.message+`
     &:last-of-type {
       padding-right: ${e.click.field.space.x};
     }
-  `);const s8=p.forwardRef(({disabled:e,label:t,error:n,id:o,loading:i,onChange:a,orientation:s,dir:c,...u},g)=>{const b=p.useId(),v=y=>{a(y.target.value,y)};return r.jsxs(P1,{disabled:e,id:o??b,label:t,error:n,orientation:s,dir:c,children:[r.jsx(Tc,{ref:g,type:"number",id:o??b,disabled:e,onChange:v,...u}),i&&r.jsx(et,{name:"loading-animated",size:"sm"})]})}),ZL=p.forwardRef(({disabled:e,label:t,error:n,id:o,value:i="",onChange:a,orientation:s,dir:c,...u},g)=>{const b=p.useId(),[v,y]=p.useState(!1),j=()=>{y(_=>!_)},M=_=>{a(_.target.value,_)};return r.jsxs(P1,{disabled:e,id:o??b,label:t,error:n,orientation:s,dir:c,children:[r.jsx(Tc,{ref:g,type:v?"text":"password",id:o??b,disabled:e,value:i,onChange:M,...u}),r.jsx(F0,{disabled:e,onClick:j,$show:i.length>0,children:r.jsx(et,{name:v?"eye-closed":"eye",size:"md"})})]})}),O0=({children:e,...t})=>r.jsx(U3,{...t,children:e}),UL=W(W3).withConfig({componentId:"sc-1dii14g-0"})(["width:fit-content;font:inherit;color:inherit;background:inherit;border:none;"]),c8=({anchor:e,children:t,...n})=>r.jsxs(r.Fragment,{children:[r.jsx(UL,{asChild:!0,...n,children:r.jsx("div",{children:t})}),e&&r.jsx(qb,{asChild:!0,children:e})]});c8.displayName="PopoverTrigger",O0.Trigger=c8;const WL=W(D3).withConfig({componentId:"sc-1dii14g-1"})(["display:block;padding:"," ",";background-color:",";border:1px solid ",";border-radius:",";box-shadow:",";",";"],({theme:e})=>e.click.popover.space.y,({theme:e})=>e.click.popover.space.x,({theme:e})=>e.click.popover.color.panel.background.default,({theme:e})=>e.click.popover.color.panel.stroke.default,({theme:e})=>e.click.popover.radii.all,({theme:e})=>e.click.popover.shadow.default,({$showClose:e})=>e?"padding-top: 1rem;":""),zL=W(Fs).withConfig({componentId:"sc-1dii14g-2"})(["position:absolute;top:",";right:",";width:",";height:",";"],({theme:e})=>e.click.popover.space.y,({theme:e})=>e.click.popover.space.x,({theme:e})=>e.click.popover.icon.size.width,({theme:e})=>e.click.popover.icon.size.height),d8=({children:e,showArrow:t,showClose:n,forceMount:o,container:i,...a})=>r.jsx(z3,{forceMount:o,container:i,children:r.jsxs(WL,{as:G3,$type:"popover",$showClose:n,$showArrow:t,sideOffset:4,...a,children:[n&&r.jsx(zL,{as:Qb,asChild:!0,children:r.jsx(et,{name:"cross"})}),t&&r.jsx(ic,{asChild:!0,as:eC,width:20,height:10,children:r.jsx(ac,{})}),e]})});d8.displayName="PopoverContent",O0.Content=d8;const GL=W.div.withConfig({componentId:"sc-dicnqe-0"})(["width:150px;"]),YL=({totalPages:e,currentPage:t,maxRowsPerPageList:n=[],rowCount:o,onChange:i,onPageSizeChange:a,pageSize:s=-1,fillWidth:c=!0,gap:u="md",justifyContent:g,...b})=>{const v=["number","string"].includes(typeof o),y=I=>new Intl.NumberFormat("en").format(I),j=I=>{I.key==="ArrowUp"||I.key==="ArrowRight"?i(t+1):(I.key==="ArrowDown"||I.key==="ArrowLeft")&&i(t-1)},M=I=>{i(Number(I))},_=I=>{typeof a=="function"&&a(Number(I))};return r.jsxs(mc,{gap:u,justifyContent:g??(o||n.length>0?"space-between":"center"),fillWidth:c,...b,children:[v&&r.jsxs(Xr,{component:"div",color:"muted",size:"sm",children:[typeof o=="number"?y(o):o," rows"]}),r.jsxs(mc,{gap:"xxs",children:[r.jsx(dr,{icon:"chevron-left",type:"ghost",disabled:t===1,"data-testid":"prev-btn"}),r.jsx(mc,{maxWidth:"50px",children:r.jsx(s8,{onChange:M,value:t,loading:!1,onKeyDown:j,min:1,max:e})}),!!e&&r.jsxs(Xr,{component:"div",color:"muted",size:"sm",children:["of ",y(e)]}),r.jsx(dr,{icon:"chevron-right",type:"ghost",disabled:!!e&&t===e,"data-testid":"next-btn"})]}),n.length>0&&r.jsxs(GL,{as:N1,onSelect:_,value:s.toString(),children:[r.jsx(N1.Item,{value:"-1",children:"All rows"}),n.map(I=>r.jsxs(N1.Item,{value:I.toString(),children:[I," rows"]},I))]})]})},XL=({hasBorder:e,hasShadow:t,color:n,padding:o,gap:i,children:a,orientation:s="horizontal",width:c,radii:u="sm",fillWidth:g,height:b,fillHeight:v,alignItems:y="center",...j})=>r.jsx(KL,{$hasBorder:e,$hasShadow:t,$color:n,$padding:o,$gap:i,$width:c,$radii:u,$orientation:s,$fillWidth:g,$height:b,$fillHeight:v,$alignItems:y,...j,children:a}),KL=W.div.withConfig({componentId:"sc-1q78udp-0"})(["display:flex;flex-flow:",";align-items:",";width:",";height:",";background-color:",";border-radius:",";padding:",";border:",";box-shadow:",";gap:",";"],({$orientation:e="horizontal"})=>e==="horizontal"?"row wrap":"column",({$alignItems:e="center"})=>e==="center"?"center":`flex-${e}`,({$width:e,$fillWidth:t})=>t?"100%":e,({$height:e,$fillHeight:t})=>t?"100%":e,({$color:e="default",theme:t})=>t.click.panel.color.background[e],({$radii:e="sm",theme:t})=>t.click.panel.radii[e],({$padding:e="md",theme:t})=>t.click.panel.space.y[e],({$hasBorder:e,theme:t})=>e?`1px solid ${t.click.global.color.stroke.default}`:"none",({$hasShadow:e,theme:t})=>e?t.shadow[1]:"none",({$gap:e="sm",theme:t})=>t.click.panel.space.gap[e]),JL=W.div.withConfig({componentId:"sc-16gr3cg-0"})(["display:flex;justify-content:space-between;align-items:center;overflow:hidden;transition:all 100ms ease-in-out;width:100%;width:-webkit-fill-available;width:fill-available;width:stretch;min-height:2px;",";"],({theme:e,$completed:t,$progress:n,$type:o})=>`
+  `);const s8=p.forwardRef(({disabled:e,label:t,error:n,id:o,loading:i,onChange:a,orientation:s,dir:c,...u},g)=>{const b=p.useId(),v=y=>{a(y.target.value,y)};return r.jsxs(P1,{disabled:e,id:o??b,label:t,error:n,orientation:s,dir:c,children:[r.jsx(Tc,{ref:g,type:"number",id:o??b,disabled:e,onChange:v,...u}),i&&r.jsx(et,{name:"loading-animated",size:"sm"})]})}),ZL=p.forwardRef(({disabled:e,label:t,error:n,id:o,value:i="",onChange:a,orientation:s,dir:c,...u},g)=>{const b=p.useId(),[v,y]=p.useState(!1),j=()=>{y(_=>!_)},M=_=>{a(_.target.value,_)};return r.jsxs(P1,{disabled:e,id:o??b,label:t,error:n,orientation:s,dir:c,children:[r.jsx(Tc,{ref:g,type:v?"text":"password",id:o??b,disabled:e,value:i,onChange:M,...u}),r.jsx(F0,{disabled:e,onClick:j,$show:i.length>0,children:r.jsx(et,{name:v?"eye-closed":"eye",size:"md"})})]})}),O0=({children:e,...t})=>r.jsx(U3,{...t,children:e}),UL=W(W3).withConfig({componentId:"sc-1dii14g-0"})(["width:fit-content;font:inherit;color:inherit;background:inherit;border:none;"]),c8=({anchor:e,children:t,...n})=>r.jsxs(r.Fragment,{children:[r.jsx(UL,{asChild:!0,...n,children:r.jsx("div",{children:t})}),e&&r.jsx(qb,{asChild:!0,children:e})]});c8.displayName="PopoverTrigger",O0.Trigger=c8;const WL=W(D3).withConfig({componentId:"sc-1dii14g-1"})(["display:block;padding:"," ",";background-color:",";border:1px solid ",";border-radius:",";box-shadow:",";",";"],({theme:e})=>e.click.popover.space.y,({theme:e})=>e.click.popover.space.x,({theme:e})=>e.click.popover.color.panel.background.default,({theme:e})=>e.click.popover.color.panel.stroke.default,({theme:e})=>e.click.popover.radii.all,({theme:e})=>e.click.popover.shadow.default,({$showClose:e})=>e?"padding-top: 1rem;":""),zL=W(Fs).withConfig({componentId:"sc-1dii14g-2"})(["position:absolute;top:",";right:",";width:",";height:",";"],({theme:e})=>e.click.popover.space.y,({theme:e})=>e.click.popover.space.x,({theme:e})=>e.click.popover.icon.size.width,({theme:e})=>e.click.popover.icon.size.height),d8=({children:e,showArrow:t,showClose:n,forceMount:o,container:i,...a})=>r.jsx(z3,{forceMount:o,container:i,children:r.jsxs(WL,{as:G3,$type:"popover",$showClose:n,$showArrow:t,sideOffset:4,...a,children:[n&&r.jsx(zL,{as:Qb,asChild:!0,children:r.jsx(et,{name:"cross"})}),t&&r.jsx(ic,{asChild:!0,as:eC,width:20,height:10,children:r.jsx(ac,{})}),e]})});d8.displayName="PopoverContent",O0.Content=d8;const GL=W.div.withConfig({componentId:"sc-dicnqe-0"})(["width:150px;"]),YL=({totalPages:e,currentPage:t,maxRowsPerPageList:n=[],rowCount:o,onChange:i,onPageSizeChange:a,pageSize:s=-1,fillWidth:c=!0,gap:u="md",justifyContent:g,...b})=>{const v=["number","string"].includes(typeof o),y=I=>new Intl.NumberFormat("en").format(I),j=I=>{I.key==="ArrowUp"||I.key==="ArrowRight"?i(t+1):(I.key==="ArrowDown"||I.key==="ArrowLeft")&&i(t-1)},M=I=>{i(Number(I))},_=I=>{typeof a=="function"&&a(Number(I))};return r.jsxs(mc,{gap:u,justifyContent:g??(o||n.length>0?"space-between":"center"),fillWidth:c,...b,children:[v&&r.jsxs(Xr,{component:"div",color:"muted",size:"sm",children:[typeof o=="number"?y(o):o," rows"]}),r.jsxs(mc,{gap:"xxs",children:[r.jsx(dr,{icon:"chevron-left",type:"ghost",disabled:t===1,onClick:()=>{i(t-1)},"data-testid":"prev-btn"}),r.jsx(mc,{maxWidth:"50px",children:r.jsx(s8,{onChange:M,value:t,loading:!1,onKeyDown:j,min:1,max:e})}),!!e&&r.jsxs(Xr,{component:"div",color:"muted",size:"sm",children:["of ",y(e)]}),r.jsx(dr,{icon:"chevron-right",type:"ghost",disabled:!!e&&t===e,onClick:()=>{i(t+1)},"data-testid":"next-btn"})]}),n.length>0&&r.jsxs(GL,{as:N1,onSelect:_,value:s.toString(),children:[r.jsx(N1.Item,{value:"-1",children:"All rows"}),n.map(I=>r.jsxs(N1.Item,{value:I.toString(),children:[I," rows"]},I))]})]})},XL=({hasBorder:e,hasShadow:t,color:n,padding:o,gap:i,children:a,orientation:s="horizontal",width:c,radii:u="sm",fillWidth:g,height:b,fillHeight:v,alignItems:y="center",...j})=>r.jsx(KL,{$hasBorder:e,$hasShadow:t,$color:n,$padding:o,$gap:i,$width:c,$radii:u,$orientation:s,$fillWidth:g,$height:b,$fillHeight:v,$alignItems:y,...j,children:a}),KL=W.div.withConfig({componentId:"sc-1q78udp-0"})(["display:flex;flex-flow:",";align-items:",";width:",";height:",";background-color:",";border-radius:",";padding:",";border:",";box-shadow:",";gap:",";"],({$orientation:e="horizontal"})=>e==="horizontal"?"row wrap":"column",({$alignItems:e="center"})=>e==="center"?"center":`flex-${e}`,({$width:e,$fillWidth:t})=>t?"100%":e,({$height:e,$fillHeight:t})=>t?"100%":e,({$color:e="default",theme:t})=>t.click.panel.color.background[e],({$radii:e="sm",theme:t})=>t.click.panel.radii[e],({$padding:e="md",theme:t})=>t.click.panel.space.y[e],({$hasBorder:e,theme:t})=>e?`1px solid ${t.click.global.color.stroke.default}`:"none",({$hasShadow:e,theme:t})=>e?t.shadow[1]:"none",({$gap:e="sm",theme:t})=>t.click.panel.space.gap[e]),JL=W.div.withConfig({componentId:"sc-16gr3cg-0"})(["display:flex;justify-content:space-between;align-items:center;overflow:hidden;transition:all 100ms ease-in-out;width:100%;width:-webkit-fill-available;width:fill-available;width:stretch;min-height:2px;",";"],({theme:e,$completed:t,$progress:n,$type:o})=>`
     background: ${t?e.click.field.color.background.default:`linear-gradient(to right, ${e.global.color.accent.default} 0%, ${e.global.color.accent.default} ${n}%, ${e.click.field.color.background.default} ${n}%,  ${e.click.field.color.background.default} 100%)`};
     background-size: calc(100% + 2px);
     background-position: center;

package/package.json

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