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

package/dist/chunk-5GW3EWPT.mjs

@@ -0,0 +1,8 @@
+// src/components/List/styles.css.ts
+var list = "styles_list__z3x3130";
+var listItem = "styles_listItem__z3x3131";
+
+export {
+  list,
+  listItem
+};

package/dist/chunk-5IIKGFRC.mjs

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

@@ -0,0 +1,214 @@
+import {
+  Box_default
+} from "./chunk-23CHBI4O.mjs";
+
+// src/components/Combobox/Combobox.tsx
+import clsx from "clsx";
+import React, { useState, useRef, useEffect } from "react";
+
+// src/components/Combobox/styles.css.ts
+var comboboxArrow = "styles__1xhiitqa";
+var comboboxClearButton = "styles__1xhiitq9";
+var comboboxContainer = "styles__1xhiitq0";
+var comboboxDropdown = "styles__1xhiitq5";
+var comboboxErrorMessage = "styles__1xhiitqd";
+var comboboxHint = "styles__1xhiitqc";
+var comboboxInput = "styles__1xhiitq1";
+var comboboxInputVariants = { "default": "styles_comboboxInputVariants_default__1xhiitq2", error: "styles_comboboxInputVariants_error__1xhiitq3" };
+var comboboxLabel = "styles__1xhiitq4";
+var comboboxNoResults = "styles__1xhiitqb";
+var comboboxOption = "styles__1xhiitq6";
+var comboboxOptionDisabled = "styles__1xhiitq8";
+var comboboxOptionSelected = "styles__1xhiitq7";
+
+// src/components/Combobox/Combobox.tsx
+var defaultFilterFn = (option, inputValue) => {
+  return option.label.toLowerCase().includes(inputValue.toLowerCase());
+};
+var Combobox = ({
+  label,
+  options,
+  value,
+  onChange,
+  onInputChange,
+  placeholder = "Search...",
+  hint,
+  error = false,
+  errorMessage,
+  fullWidth = true,
+  clearable = true,
+  disabled = false,
+  filterFn = defaultFilterFn,
+  className,
+  ...props
+}) => {
+  const [inputValue, setInputValue] = useState("");
+  const [isOpen, setIsOpen] = useState(false);
+  const [highlightedIndex, setHighlightedIndex] = useState(-1);
+  const containerRef = useRef(null);
+  const inputRef = useRef(null);
+  const selectedOption = options.find((opt) => opt.value === value);
+  useEffect(() => {
+    if (selectedOption) {
+      setInputValue(selectedOption.label);
+    } else if (!isOpen) {
+      setInputValue("");
+    }
+  }, [selectedOption, isOpen]);
+  const filteredOptions = options.filter(
+    (option) => filterFn(option, inputValue)
+  );
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        setIsOpen(false);
+        if (selectedOption) {
+          setInputValue(selectedOption.label);
+        } else {
+          setInputValue("");
+        }
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [selectedOption]);
+  const handleInputChange = (e) => {
+    const newValue = e.target.value;
+    setInputValue(newValue);
+    setIsOpen(true);
+    setHighlightedIndex(-1);
+    onInputChange?.(newValue);
+    if (!newValue) {
+      onChange?.("", null);
+    }
+  };
+  const handleOptionClick = (option) => {
+    if (option.disabled) return;
+    setInputValue(option.label);
+    setIsOpen(false);
+    onChange?.(option.value, option);
+  };
+  const handleClear = (e) => {
+    e.stopPropagation();
+    setInputValue("");
+    setIsOpen(false);
+    onChange?.("", null);
+    inputRef.current?.focus();
+  };
+  const handleKeyDown = (e) => {
+    if (disabled) return;
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        if (!isOpen) {
+          setIsOpen(true);
+        }
+        setHighlightedIndex(
+          (prev) => prev < filteredOptions.length - 1 ? prev + 1 : prev
+        );
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        setHighlightedIndex((prev) => prev > 0 ? prev - 1 : prev);
+        break;
+      case "Enter":
+        e.preventDefault();
+        if (isOpen && highlightedIndex >= 0 && filteredOptions[highlightedIndex]) {
+          handleOptionClick(filteredOptions[highlightedIndex]);
+        } else {
+          setIsOpen(!isOpen);
+        }
+        break;
+      case "Escape":
+        setIsOpen(false);
+        if (selectedOption) {
+          setInputValue(selectedOption.label);
+        } else {
+          setInputValue("");
+        }
+        break;
+    }
+  };
+  const displayValue = selectedOption && !isOpen ? selectedOption.label : inputValue;
+  return /* @__PURE__ */ React.createElement(
+    Box_default,
+    {
+      className: comboboxContainer,
+      ref: containerRef,
+      width: fullWidth ? "100%" : void 0
+    },
+    label && /* @__PURE__ */ React.createElement(Box_default, { as: "label", className: comboboxLabel }, label),
+    /* @__PURE__ */ React.createElement(Box_default, { position: "relative" }, /* @__PURE__ */ React.createElement(
+      Box_default,
+      {
+        as: "input",
+        ref: inputRef,
+        type: "text",
+        value: displayValue,
+        onChange: handleInputChange,
+        onKeyDown: handleKeyDown,
+        onFocus: () => setIsOpen(true),
+        placeholder,
+        disabled,
+        className: clsx(
+          comboboxInput,
+          comboboxInputVariants[error ? "error" : "default"],
+          className
+        ),
+        role: "combobox",
+        "aria-expanded": isOpen,
+        "aria-autocomplete": "list",
+        "aria-controls": isOpen ? "combobox-listbox" : void 0,
+        "aria-activedescendant": highlightedIndex >= 0 ? `option-${filteredOptions[highlightedIndex]?.value}` : void 0,
+        ...props
+      }
+    ), clearable && inputValue && !disabled && /* @__PURE__ */ React.createElement(
+      Box_default,
+      {
+        as: "button",
+        className: comboboxClearButton,
+        onClick: handleClear,
+        type: "button",
+        "aria-label": "Clear selection"
+      },
+      "\xD7"
+    ), /* @__PURE__ */ React.createElement(Box_default, { className: comboboxArrow, "aria-hidden": "true" }, /* @__PURE__ */ React.createElement("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "currentColor" }, /* @__PURE__ */ React.createElement("path", { d: "M6 8L1 3h10z" })))),
+    isOpen && /* @__PURE__ */ React.createElement(
+      Box_default,
+      {
+        as: "ul",
+        id: "combobox-listbox",
+        className: comboboxDropdown,
+        role: "listbox"
+      },
+      filteredOptions.length === 0 ? /* @__PURE__ */ React.createElement(Box_default, { as: "li", className: comboboxNoResults }, "No results found") : filteredOptions.map((option, index) => /* @__PURE__ */ React.createElement(
+        Box_default,
+        {
+          key: option.value,
+          as: "li",
+          id: `option-${option.value}`,
+          className: clsx(
+            comboboxOption,
+            option.value === value && comboboxOptionSelected,
+            option.disabled && comboboxOptionDisabled
+          ),
+          onClick: () => handleOptionClick(option),
+          role: "option",
+          "aria-selected": option.value === value,
+          "aria-disabled": option.disabled,
+          style: {
+            backgroundColor: index === highlightedIndex ? "var(--highlight-color, #f3f4f6)" : void 0
+          }
+        },
+        option.label
+      ))
+    ),
+    error && errorMessage && /* @__PURE__ */ React.createElement(Box_default, { as: "div", className: comboboxErrorMessage, role: "alert" }, errorMessage),
+    hint && !error && /* @__PURE__ */ React.createElement(Box_default, { as: "div", className: comboboxHint }, hint)
+  );
+};
+var Combobox_default = Combobox;
+
+export {
+  Combobox_default
+};

package/dist/chunk-5MWWVBIZ.mjs

@@ -0,0 +1,20 @@
+import {
+  list
+} from "./chunk-5GW3EWPT.mjs";
+import {
+  Box_default
+} from "./chunk-23CHBI4O.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-7NAAMXLS.mjs

@@ -0,0 +1,18 @@
+import {
+  text
+} from "./chunk-EOGH5LUH.mjs";
+import {
+  Box_default
+} from "./chunk-23CHBI4O.mjs";
+
+// src/components/Text/P.tsx
+import clsx from "clsx";
+import React from "react";
+var P = (props) => {
+  return /* @__PURE__ */ React.createElement(Box_default, { as: "p", className: clsx(props.className, text) }, props.children);
+};
+var P_default = P;
+
+export {
+  P_default
+};

package/dist/chunk-7UZS7ZPM.mjs

@@ -0,0 +1,31 @@
+import {
+  Box_default
+} from "./chunk-23CHBI4O.mjs";
+
+// src/components/Button/Button.tsx
+import clsx from "clsx";
+
+// src/components/Button/styles.css.ts
+var button = "styles__tl9jzr2";
+var buttonVariants = { primary: "styles_buttonVariants_primary__tl9jzr0", secondary: "styles_buttonVariants_secondary__tl9jzr1" };
+
+// src/components/Button/Button.tsx
+import React from "react";
+var Button = ({ label, ...props }) => {
+  return /* @__PURE__ */ React.createElement(
+    Box_default,
+    {
+      as: "button",
+      borderRadius: "large",
+      width: props.fullWidth ? "100%" : void 0,
+      className: clsx(buttonVariants[props.variant], button, props.className),
+      ...props
+    },
+    props.children || label
+  );
+};
+var Button_default = Button;
+
+export {
+  Button_default
+};

package/dist/chunk-AIBPYS7I.mjs

@@ -0,0 +1,55 @@
+import {
+  Box_default
+} from "./chunk-23CHBI4O.mjs";
+
+// src/components/Select/Select.tsx
+import clsx from "clsx";
+import React, { forwardRef } from "react";
+
+// src/components/Select/styles.css.ts
+var select = { "default": "styles_select_default__uy1tw81", error: "styles_select_error__uy1tw82" };
+var selectLabel = "styles__uy1tw83";
+var selectWrapper = "styles__uy1tw84";
+
+// src/components/Select/Select.tsx
+var Select = forwardRef(
+  ({ label, options, error = false, fullWidth = true, className, ...props }, ref) => {
+    return /* @__PURE__ */ React.createElement(Box_default, { className: selectWrapper, width: "100%" }, label && /* @__PURE__ */ React.createElement(
+      Box_default,
+      {
+        as: "label",
+        className: selectLabel,
+        display: "block",
+        fontSize: "14px",
+        fontWeight: "500",
+        color: "c5-700",
+        marginBottom: "small"
+      },
+      label
+    ), /* @__PURE__ */ React.createElement(
+      Box_default,
+      {
+        as: "select",
+        ref,
+        className: clsx(select[error ? "error" : "default"], className),
+        width: fullWidth ? "100%" : void 0,
+        ...props
+      },
+      options.map((option) => /* @__PURE__ */ React.createElement(
+        "option",
+        {
+          key: option.value,
+          value: option.value,
+          disabled: option.disabled
+        },
+        option.label
+      ))
+    ));
+  }
+);
+Select.displayName = "Select";
+var Select_default = Select;
+
+export {
+  Select_default
+};

package/dist/chunk-CHNB6YGZ.mjs

@@ -0,0 +1,35 @@
+import {
+  Box_default
+} from "./chunk-23CHBI4O.mjs";
+
+// src/components/Card/Card.tsx
+import clsx from "clsx";
+
+// src/components/Card/styles.css.ts
+var card = "styles__dqeva03";
+var cardVariants = { elevated: "styles_cardVariants_elevated__dqeva00", outlined: "styles_cardVariants_outlined__dqeva01", filled: "styles_cardVariants_filled__dqeva02" };
+
+// src/components/Card/Card.tsx
+import React from "react";
+var Card = ({
+  variant = "elevated",
+  padding = "medium",
+  ...props
+}) => {
+  return /* @__PURE__ */ React.createElement(
+    Box_default,
+    {
+      as: "div",
+      borderRadius: "large",
+      padding: padding !== "none" ? padding : void 0,
+      className: clsx(cardVariants[variant], card, props.className),
+      ...props
+    },
+    props.children
+  );
+};
+var Card_default = Card;
+
+export {
+  Card_default
+};

package/dist/chunk-CICFJYOG.mjs

@@ -0,0 +1,20 @@
+import {
+  listItem
+} from "./chunk-5GW3EWPT.mjs";
+import {
+  Box_default
+} from "./chunk-23CHBI4O.mjs";
+
+// src/components/List/ListItem.tsx
+import React from "react";
+var ListItem = ({
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ React.createElement(Box_default, { as: "li", className: listItem, ...props }, children);
+};
+var ListItem_default = ListItem;
+
+export {
+  ListItem_default
+};

package/dist/chunk-DGWDQRZU.mjs

@@ -0,0 +1,42 @@
+import {
+  Box_default
+} from "./chunk-23CHBI4O.mjs";
+
+// src/components/Icon/Icon.tsx
+import clsx from "clsx";
+import React from "react";
+
+// src/components/Icon/styles.css.ts
+var icon = "styles__5assay0";
+
+// src/components/Icon/Icon.tsx
+var IconComponent = ({ name, children, className, color }) => {
+  const iconMap = {
+    check: "\u2713",
+    error: "\u2717",
+    warning: "\u26A0",
+    info: "i",
+    success: "\u2713",
+    close: "\xD7"
+  };
+  const displayContent = children || (name ? iconMap[name] : void 0);
+  if (!displayContent) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(
+    Box_default,
+    {
+      as: "span",
+      className: clsx(icon, className),
+      style: { color },
+      "aria-hidden": "true"
+    },
+    displayContent
+  );
+};
+IconComponent.displayName = "Icon";
+var Icon_default = IconComponent;
+
+export {
+  Icon_default
+};

package/dist/chunk-E7VYLVBQ.mjs

@@ -0,0 +1,84 @@
+import {
+  Box_default
+} from "./chunk-23CHBI4O.mjs";
+
+// src/components/Radio/Radio.tsx
+import clsx from "clsx";
+import React, { forwardRef, createContext, useContext } from "react";
+
+// src/components/Radio/styles.css.ts
+var radioContainer = "styles__1n3yekb0";
+var radioGroup = "styles__1n3yekb3";
+var radioGroupHorizontal = "styles__1n3yekb4";
+var radioInput = "styles_radioInput__1n3yekb1";
+var radioLabel = "styles__1n3yekb2";
+
+// src/components/Radio/Radio.tsx
+var RadioContext = createContext({});
+var Radio = forwardRef(
+  ({ label, className, value, ...props }, ref) => {
+    const context = useContext(RadioContext);
+    const name = context.name || props.name;
+    const isChecked = context.value === value;
+    const handleChange = () => {
+      if (context.onChange) {
+        context.onChange(value);
+      }
+    };
+    return /* @__PURE__ */ React.createElement(
+      Box_default,
+      {
+        as: "label",
+        className: clsx(radioContainer, className),
+        display: "flex",
+        alignItems: "center",
+        gap: "small",
+        cursor: "pointer",
+        style: { userSelect: "none" }
+      },
+      /* @__PURE__ */ React.createElement(
+        Box_default,
+        {
+          as: "input",
+          type: "radio",
+          ref,
+          name,
+          value,
+          checked: isChecked,
+          onChange: handleChange,
+          className: radioInput,
+          ...props
+        }
+      ),
+      label && /* @__PURE__ */ React.createElement(Box_default, { as: "span", className: radioLabel }, label)
+    );
+  }
+);
+Radio.displayName = "Radio";
+var RadioGroup = ({
+  children,
+  name,
+  value,
+  onChange,
+  layout = "vertical",
+  className
+}) => {
+  return /* @__PURE__ */ React.createElement(RadioContext.Provider, { value: { name, value, onChange } }, /* @__PURE__ */ React.createElement(
+    Box_default,
+    {
+      className: clsx(
+        layout === "horizontal" ? radioGroupHorizontal : radioGroup,
+        className
+      )
+    },
+    children
+  ));
+};
+var RadioComponent = Object.assign(Radio, {
+  Group: RadioGroup
+});
+var Radio_default = RadioComponent;
+
+export {
+  Radio_default
+};

package/dist/chunk-EOGH5LUH.mjs

@@ -0,0 +1,8 @@
+// src/components/Text/styles.css.ts
+var heading = "styles_heading__1l7zaje1";
+var text = "styles_text__1l7zaje0";
+
+export {
+  heading,
+  text
+};