freemium-ui 2.0.0-beta.56 → 2.0.0-beta.58

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;
@@ -15840,19 +15840,20 @@ const jj=Ej,$j=Hj,Uj=kj,Yj=Tj,Wj=on(Cj)``;on.div`
   }
 `,Jj=on.div`
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   padding: 16px;
   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")
@@ -15874,20 +15875,22 @@ fill:n.colors.text.semantic.warning}))},o$=t=>{const n=qt()
 fill:"none",xmlns:"http://www.w3.org/2000/svg",...t},e.createElement("path",{
 fillRule:"evenodd",clipRule:"evenodd",
 d:"M8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16C12.4183 16 16 12.4183 16 8C16 5.87827 15.1571 3.84344 13.6569 2.34315C12.1566 0.842855 10.1217 0 8 0ZM8 14.6C4.35492 14.6 1.4 11.6451 1.4 8C1.4 4.35492 4.35492 1.4 8 1.4C11.6451 1.4 14.6 4.35492 14.6 8C14.5945 11.6428 11.6428 14.5945 8 14.6ZM9 8L10.82 6.17L10.83 6.18C11.1061 5.90386 11.1061 5.45614 10.83 5.18C10.5539 4.90386 10.1061 4.90386 9.83 5.18L8 7L6.18 5.17C5.90386 4.89386 5.45614 4.89386 5.18 5.17C4.90386 5.44614 4.90386 5.89386 5.18 6.17L7 8L5.17 9.82C4.89386 10.0961 4.89386 10.5439 5.17 10.82C5.44614 11.0961 5.89386 11.0961 6.17 10.82L8 9L9.83 10.83C10.1061 11.1061 10.5539 11.1061 10.83 10.83C11.1061 10.5539 11.1061 10.1061 10.83 9.83L9 8Z",
-fill:n.colors.text.semantic.error}))},i$=({index:t,...n})=>{
-const r=qt(),{updateToasts:a,windowState:o}=e.useContext(hj)??{},i=e.useRef(null)
+fill:n.colors.text.semantic.error}))},i$=({index:t,showProgress:n=!0,...r})=>{
+const a=qt(),{updateToasts:o,windowState:i}=e.useContext(hj)??{},l=e.useRef(null)
 ;return e.createElement(e.Fragment,null,e.createElement(qj,{role:"alert",
-"aria-live":"polite",ref:i,toastType:n.type,toastIndex:t,
-className:`ToastRoot Toast-${n.id??""}`.trim(),duration:n.delay??3e3,
-onOpenChange:e=>{e||a((e=>e.filter((e=>e.id!==n.id))))}},e.createElement(e$,{
-className:"ToastProgress",windowState:o,toastType:n.type,delay:n.delay??3e3
-}),e.createElement(Jj,null,n.customIcon?e.createElement(e.Fragment,null,n.customIcon):e.createElement(e.Fragment,null,"success"===n.type&&e.createElement(r$,{
-fill:r.colors.text.semantic.success}),"warning"===n.type&&e.createElement(a$,{
-fill:r.colors.text.semantic.warning}),"error"===n.type&&e.createElement(o$,{
-fill:r.colors.text.semantic.error})),e.createElement(Zj,{className:"ToastTitle"
-},n.text),e.createElement(Xj,{className:"ToastAction",asChild:!0,
+"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))))}},e.createElement(e$,{
+className:"ToastProgress",windowState:i,toastType:r.type,
+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$,{
+fill:a.colors.text.semantic.error})),e.createElement(Zj,{className:"ToastTitle"
+},r.text),e.createElement(Xj,{className:"ToastAction",asChild:!0,
 altText:"Close","aria-label":"Close"
-},e.createElement(Zr,null,e.createElement(Mr,{fill:r.colors.text.primary}))))))
+},e.createElement(Zr,null,e.createElement(Mr,{fill:a.colors.text.primary}))))))
 },l$=()=>{const n=((t=gF())=>{
 const n=`ui-${t}`,{isBrowser:r}=t$(),[a,o]=e.useState(r?n$(n):null)
 ;return e.useEffect((()=>{const e=document.querySelector(`#${n}`),t=e||n$(n)

package/index.d.ts

