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

package/dist/chunk-LVPQCMA5.mjs

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

@@ -0,0 +1,53 @@
+import {
+  Box_default
+} from "./chunk-QUQTMW54.mjs";
+
+// src/components/Skeleton/Skeleton.tsx
+import clsx from "clsx";
+import React from "react";
+
+// src/components/Skeleton/styles.css.ts
+var skeleton = "styles__1tdpoprb";
+var skeletonAnimation = { shimmer: "styles_skeletonAnimation_shimmer__1tdpopr8", pulse: "styles_skeletonAnimation_pulse__1tdpopr9", none: "styles_skeletonAnimation_none__1tdpopra" };
+var skeletonSizes = { small: "styles_skeletonSizes_small__1tdpopr5", medium: "styles_skeletonSizes_medium__1tdpopr6", large: "styles_skeletonSizes_large__1tdpopr7" };
+var skeletonVariants = { text: "styles_skeletonVariants_text__1tdpopr2", circle: "styles_skeletonVariants_circle__1tdpopr3", rectangle: "styles_skeletonVariants_rectangle__1tdpopr4" };
+
+// src/components/Skeleton/Skeleton.tsx
+var Skeleton = ({
+  variant = "text",
+  size = "medium",
+  animation = "shimmer",
+  width,
+  height,
+  count = 1,
+  className,
+  ...props
+}) => {
+  const style = {
+    width,
+    height
+  };
+  const skeletons = Array.from({ length: count }, (_, index) => /* @__PURE__ */ React.createElement(
+    Box_default,
+    {
+      key: index,
+      as: "span",
+      className: clsx(
+        skeleton,
+        skeletonVariants[variant],
+        skeletonSizes[size],
+        skeletonAnimation[animation],
+        className
+      ),
+      style,
+      "aria-hidden": "true",
+      ...props
+    }
+  ));
+  return /* @__PURE__ */ React.createElement(Box_default, { display: "flex", flexDirection: "column", gap: "small" }, skeletons);
+};
+var Skeleton_default = Skeleton;
+
+export {
+  Skeleton_default
+};

package/dist/chunk-MQQ5Z3LW.mjs

@@ -0,0 +1,57 @@
+import {
+  Box_default
+} from "./chunk-QUQTMW54.mjs";
+
+// src/components/Stack/Stack.tsx
+import React, { forwardRef } from "react";
+var alignMap = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  stretch: "stretch"
+};
+var justifyMap = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  between: "space-between",
+  around: "space-around",
+  evenly: "space-evenly"
+};
+var Stack = forwardRef(
+  ({
+    direction = "column",
+    align,
+    justify,
+    gap,
+    wrap,
+    children,
+    className,
+    style,
+    ...rest
+  }, ref) => {
+    const alignItems = align ? alignMap[align] : void 0;
+    const justifyContent = justify ? justifyMap[justify] : void 0;
+    return /* @__PURE__ */ React.createElement(
+      Box_default,
+      {
+        ref,
+        display: "flex",
+        flexDirection: direction,
+        alignItems,
+        justifyContent,
+        gap,
+        className,
+        style: { flexWrap: wrap ? "wrap" : void 0, ...style },
+        ...rest
+      },
+      children
+    );
+  }
+);
+Stack.displayName = "Stack";
+var Stack_default = Stack;
+
+export {
+  Stack_default
+};

package/dist/chunk-NWYD6SS7.mjs

