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

package/dist/chunk-HY4GCFFE.mjs

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

@@ -0,0 +1,26 @@
+// src/components/VisuallyHidden/VisuallyHidden.tsx
+import React from "react";
+
+// src/components/VisuallyHidden/styles.css.ts
+var visuallyHidden = "styles__13txnwj0";
+
+// src/components/VisuallyHidden/VisuallyHidden.tsx
+var VisuallyHidden = ({
+  children,
+  as: Component = "span",
+  ...props
+}) => {
+  return React.createElement(
+    Component,
+    {
+      className: visuallyHidden,
+      ...props
+    },
+    children
+  );
+};
+var VisuallyHidden_default = VisuallyHidden;
+
+export {
+  VisuallyHidden_default
+};

package/dist/chunk-JG27KRP3.mjs

@@ -0,0 +1,41 @@
+import {
+  Box_default
+} from "./chunk-23CHBI4O.mjs";
+
+// src/components/Spinner/Spinner.tsx
+import clsx from "clsx";
+
+// src/components/Spinner/styles.css.ts
+var spinner = "styles_spinner__5i4gpia";
+var spinnerColors = { primary: "styles_spinnerColors_primary__5i4gpi1", secondary: "styles_spinnerColors_secondary__5i4gpi2", success: "styles_spinnerColors_success__5i4gpi3", warning: "styles_spinnerColors_warning__5i4gpi4", error: "styles_spinnerColors_error__5i4gpi5", info: "styles_spinnerColors_info__5i4gpi6" };
+var spinnerSizes = { small: "styles_spinnerSizes_small__5i4gpi7", medium: "styles_spinnerSizes_medium__5i4gpi8", large: "styles_spinnerSizes_large__5i4gpi9" };
+
+// src/components/Spinner/Spinner.tsx
+import React from "react";
+var Spinner = ({
+  color = "primary",
+  size = "medium",
+  role = "status",
+  ...props
+}) => {
+  return /* @__PURE__ */ React.createElement(
+    Box_default,
+    {
+      as: "div",
+      className: clsx(
+        spinner,
+        spinnerColors[color],
+        spinnerSizes[size],
+        props.className
+      ),
+      role,
+      "aria-label": "Loading",
+      ...props
+    }
+  );
+};
+var Spinner_default = Spinner;
+
+export {
+  Spinner_default
+};

package/dist/chunk-JJMLW4EM.mjs

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

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

