freemium-ui 2.0.0-beta.57 → 2.0.0-beta.59

package/index.cjs.js

@@ -2267,7 +2267,7 @@ modal:!0}))}))``,Au=on(xu)``,ku=on(Hu)``,Tu=on(_u)``,Ru=on(Eu)`
   line-height: ${({theme:e})=>e.typography.primary.lineHeight};
   letter-spacing: 0px;
   text-align: left;
-  padding: 0 32px ${({$hasChildren:e})=>e?"16px":"32px"} 32px;
+  padding: 0 32px ${({$hasChildren:e})=>e?"0px":"32px"} 32px;
 `,Nu=on.div`
   border-top: 1px solid ${({theme:e})=>e.colors.border.light};
   border-bottom-right-radius: 8px;
@@ -15510,9 +15510,10 @@ onClick:()=>{const e={};t.getAllColumns().forEach((t=>{e[t.id]=t.getIsVisible()
 startAdornment:e.createElement(GB,{viewBox:"0 0 18px 18px"}),
 placeholder:"Search columns"}),e.createElement(fa,{weight:"semi-bold"
 },"Choose columns"),e.createElement(jB,null,t.getAllColumns().filter((e=>!KB.includes(e.id))).map((n=>e.createElement(Ts,{
-label:n.columnDef.header?.toString(),checked:!!r[n.id],onCheckedChange:e=>{
-const r=t.getAllColumns().find((e=>e.id===n.id));a((t=>({...t,[n.id]:!0===e}))),
-i((t=>!0===e?[...t,...r?[r]:[]]:t.filter((e=>e.id!==n.id))))}
+key:n.id,label:n.columnDef.header?.toString(),checked:!!r[n.id],
+onCheckedChange:e=>{const r=t.getAllColumns().find((e=>e.id===n.id));a((t=>({
+...t,[n.id]:!0===e
+}))),i((t=>!0===e?[...t,...r?[r]:[]]:t.filter((e=>e.id!==n.id))))}
 }))))),e.createElement(FB,null,e.createElement(fa,{weight:"semi-bold"
 },`Selected columns (${o.length})`),e.createElement(yF,{
 className:"ReorderContainer",onReorder:e=>{i(e)},
@@ -15845,14 +15846,15 @@ const jj=Ej,$j=Hj,Uj=kj,Yj=Tj,Wj=on(Cj)``;on.div`
   gap: 16px;
 `,e$=on.div`
   height: 4px;
-  background-color: ${({theme:e,toastType:t})=>e.colors.text.semantic[t??"success"]};
-  width: 0%;
+  background-color: ${({theme:e,toastType:t="success"})=>e.colors.text.semantic[t]};
   border-radius: 4px 4px 0 0;
