@helpdice/ui 1.0.1 → 1.0.2

package/esm/search-bar/components/index.js

@@ -0,0 +1,302 @@
+"use client";
+
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _JSXStyle from "../styled-jsx.es.js";
+import { default as Fuse } from 'fuse.js';
+import React, { useEffect, useState } from 'react';
+import { defaultFuseOptions, defaultTheme } from '../config/config';
+import { debounce } from '../utils/utils';
+import Results from './Results';
+import SearchInput from './SearchInput';
+export var DEFAULT_INPUT_DEBOUNCE = 200;
+export var MAX_RESULTS = 10;
+export default function ReactSearchAutocomplete(_ref) {
+  var _ref$items = _ref.items,
+    items = _ref$items === void 0 ? [] : _ref$items,
+    _ref$fuseOptions = _ref.fuseOptions,
+    fuseOptions = _ref$fuseOptions === void 0 ? defaultFuseOptions : _ref$fuseOptions,
+    _ref$inputDebounce = _ref.inputDebounce,
+    inputDebounce = _ref$inputDebounce === void 0 ? DEFAULT_INPUT_DEBOUNCE : _ref$inputDebounce,
+    _ref$onSearch = _ref.onSearch,
+    onSearch = _ref$onSearch === void 0 ? function () {} : _ref$onSearch,
+    _ref$onHover = _ref.onHover,
+    onHover = _ref$onHover === void 0 ? function () {} : _ref$onHover,
+    _ref$onSelect = _ref.onSelect,
+    onSelect = _ref$onSelect === void 0 ? function () {} : _ref$onSelect,
+    _ref$onFocus = _ref.onFocus,
+    onFocus = _ref$onFocus === void 0 ? function () {} : _ref$onFocus,
+    _ref$onClear = _ref.onClear,
+    onClear = _ref$onClear === void 0 ? function () {} : _ref$onClear,
+    _ref$showIcon = _ref.showIcon,
+    showIcon = _ref$showIcon === void 0 ? true : _ref$showIcon,
+    _ref$showClear = _ref.showClear,
+    showClear = _ref$showClear === void 0 ? true : _ref$showClear,
+    _ref$maxResults = _ref.maxResults,
+    maxResults = _ref$maxResults === void 0 ? MAX_RESULTS : _ref$maxResults,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? '' : _ref$placeholder,
+    _ref$autoFocus = _ref.autoFocus,
+    autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus,
+    _ref$styling = _ref.styling,
+    styling = _ref$styling === void 0 ? {} : _ref$styling,
+    _ref$resultStringKeyN = _ref.resultStringKeyName,
+    resultStringKeyName = _ref$resultStringKeyN === void 0 ? 'name' : _ref$resultStringKeyN,
+    _ref$inputSearchStrin = _ref.inputSearchString,
+    inputSearchString = _ref$inputSearchStrin === void 0 ? '' : _ref$inputSearchStrin,
+    formatResult = _ref.formatResult,
+    _ref$showNoResults = _ref.showNoResults,
+    showNoResults = _ref$showNoResults === void 0 ? true : _ref$showNoResults,
+    _ref$showNoResultsTex = _ref.showNoResultsText,
+    showNoResultsText = _ref$showNoResultsTex === void 0 ? 'No results' : _ref$showNoResultsTex,
+    _ref$showItemsOnFocus = _ref.showItemsOnFocus,
+    showItemsOnFocus = _ref$showItemsOnFocus === void 0 ? false : _ref$showItemsOnFocus,
+    _ref$maxLength = _ref.maxLength,
+    maxLength = _ref$maxLength === void 0 ? 0 : _ref$maxLength,
+    className = _ref.className;
+  var theme = _extends({}, defaultTheme, styling);
+  var options = _extends({}, defaultFuseOptions, fuseOptions);
+  var fuse = new Fuse(items, options);
+  fuse.setCollection(items);
+  var _useState = useState(inputSearchString),
+    _useState2 = _slicedToArray(_useState, 2),
+    searchString = _useState2[0],
+    setSearchString = _useState2[1];
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    results = _useState4[0],
+    setResults = _useState4[1];
+  var _useState5 = useState(-1),
+    _useState6 = _slicedToArray(_useState5, 2),
+    highlightedItem = _useState6[0],
+    setHighlightedItem = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    isSearchComplete = _useState8[0],
+    setIsSearchComplete = _useState8[1];
+  var _useState9 = useState(false),
+    _useState10 = _slicedToArray(_useState9, 2),
+    isTyping = _useState10[0],
+    setIsTyping = _useState10[1];
+  var _useState11 = useState(false),
+    _useState12 = _slicedToArray(_useState11, 2),
+    showNoResultsFlag = _useState12[0],
+    setShowNoResultsFlag = _useState12[1];
+  var _useState13 = useState(false),
+    _useState14 = _slicedToArray(_useState13, 2),
+    hasFocus = _useState14[0],
+    setHasFocus = _useState14[1];
+  useEffect(function () {
+    setSearchString(inputSearchString);
+    var timeoutId = setTimeout(function () {
+      return setResults(fuseResults(inputSearchString));
+    }, 0);
+    return function () {
+      return clearTimeout(timeoutId);
+    };
+  }, [inputSearchString]);
+  useEffect(function () {
+    (searchString === null || searchString === void 0 ? void 0 : searchString.length) > 0 && results && (results === null || results === void 0 ? void 0 : results.length) > 0 && setResults(fuseResults(searchString));
+  }, [items]);
+  useEffect(function () {
+    if (showNoResults && searchString.length > 0 && !isTyping && results.length === 0 && !isSearchComplete) {
+      setShowNoResultsFlag(true);
+    } else {
+      setShowNoResultsFlag(false);
+    }
+  }, [isTyping, showNoResults, isSearchComplete, searchString, results]);
+  useEffect(function () {
+    if (showItemsOnFocus && results.length === 0 && searchString.length === 0 && hasFocus) {
+      setResults(items.slice(0, maxResults));
+    }
+  }, [showItemsOnFocus, results, searchString, hasFocus]);
+  useEffect(function () {
+    var handleDocumentClick = function handleDocumentClick() {
+      eraseResults();
+      setHasFocus(false);
+    };
+    document.addEventListener('click', handleDocumentClick);
+    return function () {
+      return document.removeEventListener('click', handleDocumentClick);
+    };
+  }, []);
+  var handleOnFocus = function handleOnFocus(event) {
+    onFocus(event);
+    setHasFocus(true);
+  };
+  var callOnSearch = function callOnSearch(keyword) {
+    var newResults = [];
+    (keyword === null || keyword === void 0 ? void 0 : keyword.length) > 0 && (newResults = fuseResults(keyword));
+    setResults(newResults);
+    onSearch(keyword, newResults);
+    setIsTyping(false);
+  };
+  var handleOnSearch = React.useCallback(inputDebounce > 0 ? debounce(function (keyword) {
+    return callOnSearch(keyword);
+  }, inputDebounce) : function (keyword) {
+    return callOnSearch(keyword);
+  }, [items]);
+  var handleOnClick = function handleOnClick(result) {
+    eraseResults();
+    onSelect(result);
+    setSearchString(result[resultStringKeyName]);
+    setHighlightedItem(0);
+  };
+  var fuseResults = function fuseResults(keyword) {
+    return fuse.search(keyword, {
+      limit: maxResults
+    }).map(function (result) {
+      return _extends({}, result.item);
+    }).slice(0, maxResults);
+  };
+  var handleSetSearchString = function handleSetSearchString(_ref2) {
+    var target = _ref2.target;
+    var keyword = target.value;
+    setSearchString(keyword);
+    handleOnSearch(keyword);
+    setIsTyping(true);
+    if (isSearchComplete) {
+      setIsSearchComplete(false);
+    }
+  };
+  var eraseResults = function eraseResults() {
+    setResults([]);
+    setIsSearchComplete(true);
+  };
+  var handleSetHighlightedItem = function handleSetHighlightedItem(_ref3) {
+    var index = _ref3.index,
+      event = _ref3.event;
+    var itemIndex = -1;
+    var setValues = function setValues(index) {
+      setHighlightedItem(index);
+      (results === null || results === void 0 ? void 0 : results[index]) && onHover(results[index]);
+    };
+    if (index !== undefined) {
+      setHighlightedItem(index);
+      (results === null || results === void 0 ? void 0 : results[index]) && onHover(results[index]);
+    } else if (event) {
+      switch (event.key) {
+        case 'Enter':
+          if (results.length > 0 && results[highlightedItem]) {
+            event.preventDefault();
+            onSelect(results[highlightedItem]);
+            setSearchString(results[highlightedItem][resultStringKeyName]);
+            onSearch(results[highlightedItem][resultStringKeyName], results);
+          } else {
+            onSearch(searchString, results);
+          }
+          setHighlightedItem(-1);
+          eraseResults();
+          break;
+        case 'ArrowUp':
+          event.preventDefault();
+          itemIndex = highlightedItem > -1 ? highlightedItem - 1 : results.length - 1;
+          setValues(itemIndex);
+          break;
+        case 'ArrowDown':
+          event.preventDefault();
+          itemIndex = highlightedItem < results.length - 1 ? highlightedItem + 1 : -1;
+          setValues(itemIndex);
+          break;
+        default:
+          break;
+      }
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["3512916558", [function (props) {
+      return parseInt(props.theme.height) + 2 + 'px';
+    }, function (props) {
+      return props.theme.border;
+    }, function (props) {
+      return props.theme.borderRadius;
+    }, function (props) {
+      return props.theme.backgroundColor;
+    }, function (props) {
+      return props.theme.color;
+    }, function (props) {
+      return props.theme.fontSize;
+    }, function (props) {
+      return props.theme.fontFamily;
+    }, function (props) {
+      return props.theme.zIndex;
+    }, function (props) {
+      return props.theme.boxShadow;
+    }, function (props) {
+      return props.theme.boxShadow;
+    }, function (props) {
+      return props.theme.boxShadow;
+    }]]]) + " " + "search-bar-wrapper"
+  }, /*#__PURE__*/React.createElement(SearchInput, {
+    searchString: searchString,
+    setSearchString: handleSetSearchString,
+    eraseResults: eraseResults,
+    autoFocus: autoFocus,
+    onFocus: handleOnFocus,
+    onClear: onClear,
+    placeholder: placeholder,
+    showIcon: showIcon,
+    showClear: showClear,
+    setHighlightedItem: handleSetHighlightedItem,
+    maxLength: maxLength
+  }), /*#__PURE__*/React.createElement(Results, {
+    results: results,
+    onClick: handleOnClick,
+    setSearchString: setSearchString,
+    showIcon: showIcon,
+    maxResults: maxResults,
+    resultStringKeyName: resultStringKeyName,
+    formatResult: formatResult,
+    highlightedItem: highlightedItem,
+    setHighlightedItem: handleSetHighlightedItem,
+    showNoResultsFlag: showNoResultsFlag,
+    showNoResultsText: showNoResultsText
+  }), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "3512916558",
+    dynamic: [function (props) {
+      return parseInt(props.theme.height) + 2 + 'px';
+    }, function (props) {
+      return props.theme.border;
+    }, function (props) {
+      return props.theme.borderRadius;
+    }, function (props) {
+      return props.theme.backgroundColor;
+    }, function (props) {
+      return props.theme.color;
+    }, function (props) {
+      return props.theme.fontSize;
+    }, function (props) {
+      return props.theme.fontFamily;
+    }, function (props) {
+      return props.theme.zIndex;
+    }, function (props) {
+      return props.theme.boxShadow;
+    }, function (props) {
+      return props.theme.boxShadow;
+    }, function (props) {
+      return props.theme.boxShadow;
+    }]
+  }, ".__jsx-style-dynamic-selector{position:relative;height:".concat(function (props) {
+    return parseInt(props.theme.height) + 2 + 'px';
+  }, ";}.search-bar-wrapper.__jsx-style-dynamic-selector{position:absolute;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:100%;border:").concat(function (props) {
+    return props.theme.border;
+  }, ";border-radius:").concat(function (props) {
+    return props.theme.borderRadius;
+  }, ";background-color:").concat(function (props) {
+    return props.theme.backgroundColor;
+  }, ";color:").concat(function (props) {
+    return props.theme.color;
+  }, ";font-size:").concat(function (props) {
+    return props.theme.fontSize;
+  }, ";font-family:").concat(function (props) {
+    return props.theme.fontFamily;
+  }, ";z-index:").concat(function (props) {
+    return props.theme.zIndex;
+  }, ";}.search-bar-wrapper.__jsx-style-dynamic-selector:hover{box-shadow:").concat(function (props) {
+    return props.theme.boxShadow;
+  }, ";}.search-bar-wrapper.__jsx-style-dynamic-selector:active{box-shadow:").concat(function (props) {
+    return props.theme.boxShadow;
+  }, ";}.search-bar-wrapper.__jsx-style-dynamic-selector:focus-within{box-shadow:").concat(function (props) {
+    return props.theme.boxShadow;
+  }, ";}")));
+}

