@majapisoftwares/ui 4.3.16 → 5.0.0

package/components/Spotlight/Spotlight.jsx

@@ -1,86 +0,0 @@
-import * as Dialog from "@radix-ui/react-dialog";
-import { VisuallyHidden } from "radix-ui";
-import { Fragment, useCallback } from "react";
-import { ChevronRightIcon } from "@heroicons/react/20/solid";
-import { MagnifyingGlassIcon } from "@heroicons/react/24/solid";
-import { useLocalStorage } from "react-use";
-import { take, uniqBy } from "lodash-es";
-import Image from "next/image";
-import Input from "../Input";
-import Skeleton from "../Skeleton";
-import UnstyledButton from "../Button/UnstyledButton";
-import Button from "../Button";
-import clsx from "../../utils/clsx";
-export default function Spotlight({ recentSearchesId, open, setOpen, setQuery, query, onClickItem, results, loading, getItemId = (item) => item._id, getItemLabel = (item) => item.name, getItemPicture, getItemHref, onSeeMoreClick, seeMoreHref, overlayClassName, dialogContentClassName, className, contentClassName, iconClassName, inputClassName, buttonClassName, noResultsClassName, recentSearchClassName, seeMoreLabel = "See more", noRecentSearchLabel = "No recent search", recentlySearchedLabel = "Recently searched", noResultsLabel = "No result found", onSubmit, }) {
-    const [recentQueries, setRecentQueries] = useLocalStorage(`spotlight-recent-queries-${recentSearchesId}`, []);
-    const handleClose = useCallback((item) => {
-        setRecentQueries(take(uniqBy([item, ...(recentQueries || [])], getItemId), 5));
-        setOpen(false);
-        setQuery("");
-    }, [getItemId, recentQueries, setOpen, setQuery, setRecentQueries]);
-    const handleItemClick = useCallback((item) => () => {
-        onClickItem?.(item);
-        handleClose(item);
-    }, [handleClose, onClickItem]);
-    return (<Dialog.Root open={open} onOpenChange={setOpen}>
-      <Dialog.Portal>
-        <Dialog.Overlay className={clsx("fixed inset-0 z-20 flex justify-center bg-white/30 backdrop-blur-xs dark:bg-black/30", "data-[state=closed]:animate-fade-out data-[state=open]:animate-slide-up-and-fade will-change-[opacity,transform]", overlayClassName)}>
-          <Dialog.Content className={clsx("fixed mx-auto w-full max-w-(--breakpoint-md) px-4 py-4 focus:outline-hidden md:py-8", "data-[state=closed]:animate-fade-out data-[state=open]:animate-elastic-slide-up-and-fade will-change-[transform,opacity]", dialogContentClassName)}>
-            <VisuallyHidden.Root>
-              <Dialog.Title />
-              <Dialog.Description />
-            </VisuallyHidden.Root>
-            <div className={clsx("flex w-full flex-col justify-center rounded-sm border border-zinc-200 bg-zinc-100 dark:border-zinc-800 dark:bg-zinc-900", className)}>
-              <div className="px-4 py-4">
-                <Input className={clsx("w-full", contentClassName)} inputClassName={clsx("border-none rounded-none shadow-none rounded-b-none dark:bg-zinc-900 dark:focus:ring-0 focus:ring-0 bg-transparent", inputClassName)} autoFocus={true} leading={<MagnifyingGlassIcon className={clsx("h-5 w-5 text-black dark:text-white", iconClassName)}/>} value={query} onChange={(e) => setQuery(e.target.value)} onKeyDown={(e) => {
-            if (e.key === "Enter") {
-                e.preventDefault();
-                onSubmit?.();
-            }
-        }}/>
-              </div>
-              <div className="w-full border-t border-zinc-200 p-4 dark:border-zinc-800">
-                <div className="flex flex-col gap-2">
-                  {query ? (<>
-                      {loading && (<div className="flex items-center gap-4">
-                          {getItemPicture && <Skeleton className="h-16 w-28"/>}
-                          <Skeleton className="h-6 w-32"/>
-                        </div>)}
-                      {!loading && !results?.length && (<div className={clsx("flex justify-center py-5 text-zinc-400 dark:text-zinc-600", noResultsClassName)}>
-                          {noResultsLabel}
-                        </div>)}
-                      {!loading && !!results?.length && (<>
-                          {results.map((item, i) => (<Fragment key={getItemId(item)}>
-                              {i > 0 && (<div className="h-px bg-zinc-200 dark:bg-zinc-800"/>)}
-                              <UnstyledButton key={getItemId(item)} href={getItemHref?.(item)} className="flex w-full items-center gap-4 rounded-sm hover:bg-zinc-200/90 dark:hover:bg-zinc-800/90" onClick={handleItemClick(item)}>
-                                {getItemPicture && (<Image src={getItemPicture(item)} alt={getItemLabel(item)} width={200} height={378} className="h-16 w-28 rounded-sm object-cover"/>)}
-                                <div className="text-black dark:text-white">
-                                  {getItemLabel(item)}
-                                </div>
-                              </UnstyledButton>
-                            </Fragment>))}
-                          {(onSeeMoreClick || seeMoreHref) && (<Button variant="filled" type="submit" className={clsx("mt-2 w-full dark:bg-zinc-800 dark:text-zinc-300 dark:hover:bg-zinc-700", buttonClassName)} trailing={<ChevronRightIcon />} onClick={onSeeMoreClick} href={seeMoreHref}>
-                              {seeMoreLabel}
-                            </Button>)}
-                        </>)}
-                    </>) : (<>
-                      {recentQueries?.length ? (<div className={clsx("mb-2 text-zinc-600 dark:text-zinc-400", recentSearchClassName)}>
-                          {recentlySearchedLabel}
-                        </div>) : (<div className={clsx("flex justify-center py-5 text-zinc-400 dark:text-zinc-600", noResultsClassName)}>
-                          {noRecentSearchLabel}
-                        </div>)}
-                      {recentQueries?.map((item) => (<UnstyledButton key={getItemId(item)} href={getItemHref?.(item)} className="flex w-full items-center gap-4 hover:bg-zinc-200/90 dark:hover:bg-zinc-800/90" onClick={handleItemClick(item)}>
-                          {getItemPicture && (<Image src={getItemPicture(item)} alt={getItemLabel(item)} width={200} height={378} className="max-h-16 max-w-28 rounded-sm object-cover"/>)}
-                          <div className="text-black dark:text-white">
-                            {getItemLabel(item)}
-                          </div>
-                        </UnstyledButton>))}
-                    </>)}
-                </div>
-              </div>
-            </div>
-          </Dialog.Content>
-        </Dialog.Overlay>
-      </Dialog.Portal>
-    </Dialog.Root>);
-}

