@majapisoftwares/ui 4.0.2

package/components/Table/DataTable.jsx

@@ -0,0 +1,155 @@
+import { Fragment, useCallback, useEffect, useState, } from "react";
+import Loading from "../Loading";
+import Skeleton from "../Skeleton";
+import Stack from "../Stack";
+import Text from "../Text";
+import Table from "./Table";
+import clsx from "../../utils/clsx";
+import { ChevronUpIcon } from "@heroicons/react/20/solid";
+export default function DataTable({ title, subtitle, headerContent, data, idAccessor = "_id", actions, columns, isLoading, noRecords: noRecordsText = "No records", onRowClick, rowWrapper, pagination, currentPage = 0, onChangePage, totalItems, itemsPerPage = 0, className, autoHeight, onChangeSort, sort: defaultSort = [], previousText, nextText, showingText, toText, ofText, resultsText, tableClassName, }) {
+    const [sort, setSort] = useState(defaultSort);
+    const [page, setPage] = useState(currentPage);
+    useEffect(() => {
+        if (page !== currentPage) {
+            setPage(currentPage);
+        }
+    }, [currentPage, page]);
+    useEffect(() => {
+        if (onChangePage) {
+            onChangePage(page);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [page]);
+    const handleRowClick = useCallback((item) => (onRowClick ? () => onRowClick(item) : undefined), [onRowClick]);
+    const getColumnSort = useCallback((id) => sort.find((column) => id === column[0]), [sort]);
+    const handleColumnClick = useCallback((id) => () => {
+        const sort = getColumnSort(id) || [
+            id,
+            null,
+        ];
+        switch (sort[1]) {
+            case "asc":
+                sort[1] = "desc";
+                break;
+            case "desc":
+                sort[1] = null;
+                break;
+            case null:
+                sort[1] = "asc";
+                break;
+        }
+        setSort((oldSort) => {
+            const newSort = [...oldSort];
+            if (sort[1]) {
+                const column = newSort.find((column) => column[0] === id);
+                if (column) {
+                    column[1] = sort[1];
+                }
+                else {
+                    newSort.push([sort[0], sort[1]]);
+                }
+                return newSort;
+            }
+            return newSort.filter((column) => !!column[1]);
+        });
+    }, [getColumnSort]);
+    useEffect(() => {
+        if (onChangeSort) {
+            onChangeSort?.(sort);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [sort]);
+    return (<Stack className={clsx({
+            "flex flex-1 flex-col": autoHeight,
+        }, className)}>
+      {(title || subtitle || headerContent) && (<Table.Header title={title} subtitle={subtitle}>
+          {headerContent}
+        </Table.Header>)}
+      <Table autoHeight={autoHeight} className={tableClassName}>
+        <Table.Head>
+          <Table.Row>
+            {columns.map((column, i) => {
+            const id = column.id ||
+                (typeof column.title === "string"
+                    ? column.title
+                    : i.toString());
+            const columnSort = getColumnSort(id);
+            return (<Table.Cell key={id} className={column.headerClassName}>
+                  {column.sortable ? (<span className="group inline-flex cursor-pointer" onClick={handleColumnClick(id)}>
+                      {column.title}
+                      <span className={clsx("mb-auto ml-2 flex-none rounded-sm text-zinc-400", {
+                        "bg-zinc-200 text-zinc-900 group-hover:bg-zinc-300": columnSort?.[1],
+                        "invisible group-hover:visible group-focus:visible": !columnSort?.[1],
+                    })}>
+                        <ChevronUpIcon className={clsx("h-5 w-5", {
+                        "scale-y-flip": columnSort?.[1] === "desc",
+                    })} aria-hidden="true"/>
+                      </span>
+                    </span>) : (column.title)}
+                </Table.Cell>);
+        })}
+            {actions && <Table.Cell />}
+          </Table.Row>
+          {isLoading && (<tr className="absolute right-3 top-2 rounded-full bg-zinc-50/50 dark:bg-zinc-900/50">
+              <td>
+                <Loading className="mt-px"/>
+              </td>
+            </tr>)}
+        </Table.Head>
+        <Table.Body>
+          {data?.map((item) => {
+            const RowComponent = rowWrapper || Fragment;
+            return (<RowComponent key={item[idAccessor]} {...(RowComponent !== Fragment
+                ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    { item: item }
+                : {})}>
+                <Table.Row onClick={handleRowClick(item)}>
+                  {columns.map((column, i) => {
+                    const value = column.accessor
+                        ? item[column.accessor]
+                        : column.render && column.render(item);
+                    return (<Table.Cell key={column.id ||
+                            (typeof column.title === "string" ? column.title : i)} className={column.cellClassName} title={column.cellClassName?.includes("max-w") &&
+                            typeof value === "string"
+                            ? value
+                            : undefined}>
+                        {value}
+                      </Table.Cell>);
+                })}
+                  {actions && (<Table.Cell actions>
+                      {actions.map((action, i) => {
+                        const ActionComponent = action.wrapper || Fragment;
+                        return (<ActionComponent key={i} {...(ActionComponent !== Fragment
+                            ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                { item: item }
+                            : {})}>
+                            <Table.ActionButton title={action.title} onClick={() => action.onClick?.(item)} href={typeof action.href === "function"
+                                ? action.href?.(item)
+                                : action.href} target={action.target}>
+                              {action.icon}
+                            </Table.ActionButton>
+                          </ActionComponent>);
+                    })}
+                    </Table.Cell>)}
+                </Table.Row>
+              </RowComponent>);
+        })}
+          {isLoading && !data?.length && (<Table.Row>
+              {columns.map((column, i) => (<Table.Cell key={column.id ||
+                    (typeof column.title === "string" ? column.title : i)}>
+                  <Skeleton className="h-3"/>
+                </Table.Cell>))}
+              {actions && (<Table.Cell actions>
+                  <Skeleton className="inline-block h-3 w-6"/>
+                </Table.Cell>)}
+            </Table.Row>)}
+          {!isLoading && !data?.length && (<Table.Row>
+              <Table.Cell colSpan={columns.length + (actions ? 1 : 0)}>
+                <Text variant="secondary">{noRecordsText}</Text>
+              </Table.Cell>
+            </Table.Row>)}
+        </Table.Body>
+      </Table>
+      {pagination ? (<Table.FooterWithPagination totalItems={totalItems} itemsPerPage={itemsPerPage} currentPage={currentPage} onChangePage={onChangePage} previousText={previousText} nextText={nextText} showingText={showingText} toText={toText} ofText={ofText} resultsText={resultsText}/>) : undefined}
+    </Stack>);
+}

package/components/Table/Table.d.ts

@@ -0,0 +1,27 @@
+import { ReactNode } from "react";
+import TableActionButton from "./TableActionButton";
+import TableBody from "./TableBody";
+import TableCell from "./TableCell";
+import TableHead from "./TableHead";
+import TableHeader from "./TableHeader";
+import TableRow from "./TableRow";
+import TableFooter from "./TableFooter";
+import TableFooterWithPagination from "./TableFooterWithPagination";
+export type TableProps = {
+    children?: ReactNode;
+    className?: string;
+    hideBorder?: boolean;
+    autoHeight?: boolean;
+};
+declare function Table({ children, className, hideBorder, autoHeight, }: TableProps): import("react").JSX.Element;
+declare namespace Table {
+    var Row: typeof TableRow;
+    var Head: typeof TableHead;
+    var Body: typeof TableBody;
+    var Cell: typeof TableCell;
+    var ActionButton: typeof TableActionButton;
+    var Header: typeof TableHeader;
+    var Footer: typeof TableFooter;
+    var FooterWithPagination: typeof TableFooterWithPagination;
+}
+export default Table;

package/components/Table/Table.jsx

@@ -0,0 +1,31 @@
+import clsx from "../../utils/clsx";
+import TableActionButton from "./TableActionButton";
+import TableBody from "./TableBody";
+import TableCell from "./TableCell";
+import TableHead from "./TableHead";
+import TableHeader from "./TableHeader";
+import TableRow from "./TableRow";
+import TableFooter from "./TableFooter";
+import TableFooterWithPagination from "./TableFooterWithPagination";
+export default function Table({ children, className, hideBorder, autoHeight, }) {
+    return (<div className={clsx("overflow-hidden bg-white dark:bg-zinc-800", {
+            "relative flex-1": autoHeight,
+            "shadow-sm ring-1 ring-black/5 dark:ring-white/10 md:rounded-lg": !hideBorder,
+        }, className)}>
+      <div className={clsx("overflow-auto", {
+            "absolute inset-0": autoHeight,
+        })}>
+        <table className={clsx("w-full max-w-full divide-y divide-zinc-300 dark:divide-zinc-600")}>
+          {children}
+        </table>
+      </div>
+    </div>);
+}
+Table.Row = TableRow;
+Table.Head = TableHead;
+Table.Body = TableBody;
+Table.Cell = TableCell;
+Table.ActionButton = TableActionButton;
+Table.Header = TableHeader;
+Table.Footer = TableFooter;
+Table.FooterWithPagination = TableFooterWithPagination;

package/components/Table/TableActionButton.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from "react";
+import { ButtonProps } from "../Button/Button";
+export type TableActionButtonProps<T extends HTMLElement = HTMLButtonElement> = {
+    title?: ReactNode;
+} & ButtonProps<T>;
+export default function TableActionButton<T extends HTMLElement = HTMLButtonElement>({ children, className, title, onClick, ...props }: TableActionButtonProps<T>): import("react").JSX.Element;

package/components/Table/TableActionButton.jsx

@@ -0,0 +1,20 @@
+import clsx from "../../utils/clsx";
+import { cloneElement, } from "react";
+import Button from "../Button/Button";
+import Tooltip from "../Tooltip";
+export default function TableActionButton({ children, className, title, onClick, ...props }) {
+    const handleClick = (e) => {
+        e.stopPropagation();
+        onClick?.(e);
+    };
+    const child = children;
+    const button = (<Button icon variant="text" className={clsx("p-1!", className)} onClick={handleClick} {...props}>
+      {cloneElement(child, {
+            className: clsx("h-[20px]! w-[20px]!", child.props.className),
+        })}
+    </Button>);
+    if (title) {
+        return <Tooltip content={title}>{button}</Tooltip>;
+    }
+    return button;
+}

package/components/Table/TableBody.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from "react";
+export type TableBodyProps = {
+    children?: ReactNode;
+    className?: string;
+};
+export default function TableBody({ children, className }: TableBodyProps): import("react").JSX.Element;

package/components/Table/TableBody.jsx

@@ -0,0 +1,10 @@
+import { useMemo } from "react";
+import TableHeadContext from "./TableHeadContext";
+import clsx from "../../utils/clsx";
+export default function TableBody({ children, className }) {
+    return (<TableHeadContext.Provider value={useMemo(() => ({ isHead: false, sticky: false }), [])}>
+      <tbody className={clsx("divide-y divide-zinc-200 bg-white dark:divide-zinc-700 dark:bg-zinc-800 [&_tr:last-of-type]:border-b [&_tr:last-of-type]:border-zinc-200 dark:[&_tr:last-of-type]:border-zinc-700", className)}>
+        {children}
+      </tbody>
+    </TableHeadContext.Provider>);
+}

package/components/Table/TableCell.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+export type TableCellProps = {
+    children?: ReactNode;
+    className?: string;
+    actions?: boolean;
+    colSpan?: number;
+    title?: string;
+};
+export default function TableCell({ children, className, actions, colSpan, title, }: TableCellProps): import("react").JSX.Element;

package/components/Table/TableCell.jsx

@@ -0,0 +1,18 @@
+import clsx from "../../utils/clsx";
+import { useContext } from "react";
+import TableHeadContext from "./TableHeadContext";
+export default function TableCell({ children, className, actions, colSpan, title, }) {
+    const { isHead } = useContext(TableHeadContext);
+    const commonClassName = clsx("text-sm first:pl-4 sm:first:pl-6 first:font-medium first:text-zinc-900 dark:first:text-zinc-100 px-3", {
+        "py-2 last:pr-4 sm:last:pr-6": !actions,
+        "py-0.5 text-right pr-2.5 sm:pr-5": actions,
+    });
+    if (isHead) {
+        return (<th className={clsx(commonClassName, "sticky left-0 bg-zinc-50 py-2 text-left font-semibold text-zinc-900 dark:bg-zinc-900 dark:text-zinc-50", className)} colSpan={colSpan} title={title}>
+        {children}
+      </th>);
+    }
+    return (<td className={clsx(commonClassName, "whitespace-nowrap text-zinc-500 dark:text-zinc-300", className)} colSpan={colSpan} title={title}>
+      {children}
+    </td>);
+}

package/components/Table/TableFooter.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from "react";
+export interface TableFooterProps {
+    children?: ReactNode;
+}
+export default function TableFooter({ children }: TableFooterProps): import("react").JSX.Element;

package/components/Table/TableFooter.jsx

@@ -0,0 +1,5 @@
+export default function TableFooter({ children }) {
+    return (<div className="flex items-center justify-between border border-x-0 border-zinc-200 bg-white p-3 sm:border-x sm:px-5 md:rounded-lg dark:border-white/10 dark:bg-zinc-900">
+      {children}
+    </div>);
+}

package/components/Table/TableFooterWithPagination.d.ts

@@ -0,0 +1,13 @@
+export interface TableFooterWithPaginationProps {
+    itemsPerPage: number;
+    totalItems?: number;
+    currentPage: number;
+    onChangePage?: (page: number) => void;
+    previousText?: string;
+    nextText?: string;
+    showingText?: string;
+    toText?: string;
+    ofText?: string;
+    resultsText?: string;
+}
+export default function TableFooterWithPagination({ itemsPerPage, totalItems, currentPage, onChangePage, previousText, nextText, showingText, toText, ofText, resultsText, }: TableFooterWithPaginationProps): import("react").JSX.Element;

package/components/Table/TableFooterWithPagination.jsx

@@ -0,0 +1,57 @@
+import TableFooter from "./TableFooter";
+import Pagination from "../Pagination/Pagination";
+import { useCallback, useEffect, useState } from "react";
+import Button from "../Button/Button";
+export default function TableFooterWithPagination({ itemsPerPage, totalItems, currentPage, onChangePage, previousText = "Previous", nextText = "Next", showingText = "Showing", toText = "to", ofText = "of", resultsText = "results", }) {
+    const pageCount = totalItems !== undefined && itemsPerPage !== undefined
+        ? Math.floor(totalItems / itemsPerPage)
+        : 0;
+    const [page, setPage] = useState(currentPage);
+    useEffect(() => {
+        if (page !== currentPage) {
+            setPage(currentPage);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [currentPage]);
+    useEffect(() => {
+        if (onChangePage) {
+            onChangePage(page);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [page]);
+    const handlePageClick = useCallback((page) => () => setPage(page), []);
+    let start = (page - 1) * itemsPerPage + 1;
+    let end = page * itemsPerPage;
+    if (totalItems !== undefined) {
+        end = end > totalItems ? totalItems : end;
+    }
+    if (end === 0) {
+        start = 0;
+    }
+    return (<TableFooter>
+      <div className="flex flex-1 justify-between sm:hidden">
+        <Button disabled={page === 1} onClick={handlePageClick(page - 1)}>
+          {previousText}
+        </Button>
+        <Button disabled={page === pageCount - 1} onClick={handlePageClick(page + 1)}>
+          {nextText}
+        </Button>
+      </div>
+      <div className="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
+        <div>
+          <p className="text-sm text-zinc-700 dark:text-zinc-100">
+            {showingText} <span className="font-medium">{start}</span> {toText}{" "}
+            <span className="font-medium">{end}</span>
+            {totalItems !== undefined && itemsPerPage !== undefined && (<>
+                {" "}
+                {ofText} <span className="font-medium">{totalItems}</span>{" "}
+                {resultsText}
+              </>)}
+          </p>
+        </div>
+        <div>
+          <Pagination itemsPerPage={itemsPerPage} totalItems={totalItems} currentPage={currentPage} onChangePage={onChangePage}/>
+        </div>
+      </div>
+    </TableFooter>);
+}

package/components/Table/TableHead.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from "react";
+export type TableHeadProps = {
+    children?: ReactNode;
+};
+export default function TableHead({ children }: TableHeadProps): import("react").JSX.Element;

package/components/Table/TableHead.jsx

@@ -0,0 +1,9 @@
+import { useMemo } from "react";
+import TableHeadContext from "./TableHeadContext";
+export default function TableHead({ children }) {
+    return (<TableHeadContext.Provider value={useMemo(() => ({ isHead: true }), [])}>
+      <thead className="sticky top-0 bg-zinc-50 dark:bg-zinc-900">
+        {children}
+      </thead>
+    </TableHeadContext.Provider>);
+}

package/components/Table/TableHeadContext.d.ts

@@ -0,0 +1,4 @@
+declare const TableHeadContext: import("react").Context<{
+    isHead: boolean;
+}>;
+export default TableHeadContext;

package/components/Table/TableHeadContext.jsx

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+const TableHeadContext = createContext({ isHead: true });
+export default TableHeadContext;

package/components/Table/TableHeader.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from "react";
+export type TableHeaderProps = {
+    title?: ReactNode;
+    subtitle?: ReactNode;
+    children?: ReactNode;
+};
+export default function TableHeader({ title, subtitle, children, }: TableHeaderProps): import("react").JSX.Element;

package/components/Table/TableHeader.jsx

@@ -0,0 +1,15 @@
+import Text from "../Text";
+import Stack from "../Stack";
+export default function TableHeader({ title, subtitle, children, }) {
+    return (<div className="px-4 md:px-0">
+      <div className="sm:flex sm:items-center">
+        {(title || subtitle) && (<Stack className="sm:flex-auto">
+            {title && (<Text variant="label" size="lg">
+                {title}
+              </Text>)}
+            {subtitle && <Text variant="secondary">{subtitle}</Text>}
+          </Stack>)}
+        {children && (<div className="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">{children}</div>)}
+      </div>
+    </div>);
+}

package/components/Table/TableRow.d.ts

@@ -0,0 +1,8 @@
+import { MouseEventHandler, ReactNode } from "react";
+export type TableRowProps = {
+    children?: ReactNode;
+    onClick?: MouseEventHandler<HTMLTableRowElement>;
+    className?: string;
+};
+declare function TableRow({ children, onClick, className, ...props }: TableRowProps): import("react").JSX.Element;
+export default TableRow;

package/components/Table/TableRow.jsx

@@ -0,0 +1,9 @@
+import clsx from "../../utils/clsx";
+function TableRow({ children, onClick, className, ...props }) {
+    return (<tr onClick={onClick} className={clsx({
+            "group/row cursor-pointer hover:bg-black/5 dark:hover:bg-white/5": !!onClick,
+        }, className)} {...props}>
+      {children}
+    </tr>);
+}
+export default TableRow;

package/components/Table/index.d.ts

@@ -0,0 +1,3 @@
+import Table from "./Table";
+export * from "./Table";
+export default Table;

package/components/Table/index.jsx

@@ -0,0 +1,3 @@
+import Table from "./Table";
+export * from "./Table";
+export default Table;

package/components/Tabs/Tabs.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+import { ButtonProps } from "../Button";
+export default function Tabs({ children, className, }: {
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+export declare function Tab({ children, selected, onClick, className, ...props }: Omit<ButtonProps, "variant"> & {
+    selected?: boolean;
+}): import("react").JSX.Element;

package/components/Tabs/Tabs.jsx

@@ -0,0 +1,13 @@
+import clsx from "../../utils/clsx";
+import Button from "../Button";
+export default function Tabs({ children, className, }) {
+    return <div className={clsx("ui-tabs", className)}>{children}</div>;
+}
+export function Tab({ children, selected, onClick, className, ...props }) {
+    return (<div className="relative">
+      <Button className={clsx("ui-tabs-tab", className)} data-selected={selected ? "" : undefined} onClick={onClick} variant="custom" {...props}>
+        {children}
+      </Button>
+      {selected && <div className="ui-tabs-indicator"/>}
+    </div>);
+}

package/components/Tabs/index.d.ts

@@ -0,0 +1,3 @@
+import Tabs from "./Tabs";
+export * from "./Tabs";
+export default Tabs;

package/components/Tabs/index.jsx

@@ -0,0 +1,3 @@
+import Tabs from "./Tabs";
+export * from "./Tabs";
+export default Tabs;

package/components/TabsSwitcher/Tab.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from "react";
+/**
+ * Tab represents an individual tab. When active,
+ * it renders an animated rounded background using the latest motion package.
+ */
+export default function Tab({ active, onClick, children, className, id, variant, cursorClassName, }: {
+    value: string;
+    active?: boolean;
+    onClick?: () => void;
+    children: ReactNode;
+    className?: string;
+    id?: string;
+    variant?: "filled" | "outlined";
+    cursorClassName?: string;
+}): import("react").JSX.Element;

package/components/TabsSwitcher/Tab.jsx

@@ -0,0 +1,18 @@
+import { motion } from "motion/react";
+import Button from "../Button";
+import clsx from "../../utils/clsx";
+/**
+ * Tab represents an individual tab. When active,
+ * it renders an animated rounded background using the latest motion package.
+ */
+export default function Tab({ active, onClick, children, className, id, variant, cursorClassName, }) {
+    return (<Button onClick={onClick} className={clsx("relative", {
+            "text-white": active && variant === "filled",
+        }, className)} variant="text" rounded={variant === "filled"}>
+      {active && (<motion.div layoutId={id} className={clsx("bg-primary-500 absolute", {
+                "inset-0 rounded-full": variant === "filled",
+                "right-0 bottom-0 left-0 h-0.5": variant === "outlined",
+            }, cursorClassName)} transition={{ type: "spring", stiffness: 500, damping: 30 }}/>)}
+      <span className="relative z-10">{children}</span>
+    </Button>);
+}

package/components/TabsSwitcher/TabsSwitcher.d.ts

@@ -0,0 +1,22 @@
+import { ReactElement } from "react";
+type TabElement = ReactElement<{
+    value: string;
+    active?: boolean;
+    onClick?: () => void;
+    id?: string;
+    variant?: "filled" | "outlined";
+    className?: string;
+    cursorClassName?: string;
+}>;
+export default function TabsSwitcher({ value, onChange, children, overflowHidden, className, variant, tabClassName, cursorClassName, tabsClassName, }: {
+    value?: string;
+    onChange?: (value: string) => void;
+    children: TabElement | TabElement[];
+    overflowHidden?: boolean;
+    className?: string;
+    variant?: "filled" | "outlined";
+    tabClassName?: string;
+    cursorClassName?: string;
+    tabsClassName?: string;
+}): import("react").JSX.Element;
+export {};

package/components/TabsSwitcher/TabsSwitcher.jsx

@@ -0,0 +1,31 @@
+import { Children, cloneElement, isValidElement, useId, } from "react";
+import clsx from "../../utils/clsx";
+export default function TabsSwitcher({ value, onChange, children, overflowHidden, className, variant = "filled", tabClassName, cursorClassName, tabsClassName, }) {
+    const id = useId();
+    return (<div className={clsx({
+            "rounded-full bg-zinc-200 p-1 dark:bg-zinc-900": variant === "filled",
+        }, className)}>
+      <div className={clsx({
+            "rounded-full": variant === "filled",
+            "overflow-hidden": overflowHidden,
+        })}>
+        <div className={clsx("relative flex", tabsClassName)}>
+          {Children.map(children, (child) => {
+            if (isValidElement(child)) {
+                const childValue = child.props.value;
+                const isActive = childValue === value;
+                return cloneElement(child, {
+                    active: isActive,
+                    onClick: () => onChange?.(childValue),
+                    id,
+                    variant,
+                    className: tabClassName,
+                    cursorClassName,
+                });
+            }
+            return child;
+        })}
+        </div>
+      </div>
+    </div>);
+}

package/components/TabsSwitcher/index.d.ts

@@ -0,0 +1,4 @@
+import TabsSwitcher from "./TabsSwitcher";
+export * from "./TabsSwitcher";
+export { default as Tab } from "./Tab";
+export default TabsSwitcher;

package/components/TabsSwitcher/index.jsx

@@ -0,0 +1,4 @@
+import TabsSwitcher from "./TabsSwitcher";
+export * from "./TabsSwitcher";
+export { default as Tab } from "./Tab";
+export default TabsSwitcher;

package/components/Text/Text.d.ts

@@ -0,0 +1,24 @@
+import { ComponentProps, DetailedHTMLProps, HTMLAttributes } from "react";
+import NextLink from "next/link";
+export declare const defaultTextStyles: {
+    variant: {
+        default: string;
+        label: string;
+        secondary: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        base: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
+    };
+};
+export type TextProps = {
+    variant?: keyof (typeof defaultTextStyles)["variant"] | "link";
+    size?: keyof (typeof defaultTextStyles)["size"];
+    inline?: boolean;
+} & Partial<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> & ComponentProps<typeof NextLink>>;
+declare function Text({ inline, variant, className, href, target, size, ...props }: TextProps): import("react").JSX.Element;
+export default Text;