package/esm/search-bar/config/config.js

@@ -0,0 +1,26 @@
+var defaultTheme = {
+  height: '44px',
+  border: '1px solid #dfe1e5',
+  borderRadius: '24px',
+  backgroundColor: 'white',
+  boxShadow: 'rgba(32, 33, 36, 0.28) 0px 1px 6px 0px',
+  hoverBackgroundColor: '#eee',
+  color: '#212121',
+  fontSize: '16px',
+  fontFamily: 'Arial',
+  iconColor: 'grey',
+  lineColor: 'rgb(232, 234, 237)',
+  placeholderColor: 'grey',
+  zIndex: 0,
+  clearIconMargin: '3px 14px 0 0',
+  searchIconMargin: '0 0 0 16px'
+};
+var defaultFuseOptions = {
+  shouldSort: true,
+  threshold: 0.6,
+  location: 0,
+  distance: 100,
+  minMatchCharLength: 1,
+  keys: ['name']
+};
+export { defaultTheme, defaultFuseOptions };

package/esm/search-bar/index.js

@@ -0,0 +1,2 @@
+import SearchAutocomplete from './components';
+export default SearchAutocomplete;

package/esm/search-bar/utils/utils.js

@@ -0,0 +1,14 @@
+export function debounce(func, wait, immediate) {
+  var timeout;
+  return function () {
+    var context = this;
+    var args = arguments;
+    var later = function later() {
+      timeout = null;
+      if (!immediate) func.apply(context, args);
+    };
+    if (immediate && !timeout) func.apply(context, args);
+    timeout && clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+  };
+}

