@tipp/ui 1.1.23 → 1.2.0

package/dist/molecules/tag-selector.cjs

@@ -0,0 +1,455 @@
+"use strict";
+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 __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 __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/molecules/tag-selector.tsx
+var tag_selector_exports = {};
+__export(tag_selector_exports, {
+  TagSelector: () => TagSelector
+});
+module.exports = __toCommonJS(tag_selector_exports);
+var import_react4 = require("react");
+var import_react_icons2 = require("@radix-ui/react-icons");
+
+// src/atoms/popover.tsx
+var import_themes = require("@radix-ui/themes");
+
+// src/atoms/flex.tsx
+var import_themes2 = require("@radix-ui/themes");
+
+// src/atoms/button.tsx
+var import_themes3 = require("@radix-ui/themes");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Button = (0, import_react.forwardRef)(
+  (props, ref) => {
+    const _a = props, { size, style, variant } = _a, restProps = __objRest(_a, ["size", "style", "variant"]);
+    const radixSize = (0, import_react.useMemo)(() => {
+      switch (size) {
+        case "small":
+          return "1";
+        case "medium":
+          return "2";
+        case "large":
+        case "largest":
+          return "3";
+        default:
+          return "2";
+      }
+    }, [size]);
+    const mergedStyle = (0, import_react.useMemo)(() => {
+      const baseStyle = {
+        background: variant === "transparent" ? "transparent" : void 0
+      };
+      if (size === "largest")
+        return __spreadValues(__spreadProps(__spreadValues({}, baseStyle), {
+          borderRadius: "var(--radius-4)",
+          padding: "var(--space-5)",
+          fontSize: "var(--font-size-4)"
+        }), style);
+      return __spreadValues(__spreadValues({}, baseStyle), style);
+    }, [size, style, variant]);
+    const radixVariant = (0, import_react.useMemo)(() => {
+      if (variant === "transparent")
+        return "ghost";
+      return variant;
+    }, [variant]);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_themes3.Button,
+      __spreadProps(__spreadValues({
+        style: mergedStyle,
+        variant: radixVariant
+      }, restProps), {
+        ref,
+        size: radixSize
+      })
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/atoms/badge.tsx
+var import_themes4 = require("@radix-ui/themes");
+var import_react2 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Badge = (0, import_react2.forwardRef)(
+  (props, ref) => {
+    const _a = props, { size = "small", color = "accent" } = _a, rest = __objRest(_a, ["size", "color"]);
+    const radixSize = (0, import_react2.useMemo)(() => {
+      switch (size) {
+        case "small":
+          return "1";
+        case "large":
+          return "3";
+        default:
+          return "1";
+      }
+    }, [size]);
+    const radixColor = (0, import_react2.useMemo)(() => {
+      switch (color) {
+        case "error":
+          return "red";
+        case "neutral":
+          return "gray";
+        case "success":
+          return "green";
+        case "accent":
+        default:
+          return void 0;
+      }
+    }, [color]);
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_themes4.Badge, __spreadProps(__spreadValues({}, rest), { color: radixColor, ref, size: radixSize }));
+  }
+);
+Badge.displayName = "Badge";
+
+// src/icon.ts
+var import_react_icons = require("@radix-ui/react-icons");
+
+// src/atoms/scroll-area.tsx
+var import_themes5 = require("@radix-ui/themes");
+
+// src/atoms/grid.tsx
+var import_themes6 = require("@radix-ui/themes");
+
+// src/atoms/auto-sizing-input.tsx
+var import_react3 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var AutoSizingInput = (0, import_react3.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { value: _value, onChangeValue, onChange } = _b, rest = __objRest(_b, ["value", "onChangeValue", "onChange"]);
+    const [value, setValue] = (0, import_react3.useState)(_value);
+    const [width, setWidth] = (0, import_react3.useState)(0);
+    const span = (0, import_react3.useRef)(null);
+    (0, import_react3.useEffect)(() => {
+      span.current && setWidth(span.current.offsetWidth);
+    }, [value]);
+    const changeHandler = (0, import_react3.useCallback)(
+      (evt) => {
+        onChange == null ? void 0 : onChange(evt);
+        setValue(evt.target.value);
+      },
+      [onChange]
+    );
+    (0, import_react3.useEffect)(() => {
+      setValue(_value || "");
+    }, [_value]);
+    (0, import_react3.useEffect)(() => {
+      onChangeValue == null ? void 0 : onChangeValue(value || "");
+    }, [value, onChangeValue]);
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "auto-sizing-input wrapper", style: { width: width + 24 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("input", __spreadValues({ onChange: changeHandler, ref, value }, rest)),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { "aria-hidden": "true", ref: span, children: value })
+    ] });
+  }
+);
+AutoSizingInput.displayName = "AutoSizingInput";
+
+// src/molecules/tag-selector.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var OPTION_HEIGHT = 32;
+var DefaultDropdownContainer = (props) => {
+  return props.children;
+};
+function TagSelector(props) {
+  const {
+    options = [],
+    tagRender,
+    placeholder,
+    maxCount = 0,
+    DropdownContainer = DefaultDropdownContainer
+  } = props;
+  const [selected, setSelected] = (0, import_react4.useState)(props.selected || []);
+  const [value, setValue] = (0, import_react4.useState)("");
+  const [focusIndex, setFocusIndex] = (0, import_react4.useState)(null);
+  const [open, setOpen] = (0, import_react4.useState)(false);
+  const [focus, setFocus] = (0, import_react4.useState)(false);
+  const fieldRef = (0, import_react4.useRef)(null);
+  const scrollRef = (0, import_react4.useRef)(null);
+  const closeRef = (0, import_react4.useRef)(0);
+  const onFocus = (0, import_react4.useCallback)(() => {
+    clearTimeout(closeRef.current);
+    setFocus(true);
+    setOpen(true);
+  }, []);
+  const onBlur = (0, import_react4.useCallback)(() => {
+    closeRef.current = setTimeout(() => {
+      setFocus(false);
+      setOpen(false);
+      setTimeout(() => {
+        setValue("");
+      }, 100);
+    }, 100);
+  }, []);
+  const onChangeValue = (0, import_react4.useCallback)(
+    (e) => {
+      setValue(e.target.value);
+    },
+    []
+  );
+  const filteredOptions = (0, import_react4.useMemo)(() => {
+    return options.filter((option) => {
+      return option.name.includes(value);
+    });
+  }, [options, value]);
+  const selectedItem = (0, import_react4.useMemo)(() => {
+    const result = [];
+    selected.forEach((id) => {
+      const maybeItem = options.find((option) => option.id === id);
+      if (maybeItem)
+        result.push(maybeItem);
+    });
+    return result;
+  }, [options, selected]);
+  const onDelete = (0, import_react4.useCallback)((id) => {
+    setSelected((prev) => prev.filter((el) => el !== id));
+  }, []);
+  const onSelect = (0, import_react4.useCallback)(
+    (id) => {
+      if (maxCount && selected.length + 1 > maxCount)
+        return;
+      setSelected((prev) => [...prev, id]);
+    },
+    [maxCount, selected]
+  );
+  const toggleItem = (0, import_react4.useCallback)(
+    (id) => {
+      if (selected.includes(id)) {
+        onDelete(id);
+      } else {
+        onSelect(id);
+      }
+    },
+    [onDelete, onSelect, selected]
+  );
+  const setScroll = (0, import_react4.useCallback)((index) => {
+    if (scrollRef.current) {
+      const scrollTop = scrollRef.current.scrollTop;
+      const clientHeight = scrollRef.current.clientHeight;
+      const focusTop = index * OPTION_HEIGHT;
+      if (focusTop < scrollTop) {
+        scrollRef.current.scrollTop = focusTop;
+      } else if (focusTop + OPTION_HEIGHT > scrollTop + clientHeight) {
+        scrollRef.current.scrollTop = focusTop + OPTION_HEIGHT - clientHeight;
+      }
+    }
+  }, []);
+  const handleKeyDown = (0, import_react4.useCallback)(
+    (e) => {
+      var _a;
+      const key = e.key;
+      switch (key) {
+        case "ArrowDown": {
+          e.preventDefault();
+          let newFocus = 0;
+          if (typeof focusIndex === "number") {
+            newFocus = focusIndex + 1 >= options.length ? 0 : focusIndex + 1;
+          }
+          setFocusIndex(newFocus);
+          setScroll(newFocus);
+          break;
+        }
+        case "ArrowUp": {
+          e.preventDefault();
+          let newFocus = 0;
+          if (typeof focusIndex === "number") {
+            newFocus = focusIndex - 1 < 0 ? options.length - 1 : focusIndex - 1;
+          }
+          setFocusIndex(newFocus);
+          setScroll(newFocus);
+          break;
+        }
+        case "Enter":
+          setValue("");
+          if (focusIndex !== null) {
+            toggleItem((_a = filteredOptions[focusIndex]) == null ? void 0 : _a.id);
+          }
+          break;
+        case "Backspace":
+          if (value.length === 0) {
+            setSelected((prev) => prev.slice(0, -1));
+          }
+          break;
+        case "Escape":
+          setOpen(false);
+          break;
+      }
+    },
+    [
+      focusIndex,
+      value.length,
+      setScroll,
+      options.length,
+      toggleItem,
+      filteredOptions
+    ]
+  );
+  (0, import_react4.useEffect)(() => {
+    setFocusIndex(null);
+  }, [open]);
+  (0, import_react4.useEffect)(() => {
+    setFocusIndex(0);
+  }, [filteredOptions]);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_themes.Popover.Root, { open: Boolean(filteredOptions.length) && open, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_themes.Popover.Trigger, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      import_themes6.Grid,
+      {
+        align: "center",
+        className: `tag-selector ${focus ? "focused" : ""}`,
+        columns: "1fr auto",
+        gap: "1",
+        onClick: () => {
+          var _a;
+          return (_a = fieldRef.current) == null ? void 0 : _a.focus();
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+            import_themes2.Flex,
+            {
+              align: "center",
+              gap: "1",
+              maxWidth: "100%",
+              overflow: "hidden",
+              wrap: "wrap",
+              children: [
+                selectedItem.map((item) => {
+                  return tagRender ? tagRender(item) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Badge, { children: [
+                    item.name,
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                      Button,
+                      {
+                        onClick: () => {
+                          onDelete(item.id);
+                        },
+                        variant: "transparent",
+                        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_icons2.Cross1Icon, {})
+                      }
+                    )
+                  ] }, item.id);
+                }),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  AutoSizingInput,
+                  {
+                    onBlur,
+                    onChange: onChangeValue,
+                    onFocus,
+                    onKeyDown: handleKeyDown,
+                    placeholder,
+                    ref: fieldRef,
+                    value
+                  }
+                )
+              ]
+            }
+          ),
+          focus ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_icons2.MagnifyingGlassIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_icons2.ChevronRightIcon, {})
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      import_themes.Popover.Content,
+      {
+        onOpenAutoFocus: (e) => {
+          e.preventDefault();
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          DropdownContainer,
+          {
+            currentItem: filteredOptions[focusIndex || 0],
+            items: filteredOptions,
+            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              import_themes5.ScrollArea,
+              {
+                ref: scrollRef,
+                scrollbars: "vertical",
+                style: { height: OPTION_HEIGHT * 8 },
+                type: "auto",
+                children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_themes2.Flex, { direction: "column", children: filteredOptions.map((item, i) => {
+                  const isSelected = Boolean(
+                    selected.find((el) => el === item.id)
+                  );
+                  const isFocus = i === focusIndex;
+                  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                    Button,
+                    {
+                      onClick: () => {
+                        var _a;
+                        toggleItem(item.id);
+                        (_a = fieldRef.current) == null ? void 0 : _a.focus();
+                      },
+                      onMouseEnter: () => {
+                        setFocusIndex(i);
+                      },
+                      style: {
+                        width: "100%",
+                        background: isFocus ? "var(--accent-a3)" : void 0,
+                        color: "var(--gray-12)",
+                        fontWeight: 400,
+                        boxShadow: "none"
+                      },
+                      variant: isSelected ? "soft" : "outline",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_themes2.Flex, { justify: "between", width: "100%", children: [
+                        item.name,
+                        isSelected ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_icons.CheckIcon, {}) : null
+                      ] })
+                    },
+                    item.id
+                  );
+                }) })
+              }
+            )
+          }
+        )
+      }
+    )
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TagSelector
+});
+//# sourceMappingURL=tag-selector.cjs.map

