freemium-ui 2.0.91 → 2.1.0-alpha.0

package/lib/Reorder.d.ts

@@ -0,0 +1,36 @@
+/// <reference types="react" />
+import React$1 from 'react';
+import { DraggableSyntheticListeners } from '@dnd-kit/core';
+
+type ReorderItemType = {
+    id: string | number;
+    [key: string]: any;
+};
+type ReorderProps<T extends ReorderItemType = ReorderItemType> = {
+    /**
+     * Items of reorder
+     */
+    items: T[];
+    /**
+     * Class name of reorder
+     */
+    className?: string;
+    /**
+     * Whether disabled select
+     */
+    disabled?: boolean;
+    /**
+     * should show the Dragger?
+     */
+    showDragger?: boolean;
+    customFilter?: (item: T) => boolean;
+    onReorder?: (items: T[]) => void;
+    customRender: (item: T, index: number, listeners?: DraggableSyntheticListeners) => React.ReactNode;
+};
+
+/**
+ * Reorder is a component that enables reordering of items in a list. It provides a drag handle to reorder the items.
+ */
+declare const Reorder: <T extends ReorderItemType = ReorderItemType>(props: ReorderProps<T>) => React$1.JSX.Element;
+
+export { Reorder, type ReorderItemType, type ReorderProps };

package/lib/Reorder.js

@@ -0,0 +1,5 @@
+export{R as Reorder}from"./Reorder-DUSHsq7i.js"
+;import"./styled-components.browser.esm-Bq2p-e5F.js";import"react"
+;import"react-dom";import"./index-BT1o947S.js";import"./index-BnDw8kbT.js"
+;import"./index-D8E8s0tV.js";import"./index-ByHJlnsx.js"
+;import"./keyframes-PnzFl0I5.js";

package/lib/SortDropdown-B0SSCJX6.js

@@ -0,0 +1,17 @@
+import e from"react"
+;import{e as n}from"./styled-components.browser.esm-Bq2p-e5F.js"
+;import{T as o}from"./index-D8E8s0tV.js"
+;import{a as t,b as l,c as r,d as a,D as s,e as i}from"./styles-BbwNLGy3.js"
+;import{T as m}from"./TickIcon-BJqSAG4_.js";var c=function(c){
+var d=c.trigger,u=c.idAccessor,p=void 0===u?"id":u,v=c.nameAccessor,f=void 0===v?"name":v,E=c.onSelect,b=c.isDisableSortDropdown,D=void 0!==b&&b,w=c.options,S=void 0===w?[]:w,g=c.value,j=n()
+;return e.createElement(t,null,e.createElement(l,{asChild:!0,disabled:D
+},e.createElement(o,null,d)),e.createElement(r,null,e.createElement(a,{
+side:"bottom",sideOffset:4,align:"center",className:"DropdownMenuContent"
+},S.map((function(n,o){return e.createElement(e.Fragment,{key:o
+},n.map((function(n){return e.createElement(s,{id:null==n?void 0:n[p],
+disabled:null==n?void 0:n.disabled,className:"DropdownMenuItem",
+key:null==n?void 0:n[p],onSelect:function(){var e=null!=g?g:[]
+;e[o]=null==n?void 0:n[p],null==E||E(e)}
+},null==n?void 0:n[f],(null==g?void 0:g[o])===(null==n?void 0:n[p])&&e.createElement(m,{
+fill:j.colors.common.accent}))})),e.createElement(i,{
+className:"DropdownMenuSeparator"}))})))))};export{c as S};

package/lib/SortDropdown.d.ts

@@ -0,0 +1,47 @@
+/// <reference types="react" />
+import React$1 from 'react';
+
+interface DefaultMenuItemProps {
+    disabled?: boolean;
+    [key: string]: any;
+}
+
+type TableSortingMenuProps<T extends DefaultMenuItemProps = DefaultMenuItemProps> = {
+    /**
+     * value of menu
+     */
+    value?: string[];
+    /**
+     * Called when a menu item is selected
+     */
+    onSelect?: (value?: string[]) => void;
+    /**
+     * options for menu button
+     */
+    options?: T[][];
+    /**
+     * The children or label
+     */
+    trigger: React.ReactNode | string;
+    /**
+     * Is the button inline
+     * @deprecated
+     */
+    highlightedIndex?: number | null;
+    /**
+     * id Accessor of menu
+     */
+    idAccessor?: string;
+    /**
+     * name Accessor of menu
+     */
+    nameAccessor?: string;
+    isDisableSortDropdown?: boolean;
+};
+
+/**
+ * SortDropdown component is used to render the dropdown for sorting the table
+ */
+declare const SortDropdown: <T extends DefaultMenuItemProps>(props: TableSortingMenuProps<T>) => React$1.JSX.Element;
+
+export { SortDropdown, type TableSortingMenuProps };

package/lib/SortDropdown.js

@@ -0,0 +1,10 @@
+export{S as SortDropdown}from"./SortDropdown-B0SSCJX6.js";import"react"
+;import"./styled-components.browser.esm-Bq2p-e5F.js";import"./index-D8E8s0tV.js"
+;import"./index-ByHJlnsx.js";import"react-dom";import"./index-BnDw8kbT.js"
+;import"./keyframes-PnzFl0I5.js";import"./styles-BbwNLGy3.js"
+;import"./index-CeIB4COQ.js";import"./index-BdTXfGkV.js"
+;import"./index-Cjkk7z9c.js";import"./index-BY9lf-do.js"
+;import"./index-COoRg_pp.js";import"./Combination-AmN1Cqrf.js"
+;import"./index-BrF1HKA1.js";import"./index-BROhcSiX.js"
+;import"./index-Dy5ztCxm.js";import"./index-DtILdK5l.js"
+;import"./index-BxNZ3C71.js";import"./TickIcon-BJqSAG4_.js";

