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

package/dist/chunk-EPFXGPPF.mjs

@@ -0,0 +1,62 @@
+import {
+  Box_default
+} from "./chunk-23CHBI4O.mjs";
+
+// src/components/Checkbox/Checkbox.tsx
+import clsx from "clsx";
+import React, { forwardRef, useEffect, useRef } from "react";
+
+// src/components/Checkbox/styles.css.ts
+var checkboxContainer = "styles__ktp4yx0";
+var checkboxInput = "styles_checkboxInput__ktp4yx1";
+var checkboxLabel = "styles__ktp4yx2";
+
+// src/components/Checkbox/Checkbox.tsx
+var Checkbox = forwardRef(
+  ({ label, className, indeterminate, ...props }, ref) => {
+    const inputRef = useRef(null);
+    const combinedRef = (node) => {
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+      inputRef.current = node;
+    };
+    useEffect(() => {
+      if (inputRef.current) {
+        inputRef.current.indeterminate = !!indeterminate;
+      }
+    }, [indeterminate]);
+    return /* @__PURE__ */ React.createElement(
+      Box_default,
+      {
+        as: "label",
+        className: clsx(checkboxContainer, className),
+        display: "flex",
+        alignItems: "center",
+        gap: "small",
+        cursor: "pointer",
+        style: { userSelect: "none" }
+      },
+      /* @__PURE__ */ React.createElement(
+        Box_default,
+        {
+          as: "input",
+          type: "checkbox",
+          ref: combinedRef,
+          className: checkboxInput,
+          style: { width: "18px", height: "18px" },
+          ...props
+        }
+      ),
+      label && /* @__PURE__ */ React.createElement(Box_default, { as: "span", className: checkboxLabel }, label)
+    );
+  }
+);
+Checkbox.displayName = "Checkbox";
+var Checkbox_default = Checkbox;
+
+export {
+  Checkbox_default
+};

package/dist/chunk-ERWDS6PF.mjs

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

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

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

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

package/dist/chunk-GP2LGGIN.mjs

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

package/dist/chunk-HGOZPEWG.mjs

@@ -0,0 +1,39 @@
+import {
+  Box_default
+} from "./chunk-23CHBI4O.mjs";
+
+// src/components/Container/Container.tsx
+import React, { forwardRef } from "react";
+var sizeMap = {
+  sm: "640px",
+  md: "768px",
+  lg: "1024px",
+  xl: "1280px",
+  full: "100%"
+};
+var Container = forwardRef(
+  ({ size = "lg", centerContent = true, children, className, style }, ref) => {
+    const sizeValue = size;
+    const containerStyle = {
+      maxWidth: sizeMap[sizeValue],
+      marginLeft: centerContent ? "auto" : void 0,
+      marginRight: centerContent ? "auto" : void 0
+    };
+    return /* @__PURE__ */ React.createElement(
+      Box_default,
+      {
+        ref,
+        width: "100%",
+        className,
+        style: { ...containerStyle, ...style }
+      },
+      children
+    );
+  }
+);
+Container.displayName = "Container";
+var Container_default = Container;
+
+export {
+  Container_default
+};

package/dist/chunk-HJCAHUC5.mjs

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

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