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

package/index.cjs.js

@@ -15555,6 +15555,8 @@ id:u,tabIndex:0},l,{ref:n,style:{...t.style,
 animationDuration:h.current?"0s":void 0}}),r&&i)))
 })),cj=on(nj)``,sj=on(lj)``,uj=on(oj)`
   border-bottom: 1px solid #f5f7f9;
+  display: flex;
+  flex-wrap: nowrap;
 `,dj=on(ij)`
   font-family: ${({theme:e})=>e.typography.fontFamily};
   background-color: unset;
@@ -15564,6 +15566,7 @@ animationDuration:h.current?"0s":void 0}}),r&&i)))
   font-weight: 400;
   font-size: 14px;
   line-height: 20px;
+  white-space: nowrap;
   color: ${({theme:e})=>e.colors.text.primary};
   border-bottom: 2px solid transparent;
   border-radius: 4px 4px 0 0;
@@ -15837,7 +15840,7 @@ 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`
@@ -15871,20 +15874,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))))}},n&&e.createElement(e$,{
+className:"ToastProgress",windowState:i,toastType:r.type,
+delay:r.delay??(r.fixed?1/0:3e3)
+}),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)
@@ -16532,12 +16537,12 @@ onClick:()=>{ce?.(Math.ceil(n.length/fe)-1)},disabled:l||c
 se()},disabled:!ae()||l||c},">"),e.createElement(wa,{variant:"secondary",
 onClick:()=>{ue()},disabled:!ae()||l||c
 },">>"))))))))),!v&&G&&p&&e.createElement(xB,null,p)))
-},exports.Tabs=({options:t=[],idAccessor:n="id",nameAccessor:r="name",onChange:a,defaultValue:o,renderTabsContent:i,value:l})=>e.createElement(cj,{
-className:"TabsRoot",value:l,defaultValue:o,onValueChange:a
-},e.createElement(uj,{className:"TabsList","aria-label":"Manage your account"
+},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]
-},i?i(t):null)))),
+},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,{

package/index.d.ts

@@ -1231,6 +1231,7 @@ type TabsProps<T extends TabsItemProps = TabsItemProps> = {
      * Id accessor of tabes
      */
     idAccessor?: string;
+    label?: string;
     /**
      * Name accessor of tabes
      */
@@ -1253,7 +1254,7 @@ type TabsProps<T extends TabsItemProps = TabsItemProps> = {
 /**
  * Tabs component is used to show a set of tabs to the user. It is used to show different sections of content in a single view. It can be used to show different categories of content.
  */
-declare const Tabs: <T extends TabsItemProps>({ options, idAccessor, nameAccessor, onChange, defaultValue, renderTabsContent, value, }: TabsProps<T>) => react__default.JSX.Element;
+declare const Tabs: <T extends TabsItemProps>({ options, idAccessor, nameAccessor, onChange, defaultValue, label, renderTabsContent, value, }: TabsProps<T>) => react__default.JSX.Element;
 
 interface TagProps extends React.HTMLAttributes<HTMLSpanElement> {
     /**
@@ -1481,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

@@ -15748,6 +15748,8 @@ id:d,tabIndex:0},c,{ref:t,style:{...e.style,
 animationDuration:p.current?"0s":void 0}}),n&&l)))
 })),$j=En(Rj)``,Uj=En(jj)``,Yj=En(Fj)`
   border-bottom: 1px solid #f5f7f9;
+  display: flex;
+  flex-wrap: nowrap;
 `,Wj=En(Bj)`
   font-family: ${({theme:e})=>e.typography.fontFamily};
   background-color: unset;
@@ -15757,6 +15759,7 @@ animationDuration:p.current?"0s":void 0}}),n&&l)))
   font-weight: 400;
   font-size: 14px;
   line-height: 20px;
+  white-space: nowrap;
   color: ${({theme:e})=>e.colors.text.primary};
   border-bottom: 2px solid transparent;
   border-radius: 4px 4px 0 0;
@@ -15768,12 +15771,12 @@ animationDuration:p.current?"0s":void 0}}),n&&l)))
     color: ${({theme:e})=>e.colors.text.link};
     border-color: ${({theme:e})=>e.colors.text.link};
   }
-`,Gj=({options:e=[],idAccessor:n="id",nameAccessor:r="name",onChange:a,defaultValue:o,renderTabsContent:i,value:l})=>t.createElement($j,{
-className:"TabsRoot",value:l,defaultValue:o,onValueChange:a
-},t.createElement(Yj,{className:"TabsList","aria-label":"Manage your account"
+`,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]
-},i?i(e):null)))),Kj=t.createContext({toasts:[],windowState:"focus",
+},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)
@@ -16028,7 +16031,7 @@ 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`
@@ -16062,20 +16065,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))))}},n&&t.createElement(P$,{
+className:"ToastProgress",windowState:i,toastType:r.type,
+delay:r.delay??(r.fixed?1/0:3e3)
+}),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.55",
+  "version": "2.0.0-beta.57",
   "description": "React Ui Components for Freemium Apps",
   "main": "./index.js",
   "module": "./index.js",