package/lib/Table-cidceyn5.js

@@ -0,0 +1,117 @@
+import{e,c as n,b as t}from"./styled-components.browser.esm-Bq2p-e5F.js"
+;import l from"react"
+;import{u as a,T as o,a as r,b as i,c,x as s,d as m,C as u,e as d,y as g,f,g as p,h as E,S as h,i as v,j as C,k as b,l as w,m as y,n as S,o as k,p as P,B as x,q as N,r as I,s as M,t as O,v as R,M as F,w as j}from"./CustomizeColumns-BSF8e_we.js"
+;import{B as T}from"./Button-Bd1O8_k7.js"
+;import{C as D}from"./Checkbox-By1CgFUJ.js";import{L}from"./Loader-b8lHCp4N.js"
+;import{M as B}from"./Menu-DoE00Mg-.js";import"./styles-BbwNLGy3.js"
+;import{P as z}from"./Popover-BU73-g73.js"
+;import{S as A}from"./SortDropdown-B0SSCJX6.js"
+;import{T as H}from"./Typography-BcAppjDF.js";var V=l.forwardRef((function(e,n){
+return l.createElement("svg",{width:"16",height:"16",viewBox:"0 0 16 16",
+fill:"none",xmlns:"http://www.w3.org/2000/svg"},l.createElement("rect",{
+width:"16",height:"16",fill:"white","fill-opacity":"0.01"
+}),l.createElement("path",{
+d:"M7.99999 10.62C7.84999 10.62 7.68999 10.56 7.57999 10.44L3.53999 6.41001C3.30999 6.18001 3.30999 5.80001 3.53999 5.56001C3.76999 5.33001 4.14999 5.33001 4.38999 5.56001L7.99999 9.17001L11.61 5.56001C11.84 5.33001 12.23 5.33001 12.46 5.56001C12.69 5.79001 12.69 6.17001 12.46 6.41001L8.41999 10.44C8.29999 10.56 8.14999 10.62 7.99999 10.62Z",
+fill:"currentcolor"}))})),G=function(G){
+var Y,q,K=G.data,Z=G.columns,$=G.showFooter,J=void 0!==$&&$,Q=G.infoComponent,U=G.isLoading,W=G.isFetching,X=G.emptyComponent,_=G.loadingComponent,ee=G.actionComponent,ne=G.headerComponent,te=G.editColumnComponent,le=G.filterComponent,ae=G.hideTableOnEmpty,oe=G.hideTopPagination,re=G.hideFilters,ie=G.isFilterOpenByDefault,ce=void 0===ie||ie,se=G.sortingHeading,me=G.showTableOnLoading,ue=G.hideLoaderOnTopPagination,de=G.hideActions,ge=G.count,fe=G.pageIndex,pe=void 0===fe?0:fe,Ee=G.pageSize,he=void 0===Ee?20:Ee,ve=G.enablePreviousPage,Ce=G.enableNextPage,be=G.hideColumnSettings,we=void 0===be||be,ye=G.hideBottomPagination,Se=G.rowMenuOptions,ke=G.onPreviousPageClick,Pe=G.enableSorting,xe=G.sortingValues,Ne=G.sortingOptions,Ie=G.onSortingOptionSelect,Me=G.onNextPageClick,Oe=G.disableRowSelect,Re=G.hideSelectAllInTable,Fe=G.onSelectAllRows,je=G.onRowSelect,Te=G.onMenuOptionSelect,De=G.onRowClick,Le=G.columnOrder,Be=G.setColumnOrder,ze=G.setHiddenColumns,Ae=G.hiddenColumns,He=G.selectedRowIds,Ve=void 0===He?{}:He,Ge=G.isDisableSortDropdown,Ye=G.setSelectedRowIds,qe=G.dataKey,Ke=void 0===qe?"id":qe,Ze=G.cellPropGetter,$e=G.setPageIndex,Je=G.rowPropGetter,Qe=G.translationTexts,Ue=e(),We=l.useState(!!ce),Xe=We[0],_e=We[1],en=R(),nn=-1===ge||void 0===ge,tn=l.useMemo((function(){
+return n(n(n([],Oe?[]:[{id:"select",header:function(e){var n=e.table
+;return Re?l.createElement("div",{className:"table-checkbox-header"
+}):l.createElement(D,t({className:"table-checkbox"},{
+checked:n.getIsSomeRowsSelected()?"indeterminate":n.getIsAllRowsSelected(),
+indeterminate:n.getIsSomeRowsSelected(),onCheckedChange:function(e){
+n.toggleAllPageRowsSelected(!0===e),null==Fe||Fe(!0===e)}}))},cell:function(e){
+var n=e.row;return l.createElement(D,t({className:"table-checkbox"},{
+checked:n.getIsSelected(),disabled:!n.getCanSelect(),
+indeterminate:n.getIsSomeSelected(),onCheckedChange:function(e){
+n.toggleSelected(!0===e),null==je||je(n.original,!0===e)}}))}
+}],!0),Z.map((function(e){var n;return en.accessor(e.id,{header:e.Header,
+id:null!==(n=e.id)&&void 0!==n?n:e.Header,cell:function(n){
+return e.accessorFn(n.row.original)}})})),!0),Se?[{id:"rowMenuOptions",
+header:function(){return l.createElement("div",{id:"more-actions-header"})},
+cell:function(e){var n=e.row;return l.createElement(B,{
+trigger:l.createElement(F,{className:"more-actions",fill:"currentcolor"}),
+options:Se(n.original)||[],onSelect:function(e){
+e.id&&(null==Te||Te(e.id,n.original))},side:"bottom",
+align:"rtl"===Ue.direction?"start":"end"})}}]:[],!0)
+}),[Z,Oe,Re,Ue.colors.text.primary]),ln=l.useMemo((function(){var e={}
+;return Z.forEach((function(n){e[n.id]=!(null!=Ae?Ae:[]).includes(n.id)})),e
+}),[Z,Ae]),an=l.useMemo((function(){return{pageIndex:pe,pageSize:he}
+}),[he,pe]),on=a({data:K,columns:tn,getRowId:function(e){var n
+;return null!==(n=null==e?void 0:e[Ke])&&void 0!==n?n:"id"},getCoreRowModel:j(),
+state:{columnOrder:Le,columnVisibility:ln,rowSelection:Ve,pagination:an},
+initialState:{columnPinning:{left:["select"],right:["rowMenuOptions"]}},
+onPaginationChange:function(e){var n=an
+;n="function"==typeof e?e(an):e,null==$e||$e(n.pageIndex)},
+onColumnVisibilityChange:function(e){var n=ln
+;n="function"==typeof e?e(ln):e,null==ze||ze(Object.keys(n).filter((function(e){
+return!n[e]})))},onColumnOrderChange:function(e){var n=null!=Le?Le:[]
+;n="function"==typeof e?e(null!=Le?Le:[]):e,null==Be||Be(n)},
+onRowSelectionChange:function(e){var n=Ve
+;n="function"==typeof e?e(Ve):e,null==Ye||Ye(n)},enableRowSelection:!0,
+manualPagination:!0,rowCount:nn?-1:ge
+}),rn=on.getPageCount,cn=on.getRowModel,sn=on.getState,mn=on.getCanNextPage,un=on.getCanPreviousPage,dn=on.getPageOptions,gn=on.previousPage,fn=on.setPageIndex,pn=on.nextPage,En=on.lastPage,hn=on.firstPage,vn=cn().rows,Cn=sn().pagination,bn=Cn.pageIndex,wn=Cn.pageSize,yn=bn*wn+(bn<rn()-1?wn:vn.length),Sn=on.getAllColumns().filter((function(e){
+return e.getIsVisible()
+})).length+(Oe?0:1)+(Se?1:0),kn=null===(Y=null==Ne?void 0:Ne[0].find((function(e){
+return e.id===(null==xe?void 0:xe[0])})))||void 0===Y?void 0:Y.name
+;return l.createElement(o,{className:"TableContainer"},!de&&l.createElement(r,{
+className:"table-actions"
+},ee&&l.createElement(l.Fragment,null,ee),l.createElement(i,{
+className:"table-header-component"},null!=ne?ne:null),l.createElement(c,{
+className:"table-header-dropdown-pagination"},Pe&&l.createElement("div",{
+className:"table-heading-dropdown"},l.createElement("div",{
+className:"table-sorting-heading"},"".concat(se,":"))," ",l.createElement(A,{
+trigger:l.createElement("div",{className:"table-sorting-value-continer"
+},l.createElement("div",null,kn),l.createElement(V,{fill:"currentcolor"})),
+isDisableSortDropdown:!!Ge,options:Ne||[],value:xe,onSelect:function(e){
+null==Ie||Ie(null!=e?e:[])}})),l.createElement(s,{
+className:"table-edit-column-component"},null!=te?te:null),l.createElement(m,{
+className:"pagination-actions"
+},!oe&&l.createElement(l.Fragment,null,l.createElement(H,{variant:"primary",
+className:"pagination-text"},U&&!ue?l.createElement(L,{size:"small"
+}):l.createElement(l.Fragment,null,K.length>0?"".concat(bn*wn+1," - ").concat(yn," ").concat((null==Qe?void 0:Qe.of)||"of"," ").concat(nn?"".concat(vn.length>0?"".concat((null==Qe?void 0:Qe.many)||"Many"):"-"):null!==(q=null!=ge?ge:vn.length)&&void 0!==q?q:"-"):null)),l.createElement(T,{
+variant:"secondary",className:"table-pagination-button",onClick:function(){
+null==ke||ke(),nn||gn()},disabled:nn?!ve:!un()||U||W},l.createElement(u,{
+fill:Ue.colors.text.primary})),l.createElement(T,{variant:"secondary",
+className:"table-pagination-button",onClick:function(){null==Me||Me(),nn||pn()},
+disabled:nn?!Ce:!mn()||U||W},l.createElement(d,{fill:Ue.colors.text.primary
+}))),!re&&l.createElement(T,{variant:"secondary",
+className:"table-pagination-button filter-toggle",onClick:function(){
+return _e(!Xe)}},l.createElement(g,{style:{
+transform:Xe?"rotateY(180deg)":"rotateY(0deg)"},fill:"currentcolor"
+}))))),l.createElement(f,null,l.createElement(p,{className:"table-wrapper"
+},Q&&l.createElement(E,null,Q),U&&!me?l.createElement(l.Fragment,null,_):l.createElement(l.Fragment,null,0===vn.length&&ae?l.createElement(l.Fragment,null,X):l.createElement(h,null,l.createElement(v,null,!we&&l.createElement(z,{
+align:"end",avoidCollisions:!0,side:"top",trigger:l.createElement(C,{
+fill:"currentcolor"})},l.createElement(b,{table:on
+})),l.createElement(w,null,on.getHeaderGroups().map((function(e){
+return l.createElement(y,{key:e.id},e.headers.map((function(e){
+return l.createElement(S,{key:e.id
+},e.isPlaceholder?null:k(e.column.columnDef.header,e.getContext()))})))
+}))),l.createElement(P,null,W&&!U&&l.createElement(x,null,l.createElement(L,null)),vn.map((function(e){
+return l.createElement(y,t({key:e.id,$isSelected:e.getIsSelected()
+},null==Je?void 0:Je(e.original)),e.getVisibleCells().map((function(n){
+return l.createElement(N,t({key:n.id,onClick:function(){
+null==De||De(e.original,n.column.columnDef)}
+},null==Ze?void 0:Ze(n)),k(n.column.columnDef.cell,n.getContext()))})))
+}))),J&&l.createElement(I,null,on.getFooterGroups().map((function(e){
+return l.createElement(y,{key:e.id},e.headers.map((function(e){
+return l.createElement(S,{key:e.id
+},e.isPlaceholder?null:k(e.column.columnDef.footer,e.getContext()))})))
+}))),!ye&&l.createElement(I,null,l.createElement(y,null,l.createElement(S,{
+colSpan:Sn},l.createElement(M,{className:"table-pagination"},l.createElement(T,{
+variant:"secondary",onClick:function(){hn()},disabled:!un()||U||W
+},"<<"),l.createElement(T,{variant:"secondary",onClick:function(){gn()},
+disabled:!un()||U||W
+},"<"),bn+1>2&&l.createElement(l.Fragment,null,l.createElement(T,{
+variant:"secondary",onClick:function(){hn()},disabled:U||W
+},"1"),bn+1-3!=0&&l.createElement(T,{variant:"secondary",disabled:!0
+},"...")),dn().map((function(e){
+return[e-2,e-1,e,e+1,e+2].includes(bn+1)&&l.createElement(T,{key:e,
+variant:"secondary",className:bn+1===e+1?"active":"",onClick:function(){
+null==fn||fn(e)},disabled:U||W},e+1)
+})),bn+2<Math.ceil(K.length/wn)-2&&l.createElement(l.Fragment,null,bn+2+3!==Math.ceil(K.length/wn)&&l.createElement(T,{
+variant:"secondary",disabled:!0},"..."),l.createElement(T,{variant:"secondary",
+onClick:function(){null==fn||fn(Math.ceil(K.length/wn)-1)},disabled:U||W
+},Math.ceil(K.length/wn))),l.createElement(T,{variant:"secondary",
+onClick:function(){pn()},disabled:!mn()||U||W},">"),l.createElement(T,{
+variant:"secondary",onClick:function(){En()},disabled:!mn()||U||W
+},">>"))))))))),!re&&Xe&&le&&l.createElement(O,null,le)))};export{G as T};

