@madecki/ui 1.3.0 → 1.5.0

package/dist/index.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, createElement, useCallback, useEffect } from 'react';
+import { useState, createElement, useId, useMemo, useRef, useCallback, useEffect } from 'react';
 
 // src/components/Tag/tagSurfaceClassNames.ts
 function getTagSurfaceClassNames({
@@ -300,11 +300,13 @@ var Tag = ({
 var Input = ({
   name,
   onChange,
+  value: valueProp,
   defaultValue,
   placeholder,
   label,
   variant = "primary",
   type = "text",
+  maxLength,
   required = false,
   pattern,
   title,
@@ -312,35 +314,43 @@ var Input = ({
   spellCheck,
   disabled = false,
   className = "",
-  icon
+  icon,
+  testId
 }) => {
-  const [value, setValue] = useState(defaultValue);
+  const isControlled = valueProp !== void 0;
+  const [internalValue, setInternalValue] = useState(() => defaultValue ?? "");
   const [isFocused, setIsFocused] = useState(false);
+  const value = isControlled ? valueProp : internalValue;
   const inputClassNames = ["rounded-sm font-sans z-10 w-full"];
   const spacings = "py-4 px-5";
   const outline = "outline-hidden";
   inputClassNames.push(spacings, outline);
   const inputWrapperClassNames = ["flex rounded-smb p-px w-full"];
-  if (isFocused) inputWrapperClassNames.push("bg-gradient");
+  if (isFocused) {
+    inputWrapperClassNames.push("bg-gradient");
+  } else if (variant === "primary" || variant === "tertiary") {
+    inputWrapperClassNames.push("bg-lightgray");
+  }
   switch (variant) {
     case "primary":
       inputClassNames.push("text-primary bg-neutral");
-      inputWrapperClassNames.push("bg-lightgray");
       break;
     case "secondary":
       inputClassNames.push("text-neutral bg-neutral dark:bg-gray");
       break;
     case "tertiary":
       inputClassNames.push("text-neutral bg-neutral dark:bg-primary");
-      inputWrapperClassNames.push("bg-lightgray");
       break;
   }
   if (disabled) {
     inputClassNames.push("cursor-not-allowed opacity-50");
   }
   const onInputChange = (event) => {
-    setValue(event.target.value);
-    onChange?.(event.target.value);
+    const next = event.target.value;
+    if (!isControlled) {
+      setInternalValue(next);
+    }
+    onChange?.(next);
   };
   return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsxs("label", { htmlFor: name, children: [
     /* @__PURE__ */ jsx("span", { className: "sr-only", children: label }),
@@ -352,24 +362,395 @@ var Input = ({
           id: name,
           name,
           placeholder,
-          value: value || "",
+          value,
           className: inputClassNames.join(" "),
           autoComplete: "off",
           onChange: onInputChange,
           onFocus: () => setIsFocused(true),
           onBlur: () => setIsFocused(false),
           type,
+          maxLength,
           required,
           pattern,
           title,
           "aria-label": ariaLabel || label || name,
           spellCheck,
-          disabled
+          disabled,
+          "data-testid": testId
         }
       )
     ] })
   ] }) });
 };
+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
@@ -1047,6 +1428,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, Tag, 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