@madecki/ui 1.2.1 → 1.4.0

package/dist/index.js

@@ -1,21 +1,15 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, createElement, useCallback, useEffect } from 'react';
+import { useState, createElement, useId, useMemo, useRef, useCallback, useEffect } from 'react';
 
-var Button = ({
+// src/components/Tag/tagSurfaceClassNames.ts
+function getTagSurfaceClassNames({
   variant,
   size = "md",
-  children,
-  onClick,
-  isActive,
-  id,
-  label,
-  disabled,
   className = "",
-  type = "button"
-}) => {
-  if (typeof isActive === "boolean" && id === void 0) {
-    throw Error("If button has isActive props, it must have id props too");
-  }
+  filled = false,
+  muted = false,
+  interactive = false
+}) {
   const classNames = [
     "relative flex gap-2 items-center rounded-sm font-sans border-2 transition-colors leading-none"
   ];
@@ -29,42 +23,42 @@ var Button = ({
     info: "bg-info",
     blue: "bg-blue"
   };
-  const bg = isActive === true ? activeBgMap[variant] : "bg-neutral";
+  const bg = filled === true ? activeBgMap[variant] : "bg-neutral";
   switch (variant) {
     case "primary":
       classNames.push(
         `border-primary text-primary ${bg} focus:bg-primary`,
-        isActive === true ? "dark:bg-neutral dark:text-primary" : "dark:text-white dark:bg-gray dark:hover:bg-neutral dark:hover:text-primary"
+        filled === true ? "dark:bg-neutral dark:text-primary" : interactive ? "dark:text-white dark:bg-gray dark:hover:bg-neutral dark:hover:text-primary" : "dark:text-white dark:bg-gray"
       );
       break;
     case "success":
       classNames.push(
         `border-success text-primary ${bg} focus:bg-primary focus:text-success`,
-        isActive === true ? "dark:bg-success" : "dark:text-white dark:bg-gray dark:hover:bg-success"
+        filled === true ? "dark:bg-success" : interactive ? "dark:text-white dark:bg-gray dark:hover:bg-success" : "dark:text-white dark:bg-gray"
       );
       break;
     case "warning":
       classNames.push(
         `border-warning text-primary ${bg} focus:bg-primary focus:text-warning`,
-        isActive === true ? "dark:bg-warning" : "dark:text-white dark:bg-gray dark:hover:bg-warning"
+        filled === true ? "dark:bg-warning" : interactive ? "dark:text-white dark:bg-gray dark:hover:bg-warning" : "dark:text-white dark:bg-gray"
       );
       break;
     case "danger":
       classNames.push(
         `border-danger text-primary ${bg} focus:bg-primary focus:text-danger`,
-        isActive === true ? "dark:bg-danger" : "dark:text-white dark:bg-gray dark:hover:bg-danger"
+        filled === true ? "dark:bg-danger" : interactive ? "dark:text-white dark:bg-gray dark:hover:bg-danger" : "dark:text-white dark:bg-gray"
       );
       break;
     case "info":
       classNames.push(
         `border-info text-primary ${bg} focus:bg-primary focus:text-info`,
-        isActive === true ? "dark:bg-info" : "dark:text-white dark:bg-gray dark:hover:bg-info"
+        filled === true ? "dark:bg-info" : interactive ? "dark:text-white dark:bg-gray dark:hover:bg-info" : "dark:text-white dark:bg-gray"
       );
       break;
     case "blue":
       classNames.push(
         `border-blue text-primary ${bg} focus:bg-primary focus:text-blue`,
-        isActive === true ? "dark:bg-blue" : "dark:text-white dark:bg-gray dark:hover:bg-blue"
+        filled === true ? "dark:bg-blue" : interactive ? "dark:text-white dark:bg-gray dark:hover:bg-blue" : "dark:text-white dark:bg-gray"
       );
       break;
   }
@@ -82,19 +76,47 @@ var Button = ({
       classNames.push("text-lg py-5 px-8");
       break;
   }
-  if (disabled) {
+  if (muted) {
     classNames.push(
-      "cursor-not-allowed hover:bg-neutral dark:hover:bg-neutral opacity-50"
+      interactive ? "cursor-not-allowed hover:bg-neutral dark:hover:bg-neutral opacity-50" : "cursor-default opacity-50"
     );
   }
+  if (interactive && !muted) {
+    classNames.push("cursor-pointer");
+  }
   if (className) {
     classNames.push(className);
   }
+  return classNames.join(" ");
+}
+var Button = ({
+  variant,
+  size = "md",
+  children,
+  onClick,
+  isActive,
+  id,
+  label,
+  disabled,
+  className = "",
+  type = "button"
+}) => {
+  if (typeof isActive === "boolean" && id === void 0) {
+    throw Error("If button has isActive props, it must have id props too");
+  }
+  const surfaceClassName = getTagSurfaceClassNames({
+    variant,
+    size,
+    className,
+    filled: isActive === true,
+    muted: Boolean(disabled),
+    interactive: true
+  });
   return /* @__PURE__ */ jsxs(
     "button",
     {
       type,
-      className: classNames.join(" "),
+      className: surfaceClassName,
       onClick: () => {
         if (isActive === true) {
           onClick?.();
@@ -252,6 +274,29 @@ var RadioButtons = ({
     }
   )) });
 };
+var Tag = ({
+  variant,
+  size = "md",
+  children,
+  label,
+  className = "",
+  filled = false,
+  muted = false
+}) => {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: getTagSurfaceClassNames({
+        variant,
+        size,
+        className,
+        filled,
+        muted
+      }),
+      children: children || label
+    }
+  );
+};
 var Input = ({
   name,
   onChange,
@@ -325,6 +370,375 @@ var Input = ({
     ] })
   ] }) });
 };