package/lib/Table.d.ts

@@ -0,0 +1,95 @@
+/// <reference types="react" />
+import react from 'react';
+import { CoreOptions, ColumnDef, Cell, RowSelectionState } from '@tanstack/react-table';
+import { MenuItemProps as MenuItemProps$1 } from '@radix-ui/react-dropdown-menu';
+
+type MenuItemProps = MenuItemProps$1 & {
+    isSelected?: boolean;
+};
+
+type RowDataType = {
+    [key in string]: any;
+};
+type SortingOptionsType = {
+    id: string;
+    name: string;
+};
+interface FuiTableColumnType<T extends RowDataType> {
+    id: string;
+    Header: string;
+    accessorFn: (row: T) => React.ReactNode | string | null;
+    disableSortBy?: boolean;
+}
+interface TableProps<T extends RowDataType> {
+    /**
+     * How large should the button be?
+     */
+    data: CoreOptions<T>['data'];
+    columns: FuiTableColumnType<T>[];
+    count?: number;
+    pageSize?: number;
+    pageIndex?: number;
+    sortingHeading?: string;
+    enableSorting?: boolean;
+    sortingOptions?: SortingOptionsType[][];
+    sortingValues?: string[];
+    onSortingOptionSelect?: (option: string[]) => void;
+    enablePreviousPage?: boolean;
+    enableNextPage?: boolean;
+    isLoading?: boolean;
+    isFetching?: boolean;
+    showFooter?: boolean;
+    hideColumnSettings?: boolean;
+    hideTableOnEmpty?: boolean;
+    hideTopPagination?: boolean;
+    hideFilters?: boolean;
+    showTableOnLoading?: boolean;
+    hideLoaderOnTopPagination?: boolean;
+    hideActions?: boolean;
+    showWorkspaceActions?: boolean;
+    hideSelectAllInTable?: boolean;
+    hideBottomPagination?: boolean;
+    disableRowSelect?: boolean;
+    infoComponent?: React.ReactElement;
+    filterComponent?: React.ReactElement;
+    isDisableSortDropdown?: boolean | null;
+    isFilterOpenByDefault?: boolean | null;
+    emptyComponent?: React.ReactElement;
+    actionComponent?: React.ReactElement;
+    loadingComponent?: React.ReactElement;
+    headerComponent?: React.ReactElement;
+    editColumnComponent?: React.ReactElement;
+    translationTexts?: Record<string, any> | null;
+    onNextPageClick?: () => void;
+    onPreviousPageClick?: () => void;
+    onSelectAllRows?: (checked: boolean) => void;
+    onRowSelect?: (row: T, checked: boolean) => void;
+    rowMenuOptions?: (RowDataType: T) => MenuItemProps[];
+    onMenuOptionSelect?: (optionId: string, row: T) => void;
+    onRowClick?: (row: T, column: ColumnDef<T, unknown>) => void;
+    dataKey?: string;
+    rowPropGetter?: (row: T) => React.HTMLAttributes<HTMLTableRowElement>;
+    cellPropGetter?: (cell: Cell<T, unknown>) => React.HTMLAttributes<HTMLTableCellElement>;
+    /**
+     * @deprecated
+     */
+    tableOptions?: any;
+    /**
+     * @deprecated
+     */
+    loaderStyles?: React.CSSProperties;
+    setPageIndex?: (pageIndex: number) => void | React.Dispatch<React.SetStateAction<number>>;
+    hiddenColumns?: string[];
+    setHiddenColumns?: (hiddenColumns: string[]) => void | React.Dispatch<React.SetStateAction<string[]>>;
+    columnOrder?: string[];
+    setColumnOrder?: (columnOrder: string[]) => void | React.Dispatch<React.SetStateAction<string[]>>;
+    selectedRowIds?: RowSelectionState;
+    setSelectedRowIds?: (selectedRowIds: RowSelectionState) => void | React.Dispatch<React.SetStateAction<RowSelectionState>>;
+}
+
+/**
+ * Table component is used to display data in a tabular format. It is used to show data in a structured manner. It can be used to show data in a grid format.
+ */
+declare const Table: <T extends RowDataType = RowDataType>(props: TableProps<T>) => react.JSX.Element;
+
+export { type RowDataType, Table, type TableProps };