@@ -0,0 +1,49 @@
+import {
+  Box_default
+} from "./chunk-23CHBI4O.mjs";
+
+// src/components/Alert/Alert.tsx
+import clsx from "clsx";
+
+// src/components/Alert/styles.css.ts
+var alert = "styles__16ufkop4";
+var alertContent = "styles__16ufkop5";
+var alertDismissButton = "styles__16ufkop6";
+var alertVariants = { success: "styles_alertVariants_success__16ufkop0", warning: "styles_alertVariants_warning__16ufkop1", error: "styles_alertVariants_error__16ufkop2", info: "styles_alertVariants_info__16ufkop3" };
+
+// src/components/Alert/Alert.tsx
+import React from "react";
+var Alert = ({
+  severity = "info",
+  dismissible = false,
+  onDismiss,
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ React.createElement(
+    Box_default,
+    {
+      as: "div",
+      role: "alert",
+      className: clsx(alert, alertVariants[severity], props.className),
+      ...props
+    },
+    /* @__PURE__ */ React.createElement(Box_default, { as: "div", className: alertContent }, children),
+    dismissible && onDismiss && /* @__PURE__ */ React.createElement(
+      Box_default,
+      {
+        as: "button",
+        className: alertDismissButton,
+        onClick: onDismiss,
+        "aria-label": "Dismiss alert",
+        type: "button"
+      },
+      "\xD7"
+    )
+  );
+};
+var Alert_default = Alert;
+
+export {
+  Alert_default
+};

package/dist/chunk-MI63MVYQ.mjs

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

@@ -0,0 +1,126 @@
+import {
+  Box_default
+} from "./chunk-23CHBI4O.mjs";
+
+// src/components/NumberInput/NumberInput.tsx
+import clsx from "clsx";
+import React, { useCallback } from "react";
+
+// src/components/NumberInput/styles.css.ts
+var numberInput = "styles__112an4g1";
+var numberInputButton = "styles__112an4g7";
+var numberInputContainer = "styles__112an4g0";
+var numberInputErrorMessage = "styles__112an4ga";
+var numberInputHint = "styles__112an4g9";
+var numberInputLabel = "styles__112an4g4";
+var numberInputStepper = "styles__112an4g5";
+var numberInputStepperLeft = "styles__112an4g6";
+var numberInputVariants = { "default": "styles_numberInputVariants_default__112an4g2", error: "styles_numberInputVariants_error__112an4g3" };
+var numberInputWrapper = "styles__112an4g8";
+
+// src/components/NumberInput/NumberInput.tsx
+var NumberInput = ({
+  label,
+  value,
+  onChange,
+  min = -Infinity,
+  max = Infinity,
+  step = 1,
+  stepperPosition = "right",
+  placeholder = "0",
+  hint,
+  error = false,
+  errorMessage,
+  fullWidth = true,
+  disabled = false,
+  allowEmpty = true,
+  className,
+  ...props
+}) => {
+  const handleChange = (e) => {
+    const inputValue = e.target.value;
+    if (inputValue === "") {
+      if (allowEmpty) {
+        onChange?.("");
+      } else {
+        onChange?.(0);
+      }
+      return;
+    }
+    const numValue = parseFloat(inputValue);
+    if (!isNaN(numValue)) {
+      const clampedValue = Math.min(Math.max(numValue, min), max);
+      onChange?.(clampedValue);
+    }
+  };
+  const increment = useCallback(() => {
+    const currentValue = typeof value === "number" ? value : 0;
+    const newValue = Math.min(currentValue + step, max);
+    onChange?.(newValue);
+  }, [value, step, max, onChange]);
+  const decrement = useCallback(() => {
+    const currentValue = typeof value === "number" ? value : 0;
+    const newValue = Math.max(currentValue - step, min);
+    onChange?.(newValue);
+  }, [value, step, min, onChange]);
+  const isIncrementDisabled = disabled || typeof value === "number" && value >= max;
+  const isDecrementDisabled = disabled || typeof value === "number" && value <= min;
+  const displayValue = value === "" ? "" : value;
+  return /* @__PURE__ */ React.createElement(Box_default, { className: numberInputWrapper, width: fullWidth ? "100%" : void 0 }, label && /* @__PURE__ */ React.createElement(Box_default, { as: "label", className: numberInputLabel }, label), /* @__PURE__ */ React.createElement(Box_default, { className: numberInputContainer }, /* @__PURE__ */ React.createElement(
+    Box_default,
+    {
+      as: "input",
+      type: "number",
+      value: displayValue,
+      onChange: handleChange,
+      min,
+      max,
+      step,
+      placeholder,
+      disabled,
+      className: clsx(
+        numberInput,
+        numberInputVariants[error ? "error" : "default"],
+        className
+      ),
+      ...props
+    }
+  ), /* @__PURE__ */ React.createElement(
+    Box_default,
+    {
+      className: clsx(
+        numberInputStepper,
+        stepperPosition === "left" && numberInputStepperLeft
+      )
+    },
+    /* @__PURE__ */ React.createElement(
+      Box_default,
+      {
+        as: "button",
+        className: numberInputButton,
+        onClick: increment,
+        disabled: isIncrementDisabled,
+        type: "button",
+        "aria-label": "Increase value"
+      },
+      "+"
+    ),
+    /* @__PURE__ */ React.createElement(
+      Box_default,
+      {
+        as: "button",
+        className: numberInputButton,
+        onClick: decrement,
+        disabled: isDecrementDisabled,
+        type: "button",
+        "aria-label": "Decrease value"
+      },
+      "\u2212"
+    )
+  )), error && errorMessage && /* @__PURE__ */ React.createElement(Box_default, { as: "div", className: numberInputErrorMessage, role: "alert" }, errorMessage), hint && !error && /* @__PURE__ */ React.createElement(Box_default, { as: "div", className: numberInputHint }, hint));
+};
+var NumberInput_default = NumberInput;
+
+export {
+  NumberInput_default
+};

package/dist/chunk-OGXD2YVI.mjs

@@ -0,0 +1,96 @@
+import {
+  Box_default
+} from "./chunk-23CHBI4O.mjs";
+
+// src/components/Breadcrumb/Breadcrumb.tsx
+import clsx from "clsx";
+import React from "react";
+
+// src/components/Breadcrumb/styles.css.ts
+var breadcrumb = "styles__1jer4gs0";
+var breadcrumbCurrent = "styles_breadcrumbCurrent__1jer4gs5";
+var breadcrumbItem = "styles_breadcrumbItem__1jer4gs2";
+var breadcrumbLink = "styles_breadcrumbLink__1jer4gs3";
+var breadcrumbList = "styles_breadcrumbList__1jer4gs1";
+var breadcrumbSeparator = "styles_breadcrumbSeparator__1jer4gs4";
+
+// src/components/Breadcrumb/Breadcrumb.tsx
+var Breadcrumb = ({ items, className, separator = "/" }) => {
+  return /* @__PURE__ */ React.createElement(
+    Box_default,
+    {
+      as: "nav",
+      "aria-label": "Breadcrumb",
+      className: clsx(breadcrumb, className),
+      display: "flex",
+      alignItems: "center",
+      gap: "small",
+      fontSize: "14px"
+    },
+    /* @__PURE__ */ React.createElement(
+      Box_default,
+      {
+        as: "ol",
+        className: breadcrumbList,
+        display: "flex",
+        alignItems: "center",
+        style: { listStyle: "none" },
+        margin: "none",
+        padding: "none",
+        gap: "small"
+      },
+      items.map((item, index) => /* @__PURE__ */ React.createElement(
+        Box_default,
+        {
+          as: "li",
+          key: index,
+          className: breadcrumbItem,
+          display: "flex",
+          alignItems: "center"
+        },
+        item.href && !item.current ? /* @__PURE__ */ React.createElement(
+          Box_default,
+          {
+            as: "a",
+            href: item.href,
+            className: breadcrumbLink,
+            display: "inline",
+            alignItems: "center",
+            color: "c5-600",
+            fontSize: "14px",
+            textDecoration: "none"
+          },
+          item.label
+        ) : /* @__PURE__ */ React.createElement(
+          Box_default,
+          {
+            as: "span",
+            className: breadcrumbCurrent,
+            display: "inline",
+            alignItems: "center",
+            color: "c5-700",
+            fontSize: "14px",
+            fontWeight: "500"
+          },
+          item.label
+        ),
+        index < items.length - 1 && /* @__PURE__ */ React.createElement(
+          Box_default,
+          {
+            as: "span",
+            className: breadcrumbSeparator,
+            color: "c5-500",
+            fontSize: "12px",
+            style: { userSelect: "none" }
+          },
+          separator
+        )
+      ))
+    )
+  );
+};
+var Breadcrumb_default = Breadcrumb;
+
+export {
+  Breadcrumb_default
+};

package/dist/chunk-OTC2PREM.mjs

@@ -0,0 +1,64 @@
+import {
+  Box_default
+} from "./chunk-23CHBI4O.mjs";
+
+// src/components/Progress/Progress.tsx
+import clsx from "clsx";
+import React from "react";
+
+// src/components/Progress/styles.css.ts
+var progress = "styles__1nuv63d0";
+var progressBar = { "default": "styles_progressBar_default__1nuv63d1", success: "styles_progressBar_success__1nuv63d2", warning: "styles_progressBar_warning__1nuv63d3", error: "styles_progressBar_error__1nuv63d4" };
+var progressFill = { "default": "styles_progressFill_default__1nuv63d5", success: "styles_progressFill_success__1nuv63d6", warning: "styles_progressFill_warning__1nuv63d7", error: "styles_progressFill_error__1nuv63d8" };
+var progressLabel = "styles__1nuv63d9";
+
+// src/components/Progress/Progress.tsx
+var Progress = ({
+  value,
+  max = 100,
+  label,
+  showPercentage = false,
+  variant = "default",
+  className
+}) => {
+  const percentage = Math.min(Math.max(value / max * 100, 0), 100);
+  return /* @__PURE__ */ React.createElement(Box_default, { className: clsx(progress, className), width: "100%" }, (label || showPercentage) && /* @__PURE__ */ React.createElement(
+    Box_default,
+    {
+      className: progressLabel,
+      display: "flex",
+      justifyContent: "space-between",
+      fontSize: "12px",
+      fontWeight: "500",
+      color: "c5-600",
+      marginBottom: "small",
+      fontFamily: "body"
+    },
+    label && /* @__PURE__ */ React.createElement(Box_default, { as: "span" }, label),
+    showPercentage && /* @__PURE__ */ React.createElement(Box_default, { as: "span" }, percentage, "%")
+  ), /* @__PURE__ */ React.createElement(
+    Box_default,
+    {
+      as: "div",
+      className: progressBar[variant],
+      role: "progressbar",
+      "aria-valuenow": value,
+      "aria-valuemin": 0,
+      "aria-valuemax": max
+    },
+    /* @__PURE__ */ React.createElement(
+      Box_default,
+      {
+        as: "div",
+        className: progressFill[variant],
+        style: { width: `${percentage}%` },
+        role: "presentation"
+      }
+    )
+  ));
+};
+var Progress_default = Progress;
+
+export {
+  Progress_default
+};

package/dist/chunk-P7WZRYQP.mjs

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

@@ -0,0 +1,42 @@
+import {
+  Box_default
+} from "./chunk-23CHBI4O.mjs";
+
+// src/components/Grid/Grid.tsx
+import React, { forwardRef } from "react";
+var gapMap = {
+  none: "0",
+  small: "0.5rem",
+  medium: "1rem",
+  large: "2rem"
+};
+var Grid = forwardRef(
+  ({ columns, gap = "medium", minChildWidth, children, ...props }, ref) => {
+    const gapValue = gap;
+    const gridStyle = {
+      display: "grid",
+      gap: gapMap[gapValue]
+    };
+    if (minChildWidth) {
+      gridStyle.gridTemplateColumns = `repeat(auto-fit, minmax(${minChildWidth},1fr))`;
+    } else if (columns) {
+      gridStyle.gridTemplateColumns = `repeat(${columns},1fr)`;
+    }
+    return /* @__PURE__ */ React.createElement(
+      Box_default,
+      {
+        ref,
+        className: props.className,
+        style: { ...gridStyle, ...props.style },
+        ...props
+      },
+      children
+    );
+  }
+);
+Grid.displayName = "Grid";
+var Grid_default = Grid;
+
+export {
+  Grid_default
+};