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

package/dist/chunk-VGEM65JM.mjs

@@ -0,0 +1,51 @@
+import {
+  text
+} from "./chunk-GMAR37YG.mjs";
+import {
+  Box_default
+} from "./chunk-QUQTMW54.mjs";
+
+// src/components/Input/Input.tsx
+import clsx from "clsx";
+import React from "react";
+
+// src/components/Input/styles.css.ts
+var inputStyle = "styles__qmljub0";
+var label = "styles__qmljub1";
+
+// src/components/Input/Input.tsx
+var Input = (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: "input",
+        className: clsx(inputStyle, props.className),
+        width: props.fullWidth ? "100%" : void 0,
+        ...props
+      }
+    )
+  );
+};
+var Input_default = Input;
+
+export {
+  Input_default
+};

package/dist/chunk-VXYBXS77.mjs

@@ -0,0 +1,6 @@
+// src/styles/layers.css.ts
+var componentsLayer = "layers_reset__jpuiq40.layers_theme__jpuiq41.layers_components__jpuiq42";
+
+export {
+  componentsLayer
+};

package/dist/chunk-W5ZYIAZQ.mjs

@@ -0,0 +1,55 @@
+import {
+  Box_default
+} from "./chunk-QUQTMW54.mjs";
+
+// src/components/Select/Select.tsx
+import clsx from "clsx";
+import React, { forwardRef } from "react";
+
+// src/components/Select/styles.css.ts
+var select = { "default": "styles_select_default__uy1tw81", error: "styles_select_error__uy1tw82" };
+var selectLabel = "styles__uy1tw83";
+var selectWrapper = "styles__uy1tw84";
+
+// src/components/Select/Select.tsx
+var Select = forwardRef(
+  ({ label, options, error = false, fullWidth = true, className, ...props }, ref) => {
+    return /* @__PURE__ */ React.createElement(Box_default, { className: selectWrapper, width: "100%" }, label && /* @__PURE__ */ React.createElement(
+      Box_default,
+      {
+        as: "label",
+        className: selectLabel,
+        display: "block",
+        fontSize: "14px",
+        fontWeight: "500",
+        color: "c5-700",
+        marginBottom: "small"
+      },
+      label
+    ), /* @__PURE__ */ React.createElement(
+      Box_default,
+      {
+        as: "select",
+        ref,
+        className: clsx(select[error ? "error" : "default"], className),
+        width: fullWidth ? "100%" : void 0,
+        ...props
+      },
+      options.map((option) => /* @__PURE__ */ React.createElement(
+        "option",
+        {
+          key: option.value,
+          value: option.value,
+          disabled: option.disabled
+        },
+        option.label
+      ))
+    ));
+  }
+);
+Select.displayName = "Select";
+var Select_default = Select;
+
+export {
+  Select_default
+};

package/dist/chunk-WDS7ER2E.mjs