package/lib/Table.js

@@ -0,0 +1,18 @@
+export{T as Table}from"./Table-cidceyn5.js"
+;import"./styled-components.browser.esm-Bq2p-e5F.js";import"react"
+;import"./CustomizeColumns-BSF8e_we.js";import"./index-D8E8s0tV.js"
+;import"./index-ByHJlnsx.js";import"react-dom";import"./index-BnDw8kbT.js"
+;import"./keyframes-PnzFl0I5.js";import"./ChevronUp-BWiG3XYd.js"
+;import"./Button-Bd1O8_k7.js";import"./Checkbox-By1CgFUJ.js"
+;import"./index-BdTXfGkV.js";import"./index-CeIB4COQ.js"
+;import"./index-DtzckyT3.js";import"./index-BROhcSiX.js"
+;import"./index-Dy5ztCxm.js";import"./TickIcon-BJqSAG4_.js"
+;import"./Cross-CIeKwtq6.js";import"./TextArea--fiwZ_QM.js"
+;import"./ErrorText-Uvye7uop.js";import"./Popover-BU73-g73.js"
+;import"./index-COoRg_pp.js";import"./Combination-AmN1Cqrf.js"
+;import"./index-BxNZ3C71.js";import"./index-BrF1HKA1.js"
+;import"./Reorder-DUSHsq7i.js";import"./index-BT1o947S.js"
+;import"./Typography-BcAppjDF.js";import"./Loader-b8lHCp4N.js"
+;import"./Menu-DoE00Mg-.js";import"./styles-BbwNLGy3.js"
+;import"./index-Cjkk7z9c.js";import"./index-BY9lf-do.js"
+;import"./index-DtILdK5l.js";import"./SortDropdown-B0SSCJX6.js";