package/dist/molecules/tag-selector.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/molecules/tag-selector.tsx","../../src/atoms/popover.tsx","../../src/atoms/flex.tsx","../../src/atoms/button.tsx","../../src/atoms/badge.tsx","../../src/icon.ts","../../src/atoms/scroll-area.tsx","../../src/atoms/grid.tsx","../../src/atoms/auto-sizing-input.tsx"],"sourcesContent":["import React, {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport {\n  ChevronRightIcon,\n  Cross1Icon,\n  MagnifyingGlassIcon,\n} from '@radix-ui/react-icons';\nimport { Popover } from '../atoms/popover';\nimport { Flex } from '../atoms/flex';\nimport { Button } from '../atoms/button';\nimport { Badge } from '../atoms/badge';\nimport { CheckIcon } from '../icon';\nimport { ScrollArea } from '../atoms/scroll-area';\nimport { Grid } from '../atoms/grid';\nimport { AutoSizingInput } from '../atoms';\n\ntype ID = string;\ninterface Item {\n  name: string;\n  id: ID;\n}\n\nconst OPTION_HEIGHT = 32;\n\nexport interface TagSelectorProps<T extends Item> {\n  options?: T[];\n  selected?: ID[];\n  placeholder?: string;\n  disabled?: boolean;\n  maxCount?: number;\n  style?: React.CSSProperties;\n\n  onChange?: (selected: ID[]) => void;\n  tagRender?: (item: T) => React.ReactElement;\n  DropdownContainer?: DropdownContainer<T>;\n}\ntype DropdownContainer<T> = (props: {\n  items: T[];\n  children: React.ReactElement;\n  currentItem?: T;\n}) => React.ReactElement;\n\nconst DefaultDropdownContainer = (props: {\n  children: React.ReactElement;\n}): React.ReactElement => {\n  return props.children;\n};\n\nexport function TagSelector<T extends Item>(\n  props: TagSelectorProps<T>\n): React.ReactElement {\n  const {\n    options = [],\n    tagRender,\n    placeholder,\n    maxCount = 0,\n    DropdownContainer = DefaultDropdownContainer,\n  } = props;\n  const [selected, setSelected] = useState<string[]>(props.selected || []);\n  const [value, setValue] = useState<string>('');\n  const [focusIndex, setFocusIndex] = useState<number | null>(null);\n  const [open, setOpen] = useState(false);\n  const [focus, setFocus] = useState(false);\n\n  const fieldRef = useRef<HTMLInputElement>(null);\n  const scrollRef = useRef<HTMLDivElement>(null);\n\n  const closeRef = useRef<number>(0);\n\n  const onFocus = useCallback(() => {\n    clearTimeout(closeRef.current);\n    setFocus(true);\n    setOpen(true);\n  }, []);\n\n  const onBlur = useCallback(() => {\n    closeRef.current = setTimeout(() => {\n      setFocus(false);\n      setOpen(false);\n      setTimeout(() => {\n        setValue('');\n      }, 100);\n    }, 100);\n  }, []);\n\n  const onChangeValue = useCallback<React.ChangeEventHandler<HTMLInputElement>>(\n    (e) => {\n      setValue(e.target.value);\n    },\n    []\n  );\n\n  const filteredOptions = useMemo<T[]>(() => {\n    return options.filter((option) => {\n      return option.name.includes(value);\n    });\n  }, [options, value]);\n\n  const selectedItem = useMemo<T[]>(() => {\n    const result = [] as T[];\n    selected.forEach((id) => {\n      const maybeItem = options.find((option) => option.id === id);\n      if (maybeItem) result.push(maybeItem);\n    });\n    return result;\n  }, [options, selected]);\n\n  const onDelete = useCallback((id: string) => {\n    setSelected((prev) => prev.filter((el) => el !== id));\n  }, []);\n\n  const onSelect = useCallback(\n    (id: string) => {\n      if (maxCount && selected.length + 1 > maxCount) return;\n      setSelected((prev) => [...prev, id]);\n    },\n    [maxCount, selected]\n  );\n\n  const toggleItem = useCallback(\n    (id: string) => {\n      if (selected.includes(id)) {\n        onDelete(id);\n      } else {\n        onSelect(id);\n      }\n    },\n    [onDelete, onSelect, selected]\n  );\n\n  const setScroll = useCallback((index: number): void => {\n    if (scrollRef.current) {\n      const scrollTop = scrollRef.current.scrollTop;\n      const clientHeight = scrollRef.current.clientHeight;\n      const focusTop = index * OPTION_HEIGHT;\n      if (focusTop < scrollTop) {\n        scrollRef.current.scrollTop = focusTop;\n      } else if (focusTop + OPTION_HEIGHT > scrollTop + clientHeight) {\n        scrollRef.current.scrollTop = focusTop + OPTION_HEIGHT - clientHeight;\n      }\n    }\n  }, []);\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      const key = e.key;\n\n      switch (key) {\n        case 'ArrowDown': {\n          e.preventDefault();\n          let newFocus = 0;\n          if (typeof focusIndex === 'number') {\n            newFocus = focusIndex + 1 >= options.length ? 0 : focusIndex + 1;\n          }\n          setFocusIndex(newFocus);\n          setScroll(newFocus);\n          break;\n        }\n\n        case 'ArrowUp': {\n          e.preventDefault();\n          let newFocus = 0;\n          if (typeof focusIndex === 'number') {\n            newFocus = focusIndex - 1 < 0 ? options.length - 1 : focusIndex - 1;\n          }\n          setFocusIndex(newFocus);\n          setScroll(newFocus);\n          break;\n        }\n\n        case 'Enter':\n          setValue('');\n          if (focusIndex !== null) {\n            toggleItem(filteredOptions[focusIndex]?.id);\n          }\n          break;\n\n        case 'Backspace':\n          if (value.length === 0) {\n            setSelected((prev) => prev.slice(0, -1));\n          }\n          break;\n\n        case 'Escape':\n          setOpen(false);\n          break;\n      }\n    },\n    [\n      focusIndex,\n      value.length,\n      setScroll,\n      options.length,\n      toggleItem,\n      filteredOptions,\n    ]\n  );\n\n  useEffect(() => {\n    setFocusIndex(null);\n  }, [open]);\n\n  useEffect(() => {\n    setFocusIndex(0);\n  }, [filteredOptions]);\n\n  return (\n    <Popover.Root open={Boolean(filteredOptions.length) && open}>\n      <Popover.Trigger>\n        <Grid\n          align=\"center\"\n          className={`tag-selector ${focus ? 'focused' : ''}`}\n          columns=\"1fr auto\"\n          gap=\"1\"\n          onClick={() => fieldRef.current?.focus()}\n        >\n          <Flex\n            align=\"center\"\n            gap=\"1\"\n            maxWidth=\"100%\"\n            overflow=\"hidden\"\n            wrap=\"wrap\"\n          >\n            {selectedItem.map((item) => {\n              return tagRender ? (\n                tagRender(item)\n              ) : (\n                <Badge key={item.id}>\n                  {item.name}\n                  <Button\n                    onClick={() => {\n                      onDelete(item.id);\n                    }}\n                    variant=\"transparent\"\n                  >\n                    <Cross1Icon />\n                  </Button>\n                </Badge>\n              );\n            })}\n            <AutoSizingInput\n              onBlur={onBlur}\n              onChange={onChangeValue}\n              onFocus={onFocus}\n              onKeyDown={handleKeyDown}\n              placeholder={placeholder}\n              ref={fieldRef}\n              value={value}\n            />\n          </Flex>\n          {focus ? <MagnifyingGlassIcon /> : <ChevronRightIcon />}\n        </Grid>\n      </Popover.Trigger>\n\n      <Popover.Content\n        onOpenAutoFocus={(e) => {\n          e.preventDefault();\n        }}\n      >\n        <DropdownContainer\n          currentItem={filteredOptions[focusIndex || 0]}\n          items={filteredOptions}\n        >\n          <ScrollArea\n            ref={scrollRef}\n            scrollbars=\"vertical\"\n            style={{ height: OPTION_HEIGHT * 8 }}\n            type=\"auto\"\n          >\n            <Flex direction=\"column\">\n              {filteredOptions.map((item, i) => {\n                const isSelected = Boolean(\n                  selected.find((el) => el === item.id)\n                );\n                const isFocus = i === focusIndex;\n\n                return (\n                  <Button\n                    key={item.id}\n                    onClick={() => {\n                      toggleItem(item.id);\n                      fieldRef.current?.focus();\n                    }}\n                    onMouseEnter={() => {\n                      setFocusIndex(i);\n                    }}\n                    style={{\n                      width: '100%',\n                      background: isFocus ? 'var(--accent-a3)' : undefined,\n                      color: 'var(--gray-12)',\n                      fontWeight: 400,\n                      boxShadow: 'none',\n                    }}\n                    variant={isSelected ? 'soft' : 'outline'}\n                  >\n                    <Flex justify=\"between\" width=\"100%\">\n                      {item.name}\n                      {isSelected ? <CheckIcon /> : null}\n                    </Flex>\n                  </Button>\n                );\n              })}\n            </Flex>\n          </ScrollArea>\n        </DropdownContainer>\n      </Popover.Content>\n    </Popover.Root>\n  );\n}\n","export { Popover } from '@radix-ui/themes';\n","export { Flex, type FlexProps } from '@radix-ui/themes';\n","import {\n  Button as RadixButton,\n  type ButtonProps as RadixButtonProps,\n} from '@radix-ui/themes';\nimport React, { forwardRef, useMemo } from 'react';\n\nexport type ButtonProps = Omit<RadixButtonProps, 'size' | 'variant'> & {\n  size?: 'small' | 'medium' | 'large' | 'largest';\n  variant?: RadixButtonProps['variant'] | 'transparent';\n};\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (props, ref): React.ReactElement => {\n    const { size, style, variant, ...restProps } = props;\n\n    const radixSize = useMemo(() => {\n      switch (size) {\n        case 'small':\n          return '1';\n        case 'medium':\n          return '2';\n        case 'large':\n        case 'largest':\n          return '3';\n        default:\n          return '2';\n      }\n    }, [size]);\n\n    const mergedStyle = useMemo<ButtonProps['style']>(() => {\n      const baseStyle = {\n        background: variant === 'transparent' ? 'transparent' : undefined,\n      };\n      if (size === 'largest')\n        return {\n          ...baseStyle,\n          borderRadius: 'var(--radius-4)',\n          padding: 'var(--space-5)',\n          fontSize: 'var(--font-size-4)',\n          ...style,\n        };\n      return { ...baseStyle, ...style };\n    }, [size, style, variant]);\n\n    const radixVariant = useMemo(() => {\n      if (variant === 'transparent') return 'ghost';\n      return variant;\n    }, [variant]);\n\n    return (\n      <RadixButton\n        style={mergedStyle}\n        variant={radixVariant}\n        {...restProps}\n        ref={ref}\n        size={radixSize}\n      />\n    );\n  }\n);\n\nButton.displayName = 'Button';\n","import {\n  Badge as RadixBadge,\n  type BadgeProps as RadixBadgeProps,\n} from '@radix-ui/themes';\nimport { useMemo, forwardRef } from 'react';\n\nexport type BadgeProps = Omit<RadixBadgeProps, 'color' | 'size'> & {\n  size?: 'small' | 'large';\n  color?: 'error' | 'accent' | 'neutral' | 'success';\n};\n\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(\n  (props: BadgeProps, ref): React.ReactElement => {\n    const { size = 'small', color = 'accent', ...rest } = props;\n\n    const radixSize = useMemo(() => {\n      switch (size) {\n        case 'small':\n          return '1';\n        case 'large':\n          return '3';\n        default:\n          return '1';\n      }\n    }, [size]);\n\n    const radixColor = useMemo(() => {\n      switch (color) {\n        case 'error':\n          return 'red';\n        case 'neutral':\n          return 'gray';\n        case 'success':\n          return 'green';\n        case 'accent':\n        default:\n          return undefined;\n      }\n    }, [color]);\n\n    return (\n      <RadixBadge {...rest} color={radixColor} ref={ref} size={radixSize} />\n    );\n  }\n);\n\nBadge.displayName = 'Badge';\n","export {\n  BookmarkIcon,\n  ExitIcon,\n  InfoCircledIcon,\n  ExclamationTriangleIcon,\n  MagnifyingGlassIcon,\n  DotsHorizontalIcon,\n  ChatBubbleIcon,\n  PlusIcon,\n  BookmarkFilledIcon,\n  MixerHorizontalIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ClipboardIcon,\n  BarChartIcon,\n  PersonIcon,\n  GearIcon,\n  DotsVerticalIcon,\n  Pencil1Icon,\n  Cross1Icon,\n  Link2Icon,\n  ChevronUpIcon,\n  ChevronDownIcon,\n  FileIcon,\n  TrashIcon,\n  DoubleArrowLeftIcon,\n  DoubleArrowRightIcon,\n  GlobeIcon,\n  BackpackIcon,\n  CalendarIcon,\n  CheckIcon,\n  ArchiveIcon,\n} from '@radix-ui/react-icons';\n","export { ScrollArea, type ScrollAreaProps } from '@radix-ui/themes';\n","export { Grid, type GridProps } from '@radix-ui/themes';\n","import type { DetailedHTMLProps } from 'react';\nimport React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nexport interface AutoSizingInputProps\n  extends DetailedHTMLProps<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    HTMLInputElement\n  > {\n  value?: string;\n  onChangeValue?: (value: string) => void;\n  onChange?: React.ChangeEventHandler<HTMLInputElement>;\n}\n\nexport const AutoSizingInput = forwardRef<\n  HTMLInputElement,\n  AutoSizingInputProps\n>(\n  (\n    { value: _value, onChangeValue, onChange, ...rest },\n    ref\n  ): React.ReactNode => {\n    const [value, setValue] = useState(_value);\n    const [width, setWidth] = useState(0);\n    const span = useRef<HTMLSpanElement>(null);\n\n    useEffect(() => {\n      span.current && setWidth(span.current.offsetWidth);\n    }, [value]);\n\n    const changeHandler = useCallback<\n      React.ChangeEventHandler<HTMLInputElement>\n    >(\n      (evt) => {\n        onChange?.(evt);\n        setValue(evt.target.value);\n      },\n      [onChange]\n    );\n\n    useEffect(() => {\n      setValue(_value || '');\n    }, [_value]);\n\n    useEffect(() => {\n      onChangeValue?.(value || '');\n    }, [value, onChangeValue]);\n\n    return (\n      <div className=\"auto-sizing-input wrapper\" style={{ width: width + 24 }}>\n        <input onChange={changeHandler} ref={ref} value={value} {...rest} />\n        <span aria-hidden=\"true\" ref={span}>\n          {value}\n        </span>\n      </div>\n    );\n  }\n);\n\nAutoSizingInput.displayName = 'AutoSizingInput';\n"],"mappings":"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","names":["import_react","import_react_icons","import_themes","import_themes","RadixButton","import_themes","import_react","import_jsx_runtime","RadixBadge","import_themes","import_themes","import_react","import_jsx_runtime","import_jsx_runtime"]}

