@jordan-mace/chaser-design-system 1.2.9 → 2.1.0

package/dist/chunk-BU45HCII.mjs

@@ -0,0 +1,31 @@
+import {
+  Box_default
+} from "./chunk-QUQTMW54.mjs";
+
+// src/components/Button/Button.tsx
+import clsx from "clsx";
+
+// src/components/Button/styles.css.ts
+var button = "styles__tl9jzr2";
+var buttonVariants = { primary: "styles_buttonVariants_primary__tl9jzr0", secondary: "styles_buttonVariants_secondary__tl9jzr1" };
+
+// src/components/Button/Button.tsx
+import React from "react";
+var Button = ({ label, ...props }) => {
+  return /* @__PURE__ */ React.createElement(
+    Box_default,
+    {
+      as: "button",
+      borderRadius: "large",
+      width: props.fullWidth ? "100%" : void 0,
+      className: clsx(buttonVariants[props.variant], button, props.className),
+      ...props
+    },
+    props.children || label
+  );
+};
+var Button_default = Button;
+
+export {
+  Button_default
+};

package/dist/chunk-C7NECQRC.mjs

@@ -0,0 +1,96 @@
+import {
+  Box_default
+} from "./chunk-QUQTMW54.mjs";
+
+// src/components/Breadcrumb/Breadcrumb.tsx
+import clsx from "clsx";
+import React from "react";
+
+// src/components/Breadcrumb/styles.css.ts
+var breadcrumb = "styles__1jer4gs0";
+var breadcrumbCurrent = "styles_breadcrumbCurrent__1jer4gs5";
+var breadcrumbItem = "styles_breadcrumbItem__1jer4gs2";
+var breadcrumbLink = "styles_breadcrumbLink__1jer4gs3";
+var breadcrumbList = "styles_breadcrumbList__1jer4gs1";
+var breadcrumbSeparator = "styles_breadcrumbSeparator__1jer4gs4";
+
+// src/components/Breadcrumb/Breadcrumb.tsx
+var Breadcrumb = ({ items, className, separator = "/" }) => {
+  return /* @__PURE__ */ React.createElement(
+    Box_default,
+    {
+      as: "nav",
+      "aria-label": "Breadcrumb",
+      className: clsx(breadcrumb, className),
+      display: "flex",
+      alignItems: "center",
+      gap: "small",
+      fontSize: "14px"
+    },
+    /* @__PURE__ */ React.createElement(
+      Box_default,
+      {
+        as: "ol",
+        className: breadcrumbList,
+        display: "flex",
+        alignItems: "center",
+        style: { listStyle: "none" },
+        margin: "none",
+        padding: "none",
+        gap: "small"
+      },
+      items.map((item, index) => /* @__PURE__ */ React.createElement(
+        Box_default,
+        {
+          as: "li",
+          key: index,
+          className: breadcrumbItem,
+          display: "flex",
+          alignItems: "center"
+        },
+        item.href && !item.current ? /* @__PURE__ */ React.createElement(
+          Box_default,
+          {
+            as: "a",
+            href: item.href,
+            className: breadcrumbLink,
+            display: "inline",
+            alignItems: "center",
+            color: "c5-600",
+            fontSize: "14px",
+            textDecoration: "none"
+          },
+          item.label
+        ) : /* @__PURE__ */ React.createElement(
+          Box_default,
+          {
+            as: "span",
+            className: breadcrumbCurrent,
+            display: "inline",
+            alignItems: "center",
+            color: "c5-700",
+            fontSize: "14px",
+            fontWeight: "500"
+          },
+          item.label
+        ),
+        index < items.length - 1 && /* @__PURE__ */ React.createElement(
+          Box_default,
+          {
+            as: "span",
+            className: breadcrumbSeparator,
+            color: "c5-500",
+            fontSize: "12px",
+            style: { userSelect: "none" }
+          },
+          separator
+        )
+      ))
+    )
+  );
+};
+var Breadcrumb_default = Breadcrumb;
+
+export {
+  Breadcrumb_default
+};

package/dist/chunk-CBPLQAHS.mjs