+function optionTestSlug(value) {
+  return value.replace(/[^a-zA-Z0-9_-]/g, "_");
+}
+function ChevronDown({ className = "" }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: 20,
+      height: 20,
+      viewBox: "0 0 20 20",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className,
+      "aria-hidden": true,
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M5 7.5L10 12.5L15 7.5",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+function buildVariantClasses(variant, isFocused, disabled) {
+  const inputClassNames = [
+    "min-w-0 flex-1 rounded-none border-0 font-sans",
+    "py-4 pl-5 pr-2",
+    "outline-hidden",
+    "bg-transparent shadow-none"
+  ];
+  const inputWrapperClassNames = [
+    "flex min-w-0 w-full items-stretch rounded-smb p-px"
+  ];
+  if (isFocused) {
+    inputWrapperClassNames.push("bg-gradient");
+  } else if (variant === "primary" || variant === "tertiary") {
+    inputWrapperClassNames.push("bg-lightgray");
+  }
+  const innerFieldClassNames = [
+    "flex min-h-0 min-w-0 flex-1 overflow-hidden rounded-sm"
+  ];
+  const chevronClassNames = [
+    "pointer-events-none flex shrink-0 items-center justify-center self-stretch pl-1 pr-4"
+  ];
+  switch (variant) {
+    case "primary":
+      inputClassNames.push("text-primary placeholder:text-lightgray");
+      innerFieldClassNames.push("bg-neutral");
+      chevronClassNames.push("text-primary");
+      break;
+    case "secondary":
+      inputClassNames.push(
+        "text-neutral placeholder:text-lightgray dark:placeholder:text-icongray"
+      );
+      innerFieldClassNames.push("bg-neutral dark:bg-gray");
+      chevronClassNames.push("text-neutral");
+      break;
+    case "tertiary":
+      inputClassNames.push(
+        "text-neutral placeholder:text-lightgray dark:placeholder:text-icongray"
+      );
+      innerFieldClassNames.push("bg-neutral dark:bg-primary");
+      chevronClassNames.push("text-neutral dark:text-icongray");
+      break;
+  }
+  if (disabled) {
+    inputClassNames.push("cursor-not-allowed opacity-50");
+    chevronClassNames.push("opacity-50");
+  }
+  return {
+    inputClassNames,
+    inputWrapperClassNames,
+    innerFieldClassNames,
+    chevronClassNames
+  };
+}
+function Select(props) {
+  const {
+    name,
+    label,
+    options,
+    placeholder = "Select\u2026",
+    variant = "primary",
+    disabled = false,
+    className = "",
+    testId: testIdProp
+  } = props;
+  const isMulti = props.multi === true;
+  const singleValueProp = !isMulti ? props.value : void 0;
+  const multiValueProp = isMulti ? props.value : void 0;
+  const isControlled = isMulti ? multiValueProp !== void 0 : singleValueProp !== void 0;
+  const reactId = useId();
+  const listboxId = `${name}-listbox-${reactId.replace(/:/g, "")}`;
+  const baseTestId = testIdProp ?? `select-${name}`;
+  const [internalSingle, setInternalSingle] = useState(
+    !isMulti && !isControlled ? props.defaultValue ?? "" : ""
+  );
+  const [internalMulti, setInternalMulti] = useState(
+    isMulti && !isControlled ? [...props.defaultValue ?? []] : []
+  );
+  const selectedSingle = useMemo(() => {
+    if (isMulti) return "";
+    if (singleValueProp !== void 0) return singleValueProp;
+    return internalSingle;
+  }, [isMulti, singleValueProp, internalSingle]);
+  const selectedMulti = useMemo(() => {
+    if (!isMulti) return [];
+    if (multiValueProp !== void 0) return multiValueProp;
+    return internalMulti;
+  }, [isMulti, multiValueProp, internalMulti]);
+  const [open, setOpen] = useState(false);
+  const [filter, setFilter] = useState("");
+  const [highlightIndex, setHighlightIndex] = useState(0);
+  const [isFocused, setIsFocused] = useState(false);
+  const containerRef = useRef(null);
+  const listRef = useRef(null);
+  const inputRef = useRef(null);
+  const optionByValue = useMemo(() => {
+    const m = /* @__PURE__ */ new Map();
+    for (const o of options) m.set(o.value, o);
+    return m;
+  }, [options]);
+  const filteredOptions = useMemo(() => {
+    const q = filter.trim().toLowerCase();
+    if (!q) return options;
+    return options.filter(
+      (o) => o.label.toLowerCase().includes(q) || o.value.toLowerCase().includes(q)
+    );
+  }, [options, filter]);
+  const closedDisplay = useMemo(() => {
+    if (isMulti) {
+      if (selectedMulti.length === 0) return "";
+      return selectedMulti.map((v) => optionByValue.get(v)?.label ?? v).join(", ");
+    }
+    if (!selectedSingle) return "";
+    return optionByValue.get(selectedSingle)?.label ?? selectedSingle;
+  }, [isMulti, selectedMulti, selectedSingle, optionByValue]);
+  const inputValue = open ? filter : closedDisplay;
+  const onSingleChange = !isMulti ? props.onChange : void 0;
+  const onMultiChange = isMulti ? props.onChange : void 0;
+  const setSingle = useCallback(
+    (next) => {
+      if (!isMulti) {
+        if (!isControlled) setInternalSingle(next);
+        onSingleChange?.(next);
+      }
+    },
+    [isMulti, isControlled, onSingleChange]
+  );
+  const setMulti = useCallback(
+    (next) => {
+      if (isMulti) {
+        if (!isControlled) setInternalMulti(next);
+        onMultiChange?.(next);
+      }
+    },
+    [isMulti, isControlled, onMultiChange]
+  );
+  const close = useCallback(() => {
+    setOpen(false);
+    setFilter("");
+    setHighlightIndex(0);
+  }, []);
+  const openMenu = useCallback(() => {
+    if (disabled) return;
+    setOpen(true);
+    setFilter("");
+    setHighlightIndex(0);
+  }, [disabled]);
+  useEffect(() => {
+    if (!open) return;
+    const max = Math.max(0, filteredOptions.length - 1);
+    setHighlightIndex((i) => Math.min(i, max));
+  }, [open, filteredOptions.length]);
+  useEffect(() => {
+    if (!open) return;
+    const onDocMouseDown = (e) => {
+      const el = containerRef.current;
+      if (el && !el.contains(e.target)) close();
+    };
+    document.addEventListener("mousedown", onDocMouseDown);
+    return () => document.removeEventListener("mousedown", onDocMouseDown);
+  }, [open, close]);
+  const commitHighlight = useCallback(() => {
+    const opt = filteredOptions[highlightIndex];
+    if (!opt) return;
+    if (isMulti) {
+      const set = new Set(selectedMulti);
+      if (set.has(opt.value)) set.delete(opt.value);
+      else set.add(opt.value);
+      setMulti([...set]);
+    } else {
+      setSingle(opt.value);
+      close();
+      inputRef.current?.blur();
+    }
+  }, [
+    filteredOptions,
+    highlightIndex,
+    isMulti,
+    selectedMulti,
+    setMulti,
+    setSingle,
+    close
+  ]);
+  const onOptionMouseDown = (e) => {
+    e.preventDefault();
+  };
+  const onOptionClick = (opt) => {
+    if (isMulti) {
+      const set = new Set(selectedMulti);
+      if (set.has(opt.value)) set.delete(opt.value);
+      else set.add(opt.value);
+      setMulti([...set]);
+    } else {
+      setSingle(opt.value);
+      close();
+    }
+  };
+  const onInputFocus = () => {
+    setIsFocused(true);
+    if (!disabled) setOpen(true);
+  };
+  const onInputBlur = (e) => {
+    const next = e.relatedTarget;
+    if (listRef.current?.contains(next)) return;
+    setIsFocused(false);
+    close();
+  };
+  const onInputChange = (v) => {
+    if (!open) setOpen(true);
+    setFilter(v);
+    setHighlightIndex(0);
+  };
+  const onKeyDown = (e) => {
+    if (disabled) return;
+    if (e.key === "Escape") {
+      e.preventDefault();
+      close();
+      inputRef.current?.blur();
+      return;
+    }
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      if (!open) openMenu();
+      else
+        setHighlightIndex(
+          (i) => Math.min(i + 1, Math.max(0, filteredOptions.length - 1))
+        );
+      return;
+    }
+    if (e.key === "ArrowUp") {
+      e.preventDefault();
+      if (!open) openMenu();
+      else setHighlightIndex((i) => Math.max(0, i - 1));
+      return;
+    }
+    if (e.key === "Enter" && open) {
+      e.preventDefault();
+      commitHighlight();
+      return;
+    }
+    if (e.key === "Home" && open) {
+      e.preventDefault();
+      setHighlightIndex(0);
+      return;
+    }
+    if (e.key === "End" && open) {
+      e.preventDefault();
+      setHighlightIndex(Math.max(0, filteredOptions.length - 1));
+      return;
+    }
+  };
+  const {
+    inputClassNames,
+    inputWrapperClassNames,
+    innerFieldClassNames,
+    chevronClassNames
+  } = buildVariantClasses(variant, isFocused, disabled);
+  const activeDescendant = open && filteredOptions[highlightIndex] ? `${name}-option-${optionTestSlug(filteredOptions[highlightIndex].value)}` : void 0;
+  const listboxClass = "absolute left-0 right-0 top-full z-50 mt-1 max-h-60 overflow-auto rounded-sm border border-lightgray bg-neutral py-1 shadow-lg dark:border-gray dark:bg-gray dark:text-white";
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: `relative ${className}`.trim(), children: [
+    /* @__PURE__ */ jsxs("label", { htmlFor: name, children: [
+      /* @__PURE__ */ jsx("span", { className: "sr-only", children: label }),
+      /* @__PURE__ */ jsx("div", { className: inputWrapperClassNames.join(" "), children: /* @__PURE__ */ jsxs("div", { className: innerFieldClassNames.join(" "), children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inputRef,
+            id: name,
+            name,
+            type: "text",
+            autoComplete: "off",
+            spellCheck: false,
+            disabled,
+            placeholder,
+            value: inputValue,
+            "aria-label": label,
+            "aria-expanded": open,
+            "aria-haspopup": "listbox",
+            "aria-controls": listboxId,
+            "aria-autocomplete": "list",
+            "aria-activedescendant": activeDescendant,
+            role: "combobox",
+            "data-testid": baseTestId,
+            className: inputClassNames.join(" "),
+            onChange: (e) => onInputChange(e.target.value),
+            onFocus: onInputFocus,
+            onBlur: onInputBlur,
+            onKeyDown
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: chevronClassNames.join(" "), "aria-hidden": true, children: /* @__PURE__ */ jsx(ChevronDown, { className: "block shrink-0" }) })
+      ] }) })
+    ] }),
+    open && /* @__PURE__ */ jsx(
+      "ul",
+      {
+        ref: listRef,
+        id: listboxId,
+        role: "listbox",
+        "aria-multiselectable": isMulti,
+        "aria-label": label,
+        "data-testid": `${baseTestId}-listbox`,
+        tabIndex: -1,
+        className: listboxClass,
+        children: filteredOptions.length === 0 ? /* @__PURE__ */ jsx(
+          "li",
+          {
+            className: "px-5 py-3 text-sm text-lightgray dark:text-icongray",
+            role: "presentation",
+            children: "No matches"
+          }
+        ) : filteredOptions.map((opt, index) => {
+          const selected = isMulti ? selectedMulti.includes(opt.value) : selectedSingle === opt.value;
+          const highlighted = index === highlightIndex;
+          const oid = `${name}-option-${optionTestSlug(opt.value)}`;
+          return /* @__PURE__ */ jsxs(
+            "li",
+            {
+              id: oid,
+              role: "option",
+              "aria-selected": selected,
+              "data-testid": `${baseTestId}-option-${optionTestSlug(opt.value)}`,
+              "data-option-value": opt.value,
+              className: [
+                "cursor-pointer px-5 py-3 text-sm text-primary dark:text-white",
+                highlighted ? "bg-lightgray/50 dark:bg-white/10" : "",
+                selected ? "font-semibold" : ""
+              ].filter(Boolean).join(" "),
+              onMouseDown: onOptionMouseDown,
+              onMouseEnter: () => setHighlightIndex(index),
+              onClick: () => onOptionClick(opt),
+              children: [
+                isMulti && /* @__PURE__ */ jsx("span", { className: "mr-2 inline-block w-4 text-center", "aria-hidden": true, children: selected ? "\u2713" : "" }),
+                opt.label
+              ]
+            },
+            opt.value
+          );
+        })
+      }
+    )
+  ] });
+}
 var Tabs = ({ tabs, onTabClick, className = "" }) => {
   const [activeTab, setActiveTab] = useState(
     tabs.find((tab) => tab.isActive)?.value
@@ -621,11 +1035,11 @@ var Text = ({
   size = "md",
   weight = "normal",
   color = "default",
-  as: Tag = "p",
+  as: Tag2 = "p",
   className = ""
 }) => {
   return /* @__PURE__ */ jsx(
-    Tag,
+    Tag2,
     {
       className: `${sizeStyles3[size]} ${weightStyles2[weight]} ${colorStyles2[color]} ${className}`,
       children
@@ -1002,6 +1416,6 @@ var InstagramIcon = ({
   return icon;
 };
 
-export { BlockQuote, Button, ButtonTransparent, Container, ContentBox, GradientButton, Grid, GridItem, Heading, Heart, Hr, Info, Input, InstagramIcon, LinkedInIcon, RadioButtons, Search, Share, Spinner, SpinnerOverlay, Stack, Tabs, Text, TwitterIcon, Warning };
+export { BlockQuote, Button, ButtonTransparent, Container, ContentBox, GradientButton, Grid, GridItem, Heading, Heart, Hr, Info, Input, InstagramIcon, LinkedInIcon, RadioButtons, Search, Select, Share, Spinner, SpinnerOverlay, Stack, Tabs, Tag, Text, TwitterIcon, Warning };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map