package/dist/molecules/tag-selector.d.cts

@@ -0,0 +1,26 @@
+import react__default from 'react';
+
+type ID = string;
+interface Item {
+    name: string;
+    id: ID;
+}
+interface TagSelectorProps<T extends Item> {
+    options?: T[];
+    selected?: ID[];
+    placeholder?: string;
+    disabled?: boolean;
+    maxCount?: number;
+    style?: react__default.CSSProperties;
+    onChange?: (selected: ID[]) => void;
+    tagRender?: (item: T) => react__default.ReactElement;
+    DropdownContainer?: DropdownContainer<T>;
+}
+type DropdownContainer<T> = (props: {
+    items: T[];
+    children: react__default.ReactElement;
+    currentItem?: T;
+}) => react__default.ReactElement;
+declare function TagSelector<T extends Item>(props: TagSelectorProps<T>): react__default.ReactElement;
+
+export { TagSelector, type TagSelectorProps };

package/dist/molecules/tag-selector.d.ts

@@ -0,0 +1,26 @@
+import react__default from 'react';
+
+type ID = string;
+interface Item {
+    name: string;
+    id: ID;
+}
+interface TagSelectorProps<T extends Item> {
+    options?: T[];
+    selected?: ID[];
+    placeholder?: string;
+    disabled?: boolean;
+    maxCount?: number;
+    style?: react__default.CSSProperties;
+    onChange?: (selected: ID[]) => void;
+    tagRender?: (item: T) => react__default.ReactElement;
+    DropdownContainer?: DropdownContainer<T>;
+}
+type DropdownContainer<T> = (props: {
+    items: T[];
+    children: react__default.ReactElement;
+    currentItem?: T;
+}) => react__default.ReactElement;
+declare function TagSelector<T extends Item>(props: TagSelectorProps<T>): react__default.ReactElement;
+
+export { TagSelector, type TagSelectorProps };