package/esm/select/index.d.ts

@@ -0,0 +1,9 @@
+import Select from "./select";
+import SelectOption from "./select-option";
+export type SelectComponentType = typeof Select & {
+    Option: typeof SelectOption;
+};
+export type { SelectProps, SelectTypes, SelectRef } from "./select";
+export type { SelectOptionProps } from "./select-option";
+declare const _default: SelectComponentType;
+export default _default;

package/esm/select/index.js

@@ -0,0 +1,4 @@
+import Select from './select';
+import SelectOption from './select-option';
+Select.Option = SelectOption;
+export default Select;

package/esm/select/select-context.d.ts

@@ -0,0 +1,11 @@
+import React, { MutableRefObject } from 'react';
+export interface SelectConfig {
+    value?: string | string[];
+    updateValue?: (next: string | undefined) => unknown;
+    visible?: boolean;
+    updateVisible?: (next: boolean) => unknown;
+    disableAll?: boolean;
+    ref?: MutableRefObject<HTMLElement | null>;
+}
+export declare const SelectContext: React.Context<SelectConfig>;
+export declare const useSelectContext: () => SelectConfig;

package/esm/select/select-context.js

@@ -0,0 +1,9 @@
+import React from 'react';
+var defaultContext = {
+  visible: false,
+  disableAll: false
+};
+export var SelectContext = /*#__PURE__*/React.createContext(defaultContext);
+export var useSelectContext = function useSelectContext() {
+  return React.useContext(SelectContext);
+};