@@ -0,0 +1,80 @@
+import {
+  Box_default
+} from "./chunk-QUQTMW54.mjs";
+
+// src/components/Modal/Modal.tsx
+import clsx from "clsx";
+
+// src/components/Modal/styles.css.ts
+var modal = "styles__d41lqm4";
+var modalBody = "styles__d41lqm8";
+var modalCloseButton = "styles__d41lqm7";
+var modalFooter = "styles__d41lqm9";
+var modalHeader = "styles__d41lqm5";
+var modalTitle = "styles__d41lqm6";
+var modalVariants = { small: "styles_modalVariants_small__d41lqm0", medium: "styles_modalVariants_medium__d41lqm1", large: "styles_modalVariants_large__d41lqm2", full: "styles_modalVariants_full__d41lqm3" };
+
+// src/components/Modal/Modal.tsx
+import React, { useEffect, useRef } from "react";
+var Modal = ({
+  isOpen,
+  onClose,
+  title,
+  size = "medium",
+  children,
+  footer,
+  showCloseButton = true,
+  ...props
+}) => {
+  const dialogRef = useRef(null);
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    if (isOpen) {
+      dialog.showModal();
+      dialog.classList.add("open");
+    } else {
+      dialog.close();
+      dialog.classList.remove("open");
+    }
+    const handleClose = () => {
+      onClose();
+    };
+    dialog.addEventListener("close", handleClose);
+    return () => {
+      dialog.removeEventListener("close", handleClose);
+    };
+  }, [isOpen, onClose]);
+  return /* @__PURE__ */ React.createElement(
+    Box_default,
+    {
+      as: "dialog",
+      ref: dialogRef,
+      className: clsx(modal, modalVariants[size]),
+      onClick: (e) => {
+        if (e.target === dialogRef.current) {
+          onClose();
+        }
+      },
+      ...props
+    },
+    title && /* @__PURE__ */ React.createElement(Box_default, { as: "div", className: modalHeader }, /* @__PURE__ */ React.createElement(Box_default, { as: "h2", className: modalTitle }, title), showCloseButton && /* @__PURE__ */ React.createElement(
+      Box_default,
+      {
+        as: "button",
+        className: modalCloseButton,
+        onClick: onClose,
+        "aria-label": "Close modal",
+        type: "button"
+      },
+      "\xD7"
+    )),
+    /* @__PURE__ */ React.createElement(Box_default, { as: "div", className: modalBody }, children),
+    footer && /* @__PURE__ */ React.createElement(Box_default, { as: "div", className: modalFooter }, footer)
+  );
+};
+var Modal_default = Modal;
+
+export {
+  Modal_default
+};

package/dist/chunk-E5ODJY25.mjs

@@ -0,0 +1,75 @@
+import {
+  Box_default
+} from "./chunk-QUQTMW54.mjs";
+
+// src/components/Tooltip/Tooltip.tsx
+import clsx from "clsx";
+
+// src/components/Tooltip/styles.css.ts
+var tooltipArrow = "styles__fm9ov46";
+var tooltipArrowBottom = "styles__fm9ov48";
+var tooltipArrowLeft = "styles__fm9ov49";
+var tooltipArrowRight = "styles__fm9ov4a";
+var tooltipArrowTop = "styles__fm9ov47";
+var tooltipContainer = "styles__fm9ov44";
+var tooltipContent = "styles__fm9ov45";
+var tooltipPositions = { top: "styles_tooltipPositions_top__fm9ov40", bottom: "styles_tooltipPositions_bottom__fm9ov41", left: "styles_tooltipPositions_left__fm9ov42", right: "styles_tooltipPositions_right__fm9ov43" };
+
+// src/components/Tooltip/Tooltip.tsx
+import React, { useState } from "react";
+var Tooltip = ({
+  content,
+  position = "top",
+  showArrow = true,
+  children,
+  ...props
+}) => {
+  const [isVisible, setIsVisible] = useState(false);
+  const arrowStyle = {
+    top: position === "bottom" ? tooltipArrowBottom : void 0,
+    bottom: position === "top" ? tooltipArrowTop : void 0,
+    left: position === "right" ? tooltipArrowLeft : void 0,
+    right: position === "left" ? tooltipArrowRight : void 0
+  };
+  return /* @__PURE__ */ React.createElement(
+    Box_default,
+    {
+      as: "div",
+      className: clsx(tooltipContainer, props.className),
+      onMouseEnter: () => setIsVisible(true),
+      onMouseLeave: () => setIsVisible(false),
+      onFocus: () => setIsVisible(true),
+      onBlur: () => setIsVisible(false),
+      ...props
+    },
+    children,
+    /* @__PURE__ */ React.createElement(
+      Box_default,
+      {
+        as: "div",
+        className: clsx(tooltipContent, tooltipPositions[position]),
+        "data-visible": isVisible,
+        role: "tooltip"
+      },
+      showArrow && /* @__PURE__ */ React.createElement(
+        Box_default,
+        {
+          as: "span",
+          className: clsx(
+            tooltipArrow,
+            arrowStyle.top,
+            arrowStyle.bottom,
+            arrowStyle.left,
+            arrowStyle.right
+          )
+        }
+      ),
+      content
+    )
+  );
+};
+var Tooltip_default = Tooltip;
+
+export {
+  Tooltip_default
+};

package/dist/chunk-FPTK6LYO.mjs