@@ -0,0 +1,117 @@
+import {
+  Box_default
+} from "./chunk-QUQTMW54.mjs";
+
+// src/components/Stepper/Stepper.tsx
+import clsx from "clsx";
+import React from "react";
+
+// src/components/Stepper/styles.css.ts
+var step = "styles__vhoh9l3";
+var stepConnector = "styles__vhoh9ld";
+var stepConnectorCompleted = "styles__vhoh9le";
+var stepConnectorVertical = "styles__vhoh9lf";
+var stepContent = "styles__vhoh9l9";
+var stepContentVertical = "styles__vhoh9la";
+var stepDescription = "styles__vhoh9lc";
+var stepIndicator = "styles__vhoh9l5";
+var stepIndicatorVariants = { pending: "styles_stepIndicatorVariants_pending__vhoh9l6", current: "styles_stepIndicatorVariants_current__vhoh9l7", completed: "styles_stepIndicatorVariants_completed__vhoh9l8" };
+var stepTitle = "styles__vhoh9lb";
+var stepVertical = "styles__vhoh9l4";
+var stepperContainer = "styles__vhoh9l0";
+var stepperHorizontal = "styles__vhoh9l1";
+var stepperVertical = "styles__vhoh9l2";
+
+// src/components/Stepper/Stepper.tsx
+var Stepper = ({
+  steps,
+  currentStep = 0,
+  orientation = "horizontal",
+  showConnectors = true,
+  onStepClick,
+  clickable = false,
+  className,
+  ...props
+}) => {
+  const getStepStatus = (index) => {
+    if (index < currentStep) return "completed";
+    if (index === currentStep) return "current";
+    return "pending";
+  };
+  const handleStepClick = (index) => {
+    if (clickable && onStepClick) {
+      onStepClick(index);
+    }
+  };
+  return /* @__PURE__ */ React.createElement(
+    Box_default,
+    {
+      className: clsx(
+        stepperContainer,
+        orientation === "horizontal" ? stepperHorizontal : stepperVertical,
+        className
+      ),
+      role: "list",
+      "aria-label": "Step progress",
+      ...props
+    },
+    steps.map((stepItem, index) => {
+      const status = stepItem.status || getStepStatus(index);
+      const isLast = index === steps.length - 1;
+      const isCompleted = status === "completed";
+      return /* @__PURE__ */ React.createElement(
+        Box_default,
+        {
+          key: index,
+          className: clsx(step, orientation === "vertical" && stepVertical),
+          role: "listitem",
+          "aria-current": status === "current" ? "step" : void 0
+        },
+        showConnectors && !isLast && orientation === "horizontal" && /* @__PURE__ */ React.createElement(
+          Box_default,
+          {
+            className: clsx(
+              stepConnector,
+              isCompleted && stepConnectorCompleted
+            ),
+            "aria-hidden": "true"
+          }
+        ),
+        showConnectors && !isLast && orientation === "vertical" && /* @__PURE__ */ React.createElement(
+          Box_default,
+          {
+            className: stepConnectorVertical,
+            style: { backgroundColor: isCompleted ? void 0 : void 0 },
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ React.createElement(
+          Box_default,
+          {
+            className: clsx(stepIndicator, stepIndicatorVariants[status]),
+            onClick: () => handleStepClick(index),
+            style: { cursor: clickable ? "pointer" : "default" },
+            "aria-label": `Step ${index + 1}: ${stepItem.title}`
+          },
+          status === "completed" ? "\u2713" : index + 1
+        ),
+        /* @__PURE__ */ React.createElement(
+          Box_default,
+          {
+            className: clsx(
+              stepContent,
+              orientation === "vertical" && stepContentVertical
+            )
+          },
+          /* @__PURE__ */ React.createElement(Box_default, { as: "h4", className: stepTitle }, stepItem.title),
+          stepItem.description && /* @__PURE__ */ React.createElement(Box_default, { as: "p", className: stepDescription }, stepItem.description)
+        )
+      );
+    })
+  );
+};
+var Stepper_default = Stepper;
+
+export {
+  Stepper_default
+};

package/dist/chunk-WTOTRXQH.mjs

@@ -0,0 +1,20 @@
+import {
+  listItem
+} from "./chunk-GD42AS4L.mjs";
+import {
+  Box_default
+} from "./chunk-QUQTMW54.mjs";
+
+// src/components/List/ListItem.tsx
+import React from "react";
+var ListItem = ({
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ React.createElement(Box_default, { as: "li", className: listItem, ...props }, children);
+};
+var ListItem_default = ListItem;
+
+export {
+  ListItem_default
+};

package/dist/chunk-WV72HREB.mjs

@@ -0,0 +1,42 @@
+import {
+  Box_default
+} from "./chunk-QUQTMW54.mjs";
+
+// src/components/Icon/Icon.tsx
+import clsx from "clsx";
+import React from "react";
+
+// src/components/Icon/styles.css.ts
+var icon = "styles__5assay0";
+
+// src/components/Icon/Icon.tsx
+var IconComponent = ({ name, children, className, color }) => {
+  const iconMap = {
+    check: "\u2713",
+    error: "\u2717",
+    warning: "\u26A0",
+    info: "i",
+    success: "\u2713",
+    close: "\xD7"
+  };
+  const displayContent = children || (name ? iconMap[name] : void 0);
+  if (!displayContent) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(
+    Box_default,
+    {
+      as: "span",
+      className: clsx(icon, className),
+      style: { color },
+      "aria-hidden": "true"
+    },
+    displayContent
+  );
+};
+IconComponent.displayName = "Icon";
+var Icon_default = IconComponent;
+
+export {
+  Icon_default
+};

package/dist/chunk-XAZH3L6X.mjs

@@ -0,0 +1,119 @@
+import {
+  Box_default
+} from "./chunk-QUQTMW54.mjs";
+
+// src/components/Drawer/Drawer.tsx
+import clsx from "clsx";
+import React, { useEffect } from "react";
+
+// src/components/Drawer/styles.css.ts
+var drawer = "styles__1nagv3ba";
+var drawerBody = "styles__1nagv3be";
+var drawerCloseButton = "styles__1nagv3bd";
+var drawerFooter = "styles__1nagv3bf";
+var drawerHeader = "styles__1nagv3bb";
+var drawerOverlay = "styles__1nagv3b9";
+var drawerPositionVariants = { left: "styles_drawerPositionVariants_left__1nagv3b5", right: "styles_drawerPositionVariants_right__1nagv3b6", top: "styles_drawerPositionVariants_top__1nagv3b7", bottom: "styles_drawerPositionVariants_bottom__1nagv3b8" };
+var drawerTitle = "styles__1nagv3bc";
+
+// src/components/Drawer/Drawer.tsx
+var sizeMap = {
+  left: {
+    small: "250px",
+    medium: "350px",
+    large: "450px",
+    full: "100vw"
+  },
+  right: {
+    small: "250px",
+    medium: "350px",
+    large: "450px",
+    full: "100vw"
+  },
+  top: {
+    small: "200px",
+    medium: "300px",
+    large: "400px",
+    full: "100vh"
+  },
+  bottom: {
+    small: "200px",
+    medium: "300px",
+    large: "400px",
+    full: "100vh"
+  }
+};
+var Drawer = ({
+  isOpen,
+  onClose,
+  title,
+  position = "right",
+  size = "medium",
+  children,
+  footer,
+  showCloseButton = true,
+  closeOnOverlayClick = true,
+  className,
+  ...props
+}) => {
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [isOpen]);
+  useEffect(() => {
+    const handleEscape = (e) => {
+      if (e.key === "Escape" && isOpen) {
+        onClose();
+      }
+    };
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [isOpen, onClose]);
+  if (!isOpen) return null;
+  const dimensionStyle = {
+    ["--drawer-width"]: ["left", "right"].includes(position) ? sizeMap[position][size] : void 0,
+    ["--drawer-height"]: ["top", "bottom"].includes(position) ? sizeMap[position][size] : void 0
+  };
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    Box_default,
+    {
+      className: drawerOverlay,
+      onClick: closeOnOverlayClick ? onClose : void 0,
+      "aria-hidden": "true"
+    }
+  ), /* @__PURE__ */ React.createElement(
+    Box_default,
+    {
+      as: "div",
+      role: "dialog",
+      "aria-modal": "true",
+      className: clsx(drawer, drawerPositionVariants[position], className),
+      style: dimensionStyle,
+      ...props
+    },
+    title && /* @__PURE__ */ React.createElement(Box_default, { as: "div", className: drawerHeader }, /* @__PURE__ */ React.createElement(Box_default, { as: "h2", className: drawerTitle }, title), showCloseButton && /* @__PURE__ */ React.createElement(
+      Box_default,
+      {
+        as: "button",
+        className: drawerCloseButton,
+        onClick: onClose,
+        "aria-label": "Close drawer",
+        type: "button"
+      },
+      "\xD7"
+    )),
+    /* @__PURE__ */ React.createElement(Box_default, { as: "div", className: drawerBody }, children),
+    footer && /* @__PURE__ */ React.createElement(Box_default, { as: "div", className: drawerFooter }, footer)
+  ));
+};
+var Drawer_default = Drawer;
+
+export {
+  Drawer_default
+};

package/dist/chunk-XIPZW6LD.mjs

@@ -0,0 +1,34 @@
+import {
+  Box_default
+} from "./chunk-QUQTMW54.mjs";
+
+// src/components/Separator/Separator.tsx
+import clsx from "clsx";
+import React from "react";
+
+// src/components/Separator/styles.css.ts
+var separator = "styles__rgqv5z0";
+var separatorOrientation = { horizontal: "styles_separatorOrientation_horizontal__rgqv5z1", vertical: "styles_separatorOrientation_vertical__rgqv5z2" };
+
+// src/components/Separator/Separator.tsx
+var Separator = ({
+  orientation = "horizontal",
+  decorative = false,
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ React.createElement(
+    Box_default,
+    {
+      as: "hr",
+      className: clsx(separator, separatorOrientation[orientation], className),
+      "aria-hidden": decorative,
+      ...props
+    }
+  );
+};
+var Separator_default = Separator;
+
+export {
+  Separator_default
+};

package/dist/chunk-XOINH6RL.mjs

@@ -0,0 +1,35 @@
+import {
+  Box_default
+} from "./chunk-QUQTMW54.mjs";
+
+// src/components/Card/Card.tsx
+import clsx from "clsx";
+
+// src/components/Card/styles.css.ts
+var card = "styles__dqeva03";
+var cardVariants = { elevated: "styles_cardVariants_elevated__dqeva00", outlined: "styles_cardVariants_outlined__dqeva01", filled: "styles_cardVariants_filled__dqeva02" };
+
+// src/components/Card/Card.tsx
+import React from "react";
+var Card = ({
+  variant = "elevated",
+  padding = "medium",
+  ...props
+}) => {
+  return /* @__PURE__ */ React.createElement(
+    Box_default,
+    {
+      as: "div",
+      borderRadius: "large",
+      padding: padding !== "none" ? padding : void 0,
+      className: clsx(cardVariants[variant], card, props.className),
+      ...props
+    },
+    props.children
+  );
+};
+var Card_default = Card;
+
+export {
+  Card_default
+};

package/dist/chunk-YDLIT2QT.mjs

@@ -0,0 +1,32 @@
+import {
+  navbarStyle
+} from "./chunk-7Y3QCS5S.mjs";
+import {
+  Box_default
+} from "./chunk-QUQTMW54.mjs";
+
+// src/components/Navbar/Navbar.tsx
+import clsx from "clsx";
+import React from "react";
+var Navbar = (props) => {
+  return /* @__PURE__ */ React.createElement(
+    Box_default,
+    {
+      as: "nav",
+      width: "100%",
+      display: "flex",
+      flexDirection: "row",
+      gap: "medium",
+      className: clsx(
+        navbarStyle,
+        props.className
+      ),
+      ...props
+    }
+  );
+};
+var Navbar_default = Navbar;
+
+export {
+  Navbar_default
+};

package/dist/chunk-ZDY52AN7.mjs

@@ -0,0 +1,141 @@
+import {
+  Box_default
+} from "./chunk-QUQTMW54.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
+};