package/lib/Tabs-j1c7ybY-.js

@@ -0,0 +1,50 @@
+import n,{forwardRef as e,createElement as o,useRef as t,useEffect as r}from"react"
+;import{u as a,_ as i,e as s}from"./styled-components.browser.esm-Bq2p-e5F.js"
+;import{a as l,_ as d}from"./index-ByHJlnsx.js"
+;import{a as c,$ as u}from"./index-CeIB4COQ.js"
+;import{$ as p}from"./index-BdTXfGkV.js"
+;import{$ as b,a as m,b as f}from"./index-DtILdK5l.js"
+;import{$ as v}from"./index-Dy5ztCxm.js";import{$ as h}from"./index-BY9lf-do.js"
+;import{$ as x}from"./index-BxNZ3C71.js"
+;const g="Tabs",[y,w]=p(g,[b]),T=b(),[C,$]=y(g),_=e(((n,e)=>{
+const{__scopeTabs:t,value:r,onValueChange:a,defaultValue:i,orientation:s="horizontal",dir:u,activationMode:p="automatic",...b}=n,m=h(u),[f,v]=c({
+prop:r,onChange:a,defaultProp:i});return o(C,{scope:t,baseId:x(),value:f,
+onValueChange:v,orientation:s,dir:m,activationMode:p},o(l.div,d({dir:m,
+"data-orientation":s},b,{ref:e})))}));function k(n,e){return`${n}-trigger-${e}`}
+function V(n,e){return`${n}-content-${e}`}const j=e(((n,e)=>{
+const{__scopeTabs:t,loop:r=!0,...a}=n,i=$("TabsList",t),s=T(t);return o(m,d({
+asChild:!0},s,{orientation:i.orientation,dir:i.dir,loop:r}),o(l.div,d({
+role:"tablist","aria-orientation":i.orientation},a,{ref:e})))})),D=e(((n,e)=>{
+const{__scopeTabs:t,value:r,disabled:a=!1,...i}=n,s=$("TabsTrigger",t),c=T(t),p=k(s.baseId,r),b=V(s.baseId,r),m=r===s.value
+;return o(f,d({asChild:!0},c,{focusable:!a,active:m}),o(l.button,d({
+type:"button",role:"tab","aria-selected":m,"aria-controls":b,
+"data-state":m?"active":"inactive","data-disabled":a?"":void 0,disabled:a,id:p
+},i,{ref:e,onMouseDown:u(n.onMouseDown,(n=>{
+a||0!==n.button||!1!==n.ctrlKey?n.preventDefault():s.onValueChange(r)})),
+onKeyDown:u(n.onKeyDown,(n=>{[" ","Enter"].includes(n.key)&&s.onValueChange(r)
+})),onFocus:u(n.onFocus,(()=>{const n="manual"!==s.activationMode
+;m||a||!n||s.onValueChange(r)}))})))})),I=e(((n,e)=>{
+const{__scopeTabs:a,value:i,forceMount:s,children:c,...u}=n,p=$("TabsContent",a),b=k(p.baseId,i),m=V(p.baseId,i),f=i===p.value,h=t(f)
+;return r((()=>{const n=requestAnimationFrame((()=>h.current=!1))
+;return()=>cancelAnimationFrame(n)}),[]),o(v,{present:s||f
+},(({present:t})=>o(l.div,d({"data-state":f?"active":"inactive",
+"data-orientation":p.orientation,role:"tabpanel","aria-labelledby":b,hidden:!t,
+id:m,tabIndex:0},u,{ref:e,style:{...n.style,
+animationDuration:h.current?"0s":void 0}}),t&&c)))}))
+;var M,A,E,F,N=a(_)(M||(M=i([""],[""]))),z=a(I)(A||(A=i([""],[""]))),K=a(j)(E||(E=i(["\n  border-bottom: 1px solid ",";\n  display: flex;\n  flex-wrap: nowrap;\n  gap: 12px;\n  direction: ",";\n"],["\n  border-bottom: 1px solid ",";\n  display: flex;\n  flex-wrap: nowrap;\n  gap: 12px;\n  direction: ",";\n"])),(function(n){
+return n.theme.colors.border.light}),(function(n){return n.theme.direction
+})),L=a(D)(F||(F=i(["\n  font-family: ",";\n  direction: ",";\n  background-color: unset;\n  border: unset;\n  margin: 0;\n  padding: 8px;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 20px;\n  white-space: nowrap;\n  color: ",";\n  border-bottom: 2px solid transparent;\n  border-radius: 4px 4px 0 0;\n  &:hover {\n    border-color: ",";\n    cursor: pointer;\n  }\n  &[data-state='active'] {\n    color: "," !important;\n    border-color: ",";\n    cursor: pointer !important;\n  }\n  &[disabled] {\n    background-color: inherit;\n    color: ",";\n    cursor: not-allowed;\n  }\n"],["\n  font-family: ",";\n  direction: ",";\n  background-color: unset;\n  border: unset;\n  margin: 0;\n  padding: 8px;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 20px;\n  white-space: nowrap;\n  color: ",";\n  border-bottom: 2px solid transparent;\n  border-radius: 4px 4px 0 0;\n  &:hover {\n    border-color: ",";\n    cursor: pointer;\n  }\n  &[data-state='active'] {\n    color: "," !important;\n    border-color: ",";\n    cursor: pointer !important;\n  }\n  &[disabled] {\n    background-color: inherit;\n    color: ",";\n    cursor: not-allowed;\n  }\n"])),(function(n){
+return n.theme.typography.fontFamily}),(function(n){return n.theme.direction
+}),(function(n){return n.theme.colors.text.primary}),(function(n){
+return n.theme.colors.border.divider}),(function(n){
+return n.theme.colors.text.link}),(function(n){return n.theme.colors.text.link
+}),(function(n){return n.theme.colors.text.disabled})),q=function(e){
+var o=e.options,t=void 0===o?[]:o,r=e.idAccessor,a=void 0===r?"id":r,i=e.nameAccessor,l=void 0===i?"name":i,d=e.disabledAccessor,c=void 0===d?"disabled":d,u=e.onChange,p=e.defaultValue,b=e.label,m=e.renderTabsContent,f=e.value,v=s()
+;return n.createElement(N,{className:"TabsRoot",value:f,defaultValue:p,
+onValueChange:u,dir:v.direction},n.createElement(K,{className:"TabsList",
+"aria-label":b},t.map((function(e){return n.createElement(L,{
+className:"TabsTrigger",value:null==e?void 0:e[a],key:null==e?void 0:e[a],
+disabled:null==e?void 0:e[c]},null==e?void 0:e[l])}))),t.map((function(e){
+return n.createElement(z,{className:"TabsContent",value:null==e?void 0:e[a],
+key:null==e?void 0:e[a]},m?m(e):null)})))}
+;export{q as T,z as a,N as b,K as c,L as d};