package/esm/select/select-dropdown.d.ts

@@ -0,0 +1,14 @@
+import React, { CSSProperties } from 'react';
+interface Props {
+    visible: boolean;
+    className?: string;
+    dropdownStyle?: CSSProperties;
+    disableMatchWidth?: boolean;
+    getPopupContainer?: () => HTMLElement | null;
+}
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type SelectDropdownProps = Props & NativeAttrs;
+declare const SelectDropdown: React.ForwardRefExoticComponent<Props & NativeAttrs & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement | null>>;
+export default SelectDropdown;

package/esm/select/select-dropdown.js

@@ -0,0 +1,41 @@
+"use client";
+
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useImperativeHandle, useRef } from 'react';
+import useTheme from '../use-theme';
+import { useSelectContext } from './select-context';
+import Dropdown from '../shared/dropdown';
+import useClasses from '../use-classes';
+var SelectDropdown = /*#__PURE__*/React.forwardRef(function (_ref, dropdownRef) {
+  var visible = _ref.visible,
+    children = _ref.children,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    _ref$dropdownStyle = _ref.dropdownStyle,
+    dropdownStyle = _ref$dropdownStyle === void 0 ? {} : _ref$dropdownStyle,
+    disableMatchWidth = _ref.disableMatchWidth,
+    getPopupContainer = _ref.getPopupContainer;
+  var theme = useTheme();
+  var internalDropdownRef = useRef(null);
+  var _useSelectContext = useSelectContext(),
+    ref = _useSelectContext.ref;
+  var classes = useClasses('select-dropdown', className);
+  useImperativeHandle(dropdownRef, function () {
+    return internalDropdownRef.current;
+  });
+  return /*#__PURE__*/React.createElement(Dropdown, {
+    parent: ref,
+    visible: visible,
+    disableMatchWidth: disableMatchWidth,
+    getPopupContainer: getPopupContainer
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: internalDropdownRef,
+    style: dropdownStyle,
+    className: _JSXStyle.dynamic([["2782510679", [theme.layout.radius, theme.expressiveness.shadowLarge, theme.palette.background]]]) + " " + (classes || "")
+  }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2782510679",
+    dynamic: [theme.layout.radius, theme.expressiveness.shadowLarge, theme.palette.background]
+  }, ".select-dropdown.__jsx-style-dynamic-selector{border-radius:".concat(theme.layout.radius, ";box-shadow:").concat(theme.expressiveness.shadowLarge, ";background-color:").concat(theme.palette.background, ";max-height:17em;overflow-y:auto;overflow-anchor:none;padding:0.38em 0;-webkit-scroll-behavior:smooth;-moz-scroll-behavior:smooth;-ms-scroll-behavior:smooth;scroll-behavior:smooth;}"))));
+});
+SelectDropdown.displayName = 'SelectDropdown';
+export default SelectDropdown;

