next-fast-table
Version:
A super-fast form building solution for full-stack developers, build your data forms in one minute.
1,995 lines (1,989 loc) • 273 kB
JavaScript
"use client"
// src/DataTable.tsx
import React3, { useEffect, useMemo, useState } from "react";
import {
getCoreRowModel,
getFilteredRowModel,
getPaginationRowModel,
getSortedRowModel,
useReactTable
} from "@tanstack/react-table";
import { useMutation, useQuery } from "@tanstack/react-query";
import { toast } from "sonner";
import { Icon as Icon3 } from "@iconify/react";
import { useMedia } from "react-use";
import { Controller, useForm } from "react-hook-form";
import { getLocalTimeZone, fromDate } from "@internationalized/date";
// src/helper.tsx
import { Icon } from "@iconify/react";
import React from "react";
import { Button, Chip, Spacer, Tooltip, Image, Link } from "@nextui-org/react";
import JSONPretty from "react-json-pretty";
import "react-json-pretty/themes/monikai.css";
import { UAParser } from "ua-parser-js";
function typedIcon(type) {
const iconType = iconMap[type] || "default-icon";
return /* @__PURE__ */ React.createElement(Icon, {
icon: iconType
});
}
var iconMap = {
string: "material-symbols:text-fields-rounded",
number: "f7:number",
date: "material-symbols:date-range",
boolean: "oui:token-boolean",
array: "material-symbols:list-alt",
json: "material-symbols:code",
longtext: "material-symbols:article",
enum: "material-symbols:label"
};
function typedCell(type, cell) {
if (type === "number") {
return cell ? /* @__PURE__ */ React.createElement("span", null, +cell.toString()) : /* @__PURE__ */ React.createElement("span", null, "N/A");
}
if (type === "date") {
return cell ? /* @__PURE__ */ React.createElement("span", {
className: ""
}, new Date(cell).toLocaleDateString()) : /* @__PURE__ */ React.createElement("span", null, "N/A");
}
if (type === "boolean") {
return /* @__PURE__ */ React.createElement("span", null, cell ? /* @__PURE__ */ React.createElement(Icon, {
icon: "material-symbols:check-rounded",
className: " text-xl text-success"
}) : /* @__PURE__ */ React.createElement(Icon, {
icon: "material-symbols:close-rounded",
className: " text-xl text-danger"
}));
}
if (type === "array" || type === "json") {
return /* @__PURE__ */ React.createElement(Tooltip, {
content: /* @__PURE__ */ React.createElement("code", {
className: " p-2"
}, /* @__PURE__ */ React.createElement(JSONPretty, {
mainStyle: "background:transparent",
data: cell
}))
}, /* @__PURE__ */ React.createElement(Button, {
size: "sm",
variant: "light"
}, Array.isArray(cell) ? `Array(${cell.length})` : `Object`));
}
if (type === "enum") {
const specialStates = {
success: [
"succeeded",
"successed",
"done",
"completed",
"finish",
"finished",
"success",
"pass",
"passed",
"approve",
"approved",
"accept",
"accepted"
],
warning: [
"waiting",
"warning",
"warn",
"pending",
"hold",
"holded",
"holdup",
"holduped",
"delay",
"delayed",
"process",
"processing"
],
danger: [
"fail",
"failed",
"failure",
"canceled",
"cancelled",
"reject",
"rejected",
"deny",
"denied",
"refuse",
"refused",
"block",
"blocked",
"stop",
"stopped",
"halt",
"halted",
"pause",
"paused",
"suspend",
"suspended",
"inactive",
"invalid",
"illegal",
"unauthorized",
"forbidden",
"notallowed"
]
};
let color = "default";
for (const state in specialStates) {
if (specialStates[state].includes(cell)) {
color = state;
break;
}
}
return /* @__PURE__ */ React.createElement(Chip, {
variant: "flat",
color
}, cell);
}
return /* @__PURE__ */ React.createElement("div", {
className: " max-w-xl text-wrap line-clamp-3 overflow-hidden"
}, cell);
}
function helper(metaType, hconfig = {}) {
return (key, config = hconfig) => {
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
return {
meta: {
type: metaType,
input: {
disabled: (_b = (_a = config.input) == null ? void 0 : _a.disabled) != null ? _b : false,
required: (_d = (_c = config.input) == null ? void 0 : _c.required) != null ? _d : false
},
list: {
hidden: (_f = (_e = config.list) == null ? void 0 : _e.hidden) != null ? _f : false
},
enum: (_g = config.enum) != null ? _g : []
},
accessorKey: key,
header: (_h = config.label) != null ? _h : key,
enableHiding: (_i = config.enableHiding) != null ? _i : true,
enableSorting: (_j = config.enableSorting) != null ? _j : true,
enableColumnFilter: (_k = config.enableColumnFilter) != null ? _k : true,
cell: ({ cell, row }) => {
return config.render ? config.render({ cell: cell.getValue(), row: row.original }) : typedCell(metaType, cell.getValue());
}
};
};
}
var uaParser = new UAParser();
var Fields = {
string: helper("string"),
number: helper("number"),
boolean: helper("boolean"),
date: helper("date"),
array: helper("array"),
json: helper("json"),
longtext: helper("longtext"),
enum: helper("enum"),
ua: helper("string", {
render: ({ cell }) => {
const parser = new UAParser();
parser.setUA(cell);
const result = parser.getResult();
const browserIcon = {
Chrome: "teenyicons:chrome-solid",
Firefox: "ri:firefox-fill",
Safari: "fa6-brands:safari",
"Mobile Safari": "fa6-brands:safari",
Edge: "mdi:microsoft-edge",
Opera: "mdi:opera",
"Internet Explorer": "mdi:internet-explorer"
}[result.browser.name] || "mdi:web";
const osIcon = {
Windows: "mdi:microsoft-windows",
"Mac OS": "mdi:apple",
iOS: "mdi:apple",
Android: "mdi:android",
Linux: "mdi:linux",
Ubuntu: "cib:ubuntu"
}[result.os.name] || "mingcute:device-fill";
return /* @__PURE__ */ React.createElement("div", {
className: "flex "
}, /* @__PURE__ */ React.createElement(Chip, {
startContent: /* @__PURE__ */ React.createElement(Icon, {
icon: osIcon
}),
color: "primary",
variant: "flat"
}, result.os.name, " ", result.os.version ? result.os.version : ""), /* @__PURE__ */ React.createElement(Spacer, {
x: 1
}), /* @__PURE__ */ React.createElement(Chip, {
startContent: /* @__PURE__ */ React.createElement(Icon, {
icon: browserIcon
}),
color: "secondary",
variant: "flat"
}, result.browser.name, " ", result.browser.version ? result.browser.version : ""));
}
}),
image: helper("string", {
render: ({ cell }) => /* @__PURE__ */ React.createElement("div", {
className: "flex justify-center max-w-[50px] aspect-square rounded-xl overflow-hidden "
}, /* @__PURE__ */ React.createElement(Image, {
src: cell,
alt: "image",
width: 50,
isZoomed: true,
height: 50,
className: "rounded-xl",
onClick: () => {
window.open(cell, "_blank");
}
}))
}),
email: helper("string", {
render: ({ cell }) => /* @__PURE__ */ React.createElement(Link, {
showAnchorIcon: true,
href: `mailto:${cell}`
}, cell)
}),
tag: helper("string", {
render: ({ cell }) => /* @__PURE__ */ React.createElement("span", {
className: "inline-flex items-center rounded-full bg-gray-100 px-2 py-1 text-xs font-medium text-gray-600"
}, cell)
}),
link: helper("string", {
render: ({ cell }) => /* @__PURE__ */ React.createElement(Link, {
showAnchorIcon: true,
className: " max-w-sm overflow-hidden text-ellipsis line-clamp-2",
href: cell
}, cell)
}),
ip: helper("string", {
render: ({ cell }) => /* @__PURE__ */ React.createElement(Chip, {
variant: "bordered"
}, cell)
})
};
// src/TableBody.tsx
import React2 from "react";
import {
cn,
Table,
TableBody,
TableCell,
TableHeader,
TableRow,
TableColumn,
Spinner,
Button as Button2,
Dropdown,
DropdownTrigger,
DropdownMenu,
DropdownItem
} from "@nextui-org/react";
import { flexRender } from "@tanstack/react-table";
import { Icon as Icon2 } from "@iconify/react";
function MyTableBody({
table,
getQuery,
setMode,
reset,
onOpen,
hideDelete,
hideEdit
}) {
var _a, _b;
const iconClasses = "text-xl text-default-500 pointer-events-none flex-shrink-0";
return /* @__PURE__ */ React2.createElement(Table, {
color: "primary",
selectionMode: "multiple",
isStriped: true,
isHeaderSticky: true,
isVirtualized: true,
onSelectionChange: (value) => {
if (value === "all")
return table.toggleAllRowsSelected();
table.setRowSelection(
Array.from(value).reduce((acc, cur) => ({ ...acc, [+cur]: true }), {})
);
},
"aria-label": "data-table",
selectedKeys: table.getSelectedRowModel().rows.map((row) => row.id),
sortDescriptor: {
column: (_a = table.getState().sorting[0]) == null ? void 0 : _a.id,
direction: ((_b = table.getState().sorting[0]) == null ? void 0 : _b.desc) ? "descending" : "ascending"
},
onSortChange: ({ column, direction }) => {
var _a2;
(_a2 = table.getColumn(column)) == null ? void 0 : _a2.toggleSorting();
}
}, /* @__PURE__ */ React2.createElement(TableHeader, null, table.getHeaderGroups()[0].headers.map((header) => /* @__PURE__ */ React2.createElement(TableColumn, {
key: header.id,
allowsSorting: header.column.getCanSort(),
allowsResizing: header.column.getCanResize()
}, header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()))), /* @__PURE__ */ React2.createElement(TableColumn, {
key: "actions"
}, /* @__PURE__ */ React2.createElement("div", null, "actions"))), /* @__PURE__ */ React2.createElement(TableBody, {
emptyContent: "No rows to display.",
isLoading: getQuery.isPending,
loadingContent: /* @__PURE__ */ React2.createElement(Spinner, null),
items: table.getRowModel().rows
}, table.getRowModel().rows.map((row) => /* @__PURE__ */ React2.createElement(TableRow, {
key: row.id
}, row.getVisibleCells().map((cell) => /* @__PURE__ */ React2.createElement(TableCell, {
key: cell.id
}, flexRender(cell.column.columnDef.cell, cell.getContext()))), /* @__PURE__ */ React2.createElement(TableCell, {
id: "actions-cell"
}, /* @__PURE__ */ React2.createElement(Dropdown, null, /* @__PURE__ */ React2.createElement(DropdownTrigger, null, /* @__PURE__ */ React2.createElement(Button2, {
variant: "flat",
color: "primary"
}, "Actions")), /* @__PURE__ */ React2.createElement(DropdownMenu, {
variant: "faded",
"aria-label": "Dropdown menu with icons"
}, !hideEdit && /* @__PURE__ */ React2.createElement(DropdownItem, {
key: "edit",
color: "primary",
variant: "flat",
startContent: /* @__PURE__ */ React2.createElement(Icon2, {
icon: "material-symbols:edit-square",
className: iconClasses
}),
onPress: () => {
setMode("edit");
reset(row.original);
onOpen();
}
}, "Edit"), /* @__PURE__ */ React2.createElement(DropdownItem, {
key: "view",
color: "primary",
variant: "flat",
startContent: /* @__PURE__ */ React2.createElement(Icon2, {
icon: "solar:eye-bold",
className: iconClasses
}),
onClick: () => {
setMode("view");
reset(row.original);
onOpen();
}
}, "View"), !hideDelete && /* @__PURE__ */ React2.createElement(DropdownItem, {
key: "delete",
className: "text-danger",
variant: "flat",
color: "danger",
startContent: /* @__PURE__ */ React2.createElement(Icon2, {
icon: "carbon:delete",
className: cn(iconClasses, "text-danger")
}),
onClick: () => {
setMode("delete");
reset(row.original);
onOpen();
}
}, "Delete"))))))));
}
// src/DataTable.tsx
import {
useDisclosure,
Modal,
ModalBody,
ModalContent,
ModalFooter,
ModalHeader,
Button as Button3,
Input,
Textarea,
Select,
SelectItem,
DatePicker,
Pagination,
Dropdown as Dropdown2,
DropdownItem as DropdownItem2,
DropdownMenu as DropdownMenu2,
DropdownTrigger as DropdownTrigger2
} from "@nextui-org/react";
function DataTable({
name = "next-table",
columns,
onFetch,
onDelete,
onCreate,
onUpdate
}) {
const initalHiddenColumns = columns.filter((col) => {
var _a, _b;
return (_b = (_a = col == null ? void 0 : col.meta) == null ? void 0 : _a.list) == null ? void 0 : _b.hidden;
}).map((item) => item.accessorKey).reduce((acc, cur) => ({ ...acc, [cur]: false }), {});
const [sorting, setSorting] = useState([]);
const [columnFilters, setColumnFilters] = useState([]);
const [columnVisibility, setColumnVisibility] = useState(initalHiddenColumns);
const [rowSelection, setRowSelection] = useState({});
const [columnOrder, setColumnOrder] = useState([]);
const [columnPinning, setColumnPinning] = useState({});
const [pagination, setPagination] = useState({
pageSize: 20,
pageIndex: 0
});
const [data, setData] = useState([]);
const [pageCount, setPageCount] = useState(1);
const [total, setTotal] = useState(0);
const table = useReactTable({
pageCount,
data,
columns,
manualPagination: true,
manualSorting: true,
manualFiltering: true,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
getSortedRowModel: getSortedRowModel(),
getFilteredRowModel: getFilteredRowModel(),
onColumnFiltersChange: setColumnFilters,
onSortingChange: setSorting,
onColumnVisibilityChange: setColumnVisibility,
onRowSelectionChange: setRowSelection,
onPaginationChange: setPagination,
onColumnOrderChange: setColumnOrder,
onColumnPinningChange: setColumnPinning,
state: {
sorting,
columnFilters,
columnVisibility,
rowSelection,
pagination,
columnOrder,
columnPinning
}
});
const isMobile = useMedia("(max-width: 768px)", true);
const getQuery = useQuery({
queryKey: [name, { sorting, columnFilters, pagination }],
queryFn: () => onFetch({ pagination, columnFilters, sorting })
});
const deleteMutation = useMutation({
mutationFn: onDelete,
onSuccess: (data2, variables) => {
toast.success("Row deleted successfully");
getQuery.refetch();
onClose();
},
onError: (err, variables) => {
toast.error("Failed to delete rows", { description: err.message });
}
});
const updateMutation = useMutation({
mutationFn: onUpdate,
onSuccess: () => {
toast.success("Row updated successfully");
getQuery.refetch();
onClose();
},
onError: (e) => {
toast.error("Failed to update row", { description: e.message });
}
});
const createMutation = useMutation({
mutationFn: onCreate,
onSuccess: (data2, variables) => {
toast.success("Row created successfully");
getQuery.refetch();
onClose();
},
onError: (e) => {
toast.error("Failed to create row", { description: e.message });
}
});
useEffect(() => {
var _a, _b, _c, _d, _e;
if (getQuery.isSuccess) {
setPageCount((_a = Math.ceil(getQuery.data.total / pagination.pageSize)) != null ? _a : 1);
setData((_c = (_b = getQuery.data) == null ? void 0 : _b.list) != null ? _c : []);
setTotal((_e = (_d = getQuery.data) == null ? void 0 : _d.total) != null ? _e : 0);
}
}, [getQuery.isSuccess, getQuery.data, pagination.pageSize]);
const { isOpen, onOpen, onOpenChange, onClose } = useDisclosure({
onClose() {
setMode(void 0);
reset({});
}
});
const [mode, setMode] = useState(void 0);
const {
control,
handleSubmit,
formState: { dirtyFields, isDirty, defaultValues },
register,
reset,
getValues,
setValue,
watch
} = useForm({});
const [formData, setFormData] = useState({});
useEffect(() => {
if (process.env.NODE_ENV === "development") {
const formData2 = watch();
setFormData(formData2);
}
}, []);
const onSubmit = (data2) => {
const dirtyData = Object.keys(dirtyFields).reduce((acc, cur) => {
return { ...acc, [cur]: data2[cur] };
}, {});
const dirtyDataWithPrimaryKey = {
...dirtyData,
[primaryKey]: data2[primaryKey]
};
console.log({ dirtyDataWithPrimaryKey, dirtyData, data: data2, primaryKey });
if (mode === "create") {
createMutation.mutate(dirtyData);
} else if (mode === "edit") {
updateMutation.mutate(dirtyDataWithPrimaryKey);
} else if (mode === "filter") {
const arr = Object.entries(dirtyData).filter(([key, value]) => value !== void 0 && value !== "").map(([key, value]) => ({ id: key, value }));
setColumnFilters(arr);
onClose();
} else if (mode === "view") {
navigator.clipboard.writeText(JSON.stringify(data2));
toast.success("Copied to clipboard");
onClose();
} else if (mode === "delete") {
deleteMutation.mutate({ [primaryKey]: data2[primaryKey] });
} else {
console.log("No mode selected");
toast.error("No mode selected");
}
};
const visibleColumnIds = table.getVisibleFlatColumns().map((column) => column.id);
const isFilterDirty = table.getState().columnFilters.filter(
(item) => item.id && item.value !== void 0 && item.value !== ""
).length > 0;
const onCreateButtonClick = () => {
setMode("create");
reset({});
onOpen();
};
const onResetButtonClick = () => {
table.resetColumnFilters();
onClose();
};
const onDeleteButtonClick = () => {
const rows = table.getSelectedRowModel().rows;
const items = rows.map((row) => ({
id: row.original.id
}));
table.resetRowSelection();
deleteMutation.mutate(items);
};
const isCreateOrEditMode = mode === "create" || mode === "edit";
const primaryKey = "id";
const inputDefaultValue = (key) => {
if (mode === "edit" || mode === "view") {
return getValues(key);
} else if (mode === "create") {
return void 0;
} else if (mode === "filter") {
const filter = table.getState().columnFilters.find((item) => item.id === key);
if (filter !== void 0) {
return filter.value;
}
}
return void 0;
};
const iconClasses = "text-xl text-default-500 pointer-events-none flex-shrink-0";
const memoizedTable = useMemo(
() => /* @__PURE__ */ React3.createElement(MyTableBody, {
table,
getQuery,
onOpen,
reset,
setMode,
hideEdit: onUpdate === void 0,
hideDelete: onDelete === void 0
}),
[table, isMobile, getQuery]
);
return /* @__PURE__ */ React3.createElement("div", {
id: "container",
className: "space-y-2 p-2 flex flex-col h-full gap-2"
}, /* @__PURE__ */ React3.createElement(Modal, {
id: "modal",
isOpen,
placement: "bottom-center",
size: "3xl",
scrollBehavior: "inside",
onOpenChange,
onClose,
backdrop: "blur",
isDismissable: false
}, /* @__PURE__ */ React3.createElement(ModalContent, null, /* @__PURE__ */ React3.createElement(ModalHeader, null, /* @__PURE__ */ React3.createElement("span", null, mode)), /* @__PURE__ */ React3.createElement(ModalBody, null, /* @__PURE__ */ React3.createElement("form", {
id: "addDataForm",
onSubmit: handleSubmit(onSubmit)
}, columns.map((column) => {
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
return /* @__PURE__ */ React3.createElement("div", {
key: column.accessorKey,
className: "mb-2"
}, /* @__PURE__ */ React3.createElement("div", null, ["string", "number", "longtext"].includes(
(_a = column.meta) == null ? void 0 : _a.type
) && /* @__PURE__ */ React3.createElement(Input, {
...register(column.accessorKey, {
setValueAs(value) {
var _a2;
const type = (_a2 = column.meta) == null ? void 0 : _a2.type;
if (typeof value === "string" && (value == null ? void 0 : value.trim()) === "") {
return void 0;
}
if (type === "number")
return Number(value);
if (type === "string" || type === "longtext")
return String(value);
}
}),
defaultValue: inputDefaultValue(column.accessorKey),
type: ((_b = column.meta) == null ? void 0 : _b.type) === "longtext" ? "textarea" : "text",
onClick: () => {
if (mode !== "view")
return;
navigator.clipboard.writeText(
getValues(column.accessorKey)
);
toast.success("Copied to clipboard");
},
className: column.enableColumnFilter ? "" : "hidden",
endContent: typedIcon((_c = column.meta) == null ? void 0 : _c.type),
label: column.header,
isReadOnly: mode === "view",
isDisabled: ((_e = (_d = column.meta) == null ? void 0 : _d.input) == null ? void 0 : _e.disabled) && isCreateOrEditMode,
isRequired: ((_g = (_f = column.meta) == null ? void 0 : _f.input) == null ? void 0 : _g.required) && mode !== "filter"
}), ((_h = column.meta) == null ? void 0 : _h.type) === "boolean" && /* @__PURE__ */ React3.createElement(Controller, {
name: column.accessorKey,
control,
render: ({ field }) => {
var _a2;
return /* @__PURE__ */ React3.createElement(Select, {
label: column.header,
isDisabled: mode === "view" || mode === "delete",
defaultSelectedKeys: [
(_a2 = inputDefaultValue(column.accessorKey)) == null ? void 0 : _a2.toString()
],
onChange: (e) => {
const select = e.target.value;
if (select === "true") {
return field.onChange(true);
}
if (select === "false") {
return field.onChange(false);
}
return field.onChange(void 0);
}
}, ["false", "true"].map((str) => /* @__PURE__ */ React3.createElement(SelectItem, {
key: str,
value: str
}, str)));
}
}), ((_i = column.meta) == null ? void 0 : _i.type) === "date" && /* @__PURE__ */ React3.createElement(Controller, {
control,
name: column.accessorKey,
render: ({ field }) => {
var _a2, _b2, _c2, _d2;
return /* @__PURE__ */ React3.createElement(DatePicker, {
granularity: "second",
label: column.header,
value: field.value ? fromDate(field.value, getLocalTimeZone()) : void 0,
onChange: (date) => {
field.onChange(date.toDate());
},
isDisabled: (_b2 = (_a2 = column.meta) == null ? void 0 : _a2.edit) == null ? void 0 : _b2.disabled,
isRequired: ((_d2 = (_c2 = column.meta) == null ? void 0 : _c2.edit) == null ? void 0 : _d2.required) && isCreateOrEditMode
});
}
}), ((_j = column.meta) == null ? void 0 : _j.type) === "enum" && /* @__PURE__ */ React3.createElement(Controller, {
name: column.accessorKey,
control,
render: ({ field }) => {
var _a2, _b2;
return /* @__PURE__ */ React3.createElement(Select, {
label: column.header,
isDisabled: mode === "view" || mode === "delete",
defaultSelectedKeys: [field.value],
onChange: (e) => field.onChange(e.target.value)
}, (_b2 = (_a2 = column.meta) == null ? void 0 : _a2.enum) == null ? void 0 : _b2.map((value) => /* @__PURE__ */ React3.createElement(SelectItem, {
key: value,
value
}, value)));
}
}), ["array", "json"].includes((_k = column.meta) == null ? void 0 : _k.type) && /* @__PURE__ */ React3.createElement(Controller, {
name: column.accessorKey,
control,
render: ({ field }) => {
var _a2, _b2, _c2, _d2, _e2;
return /* @__PURE__ */ React3.createElement(Textarea, {
isInvalid: typeof field.value !== "object" && !Array.isArray(field.value) && field.value !== void 0,
errorMessage: "Invalid JSON or ARRAY",
endContent: typedIcon((_a2 = column.meta) == null ? void 0 : _a2.type),
defaultValue: JSON.stringify(field.value, null, 2),
type: "text",
onChange: (e) => {
try {
field.onChange(JSON.parse(e.target.value));
} catch (error) {
field.onChange(e.target.value);
}
},
onClick: () => {
if (mode !== "view")
return;
navigator.clipboard.writeText(
JSON.stringify(
getValues(column.accessorKey),
null,
2
)
);
toast.success("Copied to clipboard");
},
className: column.enableColumnFilter ? "" : "hidden",
label: column.header,
isReadOnly: mode === "view",
isDisabled: ((_c2 = (_b2 = column.meta) == null ? void 0 : _b2.input) == null ? void 0 : _c2.disabled) && isCreateOrEditMode,
isRequired: ((_e2 = (_d2 = column.meta) == null ? void 0 : _d2.input) == null ? void 0 : _e2.required) && mode !== "filter"
});
}
})));
}))), /* @__PURE__ */ React3.createElement(ModalFooter, null, /* @__PURE__ */ React3.createElement(Button3, {
variant: "ghost",
onPress: mode === "filter" ? onResetButtonClick : onClose
}, mode === "filter" ? "Reset" : "Cancel"), /* @__PURE__ */ React3.createElement(Button3, {
form: "addDataForm",
isDisabled: !isDirty && isCreateOrEditMode,
type: "submit",
isLoading: updateMutation.isPending || createMutation.isPending || deleteMutation.isPending,
color: mode === "delete" ? "danger" : "primary"
}, /* @__PURE__ */ React3.createElement("p", {
className: "first-letter:uppercase"
}, mode && mode === "view" ? "Copy" : mode))))), /* @__PURE__ */ React3.createElement("header", {
id: "controls",
className: "flex gap-2 flex-wrap flex-shrink-0 w-full "
}, /* @__PURE__ */ React3.createElement(Button3, {
color: "primary",
variant: "solid",
className: " flex-shrink-0",
size: isMobile ? "lg" : void 0,
isIconOnly: isMobile,
isDisabled: getQuery.isRefetching,
onClick: () => getQuery.refetch(),
startContent: /* @__PURE__ */ React3.createElement(Icon3, {
icon: "material-symbols:refresh-rounded"
})
}, isMobile ? void 0 : "Refresh"), /* @__PURE__ */ React3.createElement(Dropdown2, {
backdrop: "blur"
}, /* @__PURE__ */ React3.createElement(DropdownTrigger2, null, /* @__PURE__ */ React3.createElement(Button3, {
variant: "solid",
isIconOnly: isMobile,
color: "primary",
size: isMobile ? "lg" : void 0,
className: " flex-shrink-0",
startContent: /* @__PURE__ */ React3.createElement(Icon3, {
icon: "material-symbols:view-column"
})
}, isMobile ? void 0 : "Columns")), /* @__PURE__ */ React3.createElement(DropdownMenu2, {
"aria-label": "Multiple selection",
variant: "flat",
color: "primary",
disallowEmptySelection: true,
closeOnSelect: false,
selectionMode: "multiple",
selectedKeys: visibleColumnIds
}, table.getAllColumns().filter(
(column) => typeof column.accessorFn !== "undefined" && column.getCanHide()
).map((column) => {
var _a;
return /* @__PURE__ */ React3.createElement(DropdownItem2, {
onClick: () => column.toggleVisibility(),
key: column.id
}, /* @__PURE__ */ React3.createElement("div", {
className: " flex space-x-2 items-center"
}, typedIcon((_a = column.columnDef.meta) == null ? void 0 : _a.type), /* @__PURE__ */ React3.createElement("div", {
className: " flex items-center gap-2"
}, column.columnDef.header)));
}))), /* @__PURE__ */ React3.createElement(Button3, {
onClick: () => {
setMode("filter");
reset({});
onOpen();
},
size: isMobile ? "lg" : void 0,
isIconOnly: isMobile,
className: " flex-shrink-0 mr-auto",
color: "primary",
variant: isFilterDirty ? "ghost" : "solid",
startContent: /* @__PURE__ */ React3.createElement(Icon3, {
icon: "material-symbols:filter-alt"
})
}, isMobile ? void 0 : "Filter"), /* @__PURE__ */ React3.createElement("div", {
className: " flex-grow"
}), onDelete && /* @__PURE__ */ React3.createElement(Button3, {
className: " flex-shrink-0 ml-auto",
color: "danger",
size: isMobile ? "lg" : void 0,
isIconOnly: isMobile,
isLoading: deleteMutation.isPending,
variant: "solid",
startContent: /* @__PURE__ */ React3.createElement(Icon3, {
icon: "material-symbols:delete"
}),
onClick: onDeleteButtonClick,
isDisabled: table.getSelectedRowModel().rows.length === 0 || false
}, isMobile ? void 0 : "Delete"), onCreate && /* @__PURE__ */ React3.createElement(Button3, {
color: "primary",
className: " flex-shrink-0",
isIconOnly: isMobile,
size: isMobile ? "lg" : void 0,
variant: "solid",
startContent: /* @__PURE__ */ React3.createElement(Icon3, {
icon: "material-symbols:add"
}),
onClick: onCreateButtonClick
}, isMobile ? void 0 : "Create")), /* @__PURE__ */ React3.createElement("main", {
id: "table",
className: " overflow-scroll scrollbar-hide j "
}, memoizedTable), /* @__PURE__ */ React3.createElement("footer", {
id: "pagination",
className: " flex justify-between w-full items-center"
}, /* @__PURE__ */ React3.createElement(Pagination, {
showControls: true,
siblings: isMobile ? 0 : 3,
size: isMobile ? "md" : void 0,
variant: "flat",
total: table.getPageCount(),
initialPage: 1,
page: table.getState().pagination.pageIndex + 1,
onChange: (page) => {
table.setPageIndex(page - 1);
}
}), /* @__PURE__ */ React3.createElement(Dropdown2, {
backdrop: "blur"
}, /* @__PURE__ */ React3.createElement(DropdownTrigger2, null, /* @__PURE__ */ React3.createElement(Button3, {
variant: "flat",
className: ""
}, table.getState().pagination.pageSize, " of ", total)), /* @__PURE__ */ React3.createElement(DropdownMenu2, {
"aria-label": "pageSize",
variant: "solid",
color: "primary",
disallowEmptySelection: true,
selectionMode: "single",
selectedKeys: [table.getState().pagination.pageSize]
}, [10, 20, 50, 100, 200].map((pageSize) => {
return /* @__PURE__ */ React3.createElement(DropdownItem2, {
key: pageSize,
onClick: () => table.setPageSize(pageSize)
}, pageSize);
})))));
}
// src/index.tsx
import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
import React4 from "react";
// #style-inject:#style-inject
function styleInject(css, { insertAt } = {}) {
if (!css || typeof document === "undefined")
return;
const head = document.head || document.getElementsByTagName("head")[0];
const style = document.createElement("style");
style.type = "text/css";
if (insertAt === "top") {
if (head.firstChild) {
head.insertBefore(style, head.firstChild);
} else {
head.appendChild(style);
}
} else {
head.appendChild(style);
}
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
}
// src/tailwind.css
styleInject(`*,
::before,
::after {
box-sizing: border-box;
border-width: 0;
border-style: solid;
border-color: #e5e7eb;
}
::before,
::after {
--tw-content: "";
}
html,
:host {
line-height: 1.5;
-webkit-text-size-adjust: 100%;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
font-family:
ui-sans-serif,
system-ui,
sans-serif,
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol",
"Noto Color Emoji";
font-feature-settings: normal;
font-variation-settings: normal;
-webkit-tap-highlight-color: transparent;
}
body {
margin: 0;
line-height: inherit;
}
hr {
height: 0;
color: inherit;
border-top-width: 1px;
}
abbr:where([title]) {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
}
a {
color: inherit;
text-decoration: inherit;
}
b,
strong {
font-weight: bolder;
}
code,
kbd,
samp,
pre {
font-family:
ui-monospace,
SFMono-Regular,
Menlo,
Monaco,
Consolas,
"Liberation Mono",
"Courier New",
monospace;
font-feature-settings: normal;
font-variation-settings: normal;
font-size: 1em;
}
small {
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
table {
text-indent: 0;
border-color: inherit;
border-collapse: collapse;
}
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
font-size: 100%;
font-weight: inherit;
line-height: inherit;
letter-spacing: inherit;
color: inherit;
margin: 0;
padding: 0;
}
button,
select {
text-transform: none;
}
button,
input:where([type="button"]),
input:where([type="reset"]),
input:where([type="submit"]) {
-webkit-appearance: button;
background-color: transparent;
background-image: none;
}
:-moz-focusring {
outline: auto;
}
:-moz-ui-invalid {
box-shadow: none;
}
progress {
vertical-align: baseline;
}
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
}
[type=search] {
-webkit-appearance: textfield;
outline-offset: -2px;
}
::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit;
}
summary {
display: list-item;
}
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
margin: 0;
}
fieldset {
margin: 0;
padding: 0;
}
legend {
padding: 0;
}
ol,
ul,
menu {
list-style: none;
margin: 0;
padding: 0;
}
dialog {
padding: 0;
}
textarea {
resize: vertical;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
opacity: 1;
color: #9ca3af;
}
input::placeholder,
textarea::placeholder {
opacity: 1;
color: #9ca3af;
}
button,
[role=button] {
cursor: pointer;
}
:disabled {
cursor: default;
}
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
display: block;
vertical-align: middle;
}
img,
video {
max-width: 100%;
height: auto;
}
[hidden] {
display: none;
}
:root,
[data-theme] {
color: hsl(var(--nextui-foreground));
background-color: hsl(var(--nextui-background));
}
*,
::before,
::after {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
--tw-contain-size: ;
--tw-contain-layout: ;
--tw-contain-paint: ;
--tw-contain-style: ;
}
::backdrop {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
--tw-contain-size: ;
--tw-contain-layout: ;
--tw-contain-paint: ;
--tw-contain-style: ;
}
.container {
width: 100%;
}
@media (min-width: 640px) {
.container {
max-width: 640px;
}
}
@media (min-width: 768px) {
.container {
max-width: 768px;
}
}
@media (min-width: 1024px) {
.container {
max-width: 1024px;
}
}
@media (min-width: 1280px) {
.container {
max-width: 1280px;
}
}
@media (min-width: 1536px) {
.container {
max-width: 1536px;
}
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
.pointer-events-none {
pointer-events: none;
}
.pointer-events-auto {
pointer-events: auto;
}
.visible {
visibility: visible;
}
.invisible {
visibility: hidden;
}
.static {
position: static;
}
.fixed {
position: fixed;
}
.absolute {
position: absolute;
}
.relative {
position: relative;
}
.sticky {
position: sticky;
}
.inset-0 {
inset: 0px;
}
.inset-x-0 {
left: 0px;
right: 0px;
}
.bottom-0 {
bottom: 0px;
}
.bottom-\\[10\\%\\] {
bottom: 10%;
}
.bottom-\\[5\\%\\] {
bottom: 5%;
}
.left-0 {
left: 0px;
}
.left-1 {
left: 0.25rem;
}
.left-1\\.5 {
left: 0.375rem;
}
.left-1\\/2 {
left: 50%;
}
.left-2 {
left: 0.5rem;
}
.left-3 {
left: 0.75rem;
}
.left-\\[10\\%\\] {
left: 10%;
}
.left-\\[5\\%\\] {
left: 5%;
}
.right-1 {
right: 0.25rem;
}
.right-1\\.5 {
right: 0.375rem;
}
.right-3 {
right: 0.75rem;
}
.right-\\[10\\%\\] {
right: 10%;
}
.right-\\[5\\%\\] {
right: 5%;
}
.top-0 {
top: 0px;
}
.top-1 {
top: 0.25rem;
}
.top-1\\/2 {
top: 50%;
}
.top-20 {
top: 5rem;
}
.top-\\[10\\%\\] {
top: 10%;
}
.top-\\[5\\%\\] {
top: 5%;
}
.top-\\[calc\\(100\\%_\\+_2px\\)\\] {
top: calc(100% + 2px);
}
.top-\\[var\\(--navbar-height\\)\\] {
top: var(--navbar-height);
}
.-z-30 {
z-index: -30;
}
.z-0 {
z-index: 0;
}
.z-10 {
z-index: 10;
}
.z-20 {
z-index: 20;
}
.z-30 {
z-index: 30;
}
.z-40 {
z-index: 40;
}
.z-50 {
z-index: 50;
}
.z-\\[999999\\] {
z-index: 999999;
}
.-m-2 {
margin: -0.5rem;
}
.-m-2\\.5 {
margin: -0.625rem;
}
.m-0 {
margin: 0px;
}
.-mx-1 {
margin-left: -0.25rem;
margin-right: -0.25rem;
}
.mx-0 {
margin-left: 0px;
margin-right: 0px;
}
.mx-1 {
margin-left: 0.25rem;
margin-right: 0.25rem;
}
.mx-\\[calc\\(\\(theme\\(spacing\\.5\\)-theme\\(spacing\\.1\\)\\)\\/2\\)\\] {
margin-left: calc((1.25rem - 0.25rem) / 2);
margin-right: calc((1.25rem - 0.25rem) / 2);
}
.mx-\\[calc\\(\\(theme\\(spacing\\.6\\)-theme\\(spacing\\.3\\)\\)\\/2\\)\\] {
margin-left: calc((1.5rem - 0.75rem) / 2);
margin-right: calc((1.5rem - 0.75rem) / 2);
}
.mx-\\[calc\\(\\(theme\\(spacing\\.7\\)-theme\\(spacing\\.5\\)\\)\\/2\\)\\] {
margin-left: calc((1.75rem - 1.25rem) / 2);
margin-right: calc((1.75rem - 1.25rem) / 2);
}
.my-0 {
margin-top: 0px;
margin-bottom: 0px;
}
.my-1 {
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
.my-16 {
margin-top: 4rem;
margin-bottom: 4rem;
}
.my-\\[calc\\(\\(theme\\(spacing\\.5\\)-theme\\(spacing\\.1\\)\\)\\/2\\)\\] {
margin-top: calc((1.25rem - 0.25rem) / 2);
margin-bottom: calc((1.25rem - 0.25rem) / 2);
}
.my-\\[calc\\(\\(theme\\(spacing\\.6\\)-theme\\(spacing\\.3\\)\\)\\/2\\)\\] {
margin-top: calc((1.5rem - 0.75rem) / 2);
margin-bottom: calc((1.5rem - 0.75rem) / 2);
}
.my-\\[calc\\(\\(theme\\(spacing\\.7\\)-theme\\(spacing\\.5\\)\\)\\/2\\)\\] {
margin-top: calc((1.75rem - 1.25rem) / 2);
margin-bottom: calc((1.75rem - 1.25rem) / 2);
}
.my-auto {
margin-top: auto;
margin-bottom: auto;
}
.-mr-2 {
margin-right: -0.5rem;
}
.-ms-2 {
margin-inline-start: -0.5rem;
}
.mb-1 {
margin-bottom: 0.25rem;
}
.mb-1\\.5 {
margin-bottom: 0.375rem;
}
.mb-2 {
margin-bottom: 0.5rem;
}
.mb-5 {
margin-bottom: 1.25rem;
}
.mb-px {
margin-bottom: 1px;
}
.ml-1 {
margin-left: 0.25rem;
}
.ml-2 {
margin-left: 0.5rem;
}
.ml-auto {
margin-left: auto;
}
.mr-2 {
margin-right: 0.5rem;
}
.mr-auto {
margin-right: auto;
}
.mt-1 {
margin-top: 0.25rem;
}
.mt-2 {
margin-top: 0.5rem;
}
.box-border {
box-sizing: border-box;
}
.box-content {
box-sizing: content-box;
}
.line-clamp-1 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}
.line-clamp-2 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.line-clamp-3 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.block {
display: block;
}
.inline-block {
display: inline-block;
}
.flex {
display: flex;
}
.inline-flex {
display: inline-flex;
}
.table {
display: table;
}
.grid {
display: grid;
}
.inline-grid {
display: inline-grid;
}
.hidden {
display: none;
}
.aspect-square {
aspect-ratio: 1 / 1;
}
.\\!h-auto {
height: auto !important;
}
.h-1 {
height: 0.25rem;
}
.h-1\\.5 {
height: 0.375rem;
}
.h-10 {
height: 2.5rem;
}
.h-12 {
height: 3rem;
}
.h-14 {
height: 3.5rem;
}
.h-16 {
height: 4rem;
}
.h-2 {
height: 0.5rem;
}
.h-2\\.5 {
height: 0.625rem;
}
.h-3 {
height: 0.75rem;
}
.h-3\\.5 {
height: 0.875rem;
}
.h-4 {
height: 1rem;
}
.h-40 {
height: 10rem;
}
.h-5 {
height: 1.25rem;
}
.h-6 {
height: 1.5rem;
}
.h-7 {
height: 1.75rem;
}
.h-8 {
height: 2rem;
}
.h-9 {
height: 2.25rem;
}
.h-\\[100dvh\\] {
height: 100dvh;
}
.h-\\[2px\\] {
height: 2px;
}
.h-\\[calc\\(100dvh_-_var\\(--navbar-height\\)\\)\\] {
height: calc(100dvh - var(--navbar-height));
}
.h-\\[var\\(--navbar-height\\)\\] {
height: var(--navbar-height);
}
.h-\\[var\\(--picker-height\\)\\] {
height: var(--picker-height);
}
.h-auto {
height: auto;
}
.h-divider {
height: var(--nextui-divider-weight);
}
.h-fit {
height: -moz-fit-content;
height: fit-content;
}
.h-full {
height: 100%;
}
.h-px {
height: 1px;
}
.h-screen {
height: 100vh;
}
.max-h-64 {
max-height: 16rem;
}
.max-h-\\[calc\\(100\\%_-_8rem\\)\\] {
max-height: calc(100% - 8rem);
}
.min-h-10 {
min-height: 2.5rem;
}
.min-h-12 {
min-height: 3rem;
}
.min-h-14 {
min-height: 3.5rem;
}
.min-h-16 {
min-height: 4rem;
}
.min-h-3 {
min-height: 0.75rem;
}
.min-h-3\\.5 {
min-height: 0.875rem;
}
.min-h-4 {
min-height: 1rem;
}
.min-h-5 {
min-height: 1.25rem;
}
.min-h-6 {
min-height: 1.5rem;
}
.min-h-7 {
min-height: 1.75rem;
}
.min-h-8 {
min-height: 2rem;
}
.min-h-\\[32px\\] {
min-height: 32px;
}
.w-1 {
width: 0.25rem;
}
.w-1\\.5 {
width: 0.375rem;
}
.w-1\\/5 {
width: 20%;
}
.w-10 {
width: 2.5rem;
}
.w-12 {
width: 3rem;
}
.w-14 {
width: 3.5rem;
}
.w-2 {
width: 0.5rem;
}
.w-2\\.5 {
width: 0.625rem;
}
.w-3 {
width: 0.75rem;
}
.w-3\\.5 {
width: 0.875rem;
}
.w-4 {
width: 1rem;
}
.w-5 {
width: 1.25rem;
}
.w-6 {
width: 1.5rem;
}
.w-7 {
width: 1.75rem;
}
.w-8 {
width: 2rem;
}
.w-9 {
width: 2.25rem;
}
.w-\\[80\\%\\] {
width: 80%;
}
.w-\\[calc\\(100\\%_-_16px\\)\\] {
width: calc(100% - 16px);
}
.w-\\[calc\\(100\\%_-_theme\\(spacing\\.6\\)\\)\\] {
width: calc(100% - 1.5rem);
}
.w-\\[calc\\(var\\(--visible-months\\)_\\*_var\\(--calendar-width\\)\\)\\] {
width: calc(var(--visible-months) * var(--calendar-width));
}
.w-auto {
width: auto;
}
.w-divider {
width: var(--nextui-divider-weight);
}
.w-fit {
width: -moz-fit-content;
width: fit-content;
}
.w-full {
width: 100%;
}
.w-max {
width: -moz-max-content;
width: max-content;
}
.w-px {
width: 1px;
}
.w-screen {
width: 100vw;
}
.min-w-10 {
min-width: 2.5rem;
}
.min-w-12 {
min-width: 3rem;
}
.min-w-16 {
min-width: 4rem;
}
.min-w-20 {
min-width: 5rem;
}
.min-w-24 {
min-width: 6rem;
}
.min-w-3 {
min-width: 0.75rem;
}
.min-w-3\\.5 {
min-width: 0.875rem;
}
.min-w-4 {
min-width: 1rem;
}
.min-w-5 {
min-width: 1.25rem;
}
.min-w-6 {
min-width: 1.5rem;
}
.min-w-7 {
min-width: 1.75rem;
}
.min-w-8 {
min-width: 2rem;
}
.min-w-9 {
min-width: 2.25rem;
}
.min-w-\\[200px\\] {
min-width: 200px;
}
.min-w-full {
min-width: 100%;
}
.min-w-max {
min-width: -moz-max-content;
min-width: max-content;
}
.min-w-min {
min-width: -moz-min-content;
min-width: min-content;
}
.max-w-2xl {
max-width: 42rem;
}
.max-w-3xl {
max-width: 48rem;
}
.max-w-4xl {
max-width: 56rem;
}
.max-w-5xl {
max-width: 64rem;
}
.max-w-\\[1024px\\] {
max-width: 1024px;
}
.max-w-\\[1280px\\] {
max-width: 1280px;
}
.max-w-\\[1536px\\] {
max-width: 1536px;
}
.max-w-\\[270px\\] {
max-width: 270px;
}
.max-w-\\[50px\\] {
max-width: 50px;
}
.max-w-\\[640px\\] {
max-width: 640px;
}
.max-w-\\[768px\\] {
max-width: 768px;
}
.max-w-fit {
max-width: -moz-fit-content;
max-width: fit-content;
}
.max-w-full {
max-width: 100%;
}
.max-w-lg {
max-width: 32rem;
}
.max-w-md {
max-width: 28rem;
}
.max-w-sm {
max-width: 24rem;
}
.max-w-xl {
max-width: 36rem;
}
.max-w-xs {
max-width: 20rem;
}
.flex-1 {
flex: 1 1 0%;
}
.flex-auto {
flex: 1 1 auto;
}
.flex-initial {
flex: 0 1 auto;
}
.flex-none {
flex: none;
}
.flex-shrink-0 {
flex-shrink: 0;
}
.shrink-0 {
flex-shrink: 0;
}
.flex-grow {
flex-grow: 1;
}
.basis-0 {
flex-basis: 0px;
}
.table-auto {
table-layout: auto;
}
.table-fixed {
table-layout: fixed;
}
.border-collapse {
border-collapse: collapse;
}
.origin-center {
transform-origin: center;
}
.origin-left {
transform-origin: left;
}
.origin-right {
transform-origin: right;
}
.origin-top {
transform-origin: top;
}
.origin-top-left {
transform-origin: top left;
}
.-translate-x-1\\/2 {
--tw-translate-x: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1\\/2 {
--tw-translate-y: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-1 {
--tw-translate-x: 0.25rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-1\\/2 {
--tw-translate-x: 50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-1 {
--tw-translate-y: 0.25rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-1\\/2 {
--tw-translate-y: 50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-0 {
--tw-rotate: 0deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-180 {
--tw-rotate: 180deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-0 {
--tw-scale-x: 0;
--tw-scale-y: 0;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-100 {
--tw-scale-x: 1;
--tw-scale-y: 1;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-105 {
--tw-scale-x: 1.05;
--tw-scale-y: 1.05;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-50 {
--tw-scale-x: .5;
--tw-scale-y: .5;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-