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

package/dist/chunk-X4TLQAME.mjs

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

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

package/dist/chunk-XN3QS4PQ.mjs

@@ -0,0 +1,262 @@
+import {
+  Icon_default
+} from "./chunk-DGWDQRZU.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-YHWKSBUV.mjs

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

@@ -0,0 +1,101 @@
+import {
+  Box_default
+} from "./chunk-23CHBI4O.mjs";
+
+// src/components/Tabs/Tabs.tsx
+import clsx from "clsx";
+import React, { createContext, useContext, useState } from "react";
+
+// src/components/Tabs/styles.css.ts
+var tabContent = "styles__1btv2dn7";
+var tabItem = { base: "styles_tabItem_base__1btv2dn4", active: "styles_tabItem_active__1btv2dn5", verticalActive: "styles_tabItem_verticalActive__1btv2dn6" };
+var tabsContainer = "styles__1btv2dn0";
+var tabsList = "styles__1btv2dn1";
+var tabsListHorizontal = "styles__1btv2dn2";
+var tabsListVertical = "styles__1btv2dn3";
+
+// src/components/Tabs/Tabs.tsx
+var TabsContext = createContext({
+  activeTab: "",
+  setActiveTab: () => {
+  }
+});
+var Tabs = ({
+  children,
+  defaultValue = "",
+  orientation = "horizontal",
+  onChange,
+  className,
+  ...props
+}) => {
+  const [activeTab, setActiveTab] = useState(defaultValue);
+  const handleTabChange = (value) => {
+    setActiveTab(value);
+    if (onChange) {
+      onChange(value);
+    }
+  };
+  return /* @__PURE__ */ React.createElement(
+    TabsContext.Provider,
+    {
+      value: { activeTab, setActiveTab: handleTabChange, orientation }
+    },
+    /* @__PURE__ */ React.createElement(Box_default, { className: clsx(tabsContainer, className), width: "100%", ...props }, children)
+  );
+};
+var TabList = ({ children, className }) => {
+  const { orientation } = useContext(TabsContext);
+  return /* @__PURE__ */ React.createElement(
+    Box_default,
+    {
+      as: "div",
+      role: "tablist",
+      className: clsx(
+        tabsList,
+        orientation === "vertical" ? tabsListVertical : tabsListHorizontal,
+        className
+      )
+    },
+    children
+  );
+};
+var Tab = ({ value, children, disabled = false, className }) => {
+  const { activeTab, setActiveTab, orientation } = useContext(TabsContext);
+  const isActive = activeTab === value;
+  const handleClick = () => {
+    if (!disabled) {
+      setActiveTab(value);
+    }
+  };
+  return /* @__PURE__ */ React.createElement(
+    Box_default,
+    {
+      as: "button",
+      role: "tab",
+      "aria-selected": isActive,
+      disabled,
+      onClick: handleClick,
+      className: clsx(
+        tabItem[orientation === "vertical" ? isActive ? "verticalActive" : "base" : isActive ? "active" : "base"],
+        className
+      )
+    },
+    children
+  );
+};
+var TabPanel = ({ value, children, className }) => {
+  const { activeTab } = useContext(TabsContext);
+  const isActive = activeTab === value;
+  if (!isActive) return null;
+  return /* @__PURE__ */ React.createElement(Box_default, { as: "div", role: "tabpanel", className: clsx(tabContent, className) }, children);
+};
+var TabsComponent = Object.assign(Tabs, {
+  List: TabList,
+  Tab,
+  Panel: TabPanel
+});
+var Tabs_default = TabsComponent;
+
+export {
+  Tabs_default
+};

package/dist/chunk-Z3N6BHKG.mjs

@@ -0,0 +1,43 @@
+import {
+  Box_default
+} from "./chunk-23CHBI4O.mjs";
+
+// src/components/Avatar/Avatar.tsx
+import clsx from "clsx";
+import React from "react";
+
+// src/components/Avatar/styles.css.ts
+var avatar = { base: "styles_avatar_base__1vp5m1q0", small: "styles_avatar_small__1vp5m1q1", medium: "styles_avatar_medium__1vp5m1q2", large: "styles_avatar_large__1vp5m1q3", xlarge: "styles_avatar_xlarge__1vp5m1q4" };
+var avatarImage = "styles_avatarImage__1vp5m1q5";
+var avatarWithImage = { small: "styles_avatarWithImage_small__1vp5m1q6", medium: "styles_avatarWithImage_medium__1vp5m1q7", large: "styles_avatarWithImage_large__1vp5m1q8", xlarge: "styles_avatarWithImage_xlarge__1vp5m1q9" };
+var avatarWrapper = "styles__1vp5m1qa";
+
+// src/components/Avatar/Avatar.tsx
+var Avatar = ({
+  alt,
+  className,
+  src,
+  size = "medium",
+  children,
+  fallback
+}) => {
+  const sizeClass = avatar[size];
+  if (src) {
+    return /* @__PURE__ */ React.createElement(Box_default, { className: clsx(avatarWrapper, className), display: "inline" }, /* @__PURE__ */ React.createElement(
+      Box_default,
+      {
+        as: "img",
+        src,
+        alt: alt || "Avatar",
+        className: clsx(avatarWithImage[size], avatarImage)
+      }
+    ));
+  }
+  const initials = children || fallback;
+  return /* @__PURE__ */ React.createElement(Box_default, { className: clsx(sizeClass, className), role: "img", "aria-label": alt }, initials);
+};
+var Avatar_default = Avatar;
+
+export {
+  Avatar_default
+};