package/esm/select/select-icon-clear.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface Props {
+    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+}
+declare const MemoSelectIconClear: React.NamedExoticComponent<Props>;
+export default MemoSelectIconClear;

package/esm/select/select-icon-clear.js

@@ -0,0 +1,37 @@
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+import useTheme from '../use-theme';
+var SelectIconClear = function SelectIconClear(_ref) {
+  var onClick = _ref.onClick;
+  var theme = useTheme();
+  var clickHandler = function clickHandler(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    event.nativeEvent.stopImmediatePropagation();
+    onClick && onClick(event);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    onClick: clickHandler,
+    className: _JSXStyle.dynamic([["1984024521", [theme.palette.accents_3, theme.palette.foreground]]]) + " " + "clear-icon"
+  }, /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 24 24",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    fill: "none",
+    shapeRendering: "geometricPrecision",
+    className: _JSXStyle.dynamic([["1984024521", [theme.palette.accents_3, theme.palette.foreground]]])
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M18 6L6 18",
+    className: _JSXStyle.dynamic([["1984024521", [theme.palette.accents_3, theme.palette.foreground]]])
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M6 6l12 12",
+    className: _JSXStyle.dynamic([["1984024521", [theme.palette.accents_3, theme.palette.foreground]]])
+  })), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "1984024521",
+    dynamic: [theme.palette.accents_3, theme.palette.foreground]
+  }, ".clear-icon.__jsx-style-dynamic-selector{padding:0 0 0 0.5em;margin:0;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;cursor:pointer;box-sizing:border-box;-webkit-transition:color 150ms ease 0s;transition:color 150ms ease 0s;color:".concat(theme.palette.accents_3, ";visibility:visible;opacity:1;}.clear-icon.__jsx-style-dynamic-selector:hover{color:").concat(theme.palette.foreground, ";}svg.__jsx-style-dynamic-selector{color:currentColor;width:1em;height:1em;}")));
+};
+var MemoSelectIconClear = /*#__PURE__*/React.memo(SelectIconClear);
+export default MemoSelectIconClear;