package/components/Spotlight/index.d.ts

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

package/components/Spotlight/index.jsx

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

package/components/SpotlightCard/SpotlightCard.d.ts

@@ -1,7 +0,0 @@
-import React from "react";
-interface SpotlightCardProps extends React.PropsWithChildren {
-    className?: string;
-    spotlightColor?: `rgba(${number}, ${number}, ${number}, ${number})`;
-}
-declare const SpotlightCard: React.FC<SpotlightCardProps>;
-export default SpotlightCard;

package/components/SpotlightCard/SpotlightCard.jsx

@@ -1,35 +0,0 @@
-import React, { useRef, useState } from "react";
-const SpotlightCard = ({ children, className = "", spotlightColor = "rgba(255, 255, 255, 0.25)", }) => {
-    const divRef = useRef(null);
-    const [isFocused, setIsFocused] = useState(false);
-    const [position, setPosition] = useState({ x: 0, y: 0 });
-    const [opacity, setOpacity] = useState(0);
-    const handleMouseMove = (e) => {
-        if (!divRef.current || isFocused)
-            return;
-        const rect = divRef.current.getBoundingClientRect();
-        setPosition({ x: e.clientX - rect.left, y: e.clientY - rect.top });
-    };
-    const handleFocus = () => {
-        setIsFocused(true);
-        setOpacity(0.6);
-    };
-    const handleBlur = () => {
-        setIsFocused(false);
-        setOpacity(0);
-    };
-    const handleMouseEnter = () => {
-        setOpacity(0.6);
-    };
-    const handleMouseLeave = () => {
-        setOpacity(0);
-    };
-    return (<div ref={divRef} onMouseMove={handleMouseMove} onFocus={handleFocus} onBlur={handleBlur} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} className={`relative overflow-hidden ${className}`}>
-      <div className="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-500 ease-in-out" style={{
-            opacity,
-            background: `radial-gradient(circle at ${position.x}px ${position.y}px, ${spotlightColor}, transparent 80%)`,
-        }}/>
-      {children}
-    </div>);
-};
-export default SpotlightCard;

