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

package/dist/chunk-S4M6HQWR.mjs

@@ -0,0 +1,76 @@
+import {
+  Box_default
+} from "./chunk-23CHBI4O.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-SGEVTBAH.mjs

@@ -0,0 +1,80 @@
+import {
+  Box_default
+} from "./chunk-23CHBI4O.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-UAOAQXIP.mjs

@@ -0,0 +1,18 @@
+import {
+  navbarItemStyle
+} from "./chunk-2GXDW577.mjs";
+import {
+  Box_default
+} from "./chunk-23CHBI4O.mjs";
+
+// src/components/Navbar/NavbarItem.tsx
+import clsx from "clsx";
+import React from "react";
+var NavbarItem = (props) => {
+  return /* @__PURE__ */ React.createElement(Box_default, { as: "div", className: clsx(navbarItemStyle, props.className), ...props });
+};
+var NavbarItem_default = NavbarItem;
+
+export {
+  NavbarItem_default
+};

package/dist/chunk-UVITSUYL.mjs

@@ -0,0 +1,21 @@
+import {
+  formInputStyle
+} from "./chunk-ERWDS6PF.mjs";
+import {
+  Input_default
+} from "./chunk-HPP5HXXH.mjs";
+import {
+  Box_default
+} from "./chunk-23CHBI4O.mjs";
+
+// src/components/Form/FormInput.tsx
+import clsx from "clsx";
+import React from "react";
+var FormInput = (props) => {
+  return /* @__PURE__ */ React.createElement(Box_default, { as: Input_default, padding: "small", className: clsx(formInputStyle, props.className), label: props.label, ...props });
+};
+var FormInput_default = FormInput;
+
+export {
+  FormInput_default
+};

package/dist/chunk-VMZLIR3R.mjs

