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

package/dist/chunk-IOMB7PSL.mjs

@@ -0,0 +1,93 @@
+import {
+  Box_default
+} from "./chunk-QUQTMW54.mjs";
+
+// src/components/Toggle/Toggle.tsx
+import clsx from "clsx";
+
+// src/components/Toggle/styles.css.ts
+var toggle = "styles__13ijp634";
+var toggleFocusRing = "styles__13ijp63f";
+var toggleInput = "styles__13ijp635";
+var toggleLabel = "styles__13ijp633";
+var toggleSizes = { small: "styles_toggleSizes_small__13ijp630", medium: "styles_toggleSizes_medium__13ijp631", large: "styles_toggleSizes_large__13ijp632" };
+var toggleThumb = "styles__13ijp639";
+var toggleThumbChecked = "styles__13ijp63d";
+var toggleThumbSizes = { small: "styles_toggleThumbSizes_small__13ijp63a", medium: "styles_toggleThumbSizes_medium__13ijp63b", large: "styles_toggleThumbSizes_large__13ijp63c" };
+var toggleThumbUnchecked = "styles__13ijp63e";
+var toggleTrack = "styles__13ijp636";
+var toggleTrackChecked = "styles__13ijp637";
+var toggleTrackUnchecked = "styles__13ijp638";
+
+// src/components/Toggle/Toggle.tsx
+import React, { useState, useId } from "react";
+var Toggle = ({
+  checked = false,
+  onChange,
+  size = "medium",
+  label,
+  disabled = false,
+  id,
+  ...props
+}) => {
+  const [isFocused, setIsFocused] = useState(false);
+  const generatedId = useId();
+  const toggleId = id || `toggle-${generatedId}`;
+  const handleChange = (e) => {
+    if (!disabled && onChange) {
+      onChange(e.target.checked);
+    }
+  };
+  return /* @__PURE__ */ React.createElement(Box_default, { as: "div", className: toggle }, /* @__PURE__ */ React.createElement(Box_default, { as: "label", htmlFor: toggleId, className: toggleLabel }, /* @__PURE__ */ React.createElement(
+    Box_default,
+    {
+      as: "input",
+      type: "checkbox",
+      id: toggleId,
+      checked,
+      onChange: handleChange,
+      disabled,
+      className: toggleInput,
+      onFocus: () => setIsFocused(true),
+      onBlur: () => setIsFocused(false),
+      "aria-checked": checked,
+      role: "switch",
+      ...props
+    }
+  ), /* @__PURE__ */ React.createElement(
+    Box_default,
+    {
+      as: "span",
+      className: clsx(
+        toggleTrack,
+        toggleSizes[size],
+        checked ? toggleTrackChecked : toggleTrackUnchecked
+      ),
+      "data-size": size
+    },
+    /* @__PURE__ */ React.createElement(
+      Box_default,
+      {
+        as: "span",
+        className: clsx(
+          toggleThumb,
+          toggleThumbSizes[size],
+          checked ? toggleThumbChecked : toggleThumbUnchecked
+        )
+      }
+    )
+  ), /* @__PURE__ */ React.createElement(
+    Box_default,
+    {
+      as: "span",
+      className: toggleFocusRing,
+      "data-focused": isFocused,
+      "aria-hidden": "true"
+    }
+  )), label && /* @__PURE__ */ React.createElement(Box_default, { as: "span", marginLeft: "small" }, label));
+};
+var Toggle_default = Toggle;
+
+export {
+  Toggle_default
+};

package/dist/chunk-IUCJBPDL.mjs

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

package/dist/chunk-JQ42U5FU.mjs

@@ -0,0 +1,19 @@
+import {
+  heading,
+  text
+} from "./chunk-GMAR37YG.mjs";
+import {
+  Box_default
+} from "./chunk-QUQTMW54.mjs";
+
+// src/components/Text/Header.tsx
+import clsx from "clsx";
+import React from "react";
+var Header = ({ variant, children, className }) => {
+  return /* @__PURE__ */ React.createElement(Box_default, { as: variant, className: clsx(className, text, heading) }, children);
+};
+var Header_default = Header;
+
+export {
+  Header_default
+};