@@ -0,0 +1,76 @@
+import {
+  Box_default
+} from "./chunk-QUQTMW54.mjs";
+
+// src/components/Table/Table.tsx
+import clsx from "clsx";
+import React, { createContext, useContext } from "react";
+
+// src/components/Table/styles.css.ts
+var table = "styles__1xzbqi40";
+var tableContainer = "styles__1xzbqi48";
+var tbody = "styles__1xzbqi42";
+var td = "styles__1xzbqi47";
+var tfoot = "styles__1xzbqi43";
+var th = "styles__1xzbqi46";
+var thead = "styles__1xzbqi41";
+var tr = { "default": "styles_tr_default__1xzbqi44", striped: "styles_tr_striped__1xzbqi45" };
+
+// src/components/Table/Table.tsx
+var TableContext = createContext({});
+var TableComponent = ({
+  children,
+  striped = false,
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ React.createElement(TableContext.Provider, { value: { striped } }, /* @__PURE__ */ React.createElement(Box_default, { className: clsx(tableContainer, className), width: "100%" }, /* @__PURE__ */ React.createElement(Box_default, { as: "table", className: clsx(table), ...props }, children)));
+};
+var Thead = ({ children, className }) => {
+  return /* @__PURE__ */ React.createElement(Box_default, { as: "thead", className: clsx(thead, className) }, children);
+};
+var Tbody = ({ children, className }) => {
+  return /* @__PURE__ */ React.createElement(Box_default, { as: "tbody", className: clsx(tbody, className) }, children);
+};
+var Tfoot = ({ children, className }) => {
+  return /* @__PURE__ */ React.createElement(Box_default, { as: "tfoot", className: clsx(tfoot, className) }, children);
+};
+var Tr = ({ children, className }) => {
+  const { striped } = useContext(TableContext);
+  return /* @__PURE__ */ React.createElement(
+    Box_default,
+    {
+      as: "tr",
+      className: clsx(tr[striped ? "striped" : "default"], className)
+    },
+    children
+  );
+};
+var Th = ({ children, className }) => {
+  return /* @__PURE__ */ React.createElement(Box_default, { as: "th", className: clsx(th, className) }, children);
+};
+var Td = ({ children, className, colSpan, rowSpan }) => {
+  return /* @__PURE__ */ React.createElement(
+    Box_default,
+    {
+      as: "td",
+      className: clsx(td, className),
+      colSpan,
+      rowSpan
+    },
+    children
+  );
+};
+var Table = Object.assign(TableComponent, {
+  Thead,
+  Tbody,
+  Tfoot,
+  Tr,
+  Th,
+  Td
+});
+var Table_default = Table;
+
+export {
+  Table_default
+};

package/dist/chunk-GD42AS4L.mjs

@@ -0,0 +1,8 @@
+// src/components/List/styles.css.ts
+var list = "styles_list__z3x3130";
+var listItem = "styles_listItem__z3x3131";
+
+export {
+  list,
+  listItem
+};

package/dist/chunk-GMAR37YG.mjs

@@ -0,0 +1,8 @@
+// src/components/Text/styles.css.ts
+var heading = "styles_heading__1l7zaje1";
+var text = "styles_text__1l7zaje0";
+
+export {
+  heading,
+  text
+};

package/dist/chunk-GNAJ44RY.mjs

@@ -0,0 +1,26 @@
+// src/components/VisuallyHidden/VisuallyHidden.tsx
+import React from "react";
+
+// src/components/VisuallyHidden/styles.css.ts
+var visuallyHidden = "styles__13txnwj0";
+
+// src/components/VisuallyHidden/VisuallyHidden.tsx
+var VisuallyHidden = ({
+  children,
+  as: Component = "span",
+  ...props
+}) => {
+  return React.createElement(
+    Component,
+    {
+      className: visuallyHidden,
+      ...props
+    },
+    children
+  );
+};
+var VisuallyHidden_default = VisuallyHidden;
+
+export {
+  VisuallyHidden_default
+};

package/dist/chunk-H4FZYNCW.mjs

@@ -0,0 +1,118 @@
+import {
+  Box_default
+} from "./chunk-QUQTMW54.mjs";
+
+// src/components/Pagination/Pagination.tsx
+import clsx from "clsx";
+import React from "react";
+
+// src/components/Pagination/styles.css.ts
+var ellipsis = "styles__10tz47n4";
+var pageButton = "styles__10tz47n1";
+var pageButtonVariants = { "default": "styles_pageButtonVariants_default__10tz47n2", active: "styles_pageButtonVariants_active__10tz47n3" };
+var paginationContainer = "styles__10tz47n0";
+
+// src/components/Pagination/Pagination.tsx
+var Pagination = ({
+  currentPage,
+  totalPages,
+  onPageChange,
+  siblingCount = 1,
+  showFirstLast = true,
+  showPrevNext = true,
+  ...props
+}) => {
+  const generatePageNumbers = () => {
+    const pages2 = [];
+    const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);
+    const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages);
+    const shouldShowLeftEllipsis = leftSiblingIndex > 2;
+    const shouldShowRightEllipsis = rightSiblingIndex < totalPages - 1;
+    if (totalPages <= 7) {
+      for (let i = 1; i <= totalPages; i++) {
+        pages2.push(i);
+      }
+    } else {
+      pages2.push(1);
+      if (shouldShowLeftEllipsis) {
+        pages2.push("left-ellipsis");
+      } else if (currentPage > 3) {
+        for (let i = 2; i < leftSiblingIndex; i++) {
+          pages2.push(i);
+        }
+      }
+      for (let i = leftSiblingIndex; i <= rightSiblingIndex; i++) {
+        if (i !== 1 && i !== totalPages) {
+          pages2.push(i);
+        }
+      }
+      if (shouldShowRightEllipsis) {
+        pages2.push("right-ellipsis");
+      } else if (currentPage < totalPages - 2) {
+        for (let i = rightSiblingIndex + 1; i < totalPages; i++) {
+          pages2.push(i);
+        }
+      }
+      pages2.push(totalPages);
+    }
+    return pages2;
+  };
+  const pages = generatePageNumbers();
+  const { className, ...restProps } = props;
+  return /* @__PURE__ */ React.createElement(Box_default, { className: clsx(paginationContainer, className), ...restProps }, showFirstLast && /* @__PURE__ */ React.createElement(
+    Box_default,
+    {
+      as: "button",
+      className: clsx(pageButton, pageButtonVariants.default),
+      onClick: () => onPageChange(1),
+      disabled: currentPage === 1
+    },
+    "<<"
+  ), showPrevNext && /* @__PURE__ */ React.createElement(
+    Box_default,
+    {
+      as: "button",
+      className: clsx(pageButton, pageButtonVariants.default),
+      onClick: () => onPageChange(currentPage - 1),
+      disabled: currentPage === 1
+    },
+    "<"
+  ), pages.map(
+    (page, index) => typeof page === "number" ? /* @__PURE__ */ React.createElement(
+      Box_default,
+      {
+        key: `page-${page}`,
+        as: "button",
+        className: clsx(
+          pageButton,
+          page === currentPage ? pageButtonVariants.active : pageButtonVariants.default
+        ),
+        onClick: () => onPageChange(page)
+      },
+      page
+    ) : /* @__PURE__ */ React.createElement(Box_default, { key: `${page}-${index}`, className: ellipsis }, "...")
+  ), showPrevNext && /* @__PURE__ */ React.createElement(
+    Box_default,
+    {
+      as: "button",
+      className: clsx(pageButton, pageButtonVariants.default),
+      onClick: () => onPageChange(currentPage + 1),
+      disabled: currentPage === totalPages
+    },
+    ">"
+  ), showFirstLast && /* @__PURE__ */ React.createElement(
+    Box_default,
+    {
+      as: "button",
+      className: clsx(pageButton, pageButtonVariants.default),
+      onClick: () => onPageChange(totalPages),
+      disabled: currentPage === totalPages
+    },
+    ">>"
+  ));
+};
+var Pagination_default = Pagination;
+
+export {
+  Pagination_default
+};