package/dist/molecules/tag-selector.js

@@ -0,0 +1,66 @@
+import {
+  TagSelector
+} from "../chunk-CGR5CDCB.js";
+import "../chunk-76JGDATZ.js";
+import "../chunk-ILRUXI2E.js";
+import "../chunk-JPIZP2PZ.js";
+import "../chunk-3JRNKBMN.js";
+import "../chunk-HYITAA4J.js";
+import "../chunk-5H3YPCZK.js";
+import "../chunk-FR2GDOU2.js";
+import "../chunk-74DX4CU7.js";
+import "../chunk-OYM4XCHQ.js";
+import "../chunk-YJ7ZFOYL.js";
+import "../chunk-5ZITU5L7.js";
+import "../chunk-365QMK4D.js";
+import "../chunk-YO3BQW6S.js";
+import "../chunk-6IVCARWS.js";
+import "../chunk-6DJOIRMF.js";
+import "../chunk-FPD73OHW.js";
+import "../chunk-ZKZDVS7G.js";
+import "../chunk-MUNMDHRF.js";
+import "../chunk-TVDKGMBI.js";
+import "../chunk-O3T3TM3V.js";
+import "../chunk-XQOL7UBI.js";
+import "../chunk-TULWX7D6.js";
+import "../chunk-SIM6HKVI.js";
+import "../chunk-ZTEJRYCB.js";
+import "../chunk-5AVBYDPB.js";
+import "../chunk-4WFMOFN2.js";
+import "../chunk-E3Z3D4EY.js";
+import "../chunk-ACVANQJ4.js";
+import "../chunk-2DZ2Y3JI.js";
+import "../chunk-QDZS4B6A.js";
+import "../chunk-52MVZ6AN.js";
+import "../chunk-25HMMI7R.js";
+import "../chunk-2CVXGGI5.js";
+import "../chunk-EGEQY3KT.js";
+import "../chunk-WMZAV6PQ.js";
+import "../chunk-IQEEPHOY.js";
+import "../chunk-LHCDPZ5E.js";
+import "../chunk-OHMOP5PV.js";
+import "../chunk-KGLIAFTI.js";
+import "../chunk-Q37G2GS6.js";
+import "../chunk-VTJZMOSP.js";
+import "../chunk-RTJS3BWZ.js";
+import "../chunk-ZZXCFJOT.js";
+import "../chunk-BVBX6IJ3.js";
+import "../chunk-NJ2U2TVS.js";
+import "../chunk-O3DNDMV3.js";
+import "../chunk-3SSSCLJ5.js";
+import "../chunk-EFMOJ6IL.js";
+import "../chunk-YGL6SWKN.js";
+import "../chunk-4Y5BEXVN.js";
+import "../chunk-4B77ZZOP.js";
+import "../chunk-B6XJN6EC.js";
+import "../chunk-UVKNLJDZ.js";
+import "../chunk-MIMJ7LON.js";
+import "../chunk-AW44EUZH.js";
+import "../chunk-J242TTFH.js";
+import "../chunk-EAXUQEO5.js";
+import "../chunk-YJCCE5WP.js";
+import "../chunk-N552FDTV.js";
+export {
+  TagSelector
+};
+//# sourceMappingURL=tag-selector.js.map

package/dist/molecules/tag-selector.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/utils/index.js

@@ -1,10 +1,10 @@
 import "../chunk-DRBRT57F.js";
-import {
-  scrollTo
-} from "../chunk-ZXQZRIRS.js";
 import {
   getCellAlign
 } from "../chunk-A7CXRZIO.js";
+import {
+  scrollTo
+} from "../chunk-ZXQZRIRS.js";
 import "../chunk-N552FDTV.js";
 export {
   getCellAlign,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tipp/ui",
-  "version": "1.1.23",
+  "version": "1.2.0",
   "private": false,
   "sideEffects": false,
   "type": "module",