@@ -1482,11 +1482,15 @@ interface ToastType {
      */
     customIcon?: React.ReactNode;
     /**
-     * How large should the button be?
+     * fixed toast on the screen
+     * @default false
+     *
      */
     fixed?: boolean;
     /**
-     * How large should the button be?
+     * shows progress bar in the toast
+     * takes delay as the duration
+     * @default true
      */
     showProgress?: boolean;
 }

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;
@@ -16031,19 +16031,20 @@ const x$=l$,S$=u$,E$=m$,_$=v$,H$=En(r$)``;En.div`
   }
 `,I$=En.div`
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   padding: 16px;
   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")
@@ -16065,20 +16066,22 @@ fill:n.colors.text.semantic.warning}))},B$=e=>{const n=vn()
 fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},t.createElement("path",{
 fillRule:"evenodd",clipRule:"evenodd",
 d:"M8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16C12.4183 16 16 12.4183 16 8C16 5.87827 15.1571 3.84344 13.6569 2.34315C12.1566 0.842855 10.1217 0 8 0ZM8 14.6C4.35492 14.6 1.4 11.6451 1.4 8C1.4 4.35492 4.35492 1.4 8 1.4C11.6451 1.4 14.6 4.35492 14.6 8C14.5945 11.6428 11.6428 14.5945 8 14.6ZM9 8L10.82 6.17L10.83 6.18C11.1061 5.90386 11.1061 5.45614 10.83 5.18C10.5539 4.90386 10.1061 4.90386 9.83 5.18L8 7L6.18 5.17C5.90386 4.89386 5.45614 4.89386 5.18 5.17C4.90386 5.44614 4.90386 5.89386 5.18 6.17L7 8L5.17 9.82C4.89386 10.0961 4.89386 10.5439 5.17 10.82C5.44614 11.0961 5.89386 11.0961 6.17 10.82L8 9L9.83 10.83C10.1061 11.1061 10.5539 11.1061 10.83 10.83C11.1061 10.5539 11.1061 10.1061 10.83 9.83L9 8Z",
-fill:n.colors.text.semantic.error}))},j$=({index:e,...n})=>{
-const r=vn(),{updateToasts:a,windowState:o}=t.useContext(Kj)??{},i=t.useRef(null)
+fill:n.colors.text.semantic.error}))},j$=({index:e,showProgress:n=!0,...r})=>{
+const a=vn(),{updateToasts:o,windowState:i}=t.useContext(Kj)??{},l=t.useRef(null)
 ;return t.createElement(t.Fragment,null,t.createElement(L$,{role:"alert",
-"aria-live":"polite",ref:i,toastType:n.type,toastIndex:e,
-className:`ToastRoot Toast-${n.id??""}`.trim(),duration:n.delay??3e3,
-onOpenChange:e=>{e||a((e=>e.filter((e=>e.id!==n.id))))}},t.createElement(P$,{
-className:"ToastProgress",windowState:o,toastType:n.type,delay:n.delay??3e3
-}),t.createElement(I$,null,n.customIcon?t.createElement(t.Fragment,null,n.customIcon):t.createElement(t.Fragment,null,"success"===n.type&&t.createElement(N$,{
-fill:r.colors.text.semantic.success}),"warning"===n.type&&t.createElement(F$,{
-fill:r.colors.text.semantic.warning}),"error"===n.type&&t.createElement(B$,{
-fill:r.colors.text.semantic.error})),t.createElement(A$,{className:"ToastTitle"
-},n.text),t.createElement(k$,{className:"ToastAction",asChild:!0,
+"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))))}},t.createElement(P$,{
+className:"ToastProgress",windowState:i,toastType:r.type,
+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$,{
+fill:a.colors.text.semantic.error})),t.createElement(A$,{className:"ToastTitle"
+},r.text),t.createElement(k$,{className:"ToastAction",asChild:!0,
 altText:"Close","aria-label":"Close"
-},t.createElement(ga,null,t.createElement($r,{fill:r.colors.text.primary}))))))
+},t.createElement(ga,null,t.createElement($r,{fill:a.colors.text.primary}))))))
 },$$=()=>{const e=((e=XF())=>{
 const t=`ui-${e}`,{isBrowser:n}=R$(),[r,a]=m(n?O$(t):null);return f((()=>{
 const e=document.querySelector(`#${t}`),n=e||O$(t)

package/package.json

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