package/dist/chunk-HWAS44T7.mjs

@@ -0,0 +1,49 @@
+import {
+  Box_default
+} from "./chunk-QUQTMW54.mjs";
+
+// src/components/Alert/Alert.tsx
+import clsx from "clsx";
+
+// src/components/Alert/styles.css.ts
+var alert = "styles__16ufkop4";
+var alertContent = "styles__16ufkop5";
+var alertDismissButton = "styles__16ufkop6";
+var alertVariants = { success: "styles_alertVariants_success__16ufkop0", warning: "styles_alertVariants_warning__16ufkop1", error: "styles_alertVariants_error__16ufkop2", info: "styles_alertVariants_info__16ufkop3" };
+
+// src/components/Alert/Alert.tsx
+import React from "react";
+var Alert = ({
+  severity = "info",
+  dismissible = false,
+  onDismiss,
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ React.createElement(
+    Box_default,
+    {
+      as: "div",
+      role: "alert",
+      className: clsx(alert, alertVariants[severity], props.className),
+      ...props
+    },
+    /* @__PURE__ */ React.createElement(Box_default, { as: "div", className: alertContent }, children),
+    dismissible && onDismiss && /* @__PURE__ */ React.createElement(
+      Box_default,
+      {
+        as: "button",
+        className: alertDismissButton,
+        onClick: onDismiss,
+        "aria-label": "Dismiss alert",
+        type: "button"
+      },
+      "\xD7"
+    )
+  );
+};
+var Alert_default = Alert;
+
+export {
+  Alert_default
+};