@playbooks/ui
Version:
An interface library for Playbooks.
472 lines (471 loc) • 26.7 kB
JavaScript
;
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const require$$0 = require("react/jsx-runtime");
const feedbacks = require("./feedbacks.cjs");
const React = require("react");
const html = require("./toast-context-kVz4KXNu.cjs");
const badges = require("./badges.cjs");
const sections = require("./sections.cjs");
const links = require("./links.cjs");
const cards = require("./cards.cjs");
const transforms = require("./transforms-Ca9m4pGF.cjs");
require("next/link");
const grid = require("./grid.cjs");
const paginations = require("./paginations.cjs");
const buttonGroups = require("./button-groups.cjs");
const Toast = (props) => {
switch (props.type) {
case "error":
return /* @__PURE__ */ require$$0.jsx(html.ErrorToast, { ...props });
case "info":
return /* @__PURE__ */ require$$0.jsx(html.InfoToast, { ...props });
case "success":
return /* @__PURE__ */ require$$0.jsx(html.SuccessToast, { ...props });
default:
return /* @__PURE__ */ require$$0.jsx(html.SuccessToast, { ...props });
}
};
const Feedback = ({ type, icon, title, text, tailwind, children }) => {
const props = { icon, title, text, tailwind, children };
switch (type) {
case "list":
return /* @__PURE__ */ require$$0.jsx(ListFeedback, { ...props });
case "page":
return /* @__PURE__ */ require$$0.jsx(PageFeedback, { ...props });
case "preview":
return /* @__PURE__ */ require$$0.jsx(PreviewFeedback, { ...props });
case "search":
return /* @__PURE__ */ require$$0.jsx(SearchFeedback, { ...props });
case "table":
return /* @__PURE__ */ require$$0.jsx(TableFeedback, { ...props });
default:
return /* @__PURE__ */ require$$0.jsx(PageFeedback, { ...props });
}
};
const ListFeedback = ({ icon, title, text, children, tailwind }) => {
return /* @__PURE__ */ require$$0.jsxs(feedbacks.Feedback, { align: "text-center", spacing: "p-4", ...tailwind == null ? void 0 : tailwind.feedback, children: [
/* @__PURE__ */ require$$0.jsx(feedbacks.FeedbackHeader, { children: /* @__PURE__ */ require$$0.jsx(feedbacks.FeedbackIcon, { icon, fontSize: "text-3xl", ...tailwind == null ? void 0 : tailwind.icon }) }),
/* @__PURE__ */ require$$0.jsxs(feedbacks.FeedbackBody, { children: [
/* @__PURE__ */ require$$0.jsx(feedbacks.FeedbackTitle, { children: title }),
/* @__PURE__ */ require$$0.jsx(feedbacks.FeedbackText, { children: text }),
children && /* @__PURE__ */ require$$0.jsx(feedbacks.FeedbackActions, { display: "flex-middle", children })
] })
] });
};
const PageFeedback = ({ icon, title, text, children, tailwind }) => {
return /* @__PURE__ */ require$$0.jsxs(feedbacks.Feedback, { align: "text-left", border: "border", spacing: "py-8 px-4", ...tailwind == null ? void 0 : tailwind.feedback, children: [
/* @__PURE__ */ require$$0.jsx(feedbacks.FeedbackHeader, { children: /* @__PURE__ */ require$$0.jsx(feedbacks.FeedbackIcon, { icon, fontSize: "text-4xl", ...tailwind == null ? void 0 : tailwind.icon }) }),
/* @__PURE__ */ require$$0.jsxs(feedbacks.FeedbackBody, { children: [
/* @__PURE__ */ require$$0.jsx(feedbacks.FeedbackTitle, { children: title }),
/* @__PURE__ */ require$$0.jsx(feedbacks.FeedbackText, { children: text })
] }),
children && /* @__PURE__ */ require$$0.jsx(feedbacks.FeedbackActions, { display: "flex-start", children })
] });
};
const PreviewFeedback = ({ icon, text, children, tailwind }) => {
return /* @__PURE__ */ require$$0.jsx(feedbacks.Feedback, { align: "text-center", spacing: "p-4", ...tailwind == null ? void 0 : tailwind.feedback, children: /* @__PURE__ */ require$$0.jsxs(feedbacks.FeedbackBody, { children: [
/* @__PURE__ */ require$$0.jsx(feedbacks.FeedbackIcon, { icon, ...tailwind == null ? void 0 : tailwind.icon }),
/* @__PURE__ */ require$$0.jsx(feedbacks.FeedbackText, { children: text }),
children && /* @__PURE__ */ require$$0.jsx(feedbacks.FeedbackActions, { display: "flex-middle", children })
] }) });
};
const SearchFeedback = ({ icon, text, children, tailwind }) => {
return /* @__PURE__ */ require$$0.jsx(feedbacks.Feedback, { align: "text-center", spacing: "p-4", ...tailwind == null ? void 0 : tailwind.feedback, children: /* @__PURE__ */ require$$0.jsxs(feedbacks.FeedbackBody, { children: [
/* @__PURE__ */ require$$0.jsx(feedbacks.FeedbackIcon, { icon, ...tailwind == null ? void 0 : tailwind.icon }),
/* @__PURE__ */ require$$0.jsx(feedbacks.FeedbackText, { children: text }),
children && /* @__PURE__ */ require$$0.jsx(feedbacks.FeedbackActions, { display: "flex-middle", children })
] }) });
};
const TableFeedback = ({ icon, title, text, tailwind }) => {
return /* @__PURE__ */ require$$0.jsx(feedbacks.Feedback, { align: "text-center", borderRadius: "", spacing: "p-4", ...tailwind == null ? void 0 : tailwind.feedback, children: /* @__PURE__ */ require$$0.jsxs(feedbacks.FeedbackBody, { children: [
/* @__PURE__ */ require$$0.jsx(feedbacks.FeedbackIcon, { icon, ...tailwind == null ? void 0 : tailwind.icon }),
/* @__PURE__ */ require$$0.jsx(feedbacks.FeedbackTitle, { children: title }),
/* @__PURE__ */ require$$0.jsx(feedbacks.FeedbackText, { children: text })
] }) });
};
const Item = (props) => {
switch (props.type) {
case "badge":
return /* @__PURE__ */ require$$0.jsx(BadgeItem, { ...props });
case "link":
return /* @__PURE__ */ require$$0.jsx(LinkItem, { ...props });
case "list-items":
return /* @__PURE__ */ require$$0.jsx(ListItems, { ...props });
case "text":
return /* @__PURE__ */ require$$0.jsx(TextItem, { ...props });
}
};
var skeleton = {};
var hasRequiredSkeleton;
function requireSkeleton() {
if (hasRequiredSkeleton) return skeleton;
hasRequiredSkeleton = 1;
(function(exports2) {
Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
const require$$1 = require$$0;
const React$1 = React;
const index_es = html.requireIndex_esCMbe8OFG();
const SkeletonThemeContext = React$1.createContext({});
const defaultEnableAnimation = true;
function styleOptionsToCssProperties({ baseColor, highlightColor, width, height, borderRadius, circle, direction, duration, enableAnimation = defaultEnableAnimation, customHighlightBackground }) {
const style = {};
if (direction === "rtl")
style["--animation-direction"] = "reverse";
if (typeof duration === "number")
style["--animation-duration"] = `${duration}s`;
if (!enableAnimation)
style["--pseudo-element-display"] = "none";
if (typeof width === "string" || typeof width === "number")
style.width = width;
if (typeof height === "string" || typeof height === "number")
style.height = height;
if (typeof borderRadius === "string" || typeof borderRadius === "number")
style.borderRadius = borderRadius;
if (circle)
style.borderRadius = "50%";
if (typeof baseColor !== "undefined")
style["--base-color"] = baseColor;
if (typeof highlightColor !== "undefined")
style["--highlight-color"] = highlightColor;
if (typeof customHighlightBackground === "string")
style["--custom-highlight-background"] = customHighlightBackground;
return style;
}
function Skeleton$1({ count = 1, wrapper: Wrapper, className: customClassName, containerClassName, containerTestId, circle = false, style: styleProp, ...originalPropsStyleOptions }) {
var _a, _b, _c;
const contextStyleOptions = React$1.useContext(SkeletonThemeContext);
const propsStyleOptions = { ...originalPropsStyleOptions };
for (const [key, value] of Object.entries(originalPropsStyleOptions)) {
if (typeof value === "undefined") {
delete propsStyleOptions[key];
}
}
const styleOptions = {
...contextStyleOptions,
...propsStyleOptions,
circle
};
const style = {
...styleProp,
...styleOptionsToCssProperties(styleOptions)
};
let className = "react-loading-skeleton";
if (customClassName)
className += ` ${customClassName}`;
const inline = (_a = styleOptions.inline) !== null && _a !== void 0 ? _a : false;
const elements = [];
const countCeil = Math.ceil(count);
for (let i = 0; i < countCeil; i++) {
let thisStyle = style;
if (countCeil > count && i === countCeil - 1) {
const width = (_b = thisStyle.width) !== null && _b !== void 0 ? _b : "100%";
const fractionalPart = count % 1;
const fractionalWidth = typeof width === "number" ? width * fractionalPart : `calc(${width} * ${fractionalPart})`;
thisStyle = { ...thisStyle, width: fractionalWidth };
}
const skeletonSpan = React$1.createElement("span", { className, style: thisStyle, key: i }, "");
if (inline) {
elements.push(skeletonSpan);
} else {
elements.push(React$1.createElement(
React$1.Fragment,
{ key: i },
skeletonSpan,
React$1.createElement("br", null)
));
}
}
return React$1.createElement("span", { className: containerClassName, "data-testid": containerTestId, "aria-live": "polite", "aria-busy": (_c = styleOptions.enableAnimation) !== null && _c !== void 0 ? _c : defaultEnableAnimation }, Wrapper ? elements.map((el, i) => React$1.createElement(Wrapper, { key: i }, el)) : elements);
}
function SkeletonTheme({ children, ...styleOptions }) {
return React$1.createElement(SkeletonThemeContext.Provider, { value: styleOptions }, children);
}
const Skeleton2 = ({ tailwind, className, ...props }) => {
const base = { height: "h-full", width: "w-full" };
const classes = index_es.computeTailwind({ ...base, ...tailwind, ...props, className });
return /* @__PURE__ */ require$$1.jsx(SkeletonTheme, { children: /* @__PURE__ */ require$$1.jsx(Skeleton$1, { className: classes }) });
};
exports2.Skeleton = Skeleton2;
})(skeleton);
return skeleton;
}
var skeletonExports = requireSkeleton();
const BadgeItem = ({ keyName, loading, value, tailwind }) => {
return /* @__PURE__ */ require$$0.jsxs(html.Li, { border: "border-b", display: "flex-between", space: "space-x-8", spacing: "py-4", ...tailwind == null ? void 0 : tailwind.li, children: [
/* @__PURE__ */ require$$0.jsx(sections.SectionSubtitle, { fontSize: "text-sm", children: keyName }),
loading ? /* @__PURE__ */ require$$0.jsx(skeletonExports.Skeleton, { className: "w-20" }) : value ? /* @__PURE__ */ require$$0.jsx(badges.Badge, { type: value, textTransform: "", children: value }) : /* @__PURE__ */ require$$0.jsx(html.Small, { children: "--" })
] });
};
const LinkItem = ({ keyName, loading, value, display, tailwind }) => {
return /* @__PURE__ */ require$$0.jsxs(html.Li, { border: "border-b", display: "flex-between", space: "space-x-8", spacing: "py-4", ...tailwind == null ? void 0 : tailwind.li, children: [
/* @__PURE__ */ require$$0.jsx(sections.SectionSubtitle, { fontSize: "text-sm", children: keyName }),
value ? /* @__PURE__ */ require$$0.jsx(React.Fragment, { children: /* @__PURE__ */ require$$0.jsx(
links.AccentLink,
{
size: "",
bgColor: "",
nextIcon: "arrow-up-right",
color: "text-blue-500 dark:text-cyan-500",
hover: "h:underline",
href: value,
target: "_blank",
children: display ? display : "View"
}
) }) : /* @__PURE__ */ require$$0.jsx(html.Span, { color: "text-gray-700 dark:text-gray-400", children: "--" })
] });
};
const Skeleton = (props) => {
switch (props.type) {
case "grid":
return /* @__PURE__ */ require$$0.jsx(GridSkeleton, { ...props });
case "item":
return /* @__PURE__ */ require$$0.jsx(ItemSkeleton, { ...props });
case "list":
return /* @__PURE__ */ require$$0.jsx(ListSkeleton, { ...props });
case "search":
return /* @__PURE__ */ require$$0.jsx(SearchSkeleton, { ...props });
case "table":
return /* @__PURE__ */ require$$0.jsx(TableSkeleton, { ...props });
default:
return /* @__PURE__ */ require$$0.jsx(BasicSkeleton, { ...props });
}
};
const BasicSkeleton = (props) => {
return /* @__PURE__ */ require$$0.jsx(skeletonExports.Skeleton, { ...props });
};
const GridSkeleton = ({ tailwind }) => {
return /* @__PURE__ */ require$$0.jsxs(cards.Card, { border: "border", display: "flex-column", spacing: "", ...tailwind == null ? void 0 : tailwind.card, children: [
/* @__PURE__ */ require$$0.jsx(cards.CardHeader, { aspect: "aspect-[16/9]", bgColor: "", children: /* @__PURE__ */ require$$0.jsx(skeletonExports.Skeleton, { className: "w-full" }) }),
/* @__PURE__ */ require$$0.jsxs(cards.CardBody, { space: "space-y-2", spacing: "p-4", children: [
/* @__PURE__ */ require$$0.jsx(cards.CardPretitle, { display: "", children: /* @__PURE__ */ require$$0.jsx(skeletonExports.Skeleton, { width: "w-1/4" }) }),
/* @__PURE__ */ require$$0.jsx(cards.CardTitle, { display: "", children: /* @__PURE__ */ require$$0.jsx(skeletonExports.Skeleton, { width: "w-1/2" }) }),
/* @__PURE__ */ require$$0.jsx(cards.CardSubtitle, { children: /* @__PURE__ */ require$$0.jsx(skeletonExports.Skeleton, { width: "w-3/4" }) })
] }),
/* @__PURE__ */ require$$0.jsx(cards.CardFooter, { border: "", display: "flex-between", space: "space-x-4", spacing: "p-4", children: /* @__PURE__ */ require$$0.jsxs(html.Span, { display: "flex-start", space: "space-x-4", children: [
/* @__PURE__ */ require$$0.jsx(html.Span, { width: "w-24", children: /* @__PURE__ */ require$$0.jsx(skeletonExports.Skeleton, {}) }),
/* @__PURE__ */ require$$0.jsx(html.Span, { width: "w-24", children: /* @__PURE__ */ require$$0.jsx(skeletonExports.Skeleton, {}) })
] }) })
] });
};
const ItemSkeleton = ({ count }) => /* @__PURE__ */ require$$0.jsx(React.Fragment, { children: transforms.listBuilder(count).map((v, i) => /* @__PURE__ */ require$$0.jsx(
Item,
{
type: "text",
keyName: /* @__PURE__ */ require$$0.jsx(skeletonExports.Skeleton, { width: "w-1/4" }),
value: /* @__PURE__ */ require$$0.jsx(skeletonExports.Skeleton, { width: "w-1/4" }),
width: "w-full"
},
i
)) });
const ListSkeleton = ({ tailwind }) => /* @__PURE__ */ require$$0.jsxs(cards.Card, { border: "border-b", borderRadius: "", display: "flex-between", space: "space-x-4", spacing: "py-4", ...tailwind == null ? void 0 : tailwind.card, children: [
/* @__PURE__ */ require$$0.jsxs(html.Span, { display: "flex-start", space: "space-x-4", width: "w-full", children: [
/* @__PURE__ */ require$$0.jsx(cards.CardHeader, { aspect: "aspect-[1/1]", borderRadius: "rounded-md", bgColor: "", width: "w-20 lg:w-24", ...tailwind == null ? void 0 : tailwind.header, children: /* @__PURE__ */ require$$0.jsx(skeletonExports.Skeleton, { leading: "leading-[inherit]" }) }),
/* @__PURE__ */ require$$0.jsxs(cards.CardBody, { spacing: "", width: "w-full", children: [
/* @__PURE__ */ require$$0.jsx(cards.CardTitle, { display: "", ...tailwind == null ? void 0 : tailwind.title, children: /* @__PURE__ */ require$$0.jsx(skeletonExports.Skeleton, { width: "w-1/2" }) }),
/* @__PURE__ */ require$$0.jsx(cards.CardSubtitle, { ...tailwind == null ? void 0 : tailwind.subtitle, children: /* @__PURE__ */ require$$0.jsx(skeletonExports.Skeleton, { width: "w-3/4" }) })
] })
] }),
/* @__PURE__ */ require$$0.jsx(html.Span, { aspect: "aspect-[1/1]", flex: "shrink-0", width: "w-8", children: /* @__PURE__ */ require$$0.jsx(skeletonExports.Skeleton, {}) })
] });
const SearchSkeleton = ({ tailwind }) => /* @__PURE__ */ require$$0.jsxs(cards.Card, { border: "border-b", borderRadius: "", display: "flex-between", space: "space-x-4", spacing: "p-4", ...tailwind == null ? void 0 : tailwind.card, children: [
/* @__PURE__ */ require$$0.jsxs(html.Span, { display: "flex-start", flex: "grow", space: "space-x-4", ...tailwind == null ? void 0 : tailwind.span, children: [
/* @__PURE__ */ require$$0.jsx(cards.CardHeader, { aspect: "aspect-[1/1]", borderRadius: "rounded-md", bgColor: "", width: "w-10", ...tailwind == null ? void 0 : tailwind.header, children: /* @__PURE__ */ require$$0.jsx(skeletonExports.Skeleton, { leading: "leading-[inherit]" }) }),
/* @__PURE__ */ require$$0.jsx(cards.CardBody, { space: "space-y-2", spacing: "", width: "w-full", children: /* @__PURE__ */ require$$0.jsx(cards.CardTitle, { display: "", className: "w-1/2", children: /* @__PURE__ */ require$$0.jsx(skeletonExports.Skeleton, {}) }) })
] }),
/* @__PURE__ */ require$$0.jsx(html.Span, { aspect: "aspect-[1/1]", width: "w-8", children: /* @__PURE__ */ require$$0.jsx(skeletonExports.Skeleton, {}) })
] });
const TableSkeleton = ({ count, grid: grid$1, tailwind }) => {
return /* @__PURE__ */ require$$0.jsx(grid.Grid, { ...grid$1, spacing: "py-4", children: transforms.listBuilder(count).map((s, i) => /* @__PURE__ */ require$$0.jsx(grid.Col, { children: /* @__PURE__ */ require$$0.jsxs(grid.Grid, { className: "flex items-center px-4 py-2 w-full", children: [
/* @__PURE__ */ require$$0.jsx(grid.Col, { span: "1", children: /* @__PURE__ */ require$$0.jsx(skeletonExports.Skeleton, { borderRadius: "rounded-md", leading: "leading-[inherit]", height: "h-8", width: "w-8" }) }),
/* @__PURE__ */ require$$0.jsx(grid.Col, { span: "2", children: /* @__PURE__ */ require$$0.jsx(html.H6, { children: /* @__PURE__ */ require$$0.jsx(skeletonExports.Skeleton, {}) }) }),
/* @__PURE__ */ require$$0.jsx(grid.Col, { span: "2", children: /* @__PURE__ */ require$$0.jsx(html.H6, { children: /* @__PURE__ */ require$$0.jsx(skeletonExports.Skeleton, {}) }) }),
/* @__PURE__ */ require$$0.jsx(grid.Col, { span: "2", children: /* @__PURE__ */ require$$0.jsx(html.H6, { children: /* @__PURE__ */ require$$0.jsx(skeletonExports.Skeleton, {}) }) }),
/* @__PURE__ */ require$$0.jsx(grid.Col, { span: "2", children: /* @__PURE__ */ require$$0.jsx(html.H6, { children: /* @__PURE__ */ require$$0.jsx(skeletonExports.Skeleton, {}) }) }),
/* @__PURE__ */ require$$0.jsx(grid.Col, { span: "2", children: /* @__PURE__ */ require$$0.jsx(html.H6, { children: /* @__PURE__ */ require$$0.jsx(skeletonExports.Skeleton, {}) }) }),
/* @__PURE__ */ require$$0.jsx(grid.Col, { span: "1", children: /* @__PURE__ */ require$$0.jsx(html.H6, { children: /* @__PURE__ */ require$$0.jsx(skeletonExports.Skeleton, {}) }) })
] }) }, i)) });
};
const ListItems = ({ keyName, loading, value, children, tailwind }) => {
return /* @__PURE__ */ require$$0.jsxs(html.Li, { border: "border-b", display: "flex-column", space: "", spacing: "py-4", ...tailwind == null ? void 0 : tailwind.li, children: [
/* @__PURE__ */ require$$0.jsx(html.Span, { display: "flex-between", space: "space-x-4", ...tailwind == null ? void 0 : tailwind.span, children: /* @__PURE__ */ require$$0.jsx(sections.SectionSubtitle, { fontSize: "text-sm", children: keyName }) }),
/* @__PURE__ */ require$$0.jsx(html.Ul, { border: "border", borderRadius: "rounded-md", height: "min-h-[20px]", spacing: "px-4", ...tailwind == null ? void 0 : tailwind.ul, children: loading ? /* @__PURE__ */ require$$0.jsx(Skeleton, { className: "w-20" }) : children })
] });
};
const TextItem = ({ keyName, disclaimer, loading, value, tailwind }) => {
return /* @__PURE__ */ require$$0.jsxs(html.Li, { border: "border-b", display: "flex-between", space: "space-x-8", spacing: "py-4", width: "w-full", ...tailwind == null ? void 0 : tailwind.li, children: [
/* @__PURE__ */ require$$0.jsxs(html.Span, { display: "flex-start", space: "space-x-4", children: [
/* @__PURE__ */ require$$0.jsx(sections.SectionSubtitle, { fontSize: "text-sm", children: keyName }),
/* @__PURE__ */ require$$0.jsx(sections.SectionSubtitle, { opacity: "opacity-75", fontSize: "text-sm", children: disclaimer })
] }),
loading ? /* @__PURE__ */ require$$0.jsx(Skeleton, { className: "w-20" }) : /* @__PURE__ */ require$$0.jsx(sections.SectionText, { fontSize: "text-sm", ...tailwind == null ? void 0 : tailwind.value, children: value })
] });
};
const Pagination = ({ type = "page", meta, params, setParams, taskRunning = false }) => {
const props = { meta, params, setParams };
switch (type) {
case "btn":
return /* @__PURE__ */ require$$0.jsx(BtnPagination, { ...props, taskRunning });
case "page":
return /* @__PURE__ */ require$$0.jsx(PagePagination, { ...props });
case "slider":
return /* @__PURE__ */ require$$0.jsx(SliderPagination, { ...props });
}
};
const BtnPagination = ({ meta, params, setParams, taskRunning }) => {
const totalPages = React.useMemo(() => {
return Math.ceil((meta == null ? void 0 : meta.totalRecords) / ((meta == null ? void 0 : meta.pageSize) || 1e7));
}, [JSON.stringify(meta)]);
return /* @__PURE__ */ require$$0.jsx(React.Fragment, { children: meta.page + 1 < totalPages ? /* @__PURE__ */ require$$0.jsx(
html.BorderBtn,
{
size: "lg",
nextIcon: "arrow-down",
taskRunning,
className: "w-full",
onClick: () => setParams({ ...params, page: meta.page + 1 }),
children: "Show More"
}
) : /* @__PURE__ */ require$$0.jsx(html.Small, { children: "End of results" }) });
};
const PagePagination = ({ meta, params, setParams }) => {
const [pages, setPages] = React.useState([]);
const page = meta == null ? void 0 : meta.page;
const pageSize = meta == null ? void 0 : meta.pageSize;
const totalRecords = meta == null ? void 0 : meta.totalRecords;
const totalPages = Math.ceil(totalRecords / pageSize);
React.useEffect(() => {
if (totalPages >= 1) fetchPages();
}, [meta]);
const fetchPages = () => {
const initialPage = page === 0 ? 1 : page < 3 ? 1 : totalPages < 3 ? 1 : page === totalPages ? totalPages - 2 : page - 1;
const pages2 = [initialPage];
const maxCount = totalPages < 5 ? totalPages : 5;
while (pages2.length < totalPages && pages2.length < maxCount) {
pages2.push(pages2[pages2.length - 1] + 1);
}
setPages(pages2);
};
return /* @__PURE__ */ require$$0.jsxs(React.Fragment, { children: [
/* @__PURE__ */ require$$0.jsxs(paginations.Pagination, { children: [
/* @__PURE__ */ require$$0.jsx(paginations.PaginationFirst, { page: 1, disabled: page === 0, onClick: () => setParams({ ...params, page: 0 }) }),
/* @__PURE__ */ require$$0.jsx(paginations.PaginationPrev, { page: page - 1, disabled: page < 1, onClick: () => setParams({ ...params, page: page - 1 }) }),
pages.map((value) => /* @__PURE__ */ require$$0.jsx(
paginations.PaginationBtn,
{
page: value,
active: page + 1 === value,
onClick: () => setParams({ ...params, page: value - 1 })
},
value
)),
/* @__PURE__ */ require$$0.jsx(
paginations.PaginationNext,
{
page: page + 1,
disabled: page >= totalPages - 1,
onClick: () => setParams({ ...params, page: page + 1 })
}
),
/* @__PURE__ */ require$$0.jsx(
paginations.PaginationLast,
{
page: pages.length,
disabled: page >= totalPages - 1,
onClick: () => setParams({ ...params, page: totalPages - 1 })
}
)
] }),
/* @__PURE__ */ require$$0.jsxs(html.Small, { children: [
transforms.toNumber(meta.totalRecords),
" records"
] })
] });
};
const SliderPagination = ({ meta, params, setParams }) => {
const page = React.useMemo(() => {
return (meta == null ? void 0 : meta.page) || 0;
}, [meta.page]);
const totalPages = React.useMemo(() => {
return Math.ceil((meta == null ? void 0 : meta.totalRecords) / ((meta == null ? void 0 : meta.pageSize) || 1e7));
}, [meta.totalRecords]);
if (totalPages === 0) return null;
return /* @__PURE__ */ require$$0.jsxs(paginations.Pagination, { border: "", borderRadius: "", divide: "", display: "flex-middle", children: [
/* @__PURE__ */ require$$0.jsx(
paginations.PaginationPrev,
{
border: "",
borderRadius: "rounded-md",
page: page - 1,
disabled: page < 1,
onClick: () => setParams({ ...params, page: page - 1 })
}
),
/* @__PURE__ */ require$$0.jsxs(html.Span, { color: "text-gray-500", fontSize: "text-sm", fontWeight: "font-medium", spacing: "p-2", children: [
page + 1,
" of ",
totalPages
] }),
/* @__PURE__ */ require$$0.jsx(
paginations.PaginationNext,
{
border: "",
borderRadius: "rounded-md",
page: page + 1,
disabled: page >= totalPages - 1,
onClick: () => setParams({ ...params, page: page + 1 })
}
)
] });
};
const ViewToggle = ({ value, options, onClick, tailwind }) => {
const isActive = (option) => value === option;
return /* @__PURE__ */ require$$0.jsx(
buttonGroups.BtnGroup,
{
borderRadius: "rounded-md",
space: "space-x-1",
divide: "",
spacing: "p-1",
width: "w-full",
...tailwind == null ? void 0 : tailwind.btnGroup,
children: options.map((option, i) => /* @__PURE__ */ require$$0.jsx(html.Span, { ...tailwind == null ? void 0 : tailwind.span, children: /* @__PURE__ */ require$$0.jsx(
html.AccentBtn,
{
size: "xs",
active: isActive(option),
onClick: () => onClick(option),
className: "w-full",
...tailwind == null ? void 0 : tailwind.btn,
children: transforms.capitalize(option)
}
) }, i))
}
);
};
exports.ErrorToast = html.ErrorToast;
exports.InfoToast = html.InfoToast;
exports.SuccessToast = html.SuccessToast;
exports.BadgeItem = BadgeItem;
exports.BasicSkeleton = BasicSkeleton;
exports.BtnPagination = BtnPagination;
exports.Feedback = Feedback;
exports.GridSkeleton = GridSkeleton;
exports.Item = Item;
exports.ItemSkeleton = ItemSkeleton;
exports.LinkItem = LinkItem;
exports.ListFeedback = ListFeedback;
exports.ListItems = ListItems;
exports.ListSkeleton = ListSkeleton;
exports.PageFeedback = PageFeedback;
exports.PagePagination = PagePagination;
exports.Pagination = Pagination;
exports.PreviewFeedback = PreviewFeedback;
exports.SearchFeedback = SearchFeedback;
exports.SearchSkeleton = SearchSkeleton;
exports.Skeleton = Skeleton;
exports.SliderPagination = SliderPagination;
exports.TableFeedback = TableFeedback;
exports.TableSkeleton = TableSkeleton;
exports.TextItem = TextItem;
exports.Toast = Toast;
exports.ViewToggle = ViewToggle;