package/components/SpotlightCard/index.d.ts

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

package/components/SpotlightCard/index.jsx

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

package/components/Stack/Stack.d.ts

@@ -1,4 +0,0 @@
-import type { DetailedHTMLProps, HTMLAttributes } from "react";
-export type StackProps = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
-declare function Stack({ className, ...props }: StackProps): import("react").JSX.Element;
-export default Stack;

package/components/Stack/Stack.jsx

@@ -1,5 +0,0 @@
-import clsx from "../../utils/clsx";
-function Stack({ className, ...props }) {
-    return <div {...props} className={clsx("flex flex-col gap-2", className)}/>;
-}
-export default Stack;

package/components/Stack/index.d.ts

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

package/components/Stack/index.jsx

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

package/components/StarBorder/StarBorder.d.ts

@@ -1,10 +0,0 @@
-export type StarBorderProps<T extends React.ElementType> = React.ComponentPropsWithoutRef<T> & {
-    as?: T;
-    className?: string;
-    children?: React.ReactNode;
-    color?: string;
-    speed?: React.CSSProperties["animationDuration"];
-    innerClassName?: string;
-};
-declare const StarBorder: <T extends React.ElementType = "button">({ as, className, color, speed, children, innerClassName, ...rest }: StarBorderProps<T>) => import("react").JSX.Element;
-export default StarBorder;

package/components/StarBorder/StarBorder.jsx

@@ -1,19 +0,0 @@
-import {} from "react";
-import clsx from "../../utils/clsx";
-const StarBorder = ({ as, className = "", color = "white", speed = "6s", children, innerClassName, ...rest }) => {
-    const Component = (as || "button");
-    return (<Component className={`relative inline-block overflow-hidden rounded-[20px] py-[1px] ${className}`} {...rest}>
-      <div className="animate-star-movement-bottom absolute right-[-250%] bottom-[-11px] z-0 h-[50%] w-[300%] rounded-full opacity-70" style={{
-            background: `radial-gradient(circle, ${color}, transparent 10%)`,
-            animationDuration: speed,
-        }}/>
-      <div className="animate-star-movement-top absolute top-[-10px] left-[-250%] z-0 h-[50%] w-[300%] rounded-full opacity-70" style={{
-            background: `radial-gradient(circle, ${color}, transparent 10%)`,
-            animationDuration: speed,
-        }}/>
-      <div className={clsx("relative z-1 rounded-[20px] border border-gray-800 bg-gradient-to-b from-black to-gray-900 px-[26px] py-[16px] text-center text-[16px] text-white", innerClassName)}>
-        {children}
-      </div>
-    </Component>);
-};
-export default StarBorder;

package/components/StarBorder/index.d.ts

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

package/components/StarBorder/index.jsx

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

package/components/Switch/Switch.d.ts

@@ -1,16 +0,0 @@
-import type { ReactNode } from "react";
-import { type UnstyledInputCommonProps } from "../Input";
-export interface SwitchProps {
-    srLabel?: string;
-    checked?: boolean;
-    className?: string;
-    rightLabel?: ReactNode;
-    switchClassName?: string;
-    pointerClassName?: string;
-    readOnly?: boolean;
-    disabled?: boolean;
-    onChange?(checked: boolean): void;
-}
-export default function Switch({ srLabel, checked, onChange, className, rightLabel, readOnly, switchClassName, pointerClassName, disabled, }: SwitchProps): import("react").JSX.Element;
-export type SwitchInputProps = UnstyledInputCommonProps & SwitchProps;
-export declare function SwitchInput({ inputClassName, checked, ...props }: SwitchInputProps): import("react").JSX.Element;

package/components/Switch/Switch.jsx