@@ -0,0 +1,69 @@
+import {
+  Box_default
+} from "./chunk-QUQTMW54.mjs";
+
+// src/components/Tag/Tag.tsx
+import clsx from "clsx";
+import React from "react";
+
+// src/components/Tag/styles.css.ts
+var removeButton = "styles_removeButton__1xe66kw6";
+var tag = { base: "styles_tag_base__1xe66kw0", "default": "styles_tag_default__1xe66kw1", primary: "styles_tag_primary__1xe66kw2", success: "styles_tag_success__1xe66kw3", warning: "styles_tag_warning__1xe66kw4", error: "styles_tag_error__1xe66kw5" };
+var tagGroup = "styles__1xe66kw7";
+
+// src/components/Tag/Tag.tsx
+var Tag = ({
+  children,
+  variant = "default",
+  onRemove,
+  removable = false,
+  className
+}) => {
+  return /* @__PURE__ */ React.createElement(
+    Box_default,
+    {
+      as: "span",
+      className: clsx(tag[variant], className),
+      display: "inline",
+      alignItems: "center"
+    },
+    children,
+    removable && /* @__PURE__ */ React.createElement(
+      Box_default,
+      {
+        as: "span",
+        onClick: onRemove,
+        className: removeButton,
+        role: "button",
+        tabIndex: 0,
+        "aria-label": "Remove tag",
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            onRemove?.();
+          }
+        }
+      },
+      "\xD7"
+    )
+  );
+};
+var TagGroup = ({ children, className }) => {
+  return /* @__PURE__ */ React.createElement(
+    Box_default,
+    {
+      className: clsx(tagGroup, className),
+      display: "flex",
+      gap: "small",
+      style: { flexWrap: "wrap" }
+    },
+    children
+  );
+};
+var TagComponent = Object.assign(Tag, {
+  Group: TagGroup
+});
+var Tag_default = TagComponent;
+
+export {
+  Tag_default
+};

package/dist/chunk-OB5ONW7Y.mjs

@@ -0,0 +1,45 @@
+import {
+  Box_default
+} from "./chunk-QUQTMW54.mjs";
+
+// src/components/ScrollArea/ScrollArea.tsx
+import clsx from "clsx";
+import React from "react";
+
+// src/components/ScrollArea/styles.css.ts
+var scrollArea = "styles__1jlur7n0";
+var scrollAreaOrientation = { vertical: "styles_scrollAreaOrientation_vertical__1jlur7n1", horizontal: "styles_scrollAreaOrientation_horizontal__1jlur7n2", both: "styles_scrollAreaOrientation_both__1jlur7n3" };
+var scrollAreaViewport = "styles__1jlur7n4";
+
+// src/components/ScrollArea/ScrollArea.tsx
+var ScrollArea = ({
+  children,
+  orientation = "vertical",
+  maxHeight,
+  maxWidth,
+  className,
+  ...props
+}) => {
+  const style = {
+    maxHeight,
+    maxWidth
+  };
+  return /* @__PURE__ */ React.createElement(
+    Box_default,
+    {
+      className: clsx(
+        scrollArea,
+        scrollAreaOrientation[orientation],
+        className
+      ),
+      style,
+      ...props
+    },
+    /* @__PURE__ */ React.createElement(Box_default, { className: scrollAreaViewport }, children)
+  );
+};
+var ScrollArea_default = ScrollArea;
+
+export {
+  ScrollArea_default
+};

package/dist/chunk-PUOWXFSZ.mjs

@@ -0,0 +1,41 @@
+import {
+  Box_default
+} from "./chunk-QUQTMW54.mjs";
+
+// src/components/Divider/Divider.tsx
+import clsx from "clsx";
+
+// src/components/Divider/styles.css.ts
+var divider = "styles__q20avm5";
+var dividerOrientations = { horizontal: "styles_dividerOrientations_horizontal__q20avm0", vertical: "styles_dividerOrientations_vertical__q20avm1" };
+var dividerSizes = { small: "styles_dividerSizes_small__q20avm2", medium: "styles_dividerSizes_medium__q20avm3", large: "styles_dividerSizes_large__q20avm4" };
+var dividerVerticalSizes = { small: "styles_dividerVerticalSizes_small__q20avm6", medium: "styles_dividerVerticalSizes_medium__q20avm7", large: "styles_dividerVerticalSizes_large__q20avm8" };
+
+// src/components/Divider/Divider.tsx
+import React from "react";
+var Divider = ({
+  orientation = "horizontal",
+  size = "medium",
+  ...props
+}) => {
+  return /* @__PURE__ */ React.createElement(
+    Box_default,
+    {
+      as: "hr",
+      className: clsx(
+        divider,
+        dividerOrientations[orientation],
+        orientation === "vertical" ? dividerVerticalSizes[size] : dividerSizes[size],
+        props.className
+      ),
+      role: "separator",
+      "aria-orientation": orientation,
+      ...props
+    }
+  );
+};
+var Divider_default = Divider;
+
+export {
+  Divider_default
+};

package/dist/chunk-QFQAV7DQ.mjs