package/esm/select/select-icon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const SelectIcon: React.NamedExoticComponent<object>;
+export default SelectIcon;

package/esm/select/select-icon.js

@@ -0,0 +1,21 @@
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+var SelectIconComponent = function SelectIconComponent() {
+  return /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 24 24",
+    strokeWidth: "1",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    fill: "none",
+    shapeRendering: "geometricPrecision",
+    className: "jsx-2742933678"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M6 9l6 6 6-6",
+    className: "jsx-2742933678"
+  }), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2742933678"
+  }, "svg.jsx-2742933678{color:inherit;stroke:currentColor;-webkit-transition:all 200ms ease;transition:all 200ms ease;width:1.214em;height:1.214em;}"));
+};
+SelectIconComponent.displayName = 'GeistSelectIcon';
+var SelectIcon = /*#__PURE__*/React.memo(SelectIconComponent);
+export default SelectIcon;

package/esm/select/select-input.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export type SelectInputProps = {
+    visible: boolean;
+    onBlur: () => void;
+    onFocus: () => void;
+};
+declare const SelectInput: React.ForwardRefExoticComponent<SelectInputProps & React.RefAttributes<HTMLInputElement | null>>;
+export default SelectInput;

package/esm/select/select-input.js

@@ -0,0 +1,35 @@
+"use client";
+
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useEffect, useImperativeHandle, useRef } from 'react';
+var SelectInput = /*#__PURE__*/React.forwardRef(function (_ref, inputRef) {
+  var visible = _ref.visible,
+    onBlur = _ref.onBlur,
+    onFocus = _ref.onFocus;
+  var ref = useRef(null);
+  useImperativeHandle(inputRef, function () {
+    return ref.current;
+  });
+  useEffect(function () {
+    if (visible) {
+      var _ref$current;
+      (_ref$current = ref.current) === null || _ref$current === void 0 || _ref$current.focus();
+    }
+  }, [visible]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", {
+    ref: ref,
+    type: "search",
+    role: "combobox",
+    "aria-haspopup": "listbox",
+    readOnly: true,
+    unselectable: "on",
+    "aria-expanded": visible,
+    onBlur: onBlur,
+    onFocus: onFocus,
+    className: "jsx-2813108835"
+  }), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2813108835"
+  }, "input.jsx-2813108835{position:fixed;top:-10000px;left:-10000px;opacity:0;z-index:-1;width:0;height:0;padding:0;font-size:0;border:none;}"));
+});
+SelectInput.displayName = 'GeistSelectInput';
+export default SelectInput;