@@ -0,0 +1,122 @@
+import {
+  Box_default
+} from "./chunk-23CHBI4O.mjs";
+
+// src/components/DropdownMenu/DropdownMenu.tsx
+import clsx from "clsx";
+import React, { useState, useRef, useEffect } from "react";
+
+// src/components/DropdownMenu/styles.css.ts
+var dropdownMenuContainer = "styles__zvis9o0";
+var dropdownMenuContent = "styles__zvis9o2";
+var dropdownMenuGroup = "styles__zvis9oc";
+var dropdownMenuItem = "styles__zvis9o7";
+var dropdownMenuItemVariants = { "default": "styles_dropdownMenuItemVariants_default__zvis9o8", destructive: "styles_dropdownMenuItemVariants_destructive__zvis9o9", disabled: "styles_dropdownMenuItemVariants_disabled__zvis9oa" };
+var dropdownMenuLabel = "styles__zvis9od";
+var dropdownMenuPositionVariants = { bottomLeft: "styles_dropdownMenuPositionVariants_bottomLeft__zvis9o3", bottomRight: "styles_dropdownMenuPositionVariants_bottomRight__zvis9o4", topLeft: "styles_dropdownMenuPositionVariants_topLeft__zvis9o5", topRight: "styles_dropdownMenuPositionVariants_topRight__zvis9o6" };
+var dropdownMenuSeparator = "styles__zvis9ob";
+var dropdownMenuTrigger = "styles__zvis9o1";
+
+// src/components/DropdownMenu/DropdownMenu.tsx
+var DropdownMenu = ({
+  trigger,
+  items = [],
+  groups = [],
+  position = "bottomLeft",
+  closeOnItemClick = true,
+  className,
+  ...props
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const containerRef = useRef(null);
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isOpen]);
+  useEffect(() => {
+    const handleEscape = (e) => {
+      if (e.key === "Escape" && isOpen) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [isOpen]);
+  const handleItemClick = (item) => {
+    if (item.disabled || item.variant === "disabled") return;
+    item.onClick?.();
+    if (closeOnItemClick) {
+      setIsOpen(false);
+    }
+  };
+  const renderItem = (item, index) => /* @__PURE__ */ React.createElement(
+    Box_default,
+    {
+      key: index,
+      as: "button",
+      className: clsx(
+        dropdownMenuItem,
+        dropdownMenuItemVariants[item.disabled || item.variant === "disabled" ? "disabled" : item.variant || "default"]
+      ),
+      onClick: () => handleItemClick(item),
+      disabled: item.disabled || item.variant === "disabled",
+      role: "menuitem",
+      type: "button"
+    },
+    item.icon && /* @__PURE__ */ React.createElement("span", null, item.icon),
+    item.label
+  );
+  const renderGroup = (group, index) => /* @__PURE__ */ React.createElement(Box_default, { key: index, className: dropdownMenuGroup, role: "group" }, group.label && /* @__PURE__ */ React.createElement(Box_default, { as: "div", className: dropdownMenuLabel, role: "presentation" }, group.label), group.items.map((item, itemIndex) => renderItem(item, itemIndex)));
+  return /* @__PURE__ */ React.createElement(
+    Box_default,
+    {
+      ref: containerRef,
+      className: clsx(dropdownMenuContainer, className),
+      ...props
+    },
+    /* @__PURE__ */ React.createElement(
+      Box_default,
+      {
+        className: dropdownMenuTrigger,
+        onClick: () => setIsOpen(!isOpen),
+        "aria-expanded": isOpen,
+        "aria-haspopup": "true"
+      },
+      trigger
+    ),
+    isOpen && /* @__PURE__ */ React.createElement(
+      Box_default,
+      {
+        className: clsx(
+          dropdownMenuContent,
+          dropdownMenuPositionVariants[position]
+        ),
+        role: "menu",
+        "aria-orientation": "vertical"
+      },
+      items.length > 0 && /* @__PURE__ */ React.createElement(Box_default, { className: dropdownMenuGroup }, items.map((item, index) => renderItem(item, index))),
+      groups.map((group, index) => /* @__PURE__ */ React.createElement(React.Fragment, { key: index }, index > 0 && /* @__PURE__ */ React.createElement(
+        Box_default,
+        {
+          as: "div",
+          className: dropdownMenuSeparator,
+          role: "separator"
+        }
+      ), renderGroup(group, index)))
+    )
+  );
+};
+var DropdownMenu_default = DropdownMenu;
+
+export {
+  DropdownMenu_default
+};

package/dist/chunk-VVJYGPZF.mjs

@@ -0,0 +1,85 @@
+import {
+  Box_default
+} from "./chunk-23CHBI4O.mjs";
+
+// src/components/Collapse/Collapse.tsx
+import clsx from "clsx";
+import React, { useState, useRef, useEffect } from "react";
+
+// src/components/Collapse/styles.css.ts
+var collapseContainer = "styles__1ui5oei2";
+var collapseContent = "styles__1ui5oei3";
+
+// src/components/Collapse/Collapse.tsx
+var Collapse = ({
+  isOpen,
+  children,
+  animation = "both",
+  duration = 300,
+  className,
+  onAnimationEnd
+}) => {
+  const [height, setHeight] = useState(
+    isOpen ? void 0 : 0
+  );
+  const [isAnimating, setIsAnimating] = useState(false);
+  const contentRef = useRef(null);
+  useEffect(() => {
+    if (isOpen) {
+      setIsAnimating(true);
+      if (contentRef.current) {
+        setHeight(contentRef.current.scrollHeight);
+      }
+    } else {
+      setIsAnimating(true);
+      setHeight(0);
+    }
+  }, [isOpen]);
+  const handleTransitionEnd = () => {
+    setIsAnimating(false);
+    if (isOpen) {
+      setHeight(void 0);
+    }
+    onAnimationEnd?.();
+  };
+  const getAnimationStyles = () => {
+    const baseStyles = {
+      transition: `height ${duration}ms ease-out, opacity ${duration}ms ease-out`,
+      height: height !== void 0 ? `${height}px` : void 0,
+      opacity: isOpen || isAnimating ? 1 : 0
+    };
+    if (animation === "height") {
+      return {
+        ...baseStyles,
+        transition: `height ${duration}ms ease-out`,
+        opacity: 1
+      };
+    }
+    if (animation === "opacity") {
+      return {
+        ...baseStyles,
+        transition: `opacity ${duration}ms ease-out`,
+        height: void 0
+      };
+    }
+    return baseStyles;
+  };
+  if (!isOpen && !isAnimating && animation !== "opacity") {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(
+    Box_default,
+    {
+      className: clsx(collapseContainer, className),
+      style: getAnimationStyles(),
+      onTransitionEnd: handleTransitionEnd,
+      "aria-hidden": !isOpen
+    },
+    /* @__PURE__ */ React.createElement(Box_default, { ref: contentRef, className: collapseContent }, children)
+  );
+};
+var Collapse_default = Collapse;
+
+export {
+  Collapse_default
+};

package/dist/chunk-W2PKPRKR.mjs

@@ -0,0 +1,51 @@
+import {
+  text
+} from "./chunk-EOGH5LUH.mjs";
+import {
+  Box_default
+} from "./chunk-23CHBI4O.mjs";
+
+// src/components/TextArea/TextArea.tsx
+import clsx from "clsx";
+import React from "react";
+
+// src/components/TextArea/styles.css.ts
+var label = "styles__118k1ug1";
+var textAreaStyle = "styles__118k1ug0";
+
+// src/components/TextArea/TextArea.tsx
+var TextArea = (props) => {
+  return /* @__PURE__ */ React.createElement(
+    Box_default,
+    {
+      display: "flex",
+      flexDirection: { mobile: "column", tablet: "row" },
+      gap: "small"
+    },
+    props.label && /* @__PURE__ */ React.createElement(
+      Box_default,
+      {
+        as: "label",
+        className: clsx(text, label),
+        marginX: { mobile: "auto", tablet: "none" },
+        marginY: { mobile: "none", tablet: "auto" },
+        htmlFor: props.id
+      },
+      props.label
+    ),
+    /* @__PURE__ */ React.createElement(
+      Box_default,
+      {
+        as: "textarea",
+        className: clsx(textAreaStyle, props.className),
+        width: props.fullWidth ? "100%" : void 0,
+        ...props
+      }
+    )
+  );
+};
+var TextArea_default = TextArea;
+
+export {
+  TextArea_default
+};

package/dist/chunk-WO4QVNEQ.mjs

@@ -0,0 +1,15 @@
+// src/components/Kbd/Kbd.tsx
+import React from "react";
+
+// src/components/Kbd/styles.css.ts
+var kbd = "styles__y0u7oh0";
+
+// src/components/Kbd/Kbd.tsx
+var Kbd = ({ children, className, ...props }) => {
+  return /* @__PURE__ */ React.createElement("kbd", { className: `${kbd} ${className || ""}`, ...props }, children);
+};
+var Kbd_default = Kbd;
+
+export {
+  Kbd_default
+};

package/dist/chunk-WUO4DJIA.mjs

@@ -0,0 +1,30 @@
+import {
+  Box_default
+} from "./chunk-23CHBI4O.mjs";
+
+// src/components/EmptyState/EmptyState.tsx
+import clsx from "clsx";
+import React from "react";
+
+// src/components/EmptyState/styles.css.ts
+var emptyState = "styles__19qw0q50";
+var emptyStateAction = "styles__19qw0q54";
+var emptyStateDescription = "styles__19qw0q53";
+var emptyStateIcon = "styles__19qw0q51";
+var emptyStateTitle = "styles__19qw0q52";
+
+// src/components/EmptyState/EmptyState.tsx
+var EmptyState = ({
+  icon,
+  title,
+  description,
+  action,
+  className
+}) => {
+  return /* @__PURE__ */ React.createElement(Box_default, { className: clsx(emptyState, className), role: "status" }, icon && /* @__PURE__ */ React.createElement(Box_default, { className: emptyStateIcon, "aria-hidden": "true" }, icon), title && /* @__PURE__ */ React.createElement(Box_default, { as: "h3", className: emptyStateTitle }, title), description && /* @__PURE__ */ React.createElement(Box_default, { as: "p", className: emptyStateDescription }, description), action && /* @__PURE__ */ React.createElement(Box_default, { className: emptyStateAction }, action));
+};
+var EmptyState_default = EmptyState;
+
+export {
+  EmptyState_default
+};

package/dist/chunk-WXCMK5GH.mjs

@@ -0,0 +1,141 @@
+import {
+  Box_default
+} from "./chunk-23CHBI4O.mjs";
+
+// src/components/Accordion/Accordion.tsx
+import clsx from "clsx";
+import React, { createContext, useContext, useState, useCallback } from "react";
+
+// src/components/Accordion/styles.css.ts
+var accordionContent = { collapsed: "styles_accordionContent_collapsed__8xsr6z3", expanded: "styles_accordionContent_expanded__8xsr6z4" };
+var accordionGroup = "styles__8xsr6z7";
+var accordionHeader = "styles_accordionHeader__8xsr6z2";
+var accordionIcon = "styles_accordionIcon__8xsr6z5";
+var accordionIconExpanded = "styles_accordionIconExpanded__8xsr6z6";
+var accordionItem = "styles_accordionItem__8xsr6z1";
+
+// src/components/Accordion/Accordion.tsx
+var AccordionContext = createContext({
+  allowMultiple: false,
+  expandedItems: /* @__PURE__ */ new Set(),
+  toggleItem: () => {
+  }
+});
+var Accordion = ({
+  children,
+  allowMultiple = false,
+  ...props
+}) => {
+  const [expandedItems, setExpandedItems] = useState(/* @__PURE__ */ new Set());
+  const toggleItem = (value) => {
+    setExpandedItems((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(value)) {
+        newSet.delete(value);
+      } else {
+        if (allowMultiple) {
+          newSet.add(value);
+        } else {
+          return /* @__PURE__ */ new Set([value]);
+        }
+      }
+      return newSet;
+    });
+  };
+  return /* @__PURE__ */ React.createElement(
+    AccordionContext.Provider,
+    {
+      value: { allowMultiple, expandedItems, toggleItem }
+    },
+    /* @__PURE__ */ React.createElement(
+      Box_default,
+      {
+        className: clsx(accordionGroup, props.className),
+        width: "100%",
+        ...props
+      },
+      children
+    )
+  );
+};
+var AccordionItem = ({
+  value,
+  title,
+  children,
+  ...props
+}) => {
+  const { expandedItems, toggleItem } = useContext(AccordionContext);
+  const isExpanded = expandedItems.has(value);
+  const toggleExpanded = useCallback(() => {
+    toggleItem(value);
+  }, [value, toggleItem]);
+  return /* @__PURE__ */ React.createElement(
+    Box_default,
+    {
+      as: "div",
+      className: clsx(accordionItem, props.className),
+      width: "100%",
+      marginBottom: "small",
+      border: "small",
+      borderRadius: "large",
+      overflow: "hidden",
+      ...props
+    },
+    /* @__PURE__ */ React.createElement(
+      Box_default,
+      {
+        as: "button",
+        onClick: toggleExpanded,
+        className: accordionHeader,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        padding: "small",
+        cursor: "pointer",
+        style: { userSelect: "none" },
+        fontSize: "14px",
+        fontWeight: "500",
+        color: "c5-700",
+        "aria-expanded": isExpanded,
+        "aria-controls": `accordion-content-${value}`
+      },
+      /* @__PURE__ */ React.createElement(Box_default, { as: "span" }, title),
+      /* @__PURE__ */ React.createElement(
+        Box_default,
+        {
+          as: "span",
+          className: clsx(accordionIcon, isExpanded && accordionIconExpanded),
+          fontSize: "12px",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          "aria-hidden": "true"
+        },
+        "\u25BC"
+      )
+    ),
+    /* @__PURE__ */ React.createElement(
+      Box_default,
+      {
+        as: "div",
+        id: `accordion-content-${value}`,
+        className: clsx(
+          accordionContent[isExpanded ? "expanded" : "collapsed"]
+        ),
+        padding: "small",
+        fontSize: "14px",
+        color: "c5-700",
+        role: "region"
+      },
+      children
+    )
+  );
+};
+var AccordionComponent = Object.assign(Accordion, {
+  Item: AccordionItem
+});
+var Accordion_default = AccordionComponent;
+
+export {
+  Accordion_default
+};