@@ -0,0 +1,207 @@
+import {
+  Box_default
+} from "./chunk-QUQTMW54.mjs";
+
+// src/components/FileUpload/FileUpload.tsx
+import clsx from "clsx";
+import React, { useState, useRef, useCallback } from "react";
+
+// src/components/FileUpload/styles.css.ts
+var fileUploadContainer = "styles__t7nsl90";
+var fileUploadDropzone = "styles__t7nsl91";
+var fileUploadDropzoneVariants = { "default": "styles_fileUploadDropzoneVariants_default__t7nsl92", dragOver: "styles_fileUploadDropzoneVariants_dragOver__t7nsl93", error: "styles_fileUploadDropzoneVariants_error__t7nsl94", disabled: "styles_fileUploadDropzoneVariants_disabled__t7nsl95" };
+var fileUploadError = "styles__t7nsl9h";
+var fileUploadHint = "styles__t7nsl98";
+var fileUploadIcon = "styles__t7nsl9i";
+var fileUploadInput = "styles__t7nsl99";
+var fileUploadItem = "styles__t7nsl9b";
+var fileUploadItemInfo = "styles__t7nsl9c";
+var fileUploadItemName = "styles__t7nsl9d";
+var fileUploadItemSize = "styles__t7nsl9e";
+var fileUploadLabel = "styles__t7nsl96";
+var fileUploadList = "styles__t7nsl9a";
+var fileUploadProgressBar = "styles__t7nsl9j";
+var fileUploadProgressFill = "styles__t7nsl9k";
+var fileUploadProgressFillVariants = { uploading: "styles_fileUploadProgressFillVariants_uploading__t7nsl9l", success: "styles_fileUploadProgressFillVariants_success__t7nsl9m", error: "styles_fileUploadProgressFillVariants_error__t7nsl9n" };
+var fileUploadRemoveButton = "styles__t7nsl9g";
+var fileUploadText = "styles__t7nsl97";
+
+// src/components/FileUpload/FileUpload.tsx
+var formatFileSize = (bytes) => {
+  if (bytes === 0) return "0 Bytes";
+  const k = 1024;
+  const sizes = ["Bytes", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
+};
+var FileUpload = ({
+  label,
+  files = [],
+  onFilesChange,
+  onFileAdd,
+  onFileRemove,
+  accept,
+  multiple = false,
+  maxFileSize,
+  maxFiles,
+  disabled = false,
+  dropzoneText = "Drag and drop files here, or click to browse",
+  hint,
+  showProgress = true,
+  className,
+  ...props
+}) => {
+  const [isDragOver, setIsDragOver] = useState(false);
+  const [error, setError] = useState(null);
+  const inputRef = useRef(null);
+  const validateFile = (file) => {
+    if (maxFileSize && file.size > maxFileSize) {
+      return `File size exceeds ${formatFileSize(maxFileSize)}`;
+    }
+    if (accept) {
+      const acceptedTypes = accept.split(",").map((type) => type.trim());
+      const isAccepted = acceptedTypes.some((type) => {
+        if (type.includes("*")) {
+          return file.type.startsWith(type.replace("/*", ""));
+        }
+        return file.type === type || file.name.endsWith(type);
+      });
+      if (!isAccepted) {
+        return `File type not accepted. Allowed: ${accept}`;
+      }
+    }
+    return null;
+  };
+  const handleFiles = useCallback(
+    (fileList) => {
+      if (!fileList || disabled) return;
+      const newFiles = [];
+      const errors = [];
+      Array.from(fileList).forEach((file) => {
+        const validationError = validateFile(file);
+        if (validationError) {
+          errors.push(`${file.name}: ${validationError}`);
+        } else {
+          newFiles.push(file);
+        }
+      });
+      if (maxFiles && files.length + newFiles.length > maxFiles) {
+        errors.push(`Maximum ${maxFiles} files allowed`);
+        newFiles.splice(maxFiles - files.length);
+      }
+      if (errors.length > 0) {
+        setError(errors.join(", "));
+      } else {
+        setError(null);
+      }
+      if (newFiles.length > 0) {
+        onFileAdd?.(newFiles);
+      }
+    },
+    [disabled, files.length, maxFileSize, maxFiles, accept, onFileAdd]
+  );
+  const handleDragOver = (e) => {
+    e.preventDefault();
+    if (!disabled) {
+      setIsDragOver(true);
+    }
+  };
+  const handleDragLeave = (e) => {
+    e.preventDefault();
+    setIsDragOver(false);
+  };
+  const handleDrop = (e) => {
+    e.preventDefault();
+    setIsDragOver(false);
+    handleFiles(e.dataTransfer.files);
+  };
+  const handleClick = () => {
+    if (!disabled) {
+      inputRef.current?.click();
+    }
+  };
+  const handleInputChange = (e) => {
+    handleFiles(e.target.files);
+    e.target.value = "";
+  };
+  const handleRemove = (fileId) => {
+    onFileRemove?.(fileId);
+  };
+  const getVariant = () => {
+    if (disabled) return "disabled";
+    if (error) return "error";
+    if (isDragOver) return "dragOver";
+    return "default";
+  };
+  return /* @__PURE__ */ React.createElement(Box_default, { className: clsx(fileUploadContainer, className), ...props }, label && /* @__PURE__ */ React.createElement(Box_default, { as: "label", className: fileUploadLabel }, label), /* @__PURE__ */ React.createElement(
+    Box_default,
+    {
+      as: "div",
+      className: clsx(
+        fileUploadDropzone,
+        fileUploadDropzoneVariants[getVariant()]
+      ),
+      onDragOver: handleDragOver,
+      onDragLeave: handleDragLeave,
+      onDrop: handleDrop,
+      onClick: handleClick,
+      role: "button",
+      tabIndex: disabled ? -1 : 0,
+      "aria-disabled": disabled
+    },
+    /* @__PURE__ */ React.createElement(Box_default, { className: fileUploadIcon, "aria-hidden": "true" }, /* @__PURE__ */ React.createElement(
+      "svg",
+      {
+        width: "48",
+        height: "48",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2"
+      },
+      /* @__PURE__ */ React.createElement("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+      /* @__PURE__ */ React.createElement("polyline", { points: "17,8 12,3 7,8" }),
+      /* @__PURE__ */ React.createElement("line", { x1: "12", y1: "3", x2: "12", y2: "15" })
+    )),
+    /* @__PURE__ */ React.createElement(Box_default, { as: "p", className: fileUploadText }, dropzoneText),
+    hint && /* @__PURE__ */ React.createElement(Box_default, { as: "p", className: fileUploadHint }, hint),
+    /* @__PURE__ */ React.createElement(
+      Box_default,
+      {
+        as: "input",
+        ref: inputRef,
+        type: "file",
+        className: fileUploadInput,
+        onChange: handleInputChange,
+        accept,
+        multiple,
+        disabled,
+        "aria-label": "File upload input"
+      }
+    )
+  ), error && /* @__PURE__ */ React.createElement(Box_default, { as: "p", className: fileUploadError, role: "alert" }, error), files.length > 0 && /* @__PURE__ */ React.createElement(Box_default, { as: "ul", className: fileUploadList, "aria-label": "Uploaded files" }, files.map((file) => /* @__PURE__ */ React.createElement(Box_default, { key: file.id, as: "li", className: fileUploadItem }, /* @__PURE__ */ React.createElement(Box_default, { className: fileUploadItemInfo }, /* @__PURE__ */ React.createElement(Box_default, { as: "p", className: fileUploadItemName, title: file.name }, file.name), /* @__PURE__ */ React.createElement(Box_default, { as: "p", className: fileUploadItemSize }, formatFileSize(file.size), file.status === "uploading" && showProgress && " \u2022 Uploading...", file.status === "success" && " \u2022 Complete", file.status === "error" && file.errorMessage && ` \u2022 ${file.errorMessage}`), showProgress && file.status === "uploading" && /* @__PURE__ */ React.createElement(Box_default, { className: fileUploadProgressBar }, /* @__PURE__ */ React.createElement(
+    Box_default,
+    {
+      className: clsx(
+        fileUploadProgressFill,
+        fileUploadProgressFillVariants[file.status]
+      ),
+      style: { width: `${file.progress}%` }
+    }
+  ))), /* @__PURE__ */ React.createElement(
+    Box_default,
+    {
+      as: "button",
+      className: fileUploadRemoveButton,
+      onClick: () => handleRemove(file.id),
+      type: "button",
+      "aria-label": `Remove ${file.name}`
+    },
+    "\xD7"
+  )))));
+};
+var FileUpload_default = FileUpload;
+
+export {
+  FileUpload_default
+};