package/lib/Tabs.d.ts

@@ -0,0 +1,68 @@
+/// <reference types="react" />
+import * as react from 'react';
+import react__default from 'react';
+import * as Tabs$1 from '@radix-ui/react-tabs';
+import { TabsProps as TabsProps$1 } from '@radix-ui/react-tabs';
+import * as styled_components from 'styled-components';
+import * as styled_components_dist_types from 'styled-components/dist/types';
+
+declare const TabsRoot: styled_components.IStyledComponent<"web", styled_components_dist_types.FastOmit<Omit<Tabs$1.TabsProps & react.RefAttributes<HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | react.RefObject<HTMLDivElement> | null | undefined;
+}, never>> & Omit<react.ForwardRefExoticComponent<Tabs$1.TabsProps & react.RefAttributes<HTMLDivElement>>, keyof react.Component<any, {}, any>>;
+declare const TabsContent: styled_components.IStyledComponent<"web", styled_components_dist_types.FastOmit<Omit<Tabs$1.TabsContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | react.RefObject<HTMLDivElement> | null | undefined;
+}, never>> & Omit<react.ForwardRefExoticComponent<Tabs$1.TabsContentProps & react.RefAttributes<HTMLDivElement>>, keyof react.Component<any, {}, any>>;
+declare const TabsList: styled_components.IStyledComponent<"web", styled_components_dist_types.FastOmit<Omit<Tabs$1.TabsListProps & react.RefAttributes<HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | react.RefObject<HTMLDivElement> | null | undefined;
+}, never>> & Omit<react.ForwardRefExoticComponent<Tabs$1.TabsListProps & react.RefAttributes<HTMLDivElement>>, keyof react.Component<any, {}, any>>;
+declare const TabsTrigger: styled_components.IStyledComponent<"web", styled_components_dist_types.FastOmit<Omit<Tabs$1.TabsTriggerProps & react.RefAttributes<HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | react.RefObject<HTMLButtonElement> | null | undefined;
+}, never>> & Omit<react.ForwardRefExoticComponent<Tabs$1.TabsTriggerProps & react.RefAttributes<HTMLButtonElement>>, keyof react.Component<any, {}, any>>;
+
+interface TabsItemProps {
+    id: string;
+    name: string;
+    hide?: boolean;
+    disabled?: boolean;
+    [key: string]: any;
+}
+type TabsProps<T extends TabsItemProps = TabsItemProps> = {
+    /**
+     * options for Tabs
+     */
+    options?: Array<T>;
+    renderTabsContent?: (tabOption: T) => React.ReactNode;
+    /**
+     * Id accessor of tabes
+     */
+    idAccessor?: string;
+    label?: string;
+    /**
+     * Name accessor of tabs
+     */
+    nameAccessor?: string;
+    /**
+     * Disabled accessor of tabs
+     */
+    disabledAccessor?: string;
+    ref?: React.RefObject<HTMLDivElement>;
+    /**
+     * value for tabs
+     */
+    value?: TabsProps$1['value'];
+    /**
+     * default value of tabes
+     */
+    defaultValue?: TabsProps$1['defaultValue'];
+    /**
+     * Function to be called when the selected item changes
+     */
+    onChange?: TabsProps$1['onValueChange'];
+};
+
+/**
+ * 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, disabledAccessor, onChange, defaultValue, label, renderTabsContent, value, }: TabsProps<T>) => react__default.JSX.Element;
+
+export { Tabs, TabsContent, type TabsItemProps, TabsList, type TabsProps, TabsRoot, TabsTrigger };

package/lib/Tabs.js

@@ -0,0 +1,6 @@
+export{T as Tabs,a as TabsContent,c as TabsList,b as TabsRoot,d as TabsTrigger}from"./Tabs-j1c7ybY-.js"
+;import"react";import"./styled-components.browser.esm-Bq2p-e5F.js"
+;import"./index-ByHJlnsx.js";import"react-dom";import"./index-CeIB4COQ.js"
+;import"./index-BdTXfGkV.js";import"./index-DtILdK5l.js"
+;import"./index-Cjkk7z9c.js";import"./index-BxNZ3C71.js"
+;import"./index-BY9lf-do.js";import"./index-Dy5ztCxm.js";

package/lib/Tag-Cu75ReQP.js

@@ -0,0 +1,49 @@
+import{u as n,_ as e,a as r,e as t,b as o}from"./styled-components.browser.esm-Bq2p-e5F.js"
+
+;import i,{forwardRef as a,useState as s,createElement as l,useEffect as c}from"react"
+;import{a as d,_ as h}from"./index-ByHJlnsx.js"
+;import{$ as f,b as u,c as m}from"./index-BdTXfGkV.js"
+;import{C as p}from"./Cross-CIeKwtq6.js"
+;const g="Avatar",[y,v]=f(g),[x,b]=y(g),w=a(((n,e)=>{
+const{__scopeAvatar:r,...t}=n,[o,i]=s("idle");return l(x,{scope:r,
+imageLoadingStatus:o,onImageLoadingStatusChange:i},l(d.span,h({},t,{ref:e})))}))
+;const S=a(((n,e)=>{
+const{__scopeAvatar:r,src:t,onLoadingStatusChange:o=(()=>{}),...i}=n,a=b("AvatarImage",r),c=function(n){
+const[e,r]=s("idle");return m((()=>{if(!n)return void r("error");let e=!0
+;const t=new window.Image,o=n=>()=>{e&&r(n)}
+;return r("loading"),t.onload=o("loaded"),t.onerror=o("error"),t.src=n,()=>{e=!1
+}}),[n]),e}(t),f=u((n=>{o(n),a.onImageLoadingStatusChange(n)}));return m((()=>{
+"idle"!==c&&f(c)}),[c,f]),"loaded"===c?l(d.img,h({},i,{ref:e,src:t})):null
+})),k=a(((n,e)=>{
+const{__scopeAvatar:r,delayMs:t,...o}=n,i=b("AvatarFallback",r),[a,f]=s(void 0===t)
+;return c((()=>{if(void 0!==t){const n=window.setTimeout((()=>f(!0)),t)
+;return()=>window.clearTimeout(n)}
+}),[t]),a&&"loaded"!==i.imageLoadingStatus?l(d.span,h({},o,{ref:e})):null}))
+;var A,j,C,I,E,_=n(w)(A||(A=e(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  vertical-align: middle;\n  overflow: hidden;\n  user-select: none;\n  width: 24px;\n  height: 24px;\n  border-radius: 100%;\n"],["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  vertical-align: middle;\n  overflow: hidden;\n  user-select: none;\n  width: 24px;\n  height: 24px;\n  border-radius: 100%;\n"]))),z=n(S)(j||(j=e(["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: inherit;\n"],["\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: inherit;\n"]))),T=n(k)(C||(C=e(["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: white;\n  color: ",";\n  font-family: ",";\n  font-size: ",";\n  font-weight: ",";\n  line-height: ",";\n"],["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: white;\n  color: ",";\n  font-family: ",";\n  font-size: ",";\n  font-weight: ",";\n  line-height: ",";\n"])),(function(n){
+return n.theme.colors.text.primary}),(function(n){
+return n.theme.typography.fontFamily}),(function(n){
+return n.theme.typography.secondary.fontSize}),(function(n){
+return n.theme.typography.secondary.fontWeight}),(function(n){
+return n.theme.typography.secondary.lineHeight
+})),L=n.button(I||(I=e(["\n  border: none;\n  cursor: pointer;\n  padding: 6px;\n  display: flex;\n  border-radius: 50%;\n  &:focus,\n  &:hover {\n    background-color: ",";\n  }\n"],["\n  border: none;\n  cursor: pointer;\n  padding: 6px;\n  display: flex;\n  border-radius: 50%;\n  &:focus,\n  &:hover {\n    background-color: ",";\n  }\n"])),(function(n){
+var e=n.theme;return"dark"===e.mode?e.colors.fill.hover:e.colors.fill.surface
+})),B=n.span(E||(E=e(["\n  padding: 4px 6px;\n  border-radius: 16px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  width: fit-content;\n  direction: ",";\n  font-family: ",";\n  font-size: ",";\n  font-weight: ",";\n  line-height: ",";\n  color: ",";\n  background-color: ",";\n  border: 1px solid\n    ",";\n  &:hover {\n    border-color: ",";\n  }\n"],["\n  padding: 4px 6px;\n  border-radius: 16px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  width: fit-content;\n  direction: ",";\n  font-family: ",";\n  font-size: ",";\n  font-weight: ",";\n  line-height: ",";\n  color: ",";\n  background-color: ",";\n  border: 1px solid\n    ",";\n  &:hover {\n    border-color: ",";\n  }\n"])),(function(n){
+return n.theme.direction}),(function(n){return n.theme.typography.fontFamily
+}),(function(n){return n.theme.typography.secondary.fontSize}),(function(n){
+return n.theme.typography.fontWeight["semi-bold"]}),(function(n){
+return n.theme.typography.secondary.lineHeight}),(function(n){
+return n.theme.colors.text.primary}),(function(n){
+return n.theme.colors.fill.base}),(function(n){var e=n.theme
+;return n.$showBorder?e.colors.border.normal:"transparent"}),(function(n){
+return n.theme.colors.border.hover})),F=i.forwardRef((function(n,e){
+var a=n.children,s=n.iconProps,l=n.onClose,c=n.showBorder,d=void 0!==c&&c,h=n.hideClose,f=void 0!==h&&h,u=n.avatarImgAlt,m=n.avatarImgSrc,g=n.avatarText,y=n.style
+;n.state
+;var v=n.iconSVGProps,x=r(n,["children","iconProps","onClose","showBorder","hideClose","avatarImgAlt","avatarImgSrc","avatarText","style","state","iconSVGProps"]),b=t()
+;return i.createElement(B,o({$showBorder:d,style:y,className:"StyledTag",
+dir:b.direction},x,{ref:e}),m||g?i.createElement(_,{className:"AvatarRoot"
+},i.createElement(z,{className:"AvatarImage",src:m,alt:u}),i.createElement(T,{
+className:"AvatarFallback",delayMs:600
+},g)):i.createElement("div",null),a,f?i.createElement("div",null):i.createElement(L,o({},s,{
+onClick:l}),i.createElement(p,o({},v,{
+fill:"dark"===b.mode?b.colors.text.inverse:b.colors.text.primary}))))}))
+;export{F as T};

package/lib/Tag.d.ts

@@ -0,0 +1,50 @@
+/// <reference types="react" />
+import React$1 from 'react';
+
+interface TagProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /**
+     * State of the tag
+     */
+    state?: 'error' | 'default' | 'transparent';
+    /**
+     * Show border around the tag
+     */
+    showBorder?: boolean;
+    /**
+     * Show border around the tag
+     */
+    hideClose?: boolean;
+    /**
+     * Image source for the avatar
+     */
+    avatarImgSrc?: string;
+    /**
+     * Image alt for the avatar
+     */
+    avatarImgAlt?: string;
+    /**
+     * Text for the avatar
+     */
+    avatarText?: string;
+    /**
+     * Function to be called when the tag is closed
+     */
+    onClose?: React.MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Children of the tag
+     */
+    children?: React.ReactNode;
+    /**
+     * Props for the icon
+     */
+    iconProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
+    iconSVGProps?: React.SVGProps<SVGSVGElement>;
+    style?: React.CSSProperties;
+}
+
+/**
+ * Tag component is used to show a tag to the user. It is used to show a label or a category
+ */
+declare const Tag: React$1.ForwardRefExoticComponent<TagProps & React$1.RefAttributes<HTMLSpanElement>>;
+
+export { Tag, type TagProps };

package/lib/Tag.js

@@ -0,0 +1,4 @@
+export{T as Tag}from"./Tag-Cu75ReQP.js"
+;import"./styled-components.browser.esm-Bq2p-e5F.js";import"react"
+;import"./index-ByHJlnsx.js";import"react-dom";import"./index-BdTXfGkV.js"
+;import"./Cross-CIeKwtq6.js";