package/esm/select/select-multiple-value.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface Props {
+    disabled: boolean;
+    onClear: (() => void) | null;
+}
+declare const SelectMultipleValue: React.FC<React.PropsWithChildren<Props>>;
+export default SelectMultipleValue;

package/esm/select/select-multiple-value.js

@@ -0,0 +1,21 @@
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+import useTheme from '../use-theme';
+import Grid from '../grid';
+import SelectClearIcon from './select-icon-clear';
+var SelectMultipleValue = function SelectMultipleValue(_ref) {
+  var disabled = _ref.disabled,
+    onClear = _ref.onClear,
+    children = _ref.children;
+  var theme = useTheme();
+  return /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["3357578496", [theme.layout.radius, theme.palette.accents_2, disabled ? theme.palette.accents_4 : theme.palette.accents_6]]]) + " " + "item"
+  }, children, !!onClear && /*#__PURE__*/React.createElement(SelectClearIcon, {
+    onClick: onClear
+  })), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "3357578496",
+    dynamic: [theme.layout.radius, theme.palette.accents_2, disabled ? theme.palette.accents_4 : theme.palette.accents_6]
+  }, ".item.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;justify-items:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:1;padding:0 0.5em;font-size:var(--select-font-size);height:calc(var(--select-font-size) * 2);border-radius:".concat(theme.layout.radius, ";background-color:").concat(theme.palette.accents_2, ";color:").concat(disabled ? theme.palette.accents_4 : theme.palette.accents_6, ";}.item.__jsx-style-dynamic-selector>div:not(.clear-icon),.item.__jsx-style-dynamic-selector>div:not(.clear-icon):hover{border-radius:0;background-color:transparent;padding:0;margin:0;color:inherit;}")));
+};
+SelectMultipleValue.displayName = 'GeistSelectMultipleValue';
+export default SelectMultipleValue;

package/esm/select/select-option.d.ts

@@ -0,0 +1,47 @@
+import React from 'react';
+interface Props {
+    value?: string;
+    disabled?: boolean;
+    className?: string;
+    divider?: boolean;
+    label?: boolean;
+    preventAllEvents?: boolean;
+}
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type SelectOptionProps = Props & NativeAttrs;
+declare const SelectOption: React.ForwardRefExoticComponent<Props & NativeAttrs & {
+    children?: React.ReactNode;
+} & {
+    width?: string | number | undefined;
+    height?: string | number | undefined;
+    padding?: string | number | undefined;
+    margin?: string | number | undefined;
+    w?: string | number | undefined;
+    h?: string | number | undefined;
+    paddingLeft?: string | number | undefined;
+    paddingRight?: string | number | undefined;
+    paddingTop?: string | number | undefined;
+    paddingBottom?: string | number | undefined;
+    pl?: string | number | undefined;
+    pr?: string | number | undefined;
+    pt?: string | number | undefined;
+    pb?: string | number | undefined;
+    marginLeft?: string | number | undefined;
+    marginRight?: string | number | undefined;
+    marginTop?: string | number | undefined;
+    marginBottom?: string | number | undefined;
+    ml?: string | number | undefined;
+    mr?: string | number | undefined;
+    mt?: string | number | undefined;
+    mb?: string | number | undefined;
+    px?: string | number | undefined;
+    py?: string | number | undefined;
+    mx?: string | number | undefined;
+    my?: string | number | undefined;
+    font?: string | number | undefined;
+    unit?: string | undefined;
+    scale?: number | undefined;
+    children?: any;
+    className?: string | undefined;
+} & React.InputHTMLAttributes<any> & React.RefAttributes<unknown>>;
+export default SelectOption;