-  animation-play-state: ${({windowState:e})=>"focus"===e?"running":"paused"};
-  animation-name: ${Kj};
-  animation-duration: ${({delay:e})=>e}ms;
-  animation-timing-function: linear;
-  will-change: width;
+
+  ${({delay:e,windowState:t})=>"none"===e?"width: 100%;":nn`
+          width: 0%;
+          animation: ${Kj} ${e}ms linear
+            ${"focus"===t?"running":"paused"};
+          will-change: width;
+        `}
 `,t$=()=>{const[t,n]=e.useState(!1);return e.useEffect((()=>{
 n(Boolean("undefined"!=typeof window&&window.document&&window.document.createElement))
 }),[]),{isBrowser:t,isServer:!t}},n$=e=>{const t=document.createElement("div")
@@ -15880,9 +15882,9 @@ const a=qt(),{updateToasts:o,windowState:i}=e.useContext(hj)??{},l=e.useRef(null
 "aria-live":"polite",ref:l,toastType:r.type,toastIndex:t,
 className:`ToastRoot Toast-${r.id??""}`.trim(),
 duration:r.fixed?1/0:r.delay??3e3,onOpenChange:e=>{
-e||o((e=>e.filter((e=>e.id!==r.id))))}},n&&e.createElement(e$,{
+e||o((e=>e.filter((e=>e.id!==r.id))))}},e.createElement(e$,{
 className:"ToastProgress",windowState:i,toastType:r.type,
-delay:r.delay??(r.fixed?1/0:3e3)
+delay:!r.fixed&&n?r.delay??3e3:"none"
 }),e.createElement(Jj,null,r.customIcon?e.createElement(e.Fragment,null,r.customIcon):e.createElement(e.Fragment,null,"success"===r.type&&e.createElement(r$,{
 fill:a.colors.text.semantic.success}),"warning"===r.type&&e.createElement(a$,{
 fill:a.colors.text.semantic.warning}),"error"===r.type&&e.createElement(o$,{
@@ -16540,51 +16542,50 @@ onClick:()=>{ue()},disabled:!ae()||l||c
 },exports.Tabs=({options:t=[],idAccessor:n="id",nameAccessor:r="name",onChange:a,defaultValue:o,label:i,renderTabsContent:l,value:c})=>e.createElement(cj,{
 className:"TabsRoot",value:c,defaultValue:o,onValueChange:a
 },e.createElement(uj,{className:"TabsList","aria-label":i
-},t.map((t=>e.createElement(dj,{className:"TabsTrigger",value:t?.[n]
-},t?.[r])))),t.map((t=>e.createElement(sj,{className:"TabsContent",value:t?.[n]
-},l?l(t):null)))),
-exports.TabsContent=sj,exports.TabsList=uj,exports.TabsRoot=cj,
+},t.map((t=>e.createElement(dj,{className:"TabsTrigger",value:t?.[n],key:t?.[n]
+},t?.[r])))),t.map((t=>e.createElement(sj,{className:"TabsContent",value:t?.[n],
+key:t?.[n]
+},l?l(t):null)))),exports.TabsContent=sj,exports.TabsList=uj,exports.TabsRoot=cj,
 exports.TabsTrigger=dj,
 exports.Tag=Hv,exports.TextArea=qm,exports.ThemeProvider=t=>e.createElement(Zt,{
 theme:t.theme
 },e.createElement(c$,null,t.children)),exports.Themes=oU,exports.TickIcon=xr,
 exports.TimePicker=t=>{
-const{isRequired:n,label:r,isErrored:a,errorText:o,id:i,disabled:l,precision:c="minute",useAmPm:s,value:u,onChange:d}=t,[h,p]=e.useState("")
-;return e.useEffect((()=>{p(u??"")}),[u]),e.useEffect((()=>{d?.(h)
-}),[d,h]),e.createElement(OP,{id:`datetime-picker-container-${i??""}`.trim()
+const{isRequired:n,label:r,isErrored:a,errorText:o,id:i,disabled:l,precision:c="minute",useAmPm:s,value:u="",onChange:d}=t
+;return e.createElement(OP,{id:`datetime-picker-container-${i??""}`.trim()
 },r&&e.createElement(Fr,{htmlFor:t.id,className:"input-label"
 },r,r&&n&&e.createElement(jr,null,"*")),e.createElement(NP,null,e.createElement(FP,{
 className:"time-picker-input picker-hours",type:"number",
 placeholder:s?"hh":"HH",disabled:l,min:1,max:s?12:23,
-value:h?Av(new Date(h)).format(s?"hh":"HH"):"",onChange:e=>{
+value:u?Av(new Date(u)).format(s?"hh":"HH"):"",onChange:e=>{
 const t=Number(e.target.value);if(s&&(t<1||t>12))return
 ;if(!s&&(t<0||t>23))return
-;const n=Av(new Date(h)).hour(s&&"PM"===Av(h).format("A")?t+12:t)
-;p(n.toISOString())},isErrored:a,"aria-invalid":a,errorText:o
+;const n=Av(new Date(u)).hour(s&&"PM"===Av(u).format("A")?t+12:t)
+;d?.(n.toISOString())},isErrored:a,"aria-invalid":a,errorText:o
 }),e.createElement("span",null,":"),e.createElement(FP,{
 className:"time-picker-input picker-minutes",type:"number",placeholder:"mm",
-disabled:l,min:0,max:59,value:h?Av(new Date(h)).format("mm"):"",onChange:e=>{
+disabled:l,min:0,max:59,value:u?Av(new Date(u)).format("mm"):"",onChange:e=>{
 const t=Number(e.target.value);if(t<0||t>59)return
-;const n=Av(new Date(h)).minute(t);p(n.toISOString())},isErrored:a,
+;const n=Av(new Date(u)).minute(t);d?.(n.toISOString())},isErrored:a,
 "aria-invalid":a,errorText:o
 }),("millisecond"===c||"second"===c)&&e.createElement(e.Fragment,null,e.createElement("span",null,":"),e.createElement(FP,{
 className:"time-picker-input picker-seconds",type:"number",placeholder:"ss",
-disabled:l,min:0,max:59,value:h?Av(new Date(h)).format("ss"):"",onChange:e=>{
+disabled:l,min:0,max:59,value:u?Av(new Date(u)).format("ss"):"",onChange:e=>{
 const t=Number(e.target.value);if(t<0||t>59)return
-;const n=Av(new Date(h)).second(t);p(n.toISOString())},isErrored:a,
+;const n=Av(new Date(u)).second(t);d?.(n.toISOString())},isErrored:a,
 "aria-invalid":a,errorText:o
 })),"millisecond"===c&&e.createElement(e.Fragment,null,e.createElement("span",null,":"),e.createElement(FP,{
 className:"time-picker-input picker-milliseconds",type:"number",
 placeholder:"SSS",disabled:l,min:0,max:999,
-value:h?Av(new Date(h)).format("SSS"):"",onChange:e=>{
+value:u?Av(new Date(u)).format("SSS"):"",onChange:e=>{
 const t=Number(e.target.value);if(t<0||t>999)return
-;const n=Av(new Date(h)).millisecond(t);p(n.toISOString())},isErrored:a,
+;const n=Av(new Date(u)).millisecond(t);d?.(n.toISOString())},isErrored:a,
 "aria-invalid":a,errorText:o})),s&&e.createElement(nv,{
 itemToString:e=>e?.name??"",placeholder:"--",style:{marginLeft:"4px"},
-showTick:!1,defaultSelectedItem:h?GP.find((e=>e.id===Av(h).format("A"))):null,
+showTick:!1,defaultSelectedItem:u?GP.find((e=>e.id===Av(u).format("A"))):null,
 width:"65px",itemIdentifier:"id",items:GP,onChange:e=>{
-const t=Av(new Date(h)).hour(Av(h).hour()+("AM"===e?.id?-12:12))
-;p(t.toISOString())}})),a&&o&&e.createElement(ws,null,o))
+const t=Av(new Date(u)).hour(Av(u).hour()+("AM"===e?.id?-12:12))
+;d?.(t.toISOString())}})),a&&o&&e.createElement(ws,null,o))
 },exports.ToastProvider=c$,
 exports.Toggle=({handleChange:t,hasIcon:n=!1,on:r,isErrored:a,isRequired:o,size:i="md",thumbProps:l,...c})=>{
 const s=qt();return e.createElement(b$,{checked:r,onCheckedChange:e=>{t?.(e)},

package/index.js

@@ -2266,7 +2266,7 @@ const{__scopeAlertDialog:t,...n}=e,r=Nu(t);return i(Vu,Vn({},r,n,{modal:!0}))
   line-height: ${({theme:e})=>e.typography.primary.lineHeight};
   letter-spacing: 0px;
   text-align: left;
-  padding: 0 32px ${({$hasChildren:e})=>e?"16px":"32px"} 32px;
+  padding: 0 32px ${({$hasChildren:e})=>e?"0px":"32px"} 32px;
 `,sd=En.div`
   border-top: 1px solid ${({theme:e})=>e.colors.border.light};
   border-bottom-right-radius: 8px;
@@ -12780,42 +12780,41 @@ d.onChange?.([null,null])}},"Clear")),popoverProps:{minimal:!1,
 placement:"bottom-start",usePortal:!0},parseDate:e=>e?ig(e).toDate():new Date,
 formatDate:e=>e?ig(e).format(u):"",...d}),i&&l&&t.createElement($s,null,l))
 },SR=[{id:"AM",name:"AM"},{id:"PM",name:"PM"}],ER=e=>{
-const{isRequired:n,label:r,isErrored:a,errorText:o,id:i,disabled:l,precision:c="minute",useAmPm:s,value:u,onChange:d}=e,[h,p]=t.useState("")
-;return t.useEffect((()=>{p(u??"")}),[u]),t.useEffect((()=>{d?.(h)
-}),[d,h]),t.createElement(hR,{id:`datetime-picker-container-${i??""}`.trim()
+const{isRequired:n,label:r,isErrored:a,errorText:o,id:i,disabled:l,precision:c="minute",useAmPm:s,value:u="",onChange:d}=e
+;return t.createElement(hR,{id:`datetime-picker-container-${i??""}`.trim()
 },r&&t.createElement(la,{htmlFor:e.id,className:"input-label"
 },r,r&&n&&t.createElement(sa,null,"*")),t.createElement(pR,null,t.createElement(fR,{
 className:"time-picker-input picker-hours",type:"number",
 placeholder:s?"hh":"HH",disabled:l,min:1,max:s?12:23,
-value:h?ig(new Date(h)).format(s?"hh":"HH"):"",onChange:e=>{
+value:u?ig(new Date(u)).format(s?"hh":"HH"):"",onChange:e=>{
 const t=Number(e.target.value);if(s&&(t<1||t>12))return
 ;if(!s&&(t<0||t>23))return
-;const n=ig(new Date(h)).hour(s&&"PM"===ig(h).format("A")?t+12:t)
-;p(n.toISOString())},isErrored:a,"aria-invalid":a,errorText:o
+;const n=ig(new Date(u)).hour(s&&"PM"===ig(u).format("A")?t+12:t)
+;d?.(n.toISOString())},isErrored:a,"aria-invalid":a,errorText:o
 }),t.createElement("span",null,":"),t.createElement(fR,{
 className:"time-picker-input picker-minutes",type:"number",placeholder:"mm",
-disabled:l,min:0,max:59,value:h?ig(new Date(h)).format("mm"):"",onChange:e=>{
+disabled:l,min:0,max:59,value:u?ig(new Date(u)).format("mm"):"",onChange:e=>{
 const t=Number(e.target.value);if(t<0||t>59)return
-;const n=ig(new Date(h)).minute(t);p(n.toISOString())},isErrored:a,
+;const n=ig(new Date(u)).minute(t);d?.(n.toISOString())},isErrored:a,
 "aria-invalid":a,errorText:o
 }),("millisecond"===c||"second"===c)&&t.createElement(t.Fragment,null,t.createElement("span",null,":"),t.createElement(fR,{
 className:"time-picker-input picker-seconds",type:"number",placeholder:"ss",
-disabled:l,min:0,max:59,value:h?ig(new Date(h)).format("ss"):"",onChange:e=>{
+disabled:l,min:0,max:59,value:u?ig(new Date(u)).format("ss"):"",onChange:e=>{
 const t=Number(e.target.value);if(t<0||t>59)return
-;const n=ig(new Date(h)).second(t);p(n.toISOString())},isErrored:a,
+;const n=ig(new Date(u)).second(t);d?.(n.toISOString())},isErrored:a,
 "aria-invalid":a,errorText:o
 })),"millisecond"===c&&t.createElement(t.Fragment,null,t.createElement("span",null,":"),t.createElement(fR,{
 className:"time-picker-input picker-milliseconds",type:"number",
 placeholder:"SSS",disabled:l,min:0,max:999,
-value:h?ig(new Date(h)).format("SSS"):"",onChange:e=>{
+value:u?ig(new Date(u)).format("SSS"):"",onChange:e=>{
 const t=Number(e.target.value);if(t<0||t>999)return
-;const n=ig(new Date(h)).millisecond(t);p(n.toISOString())},isErrored:a,
+;const n=ig(new Date(u)).millisecond(t);d?.(n.toISOString())},isErrored:a,
 "aria-invalid":a,errorText:o})),s&&t.createElement(Hv,{
 itemToString:e=>e?.name??"",placeholder:"--",style:{marginLeft:"4px"},
-showTick:!1,defaultSelectedItem:h?SR.find((e=>e.id===ig(h).format("A"))):null,
+showTick:!1,defaultSelectedItem:u?SR.find((e=>e.id===ig(u).format("A"))):null,
 width:"65px",itemIdentifier:"id",items:SR,onChange:e=>{
-const t=ig(new Date(h)).hour(ig(h).hour()+("AM"===e?.id?-12:12))
-;p(t.toISOString())}})),a&&o&&t.createElement($s,null,o))
+const t=ig(new Date(u)).hour(ig(u).hour()+("AM"===e?.id?-12:12))
+;d?.(t.toISOString())}})),a&&o&&t.createElement($s,null,o))
 },_R="Popover",[HR,DR]=Ln(_R,[Ni]),VR=Ni(),[LR,AR]=HR(_R),kR=s(((e,t)=>{
 const{__scopePopover:n,...r}=e,a=AR("PopoverTrigger",n),o=VR(n),l=Tn(t,a.triggerRef),c=i(Un.button,Vn({
 type:"button","aria-haspopup":"dialog","aria-expanded":a.open,
@@ -15615,9 +15614,10 @@ onClick:()=>{const t={};e.getAllColumns().forEach((e=>{t[e.id]=e.getIsVisible()
 startAdornment:t.createElement(_j,{viewBox:"0 0 18px 18px"}),
 placeholder:"Search columns"}),t.createElement(Ia,{weight:"semi-bold"
 },"Choose columns"),t.createElement(zj,null,e.getAllColumns().filter((e=>!Hj.includes(e.id))).map((n=>t.createElement(au,{
-label:n.columnDef.header?.toString(),checked:!!r[n.id],onCheckedChange:t=>{
-const r=e.getAllColumns().find((e=>e.id===n.id));a((e=>({...e,[n.id]:!0===t}))),
-i((e=>!0===t?[...e,...r?[r]:[]]:e.filter((e=>e.id!==n.id))))}
+key:n.id,label:n.columnDef.header?.toString(),checked:!!r[n.id],
+onCheckedChange:t=>{const r=e.getAllColumns().find((e=>e.id===n.id));a((e=>({
+...e,[n.id]:!0===t
+}))),i((e=>!0===t?[...e,...r?[r]:[]]:e.filter((e=>e.id!==n.id))))}
 }))))),t.createElement(wj,null,t.createElement(Ia,{weight:"semi-bold"
 },`Selected columns (${o.length})`),t.createElement(QF,{
 className:"ReorderContainer",onReorder:e=>{i(e)},
@@ -15774,9 +15774,9 @@ animationDuration:p.current?"0s":void 0}}),n&&l)))
 `,Gj=({options:e=[],idAccessor:n="id",nameAccessor:r="name",onChange:a,defaultValue:o,label:i,renderTabsContent:l,value:c})=>t.createElement($j,{
 className:"TabsRoot",value:c,defaultValue:o,onValueChange:a
 },t.createElement(Yj,{className:"TabsList","aria-label":i
-},e.map((e=>t.createElement(Wj,{className:"TabsTrigger",value:e?.[n]
-},e?.[r])))),e.map((e=>t.createElement(Uj,{className:"TabsContent",value:e?.[n]
-},l?l(e):null)))),Kj=t.createContext({toasts:[],windowState:"focus",
+},e.map((e=>t.createElement(Wj,{className:"TabsTrigger",value:e?.[n],key:e?.[n]
+},e?.[r])))),e.map((e=>t.createElement(Uj,{className:"TabsContent",value:e?.[n],
+key:e?.[n]},l?l(e):null)))),Kj=t.createContext({toasts:[],windowState:"focus",
 addToast:()=>{},updateToasts:()=>{}
 }),qj="ToastProvider",[Zj,Xj,Qj]=Fn("Toast"),[Jj,e$]=Ln("Toast",[Qj]),[t$,n$]=Jj(qj),r$=e=>{
 const{__scopeToast:t,label:n="Notification",duration:a=5e3,swipeDirection:o="right",swipeThreshold:l=50,children:s}=e,[u,d]=m(null),[h,p]=m(0),f=r(!1),v=r(!1)
@@ -16036,14 +16036,15 @@ const x$=l$,S$=u$,E$=m$,_$=v$,H$=En(r$)``;En.div`
   gap: 16px;
 `,P$=En.div`
   height: 4px;
-  background-color: ${({theme:e,toastType:t})=>e.colors.text.semantic[t??"success"]};
-  width: 0%;
+  background-color: ${({theme:e,toastType:t="success"})=>e.colors.text.semantic[t]};
   border-radius: 4px 4px 0 0;
-  animation-play-state: ${({windowState:e})=>"focus"===e?"running":"paused"};
-  animation-name: ${V$};
-  animation-duration: ${({delay:e})=>e}ms;
-  animation-timing-function: linear;
-  will-change: width;
+
+  ${({delay:e,windowState:t})=>"none"===e?"width: 100%;":Mn`
+          width: 0%;
+          animation: ${V$} ${e}ms linear
+            ${"focus"===t?"running":"paused"};
+          will-change: width;
+        `}
 `,R$=()=>{const[e,t]=m(!1);return f((()=>{
 t(Boolean("undefined"!=typeof window&&window.document&&window.document.createElement))
 }),[]),{isBrowser:e,isServer:!e}},O$=e=>{const t=document.createElement("div")
@@ -16071,9 +16072,9 @@ const a=vn(),{updateToasts:o,windowState:i}=t.useContext(Kj)??{},l=t.useRef(null
 "aria-live":"polite",ref:l,toastType:r.type,toastIndex:e,
 className:`ToastRoot Toast-${r.id??""}`.trim(),
 duration:r.fixed?1/0:r.delay??3e3,onOpenChange:e=>{
-e||o((e=>e.filter((e=>e.id!==r.id))))}},n&&t.createElement(P$,{
+e||o((e=>e.filter((e=>e.id!==r.id))))}},t.createElement(P$,{
 className:"ToastProgress",windowState:i,toastType:r.type,
-delay:r.delay??(r.fixed?1/0:3e3)
+delay:!r.fixed&&n?r.delay??3e3:"none"
 }),t.createElement(I$,null,r.customIcon?t.createElement(t.Fragment,null,r.customIcon):t.createElement(t.Fragment,null,"success"===r.type&&t.createElement(N$,{
 fill:a.colors.text.semantic.success}),"warning"===r.type&&t.createElement(F$,{
 fill:a.colors.text.semantic.warning}),"error"===r.type&&t.createElement(B$,{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "freemium-ui",
-  "version": "2.0.0-beta.57",
+  "version": "2.0.0-beta.59",
   "description": "React Ui Components for Freemium Apps",
   "main": "./index.js",
   "module": "./index.js",