@@ -1,24 +0,0 @@
-import { Switch as RSwitch } from "radix-ui";
-import clsx from "../../utils/clsx";
-import Input, {} from "../Input";
-export default function Switch({ srLabel, checked, onChange, className, rightLabel, readOnly, switchClassName, pointerClassName, disabled, }) {
-    return (<div className={clsx(className, "flex items-center")}>
-      <RSwitch.Root checked={checked} onCheckedChange={onChange} className={clsx({
-            "bg-primary-600": checked,
-            "bg-zinc-300 dark:bg-zinc-600": !checked,
-            "cursor-pointer": !readOnly && !disabled,
-            "cursor-not-allowed": disabled,
-        }, "focus:ring-primary-500 relative inline-flex h-6 w-11 shrink-0 rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:ring-2 focus:ring-offset-2 focus:outline-hidden dark:ring-offset-zinc-900", switchClassName)} disabled={readOnly || disabled}>
-        {srLabel && <span className="sr-only">{srLabel}</span>}
-        <RSwitch.Thumb aria-hidden="true" className={clsx("pointer-events-none inline-block h-5 w-5 translate-x-0 transform rounded-full bg-white shadow-sm ring-0 transition duration-200 ease-in-out data-[state=checked]:translate-x-5", pointerClassName)}/>
-      </RSwitch.Root>
-      {rightLabel && (<span className="ml-3 text-sm text-zinc-500 dark:text-zinc-300">
-          {rightLabel}
-        </span>)}
-    </div>);
-}
-export function SwitchInput({ inputClassName, checked, ...props }) {
-    return (<Input 
-    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-    {...props} as={Switch} inputClassName={clsx("p-1.5 border bg-white", inputClassName)} checked={!!checked}/>);
-}

package/components/Switch/index.d.ts

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

package/components/Switch/index.jsx

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

package/components/Table/DataTable.d.ts

@@ -1,57 +0,0 @@
-import { type ComponentType, type ReactElement, type ReactNode } from "react";
-export type DataTableProps<RowData> = {
-    title?: ReactNode;
-    subtitle?: ReactNode;
-    headerContent?: ReactNode;
-    data?: RowData[];
-    idAccessor?: keyof RowData;
-    columns: {
-        id?: string;
-        title?: ReactNode;
-        accessor?: keyof RowData;
-        render?: (item: RowData) => ReactNode;
-        headerClassName?: string;
-        cellClassName?: string;
-        sortable?: boolean;
-    }[];
-    actions?: {
-        title: string;
-        icon: ReactElement;
-        href?: string | ((item: RowData) => string | null | undefined);
-        onClick?: (item: RowData) => void;
-        wrapper?: ComponentType<{
-            item: RowData;
-            children: ReactElement<{
-                className?: string;
-                onClick: () => void;
-            }>;
-        }>;
-        target?: string;
-    }[];
-    isLoading?: boolean;
-    noRecords?: ReactNode;
-    onRowClick?: (item: RowData) => void;
-    rowWrapper?: ComponentType<{
-        item: RowData;
-        children: ReactElement<{
-            className?: string;
-        }>;
-    }>;
-    pagination?: boolean;
-    currentPage?: number;
-    onChangePage?: (page: number) => void;
-    totalItems?: number;
-    itemsPerPage?: number;
-    className?: string;
-    autoHeight?: boolean;
-    onChangeSort?: (sort: [string, "asc" | "desc"][]) => void;
-    sort?: [string, "asc" | "desc"][];
-    previousText?: string;
-    nextText?: string;
-    showingText?: string;
-    toText?: string;
-    ofText?: string;
-    resultsText?: string;
-    tableClassName?: string;
-};
-export default function DataTable<RowData>({ title, subtitle, headerContent, data, idAccessor, actions, columns, isLoading, noRecords: noRecordsText, onRowClick, rowWrapper, pagination, currentPage, onChangePage, totalItems, itemsPerPage, className, autoHeight, onChangeSort, sort: defaultSort, previousText, nextText, showingText, toText, ofText, resultsText, tableClassName, }: DataTableProps<RowData>): import("react").JSX.Element;

package/components/Table/DataTable.jsx

@@ -1,155 +0,0 @@
-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 top-2 right-3 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

@@ -1,27 +0,0 @@
-import type { 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

@@ -1,31 +0,0 @@
-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 md:rounded-lg dark:ring-white/10": !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

@@ -1,6 +0,0 @@
-import { type ReactNode } from "react";
-import { type 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

@@ -1,20 +0,0 @@
-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

@@ -1,6 +0,0 @@
-import { type 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

@@ -1,10 +0,0 @@
-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

@@ -1,9 +0,0 @@
-import { type 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

@@ -1,18 +0,0 @@
-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

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

package/components/Table/TableFooter.jsx

@@ -1,5 +0,0 @@
-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>);
-}