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

package/dist/chunk-2FRMX7RJ.mjs

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

@@ -0,0 +1,85 @@
+import {
+  Box_default
+} from "./chunk-QUQTMW54.mjs";
+
+// src/components/Collapse/Collapse.tsx
+import clsx from "clsx";
+import React, { useState, useRef, useEffect } from "react";
+
+// src/components/Collapse/styles.css.ts
+var collapseContainer = "styles__1ui5oei2";
+var collapseContent = "styles__1ui5oei3";
+
+// src/components/Collapse/Collapse.tsx
+var Collapse = ({
+  isOpen,
+  children,
+  animation = "both",
+  duration = 300,
+  className,
+  onAnimationEnd
+}) => {
+  const [height, setHeight] = useState(
+    isOpen ? void 0 : 0
+  );
+  const [isAnimating, setIsAnimating] = useState(false);
+  const contentRef = useRef(null);
+  useEffect(() => {
+    if (isOpen) {
+      setIsAnimating(true);
+      if (contentRef.current) {
+        setHeight(contentRef.current.scrollHeight);
+      }
+    } else {
+      setIsAnimating(true);
+      setHeight(0);
+    }
+  }, [isOpen]);
+  const handleTransitionEnd = () => {
+    setIsAnimating(false);
+    if (isOpen) {
+      setHeight(void 0);
+    }
+    onAnimationEnd?.();
+  };
+  const getAnimationStyles = () => {
+    const baseStyles = {
+      transition: `height ${duration}ms ease-out, opacity ${duration}ms ease-out`,
+      height: height !== void 0 ? `${height}px` : void 0,
+      opacity: isOpen || isAnimating ? 1 : 0
+    };
+    if (animation === "height") {
+      return {
+        ...baseStyles,
+        transition: `height ${duration}ms ease-out`,
+        opacity: 1
+      };
+    }
+    if (animation === "opacity") {
+      return {
+        ...baseStyles,
+        transition: `opacity ${duration}ms ease-out`,
+        height: void 0
+      };
+    }
+    return baseStyles;
+  };
+  if (!isOpen && !isAnimating && animation !== "opacity") {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(
+    Box_default,
+    {
+      className: clsx(collapseContainer, className),
+      style: getAnimationStyles(),
+      onTransitionEnd: handleTransitionEnd,
+      "aria-hidden": !isOpen
+    },
+    /* @__PURE__ */ React.createElement(Box_default, { ref: contentRef, className: collapseContent }, children)
+  );
+};
+var Collapse_default = Collapse;
+
+export {
+  Collapse_default
+};

package/dist/chunk-55JAPPFF.mjs

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

@@ -0,0 +1,21 @@
+import {
+  formInputStyle
+} from "./chunk-KSIX4U53.mjs";
+import {
+  Input_default
+} from "./chunk-VGEM65JM.mjs";
+import {
+  Box_default
+} from "./chunk-QUQTMW54.mjs";
+
+// src/components/Form/FormInput.tsx
+import clsx from "clsx";
+import React from "react";
+var FormInput = (props) => {
+  return /* @__PURE__ */ React.createElement(Box_default, { as: Input_default, padding: "small", className: clsx(formInputStyle, props.className), label: props.label, ...props });
+};
+var FormInput_default = FormInput;
+
+export {
+  FormInput_default
+};

package/dist/chunk-6MO2NAKY.mjs

@@ -0,0 +1,15 @@
+// src/components/Kbd/Kbd.tsx
+import React from "react";
+
+// src/components/Kbd/styles.css.ts
+var kbd = "styles__y0u7oh0";
+
+// src/components/Kbd/Kbd.tsx
+var Kbd = ({ children, className, ...props }) => {
+  return /* @__PURE__ */ React.createElement("kbd", { className: `${kbd} ${className || ""}`, ...props }, children);
+};
+var Kbd_default = Kbd;
+
+export {
+  Kbd_default
+};

package/dist/chunk-7Y3QCS5S.mjs

@@ -0,0 +1,8 @@
+// src/components/Navbar/styles.css.ts
+var navbarItemStyle = "styles__1oxooju1";
+var navbarStyle = "styles__1oxooju0";
+
+export {
+  navbarItemStyle,
+  navbarStyle
+};

package/dist/chunk-AEZ77MNG.mjs

@@ -0,0 +1,51 @@
+import {
+  text
+} from "./chunk-GMAR37YG.mjs";
+import {
+  Box_default
+} from "./chunk-QUQTMW54.mjs";
+
+// src/components/TextArea/TextArea.tsx
+import clsx from "clsx";
+import React from "react";
+
+// src/components/TextArea/styles.css.ts
+var label = "styles__118k1ug1";
+var textAreaStyle = "styles__118k1ug0";
+
+// src/components/TextArea/TextArea.tsx
+var TextArea = (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: "textarea",
+        className: clsx(textAreaStyle, props.className),
+        width: props.fullWidth ? "100%" : void 0,
+        ...props
+      }
+    )
+  );
+};
+var TextArea_default = TextArea;
+
+export {
+  TextArea_default
+};

package/dist/chunk-AYTUOXH4.mjs

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

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