@spies-ui/react 1.0.1

package/dist/index.mjs

@@ -0,0 +1,755 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+
+// ../tokens/dist/index.js
+var require_dist = __commonJS({
+  "../tokens/dist/index.js"(exports, module) {
+    "use strict";
+    var __defProp2 = Object.defineProperty;
+    var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
+    var __getOwnPropNames2 = Object.getOwnPropertyNames;
+    var __hasOwnProp2 = Object.prototype.hasOwnProperty;
+    var __export = (target, all) => {
+      for (var name in all)
+        __defProp2(target, name, { get: all[name], enumerable: true });
+    };
+    var __copyProps2 = (to, from, except, desc) => {
+      if (from && typeof from === "object" || typeof from === "function") {
+        for (let key of __getOwnPropNames2(from))
+          if (!__hasOwnProp2.call(to, key) && key !== except)
+            __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
+      }
+      return to;
+    };
+    var __toCommonJS = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: true }), mod);
+    var src_exports = {};
+    __export(src_exports, {
+      colors: () => colors2,
+      fontSizes: () => fontSizes2,
+      fontWeights: () => fontWeights2,
+      fonts: () => fonts2,
+      lineHeights: () => lineHeights2,
+      radii: () => radii2,
+      space: () => space2
+    });
+    module.exports = __toCommonJS(src_exports);
+    var colors2 = {
+      black: "#000000",
+      white: "#ffffff",
+      smokedWhite: "#f5f5f5",
+      richBlack: "#000014",
+      gray100: "#e0e0e0",
+      gray200: "#a0a6ae",
+      gray400: "#7a828e",
+      gray500: "#4a5057",
+      gray600: "#40454c",
+      gray700: "#2f3238",
+      gray800: "#1f1f1f",
+      gray900: "#141414",
+      primary: "#1244ce",
+      primaryLight: "#144AE1",
+      success: "#86e660",
+      warning: "#ffc933",
+      danger: "#ef2e3b"
+    };
+    var space2 = {
+      1: "0.25rem",
+      2: "0.5rem",
+      3: "0.75rem",
+      4: "1rem",
+      5: "1.25rem",
+      6: "1.5rem",
+      7: "1.75rem",
+      8: "2rem",
+      10: "2.5rem",
+      12: "3rem",
+      16: "4rem",
+      20: "5rem",
+      40: "10rem",
+      64: "16rem",
+      80: "20rem"
+    };
+    var radii2 = {
+      px: "1px",
+      xs: "4px",
+      sm: "6px",
+      md: "8px",
+      lg: "16px",
+      full: "99999px"
+    };
+    var fonts2 = {
+      default: "Roboto, sans-serif",
+      heading: "Montserrat, sans-serif",
+      code: "monospace"
+    };
+    var fontSizes2 = {
+      xxs: "0.625rem",
+      xs: "0.75rem",
+      sm: "0.875rem",
+      md: "1rem",
+      lg: "1.125rem",
+      xl: "1.25rem",
+      "2xl": "1.5rem",
+      "4xl": "2rem",
+      "5xl": "2.25rem",
+      "6xl": "3rem",
+      "7xl": "4rem",
+      "8xl": "4.5rem",
+      "9xl": "6rem"
+    };
+    var fontWeights2 = {
+      thin: "100",
+      extralight: "200",
+      light: "300",
+      regular: "400",
+      medium: "500",
+      semibold: "600",
+      bold: "700",
+      extrabold: "800",
+      black: "900"
+    };
+    var lineHeights2 = {
+      shorter: "125%",
+      short: "140%",
+      base: "160%",
+      tall: "180%"
+    };
+  }
+});
+
+// src/styles/index.ts
+var import_tokens = __toESM(require_dist());
+import { createStitches, defaultThemeMap } from "@stitches/react";
+var {
+  styled,
+  css,
+  globalCss,
+  keyframes,
+  getCssText,
+  theme,
+  createTheme,
+  config
+} = createStitches({
+  themeMap: __spreadProps(__spreadValues({}, defaultThemeMap), {
+    height: "space",
+    width: "space"
+  }),
+  theme: {
+    colors: import_tokens.colors,
+    fontSizes: import_tokens.fontSizes,
+    fontWeights: import_tokens.fontWeights,
+    fonts: import_tokens.fonts,
+    lineHeights: import_tokens.lineHeights,
+    radii: import_tokens.radii,
+    space: import_tokens.space
+  }
+});
+
+// src/components/Box.tsx
+var Box = styled("div", {
+  padding: "$4",
+  borderRadius: "$md",
+  variants: {
+    background: {
+      default: {
+        backgroundColor: "transparent"
+      },
+      gray600: {
+        backgroundColor: "$gray600"
+      },
+      gray700: {
+        backgroundColor: "$gray700"
+      },
+      gray800: {
+        backgroundColor: "$gray800"
+      },
+      gray900: {
+        backgroundColor: "$gray900"
+      }
+    }
+  }
+});
+Box.displayName = "Box";
+
+// src/components/Text.tsx
+var Text = styled("p", {
+  fontFamily: "$default",
+  lineHeight: "$base",
+  margin: 0,
+  color: "$smokedWhite",
+  variants: {
+    size: {
+      xxs: { fontSize: "$xxs" },
+      xs: { fontSize: "$xs" },
+      sm: { fontSize: "$sm" },
+      md: { fontSize: "$md" },
+      lg: { fontSize: "$lg" },
+      xl: { fontSize: "$xl" },
+      "2xl": { fontSize: "$2xl" },
+      "4xl": { fontSize: "$4xl" },
+      "5xl": { fontSize: "$5xl" },
+      "6xl": { fontSize: "$6xl" },
+      "7xl": { fontSize: "$7xl" },
+      "8xl": { fontSize: "$8xl" },
+      "9xl": { fontSize: "$9xl" }
+    },
+    variant: {
+      default: { color: "$smokedWhite" },
+      primary: { color: "$primary" },
+      danger: { color: "$danger" },
+      success: { color: "$success" },
+      warning: { color: "$warning" }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    variant: "default"
+  }
+});
+Text.displayName = "Text";
+
+// src/components/Heading.tsx
+var Heading = styled("h2", {
+  fontFamily: "$heading",
+  lineHeight: "$shorter",
+  margin: 0,
+  color: "$smokedWhite",
+  variants: {
+    size: {
+      sm: { fontSize: "$xl" },
+      md: { fontSize: "$2xl" },
+      lg: { fontSize: "$4xl" },
+      "2xl": { fontSize: "$5xl" },
+      "3xl": { fontSize: "$5xl" },
+      "4xl": { fontSize: "$6xl" },
+      "5xl": { fontSize: "$7xl" },
+      "6xl": { fontSize: "$8xl" }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+Heading.displayName = "Heading";
+
+// src/components/Avatar/styles.ts
+import * as Avatar from "@radix-ui/react-avatar";
+var AvatarContainer = styled(Avatar.Root, {
+  borderRadius: "$full",
+  display: "inline-block",
+  width: "$12",
+  height: "$12",
+  overflow: "hidden"
+});
+var AvatarImage = styled(Avatar.Image, {
+  width: "100%",
+  height: "100%",
+  objectFix: "cover",
+  borderRadius: "inherit"
+});
+var AvatarFallback = styled(Avatar.Fallback, {
+  width: "100%",
+  height: "100%",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  backgroundColor: "$gray600",
+  color: "$gray800",
+  svg: {
+    width: "$6",
+    height: "$6"
+  }
+});
+
+// src/components/Avatar/index.tsx
+import { User } from "phosphor-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Avatar2(props) {
+  return /* @__PURE__ */ jsxs(AvatarContainer, { children: [
+    /* @__PURE__ */ jsx(AvatarImage, __spreadValues({}, props)),
+    /* @__PURE__ */ jsx(AvatarFallback, { delayMs: 600, children: /* @__PURE__ */ jsx(User, {}) })
+  ] });
+}
+Avatar2.displayName = "Avatar";
+
+// src/components/Button.tsx
+var Button = styled("button", {
+  all: "unset",
+  fontFamily: "$default",
+  fontWeight: "$medium",
+  fontSize: "$sm",
+  textAlign: "center",
+  minWidth: 0,
+  boxSizing: "border-box",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: "$2",
+  cursor: "pointer",
+  transition: "0.2s",
+  svg: {
+    width: "$4",
+    height: "$4"
+  },
+  "&:disabled": {
+    cursor: "not-allowed",
+    backgroundColor: "$gray200",
+    borderColor: "$gray200"
+  },
+  variants: {
+    variant: {
+      default: {
+        backgroundColor: "transparent",
+        border: "2px solid $gray500",
+        color: "$smokedWhite",
+        "&:not(:disabled):hover": {
+          // backgroundColor: '$smokedWhite',
+          // borderColor: '$smokedWhite',
+          // color: '$gray900',
+          borderColor: "$gray600"
+        }
+      },
+      primary: {
+        backgroundColor: "$primary",
+        border: "2px solid $primary",
+        color: "$smokedWhite",
+        "&:not(:disabled):hover": {
+          backgroundColor: "$primaryLight",
+          borderColor: "$primaryLight"
+        }
+      }
+    },
+    size: {
+      default: {
+        padding: "$3 $6"
+      },
+      fit: {
+        width: "100%",
+        paddingTop: "$3",
+        paddingBottom: "$3"
+      },
+      small: {
+        padding: "$3 $4"
+      }
+    },
+    radius: {
+      small: {
+        borderRadius: "$sm"
+      },
+      default: {
+        borderRadius: "$lg"
+      },
+      full: {
+        borderRadius: "$full"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "default",
+    radius: "default",
+    variant: "default"
+  }
+});
+Button.displayName = "Button";
+
+// src/components/TextInput/styles.ts
+var TextInputContainer = styled("div", {
+  backgroundColor: "$gray900",
+  padding: "$3 $4",
+  borderRadius: "$sm",
+  boxSizing: "border-box",
+  border: "2px solid $gray900",
+  display: "flex",
+  alignItems: "baseline",
+  "&:has(input:focus)": {
+    borderColor: "$primary"
+  },
+  "&:has(input:disabled)": {
+    opacity: 0.5,
+    cursor: "not-alowed"
+  },
+  variants: {
+    errored: {
+      true: {
+        borderColor: "$danger"
+      }
+    }
+  },
+  defaultVariants: {
+    errored: false
+  }
+});
+var Prefix = styled("span", {
+  fontFamily: "$default",
+  fontSize: "$sm",
+  color: "$gray400",
+  fontWeight: "regular"
+});
+var Input = styled("input", {
+  fontFamily: "$default",
+  fontSize: "$sm",
+  color: "$smokedWhite",
+  fontWeight: "regular",
+  background: "transparent",
+  border: 0,
+  width: "100%",
+  "&:focus": {
+    outline: 0
+  },
+  "&:disabled": {
+    cursor: "not-allowed"
+  },
+  "&:placeholder": {
+    color: "$gray400"
+  }
+});
+
+// src/components/InputBox/styles.ts
+var InputContainer = styled("div", {
+  display: "flex",
+  flexDirection: "column",
+  gap: "$2"
+});
+
+// src/components/InputBox/index.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function InputBox({ label, error, children }) {
+  return /* @__PURE__ */ jsxs2(InputContainer, { children: [
+    !!label && /* @__PURE__ */ jsx2(Text, { size: "sm", children: label }),
+    children,
+    !!error && /* @__PURE__ */ jsx2(Text, { size: "xs", variant: "danger", children: error })
+  ] });
+}
+InputBox.displayName = "InputBox";
+
+// src/components/TextInput/index.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function TextInput(_a) {
+  var _b = _a, { label, prefix, error } = _b, props = __objRest(_b, ["label", "prefix", "error"]);
+  return /* @__PURE__ */ jsx3(InputBox, { label, error, children: /* @__PURE__ */ jsxs3(TextInputContainer, { errored: !!error, children: [
+    !!prefix && /* @__PURE__ */ jsx3(Prefix, { children: prefix }),
+    /* @__PURE__ */ jsx3(Input, __spreadValues({}, props))
+  ] }) });
+}
+TextInput.displayName = "TextInput";
+
+// src/components/TextArea/styles.ts
+var TextAreaInput = styled("textarea", {
+  backgroundColor: "$gray900",
+  padding: "$3 $4",
+  borderRadius: "$sm",
+  boxSizing: "border-box",
+  border: "2px solid $gray900",
+  fontFamily: "$default",
+  fontSize: "$sm",
+  color: "$white",
+  fontWeight: "$regular",
+  resize: "vertical",
+  minHeight: 80,
+  "&:focus": {
+    outline: 0,
+    borderColor: "$primary"
+  },
+  "&:disabled": {
+    opacity: 0.5,
+    cursor: "not-allowed"
+  },
+  "&:placeholder": {
+    color: "$gray400"
+  },
+  variants: {
+    errored: {
+      true: {
+        borderColor: "$danger"
+      }
+    }
+  },
+  defaultVariants: {
+    errored: false
+  }
+});
+
+// src/components/TextArea/index.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function TextArea(_a) {
+  var _b = _a, { label, error } = _b, props = __objRest(_b, ["label", "error"]);
+  return /* @__PURE__ */ jsx4(InputBox, { label, error, children: /* @__PURE__ */ jsx4(TextAreaInput, __spreadProps(__spreadValues({}, props), { errored: !!error })) });
+}
+TextArea.displayName = "TextArea";
+
+// src/components/Checkbox/index.tsx
+import { Check } from "phosphor-react";
+
+// src/components/Checkbox/styles.ts
+import * as Checkbox from "@radix-ui/react-checkbox";
+var CheckboxBox = styled("div", {
+  display: "flex",
+  gap: "$2",
+  "&:has(button:disabled)": {
+    opacity: 0.5
+  }
+});
+var CheckboxContainer = styled(Checkbox.Root, {
+  all: "unset",
+  width: "$6",
+  height: "$6",
+  backgroundColor: "$gray900",
+  borderRadius: "$xs",
+  lineHeight: 0,
+  cursor: "pointer",
+  overflow: "hidden",
+  boxSizing: "border-box",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  border: "2px solid $gray900",
+  '&[data-state="checked"]': {
+    backgroundColor: "$primary",
+    borderColor: "$primary"
+  },
+  "&:focus": {
+    border: "2px solid $primary"
+  },
+  "&:disabled": {
+    cursor: "not-allowed"
+  },
+  variants: {
+    errored: {
+      true: {
+        borderColor: "$danger"
+      }
+    }
+  },
+  defaultVariants: {
+    errored: false
+  }
+});
+var slideIn = keyframes({
+  from: {
+    transform: "translateX(-100%)"
+  },
+  to: {
+    transform: "translateX(0)"
+  }
+});
+var slideOut = keyframes({
+  from: {
+    transform: "translateX(0)"
+  },
+  to: {
+    transform: "translateX(100%)"
+  }
+});
+var CheckboxIndicator = styled(Checkbox.Indicator, {
+  color: "$smokedWhite",
+  width: "$4",
+  height: "$4",
+  '&[data-state="checked"]': {
+    animation: `${slideIn} 100ms ease-out`
+  },
+  '&[data-state="unchecked"]': {
+    animation: `${slideOut} 100ms ease-out`
+  }
+});
+
+// src/components/Checkbox/index.tsx
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function Checkbox2(_a) {
+  var _b = _a, { label, error } = _b, props = __objRest(_b, ["label", "error"]);
+  return /* @__PURE__ */ jsx5(InputBox, { error, children: /* @__PURE__ */ jsxs4(CheckboxBox, { children: [
+    /* @__PURE__ */ jsx5(CheckboxContainer, __spreadProps(__spreadValues({}, props), { errored: !!error, children: /* @__PURE__ */ jsx5(CheckboxIndicator, { asChild: true, children: /* @__PURE__ */ jsx5(Check, { weight: "bold" }) }) })),
+    !!label && /* @__PURE__ */ jsx5(Text, { size: "sm", children: label })
+  ] }) });
+}
+Checkbox2.displayName = "Checkbox";
+
+// src/components/Dropdown/index.tsx
+import { useRef, useState, useEffect } from "react";
+
+// src/components/Dropdown/styles.ts
+var DropdownContainer = styled("div", {
+  position: "relative",
+  display: "inline-block"
+});
+var DropdownTrigger = styled("span", {});
+var fadeIn = keyframes({
+  "0%": { opacity: "0" },
+  "100%": { opacity: "1" }
+});
+var DropdownList = styled("ul", {
+  position: "absolute",
+  // top: '100%',
+  // left: 0,
+  backgroundColor: "#18181B",
+  borderRadius: "$lg",
+  padding: 0,
+  // margin: '$1 0',
+  margin: 0,
+  listStyle: "none",
+  zIndex: 9999,
+  minWidth: "100%",
+  // ensures the dropdown list as wide as the container
+  left: "50%",
+  transform: "translateX(-50%)",
+  animation: `${fadeIn} 100ms ease-out`,
+  "& li:first-child": {
+    marginTop: "$2"
+  },
+  "& li:last-child": {
+    marginBottom: "$2"
+  }
+});
+var DropdownItem = styled("li", {
+  fontFamily: "$default",
+  fontSize: "$sm",
+  color: "$smokedWhite",
+  padding: "$2 $2",
+  marginLeft: "$2",
+  marginRight: "$2",
+  width: "$40",
+  borderRadius: "$md",
+  cursor: "pointer",
+  variants: {
+    variant: {
+      default: {
+        color: "$smokedWhite",
+        "&:hover": {
+          backgroundColor: "$gray700"
+        }
+      },
+      danger: {
+        color: "$danger",
+        "&:hover": {
+          backgroundColor: "$danger",
+          color: "$smokedWhite"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+
+// src/components/Dropdown/index.tsx
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function Dropdown({ options, children, name }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef(null);
+  const buttonRef = useRef(null);
+  const toggleDropdown = () => {
+    setIsOpen(!isOpen);
+  };
+  const handleSelectOption = (option) => {
+    option.onSelect();
+    setIsOpen(false);
+  };
+  const handleClickOutside = (event) => {
+    if (dropdownRef.current && buttonRef.current && !dropdownRef.current.contains(event.target) && !buttonRef.current.contains(event.target)) {
+      setIsOpen(false);
+    }
+  };
+  useEffect(() => {
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+  useEffect(() => {
+    const handleReposition = () => {
+      if (isOpen && buttonRef.current && dropdownRef.current) {
+        const buttonRect = buttonRef.current.getBoundingClientRect();
+        const dropdownRect = dropdownRef.current.getBoundingClientRect();
+        const buttonTop = buttonRect.top;
+        const buttonHeight = buttonRect.height;
+        const dropdownHeight = dropdownRect.height;
+        const spaceBelow = window.innerHeight - buttonTop - buttonHeight;
+        if (spaceBelow < dropdownHeight) {
+          dropdownRef.current.style.bottom = `${buttonHeight + 6}px`;
+        } else {
+          dropdownRef.current.style.top = `${buttonHeight + 6}px`;
+        }
+      }
+    };
+    handleReposition();
+  }, [isOpen]);
+  return /* @__PURE__ */ jsxs5(DropdownContainer, { children: [
+    /* @__PURE__ */ jsxs5(DropdownTrigger, { ref: buttonRef, onClick: toggleDropdown, children: [
+      name && children === void 0 && /* @__PURE__ */ jsx6(Button, { children: name }),
+      children && name === void 0 && children
+    ] }),
+    isOpen && /* @__PURE__ */ jsx6(DropdownList, { ref: dropdownRef, children: options.map((option, index) => /* @__PURE__ */ jsx6(
+      DropdownItem,
+      {
+        onClick: () => handleSelectOption(option),
+        variant: option.variant,
+        children: option.text
+      },
+      index
+    )) })
+  ] });
+}
+Dropdown.displayName = "Dropdown";
+export {
+  Avatar2 as Avatar,
+  Box,
+  Button,
+  Checkbox2 as Checkbox,
+  Dropdown,
+  Heading,
+  Text,
+  TextArea,
+  TextInput
+};