package/dist/chunk-KBUHPWEO.mjs

@@ -0,0 +1,137 @@
+import {
+  Box_default
+} from "./chunk-QUQTMW54.mjs";
+
+// src/components/Popover/Popover.tsx
+import clsx from "clsx";
+import React, { useState, useRef, useEffect } from "react";
+
+// src/components/Popover/styles.css.ts
+var popoverArrow = "styles__733ybic";
+var popoverArrowPositionVariants = { top: "styles_popoverArrowPositionVariants_top__733ybid", bottom: "styles_popoverArrowPositionVariants_bottom__733ybie", left: "styles_popoverArrowPositionVariants_left__733ybif", right: "styles_popoverArrowPositionVariants_right__733ybig", topLeft: "styles_popoverArrowPositionVariants_topLeft__733ybih", topRight: "styles_popoverArrowPositionVariants_topRight__733ybii", bottomLeft: "styles_popoverArrowPositionVariants_bottomLeft__733ybij", bottomRight: "styles_popoverArrowPositionVariants_bottomRight__733ybik" };
+var popoverBody = "styles__733ybio";
+var popoverCloseButton = "styles__733ybin";
+var popoverContainer = "styles__733ybi1";
+var popoverContent = "styles__733ybi3";
+var popoverFooter = "styles__733ybip";
+var popoverHeader = "styles__733ybil";
+var popoverPositionVariants = { top: "styles_popoverPositionVariants_top__733ybi4", bottom: "styles_popoverPositionVariants_bottom__733ybi5", left: "styles_popoverPositionVariants_left__733ybi6", right: "styles_popoverPositionVariants_right__733ybi7", topLeft: "styles_popoverPositionVariants_topLeft__733ybi8", topRight: "styles_popoverPositionVariants_topRight__733ybi9", bottomLeft: "styles_popoverPositionVariants_bottomLeft__733ybia", bottomRight: "styles_popoverPositionVariants_bottomRight__733ybib" };
+var popoverTitle = "styles__733ybim";
+var popoverTrigger = "styles__733ybi2";
+
+// src/components/Popover/Popover.tsx
+var Popover = ({
+  trigger,
+  children,
+  position = "bottom",
+  title,
+  footer,
+  showArrow = true,
+  triggerType = "click",
+  closeOnClickOutside = true,
+  closeOnEscape = true,
+  defaultOpen = false,
+  onOpenChange,
+  className,
+  ...props
+}) => {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+  const containerRef = useRef(null);
+  useEffect(() => {
+    onOpenChange?.(isOpen);
+  }, [isOpen, onOpenChange]);
+  useEffect(() => {
+    if (!closeOnClickOutside) return;
+    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, closeOnClickOutside]);
+  useEffect(() => {
+    if (!closeOnEscape) return;
+    const handleEscape = (e) => {
+      if (e.key === "Escape" && isOpen) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [isOpen, closeOnEscape]);
+  const handleTriggerClick = () => {
+    if (triggerType === "click") {
+      setIsOpen(!isOpen);
+    }
+  };
+  const handleTriggerMouseEnter = () => {
+    if (triggerType === "hover") {
+      setIsOpen(true);
+    }
+  };
+  const handleTriggerMouseLeave = () => {
+    if (triggerType === "hover") {
+      setIsOpen(false);
+    }
+  };
+  return /* @__PURE__ */ React.createElement(
+    Box_default,
+    {
+      ref: containerRef,
+      className: clsx(popoverContainer, className),
+      onMouseEnter: handleTriggerMouseEnter,
+      onMouseLeave: handleTriggerMouseLeave,
+      ...props
+    },
+    /* @__PURE__ */ React.createElement(
+      Box_default,
+      {
+        className: popoverTrigger,
+        onClick: handleTriggerClick,
+        "aria-expanded": isOpen
+      },
+      trigger
+    ),
+    isOpen && /* @__PURE__ */ React.createElement(
+      Box_default,
+      {
+        className: clsx(popoverContent, popoverPositionVariants[position]),
+        role: "dialog",
+        "aria-modal": "false"
+      },
+      showArrow && /* @__PURE__ */ React.createElement(
+        Box_default,
+        {
+          as: "span",
+          className: clsx(
+            popoverArrow,
+            popoverArrowPositionVariants[position]
+          )
+        }
+      ),
+      (title || triggerType === "click") && /* @__PURE__ */ React.createElement(Box_default, { as: "div", className: popoverHeader }, title && /* @__PURE__ */ React.createElement(Box_default, { as: "h3", className: popoverTitle }, title), triggerType === "click" && /* @__PURE__ */ React.createElement(
+        Box_default,
+        {
+          as: "button",
+          className: popoverCloseButton,
+          onClick: () => setIsOpen(false),
+          "aria-label": "Close popover",
+          type: "button"
+        },
+        "\xD7"
+      )),
+      /* @__PURE__ */ React.createElement(Box_default, { as: "div", className: popoverBody }, children),
+      footer && /* @__PURE__ */ React.createElement(Box_default, { as: "div", className: popoverFooter }, footer)
+    )
+  );
+};
+var Popover_default = Popover;
+
+export {
+  Popover_default
+};

package/dist/chunk-KHBV2LXN.mjs

@@ -0,0 +1,262 @@
+import {
+  Icon_default
+} from "./chunk-WV72HREB.mjs";
+
+// src/components/Toast/Toast.tsx
+import React, { createContext, useContext, useState, useEffect, useCallback, useRef } from "react";
+import { createPortal } from "react-dom";
+import clsx from "clsx";
+
+// src/components/Toast/styles.css.ts
+var fadeOutError = "styles_fadeOutError__u0czf5a";
+var fadeOutInfo = "styles_fadeOutInfo__u0czf5c";
+var fadeOutSuccess = "styles_fadeOutSuccess__u0czf59";
+var fadeOutWarning = "styles_fadeOutWarning__u0czf5b";
+var slideInRight = "styles_slideInRight__u0czf50";
+var toastCloseButton = "styles_toastCloseButton__u0czf5m";
+var toastContainer = "styles_toastContainer__u0czf5e";
+var toastContent = "styles__u0czf5p";
+var toastItem = "styles_toastItem__u0czf5l";
+var toastProgressBar = "styles_toastProgressBar__u0czf5o";
+var toastProgressBarContainer = "styles_toastProgressBarContainer__u0czf5n";
+var toastWrapper = { topLeft: "styles_toastWrapper_topLeft__u0czf5f", topCenter: "styles_toastWrapper_topCenter__u0czf5g", topRight: "styles_toastWrapper_topRight__u0czf5h", bottomLeft: "styles_toastWrapper_bottomLeft__u0czf5i", bottomCenter: "styles_toastWrapper_bottomCenter__u0czf5j", bottomRight: "styles_toastWrapper_bottomRight__u0czf5k" };
+
+// src/components/Toast/Toast.tsx
+var ToastContext = createContext({
+  addToast: () => "",
+  removeToast: () => {
+  },
+  handleDismissAll: () => {
+  },
+  handleResumeAll: () => {
+  }
+});
+var getFadeOutForVariant = (variant) => {
+  const fadeOutMap = {
+    success: fadeOutSuccess,
+    error: fadeOutError,
+    warning: fadeOutWarning,
+    info: fadeOutInfo
+  };
+  return fadeOutMap[variant] || fadeOutInfo;
+};
+var positionToClassKey = {
+  "top-left": "topLeft",
+  "top-center": "topCenter",
+  "top-right": "topRight",
+  "bottom-left": "bottomLeft",
+  "bottom-center": "bottomCenter",
+  "bottom-right": "bottomRight"
+};
+var ToastProvider = ({
+  children,
+  position = "top-right",
+  maxVisible = 5,
+  stacking = "stack"
+}) => {
+  const [toasts, setToasts] = useState([]);
+  const [pauseId, setPauseId] = useState(null);
+  const timeoutsRef = useRef(/* @__PURE__ */ new Map());
+  const pauseTimeoutRef = useRef(null);
+  const toastsRef = useRef([]);
+  useEffect(() => {
+    toastsRef.current = toasts;
+  }, [toasts]);
+  const removeToastInternal = useCallback((id) => {
+    setToasts((prev) => {
+      const toast = prev.find((t) => t.id === id);
+      if (toast) {
+        toast.options.onClose?.();
+      }
+      return prev.filter((t) => t.id !== id);
+    });
+    const timeout = timeoutsRef.current.get(id);
+    if (timeout) {
+      clearTimeout(timeout);
+      timeoutsRef.current.delete(id);
+    }
+  }, []);
+  const addToast = useCallback(
+    (message, variant = "info", options = {}) => {
+      const id = `toast-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+      const duration = options.duration ?? 5e3;
+      const startTime = Date.now();
+      const newToast = {
+        id,
+        message,
+        variant,
+        options: { ...options, duration, position: options.position ?? position },
+        startTime,
+        paused: false,
+        duration
+      };
+      setToasts((prev) => {
+        if (stacking === "replace") {
+          return [newToast];
+        }
+        const filtered = prev.filter((t) => {
+          const elapsed = Date.now() - t.startTime;
+          return elapsed < (t.options.duration ?? 5e3);
+        });
+        return [...filtered, newToast].slice(-maxVisible);
+      });
+      const timeoutId = setTimeout(() => {
+        removeToastInternal(id);
+      }, duration);
+      timeoutsRef.current.set(id, timeoutId);
+      return id;
+    },
+    [maxVisible, stacking, position, removeToastInternal]
+  );
+  const dismissInternal = useCallback((id) => {
+    const toast = toastsRef.current.find((t) => t.id === id);
+    if (!toast) return;
+    setToasts(
+      (prev) => prev.map((t) => {
+        if (t.id === id) {
+          return { ...t, paused: true };
+        }
+        return t;
+      })
+    );
+    if (pauseTimeoutRef.current) {
+      clearTimeout(pauseTimeoutRef.current);
+    }
+    setPauseId(id);
+    pauseTimeoutRef.current = setTimeout(() => {
+      setPauseId(null);
+      removeToastInternal(id);
+    }, 500);
+    const timeout = timeoutsRef.current.get(id);
+    if (timeout) {
+      clearTimeout(timeout);
+      timeoutsRef.current.delete(id);
+    }
+  }, [removeToastInternal]);
+  const dismissAllInternal = useCallback(() => {
+    setPauseId("all");
+    toastsRef.current.forEach((toast) => {
+      const timeout = timeoutsRef.current.get(toast.id);
+      if (timeout) {
+        clearTimeout(timeout);
+        timeoutsRef.current.delete(toast.id);
+      }
+    });
+  }, []);
+  const resumeAllInternal = useCallback(() => {
+    setPauseId(null);
+    toastsRef.current.forEach((toast) => {
+      if (toast.paused && toast.duration > 500) {
+        const timeout = setTimeout(() => {
+          removeToastInternal(toast.id);
+        }, toast.duration - (Date.now() - toast.startTime));
+        timeoutsRef.current.set(toast.id, timeout);
+      }
+    });
+  }, [removeToastInternal]);
+  useEffect(() => {
+    return () => {
+      timeoutsRef.current.forEach((timeout) => clearTimeout(timeout));
+      if (pauseTimeoutRef.current) {
+        clearTimeout(pauseTimeoutRef.current);
+      }
+    };
+  }, []);
+  const value = {
+    addToast,
+    removeToast: removeToastInternal,
+    handleDismissAll: dismissAllInternal,
+    handleResumeAll: resumeAllInternal
+  };
+  return /* @__PURE__ */ React.createElement(ToastContext.Provider, { value }, children, /* @__PURE__ */ React.createElement(
+    ToastContainer,
+    {
+      toasts,
+      position,
+      pauseId,
+      onDismiss: dismissInternal,
+      onDismissAll: dismissAllInternal,
+      onResumeAll: resumeAllInternal
+    }
+  ));
+};
+var ToastContainer = ({
+  toasts,
+  position,
+  pauseId,
+  onDismiss,
+  onDismissAll,
+  onResumeAll
+}) => {
+  const [container, setContainer] = useState(null);
+  useEffect(() => {
+    const existingContainer = document.getElementById("toast-container");
+    if (existingContainer) {
+      setContainer(existingContainer);
+    } else {
+      const el = document.createElement("div");
+      el.id = "toast-container";
+      document.body.appendChild(el);
+      setContainer(el);
+    }
+  }, []);
+  if (!container) return null;
+  return createPortal(
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: clsx(toastContainer, toastWrapper[positionToClassKey[position]]),
+        onMouseEnter: onDismissAll,
+        onMouseLeave: onResumeAll
+      },
+      toasts.map((toast) => {
+        const elapsed = Date.now() - toast.startTime;
+        const progress = (toast.duration - elapsed) / toast.duration * 100;
+        const fadeOutAnimation = getFadeOutForVariant(toast.variant);
+        return /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            key: toast.id,
+            className: toastItem,
+            style: {
+              opacity: toast.paused || pauseId !== null ? 0.7 : 1,
+              animation: `${slideInRight} 0.2s ease, 0.2s ease ${fadeOutAnimation} forwards`
+            },
+            onMouseEnter: () => onDismiss(toast.id)
+          },
+          /* @__PURE__ */ React.createElement("div", { className: toastContent }, /* @__PURE__ */ React.createElement(Icon_default, { name: toast.variant === "success" ? "check" : toast.variant === "error" ? "error" : "info" }), /* @__PURE__ */ React.createElement("span", { style: { marginLeft: "8px" } }, toast.message), toast.options.closable !== false && /* @__PURE__ */ React.createElement(
+            "button",
+            {
+              type: "button",
+              className: toastCloseButton,
+              onClick: () => onDismiss(toast.id),
+              "aria-label": "Close toast"
+            },
+            /* @__PURE__ */ React.createElement(Icon_default, { name: "close" })
+          ), toast.duration > 0 && /* @__PURE__ */ React.createElement("div", { className: toastProgressBarContainer }, /* @__PURE__ */ React.createElement(
+            "div",
+            {
+              className: toastProgressBar,
+              style: { width: `${progress}%` }
+            }
+          )))
+        );
+      })
+    ),
+    container
+  );
+};
+var useToast = () => {
+  const context = useContext(ToastContext);
+  return context;
+};
+var Toast = ({ message, variant = "info", options, className }) => {
+  return null;
+};
+Toast.displayName = "Toast";
+
+export {
+  ToastProvider,
+  useToast,
+  Toast
+};

package/dist/chunk-KSIX4U53.mjs

@@ -0,0 +1,32 @@
+import {
+  Box_default
+} from "./chunk-QUQTMW54.mjs";
+
+// src/components/Form/Form.tsx
+import clsx from "clsx";
+import React from "react";
+
+// src/components/Form/styles.css.ts
+var formInputStyle = "styles__1fdjkwt1";
+var formStyle = "styles__1fdjkwt0";
+
+// src/components/Form/Form.tsx
+var Form = (props) => {
+  return /* @__PURE__ */ React.createElement(
+    Box_default,
+    {
+      as: "form",
+      gap: "medium",
+      paddingX: "large",
+      className: clsx(formStyle, props.className),
+      ...props
+    },
+    props.children
+  );
+};
+var Form_default = Form;
+
+export {
+  formInputStyle,
+  Form_default
+};

package/dist/chunk-LAWMLBF3.mjs

@@ -0,0 +1,41 @@
+import {
+  Box_default
+} from "./chunk-QUQTMW54.mjs";
+
+// src/components/AspectRatio/AspectRatio.tsx
+import React, { forwardRef } from "react";
+var AspectRatio = forwardRef(
+  ({ ratio = "1/1", children, ...props }, ref) => {
+    const aspectRatio = typeof ratio === "number" ? ratio : ratio;
+    return /* @__PURE__ */ React.createElement(
+      Box_default,
+      {
+        ref,
+        position: "relative",
+        style: {
+          aspectRatio,
+          overflow: "hidden"
+        },
+        ...props
+      },
+      /* @__PURE__ */ React.createElement(
+        Box_default,
+        {
+          position: "absolute",
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        children
+      )
+    );
+  }
+);
+AspectRatio.displayName = "AspectRatio";
+var AspectRatio_default = AspectRatio;
+
+export {
+  AspectRatio_default
+};