@helpdice/ui 1.0.1 → 1.0.2

package/esm/select/select-option.js

@@ -0,0 +1,86 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["value", "className", "children", "disabled", "divider", "label", "preventAllEvents"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useMemo } from 'react';
+import useTheme from '../use-theme';
+import { useSelectContext } from './select-context';
+import useWarning from '../utils/use-warning';
+import Ellipsis from '../shared/ellipsis';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+var SelectOptionComponent = function SelectOptionComponent(_ref) {
+  var identValue = _ref.value,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    children = _ref.children,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$divider = _ref.divider,
+    divider = _ref$divider === void 0 ? false : _ref$divider,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? false : _ref$label,
+    _ref$preventAllEvents = _ref.preventAllEvents,
+    preventAllEvents = _ref$preventAllEvents === void 0 ? false : _ref$preventAllEvents,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var theme = useTheme();
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES;
+  var _useSelectContext = useSelectContext(),
+    updateValue = _useSelectContext.updateValue,
+    value = _useSelectContext.value,
+    disableAll = _useSelectContext.disableAll;
+  var isDisabled = useMemo(function () {
+    return disabled || disableAll;
+  }, [disabled, disableAll]);
+  var isLabel = useMemo(function () {
+    return label || divider;
+  }, [label, divider]);
+  var classes = useClasses('option', {
+    divider: divider,
+    label: label
+  }, className);
+  if (!isLabel && identValue === undefined) {
+    useWarning('The props "value" is required.', 'Select Option');
+  }
+  var selected = useMemo(function () {
+    if (!value) return false;
+    if (typeof value === 'string') {
+      return identValue === value;
+    }
+    return value.includes("".concat(identValue));
+  }, [identValue, value]);
+  var bgColor = useMemo(function () {
+    if (isDisabled) return theme.palette.accents_1;
+    return selected ? theme.palette.accents_2 : theme.palette.background;
+  }, [selected, isDisabled, theme.palette]);
+  var hoverBgColor = useMemo(function () {
+    if (isDisabled || isLabel || selected) return bgColor;
+    return theme.palette.accents_1;
+  }, [selected, isDisabled, theme.palette, isLabel, bgColor]);
+  var color = useMemo(function () {
+    if (isDisabled) return theme.palette.accents_4;
+    return selected ? theme.palette.foreground : theme.palette.accents_5;
+  }, [selected, isDisabled, theme.palette]);
+  var clickHandler = function clickHandler(event) {
+    if (preventAllEvents) return;
+    event.stopPropagation();
+    event.nativeEvent.stopImmediatePropagation();
+    event.preventDefault();
+    if (isDisabled || isLabel) return;
+    updateValue && updateValue(identValue);
+  };
+  return /*#__PURE__*/React.createElement("div", _extends({
+    onClick: clickHandler
+  }, props, {
+    className: _JSXStyle.dynamic([["199367556", [bgColor, color, isDisabled ? 'not-allowed' : 'pointer', SCALES.font(0.75), SCALES.width(1, '100%'), SCALES.height(2.25), SCALES.pt(0), SCALES.pr(0.667), SCALES.pb(0), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBgColor, theme.palette.accents_7, theme.palette.border, SCALES.width(1, '100%'), SCALES.height(1, 0), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0.5), SCALES.mr(0), SCALES.mb(0.5), SCALES.ml(0), theme.palette.accents_7, theme.palette.border, SCALES.font(0.875), SCALES.width(1, '100%')]]]) + " " + (props && props.className != null && props.className || classes || "")
+  }), /*#__PURE__*/React.createElement(Ellipsis, {
+    height: SCALES.height(2.25)
+  }, children), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "199367556",
+    dynamic: [bgColor, color, isDisabled ? 'not-allowed' : 'pointer', SCALES.font(0.75), SCALES.width(1, '100%'), SCALES.height(2.25), SCALES.pt(0), SCALES.pr(0.667), SCALES.pb(0), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBgColor, theme.palette.accents_7, theme.palette.border, SCALES.width(1, '100%'), SCALES.height(1, 0), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0.5), SCALES.mr(0), SCALES.mb(0.5), SCALES.ml(0), theme.palette.accents_7, theme.palette.border, SCALES.font(0.875), SCALES.width(1, '100%')]
+  }, ".option.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;max-width:100%;box-sizing:border-box;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-weight:normal;background-color:".concat(bgColor, ";color:").concat(color, ";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:0;cursor:").concat(isDisabled ? 'not-allowed' : 'pointer', ";-webkit-transition:background 0.2s ease 0s,border-color 0.2s ease 0s;transition:background 0.2s ease 0s,border-color 0.2s ease 0s;--select-font-size:").concat(SCALES.font(0.75), ";font-size:var(--select-font-size);width:").concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(2.25), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0.667), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0.667), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.option.__jsx-style-dynamic-selector:hover{background-color:").concat(hoverBgColor, ";color:").concat(theme.palette.accents_7, ";}.divider.__jsx-style-dynamic-selector{line-height:0;overflow:hidden;border-top:1px solid ").concat(theme.palette.border, ";width:").concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(1, 0), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0.5), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0.5), " ").concat(SCALES.ml(0), ";}.label.__jsx-style-dynamic-selector{color:").concat(theme.palette.accents_7, ";border-bottom:1px solid ").concat(theme.palette.border, ";text-transform:capitalize;cursor:default;font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, '100%'), ";font-weight:500;}")));
+};
+SelectOptionComponent.displayName = 'SelectOption';
+var SelectOption = withScale(SelectOptionComponent);
+export default SelectOption;

package/esm/select/select.d.ts

@@ -0,0 +1,62 @@
+import React, { CSSProperties } from 'react';
+import { NormalTypes } from "../utils/prop-types";
+export type SelectRef = {
+    focus: () => void;
+    blur: () => void;
+    scrollTo?: (options?: ScrollToOptions) => void;
+};
+export type SelectTypes = NormalTypes;
+interface Props {
+    disabled?: boolean;
+    type?: SelectTypes;
+    value?: string | string[];
+    initialValue?: string | string[];
+    placeholder?: React.ReactNode | string;
+    icon?: React.ComponentType;
+    onChange?: (value: string | string[]) => void;
+    pure?: boolean;
+    multiple?: boolean;
+    clearable?: boolean;
+    className?: string;
+    dropdownClassName?: string;
+    dropdownStyle?: CSSProperties;
+    disableMatchWidth?: boolean;
+    onDropdownVisibleChange?: (visible: boolean) => void;
+    getPopupContainer?: () => HTMLElement | null;
+}
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type SelectProps = Props & NativeAttrs;
+declare const Select: React.ForwardRefExoticComponent<Pick<Props & NativeAttrs & React.RefAttributes<SelectRef> & {
+    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>, "type" | "font" | "unit" | "min" | "max" | "children" | "form" | "slot" | "style" | "title" | "pattern" | "className" | "icon" | "onClick" | "disabled" | "width" | "height" | "padding" | "margin" | "w" | "h" | "paddingLeft" | "paddingRight" | "paddingTop" | "paddingBottom" | "pl" | "pr" | "pt" | "pb" | "marginLeft" | "marginRight" | "marginTop" | "marginBottom" | "ml" | "mr" | "mt" | "mb" | "px" | "py" | "mx" | "my" | "scale" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "enterKeyHint" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "list" | "maxLength" | "minLength" | "multiple" | "name" | "placeholder" | "readOnly" | "required" | "size" | "src" | "step" | "value" | "onChange" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "initialValue" | "clearable" | "key" | "disableMatchWidth" | "getPopupContainer" | "dropdownStyle" | "dropdownClassName" | "pure" | "onDropdownVisibleChange"> & React.RefAttributes<unknown>>;
+export default Select;

package/esm/select/select.js

@@ -0,0 +1,211 @@
+"use client";
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "type", "disabled", "initialValue", "value", "icon", "onChange", "pure", "multiple", "clearable", "placeholder", "className", "dropdownClassName", "dropdownStyle", "disableMatchWidth", "getPopupContainer", "onDropdownVisibleChange"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import useTheme from '../use-theme';
+import useCurrentState from '../utils/use-current-state';
+import { pickChildByProps } from '../utils/collections';
+import SelectIcon from './select-icon';
+import SelectDropdown from './select-dropdown';
+import SelectMultipleValue from './select-multiple-value';
+import Grid from '../grid';
+import { SelectContext } from './select-context';
+import { getColors } from './styles';
+import Ellipsis from '../shared/ellipsis';
+import SelectInput from './select-input';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+var SelectComponent = /*#__PURE__*/React.forwardRef(function (_ref, selectRef) {
+  var children = _ref.children,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'default' : _ref$type,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    init = _ref.initialValue,
+    customValue = _ref.value,
+    _ref$icon = _ref.icon,
+    Icon = _ref$icon === void 0 ? SelectIcon : _ref$icon,
+    onChange = _ref.onChange,
+    _ref$pure = _ref.pure,
+    pure = _ref$pure === void 0 ? false : _ref$pure,
+    _ref$multiple = _ref.multiple,
+    multiple = _ref$multiple === void 0 ? false : _ref$multiple,
+    _ref$clearable = _ref.clearable,
+    clearable = _ref$clearable === void 0 ? true : _ref$clearable,
+    placeholder = _ref.placeholder,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    dropdownClassName = _ref.dropdownClassName,
+    dropdownStyle = _ref.dropdownStyle,
+    _ref$disableMatchWidt = _ref.disableMatchWidth,
+    disableMatchWidth = _ref$disableMatchWidt === void 0 ? false : _ref$disableMatchWidt,
+    getPopupContainer = _ref.getPopupContainer,
+    _ref$onDropdownVisibl = _ref.onDropdownVisibleChange,
+    onDropdownVisibleChange = _ref$onDropdownVisibl === void 0 ? function () {} : _ref$onDropdownVisibl,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var theme = useTheme();
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES;
+  var ref = useRef(null);
+  var inputRef = useRef(null);
+  var dropdownRef = useRef(null);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    visible = _useState2[0],
+    setVisible = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    selectFocus = _useState4[0],
+    setSelectFocus = _useState4[1];
+  var _useCurrentState = useCurrentState(function () {
+      if (!multiple) return init;
+      if (Array.isArray(init)) return init;
+      return typeof init === 'undefined' ? [] : [init];
+    }),
+    _useCurrentState2 = _slicedToArray(_useCurrentState, 3),
+    value = _useCurrentState2[0],
+    setValue = _useCurrentState2[1],
+    valueRef = _useCurrentState2[2];
+  var isEmpty = useMemo(function () {
+    if (!Array.isArray(value)) return !value;
+    return value.length === 0;
+  }, [value]);
+  var _useMemo = useMemo(function () {
+      return getColors(theme.palette, type);
+    }, [theme.palette, type]),
+    border = _useMemo.border,
+    borderActive = _useMemo.borderActive,
+    iconBorder = _useMemo.iconBorder,
+    placeholderColor = _useMemo.placeholderColor;
+  var updateVisible = function updateVisible(next) {
+    onDropdownVisibleChange(next);
+    setVisible(next);
+  };
+  var updateValue = function updateValue(next) {
+    setValue(function (last) {
+      if (!Array.isArray(last)) return next;
+      if (!last.includes(next)) return [].concat(_toConsumableArray(last), [next]);
+      return last.filter(function (item) {
+        return item !== next;
+      });
+    });
+    onChange && onChange(valueRef.current);
+    if (!multiple) {
+      updateVisible(false);
+    }
+  };
+  var initialValue = useMemo(function () {
+    return {
+      value: value,
+      visible: visible,
+      updateValue: updateValue,
+      updateVisible: updateVisible,
+      ref: ref,
+      disableAll: disabled
+    };
+  }, [visible, disabled, ref, value, multiple]);
+  var clickHandler = function clickHandler(event) {
+    event.stopPropagation();
+    event.nativeEvent.stopImmediatePropagation();
+    event.preventDefault();
+    if (disabled) return;
+    updateVisible(!visible);
+    event.preventDefault();
+  };
+  var mouseDownHandler = function mouseDownHandler(event) {
+    /* istanbul ignore next */
+    if (visible) {
+      event.preventDefault();
+    }
+  };
+  useEffect(function () {
+    if (customValue === undefined) return;
+    setValue(customValue);
+  }, [customValue]);
+  useImperativeHandle(selectRef, function () {
+    return {
+      focus: function focus() {
+        var _inputRef$current;
+        return (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+      },
+      blur: function blur() {
+        var _inputRef$current2;
+        return (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.blur();
+      },
+      scrollTo: function scrollTo(options) {
+        var _dropdownRef$current;
+        return (_dropdownRef$current = dropdownRef.current) === null || _dropdownRef$current === void 0 ? void 0 : _dropdownRef$current.scrollTo(options);
+      }
+    };
+  }, [inputRef, dropdownRef]);
+  var selectedChild = useMemo(function () {
+    var _pickChildByProps = pickChildByProps(children, 'value', value),
+      _pickChildByProps2 = _slicedToArray(_pickChildByProps, 2),
+      optionChildren = _pickChildByProps2[1];
+    return React.Children.map(optionChildren, function (child) {
+      if (! /*#__PURE__*/React.isValidElement(child)) return null;
+      var el = /*#__PURE__*/React.cloneElement(child); // { preventAllEvents: true }
+      if (!multiple) return el;
+      return /*#__PURE__*/React.createElement(SelectMultipleValue, {
+        disabled: disabled,
+        onClear: clearable ? function () {
+          return updateValue(child.props.value);
+        } : null
+      }, el);
+    });
+  }, [value, children, multiple]);
+  var onInputBlur = function onInputBlur() {
+    updateVisible(false);
+    setSelectFocus(false);
+  };
+  var classes = useClasses('select', {
+    active: selectFocus || visible,
+    multiple: multiple
+  }, className);
+  return /*#__PURE__*/React.createElement(SelectContext.Provider, {
+    value: initialValue
+  }, /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref,
+    onClick: clickHandler,
+    onMouseDown: mouseDownHandler
+  }, props, {
+    className: _JSXStyle.dynamic([["3282295248", [disabled ? 'not-allowed' : 'pointer', border, theme.layout.radius, disabled ? theme.palette.accents_1 : theme.palette.background, SCALES.font(0.875), SCALES.height(2.25), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0.334), SCALES.pb(0), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.334), SCALES.pr(0.334), SCALES.pb(0.334), SCALES.pl(0.667), disabled ? theme.palette.border : borderActive, disabled ? theme.palette.accents_5 : borderActive, disabled ? theme.palette.accents_4 : theme.palette.foreground, placeholderColor, theme.layout.gapQuarter, visible ? '180' : '0', iconBorder]]]) + " " + (props && props.className != null && props.className || classes || "")
+  }), /*#__PURE__*/React.createElement(SelectInput, {
+    ref: inputRef,
+    visible: visible,
+    onBlur: onInputBlur,
+    onFocus: function onFocus() {
+      return setSelectFocus(true);
+    }
+  }), isEmpty && /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["3282295248", [disabled ? 'not-allowed' : 'pointer', border, theme.layout.radius, disabled ? theme.palette.accents_1 : theme.palette.background, SCALES.font(0.875), SCALES.height(2.25), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0.334), SCALES.pb(0), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.334), SCALES.pr(0.334), SCALES.pb(0.334), SCALES.pl(0.667), disabled ? theme.palette.border : borderActive, disabled ? theme.palette.accents_5 : borderActive, disabled ? theme.palette.accents_4 : theme.palette.foreground, placeholderColor, theme.layout.gapQuarter, visible ? '180' : '0', iconBorder]]]) + " " + "value placeholder"
+  }, /*#__PURE__*/React.createElement(Ellipsis, {
+    height: "var(--select-height)"
+  }, placeholder)), value && !multiple && /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["3282295248", [disabled ? 'not-allowed' : 'pointer', border, theme.layout.radius, disabled ? theme.palette.accents_1 : theme.palette.background, SCALES.font(0.875), SCALES.height(2.25), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0.334), SCALES.pb(0), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.334), SCALES.pr(0.334), SCALES.pb(0.334), SCALES.pl(0.667), disabled ? theme.palette.border : borderActive, disabled ? theme.palette.accents_5 : borderActive, disabled ? theme.palette.accents_4 : theme.palette.foreground, placeholderColor, theme.layout.gapQuarter, visible ? '180' : '0', iconBorder]]]) + " " + "value"
+  }, selectedChild), value && multiple && /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 0.5
+  }, selectedChild), /*#__PURE__*/React.createElement(SelectDropdown, {
+    ref: dropdownRef,
+    visible: visible,
+    className: dropdownClassName,
+    dropdownStyle: dropdownStyle,
+    disableMatchWidth: disableMatchWidth,
+    getPopupContainer: getPopupContainer
+  }, children), !pure && /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["3282295248", [disabled ? 'not-allowed' : 'pointer', border, theme.layout.radius, disabled ? theme.palette.accents_1 : theme.palette.background, SCALES.font(0.875), SCALES.height(2.25), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0.334), SCALES.pb(0), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.334), SCALES.pr(0.334), SCALES.pb(0.334), SCALES.pl(0.667), disabled ? theme.palette.border : borderActive, disabled ? theme.palette.accents_5 : borderActive, disabled ? theme.palette.accents_4 : theme.palette.foreground, placeholderColor, theme.layout.gapQuarter, visible ? '180' : '0', iconBorder]]]) + " " + "icon"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    className: _JSXStyle.dynamic([["3282295248", [disabled ? 'not-allowed' : 'pointer', border, theme.layout.radius, disabled ? theme.palette.accents_1 : theme.palette.background, SCALES.font(0.875), SCALES.height(2.25), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0.334), SCALES.pb(0), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.334), SCALES.pr(0.334), SCALES.pb(0.334), SCALES.pl(0.667), disabled ? theme.palette.border : borderActive, disabled ? theme.palette.accents_5 : borderActive, disabled ? theme.palette.accents_4 : theme.palette.foreground, placeholderColor, theme.layout.gapQuarter, visible ? '180' : '0', iconBorder]]])
+  })), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "3282295248",
+    dynamic: [disabled ? 'not-allowed' : 'pointer', border, theme.layout.radius, disabled ? theme.palette.accents_1 : theme.palette.background, SCALES.font(0.875), SCALES.height(2.25), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0.334), SCALES.pb(0), SCALES.pl(0.667), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0.334), SCALES.pr(0.334), SCALES.pb(0.334), SCALES.pl(0.667), disabled ? theme.palette.border : borderActive, disabled ? theme.palette.accents_5 : borderActive, disabled ? theme.palette.accents_4 : theme.palette.foreground, placeholderColor, theme.layout.gapQuarter, visible ? '180' : '0', iconBorder]
+  }, ".select.__jsx-style-dynamic-selector{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;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap;position:relative;cursor:".concat(disabled ? 'not-allowed' : 'pointer', ";max-width:90vw;overflow:hidden;-webkit-transition:border 150ms ease-in 0s,color 200ms ease-out 0s, box-shadow 200ms ease 0s;transition:border 150ms ease-in 0s,color 200ms ease-out 0s, box-shadow 200ms ease 0s;border:1px solid ").concat(border, ";border-radius:").concat(theme.layout.radius, ";background-color:").concat(disabled ? theme.palette.accents_1 : theme.palette.background, ";--select-font-size:").concat(SCALES.font(0.875), ";--select-height:").concat(SCALES.height(2.25), ";min-width:11.5em;width:").concat(SCALES.width(1, 'initial'), ";height:var(--select-height);padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0.334), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0.667), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.multiple.__jsx-style-dynamic-selector{height:auto;min-height:var(--select-height);padding:").concat(SCALES.pt(0.334), " ").concat(SCALES.pr(0.334), " ").concat(SCALES.pb(0.334), " ").concat(SCALES.pl(0.667), ";}.select.active.__jsx-style-dynamic-selector,.select.__jsx-style-dynamic-selector:hover{border-color:").concat(disabled ? theme.palette.border : borderActive, ";}.select.active.icon.__jsx-style-dynamic-selector,.select.__jsx-style-dynamic-selector:hover .icon.__jsx-style-dynamic-selector{color:").concat(disabled ? theme.palette.accents_5 : borderActive, ";}.value.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-flex:1;-ms-flex:1;flex:1;height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:1;padding:0;margin-right:1.25em;font-size:var(--select-font-size);color:").concat(disabled ? theme.palette.accents_4 : theme.palette.foreground, ";width:calc(100% - 1.25em);}.value.__jsx-style-dynamic-selector>div,.value.__jsx-style-dynamic-selector>div:hover{border-radius:0;background-color:transparent;padding:0;margin:0;color:inherit;}.placeholder.__jsx-style-dynamic-selector{color:").concat(placeholderColor, ";}.icon.__jsx-style-dynamic-selector{position:absolute;right:").concat(theme.layout.gapQuarter, ";font-size:var(--select-font-size);top:50%;bottom:0;-webkit-transform:translateY(-50%) rotate(").concat(visible ? '180' : '0', "deg);-ms-transform:translateY(-50%) rotate(").concat(visible ? '180' : '0', "deg);transform:translateY(-50%) rotate(").concat(visible ? '180' : '0', "deg);pointer-events:none;-webkit-transition:-webkit-transform 200ms ease;-webkit-transition:transform 200ms ease;transition:transform 200ms ease;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:").concat(iconBorder, ";}"))));
+});
+SelectComponent.displayName = 'Select';
+var Select = withScale(SelectComponent);
+export default Select;

package/esm/select/styles.d.ts

@@ -0,0 +1,9 @@
+import { NormalTypes } from "../utils/prop-types";
+import { HUIThemesPalette } from "../themes/presets";
+export type SelectColor = {
+    border: string;
+    borderActive: string;
+    iconBorder: string;
+    placeholderColor: string;
+};
+export declare const getColors: (palette: HUIThemesPalette, status?: NormalTypes) => SelectColor;

package/esm/select/styles.js

@@ -0,0 +1,36 @@
+export var getColors = function getColors(palette, status) {
+  var colors = {
+    "default": {
+      border: palette.border,
+      borderActive: palette.foreground,
+      iconBorder: palette.accents_5,
+      placeholderColor: palette.accents_3
+    },
+    secondary: {
+      border: palette.border,
+      borderActive: palette.foreground,
+      iconBorder: palette.accents_5,
+      placeholderColor: palette.accents_3
+    },
+    success: {
+      border: palette.successLight,
+      borderActive: palette.successDark,
+      iconBorder: palette.success,
+      placeholderColor: palette.accents_3
+    },
+    warning: {
+      border: palette.warningLight,
+      borderActive: palette.warningDark,
+      iconBorder: palette.warning,
+      placeholderColor: palette.accents_3
+    },
+    error: {
+      border: palette.errorLight,
+      borderActive: palette.errorDark,
+      iconBorder: palette.error,
+      placeholderColor: palette.error
+    }
+  };
+  if (!status) return colors["default"];
+  return colors[status];
+};

package/esm/shared/backdrop.d.ts

@@ -0,0 +1,14 @@
+import React, { MouseEvent } from 'react';
+interface Props {
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
+    visible?: boolean;
+    width?: string;
+    onContentClick?: (event: MouseEvent<HTMLElement>) => void;
+    backdropClassName?: string;
+    positionClassName?: string;
+    layerClassName?: string;
+}
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type BackdropProps = Props & NativeAttrs;
+declare const Backdrop: React.FC<React.PropsWithChildren<BackdropProps>>;
+export default Backdrop;

package/esm/shared/backdrop.js

@@ -0,0 +1,66 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "onClick", "visible", "width", "onContentClick", "backdropClassName", "positionClassName", "layerClassName"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+import useTheme from '../use-theme';
+import CssTransition from './css-transition';
+import useCurrentState from '../utils/use-current-state';
+import useClasses from '../use-classes';
+var Backdrop = /*#__PURE__*/React.memo(function (_ref) {
+  var children = _ref.children,
+    _ref$onClick = _ref.onClick,
+    onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
+    _ref$visible = _ref.visible,
+    visible = _ref$visible === void 0 ? false : _ref$visible,
+    width = _ref.width,
+    _ref$onContentClick = _ref.onContentClick,
+    onContentClick = _ref$onContentClick === void 0 ? function () {} : _ref$onContentClick,
+    _ref$backdropClassNam = _ref.backdropClassName,
+    backdropClassName = _ref$backdropClassNam === void 0 ? '' : _ref$backdropClassNam,
+    _ref$positionClassNam = _ref.positionClassName,
+    positionClassName = _ref$positionClassNam === void 0 ? '' : _ref$positionClassNam,
+    _ref$layerClassName = _ref.layerClassName,
+    layerClassName = _ref$layerClassName === void 0 ? '' : _ref$layerClassName,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var theme = useTheme();
+  var _useCurrentState = useCurrentState(false),
+    _useCurrentState2 = _slicedToArray(_useCurrentState, 3),
+    setIsContentMouseDown = _useCurrentState2[1],
+    IsContentMouseDownRef = _useCurrentState2[2];
+  var clickHandler = function clickHandler(event) {
+    if (IsContentMouseDownRef.current) return;
+    onClick && onClick(event);
+  };
+  var mouseUpHandler = function mouseUpHandler() {
+    if (!IsContentMouseDownRef.current) return;
+    var timer = setTimeout(function () {
+      setIsContentMouseDown(false);
+      clearTimeout(timer);
+    }, 0);
+  };
+  return /*#__PURE__*/React.createElement(CssTransition, {
+    name: "backdrop-wrapper",
+    visible: visible,
+    clearTime: 300
+  }, /*#__PURE__*/React.createElement("div", _extends({
+    onClick: clickHandler,
+    onMouseUp: mouseUpHandler
+  }, props, {
+    className: _JSXStyle.dynamic([["2021762493", [width, theme.expressiveness.portalOpacity, theme.expressiveness.portalOpacity, theme.expressiveness.portalOpacity]]]) + " " + (props && props.className != null && props.className || useClasses('backdrop', backdropClassName) || "")
+  }), /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["2021762493", [width, theme.expressiveness.portalOpacity, theme.expressiveness.portalOpacity, theme.expressiveness.portalOpacity]]]) + " " + (useClasses('layer', layerClassName) || "")
+  }), /*#__PURE__*/React.createElement("div", {
+    onClick: onContentClick,
+    onMouseDown: function onMouseDown() {
+      return setIsContentMouseDown(true);
+    },
+    className: _JSXStyle.dynamic([["2021762493", [width, theme.expressiveness.portalOpacity, theme.expressiveness.portalOpacity, theme.expressiveness.portalOpacity]]]) + " " + (useClasses('position', positionClassName) || "")
+  }, children), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2021762493",
+    dynamic: [width, theme.expressiveness.portalOpacity, theme.expressiveness.portalOpacity, theme.expressiveness.portalOpacity]
+  }, ".backdrop.__jsx-style-dynamic-selector{position:fixed;top:0;left:0;right:0;bottom:0;overflow:auto;z-index:1000;-webkit-overflow-scrolling:touch;box-sizing:border-box;text-align:center;}.position.__jsx-style-dynamic-selector{position:relative;z-index:1001;outline:none;max-width:90%;width:".concat(width, ";margin:20px auto;vertical-align:middle;display:inline-block;}.backdrop.__jsx-style-dynamic-selector:before{display:inline-block;width:0;height:100%;vertical-align:middle;content:'';}.layer.__jsx-style-dynamic-selector{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;opacity:").concat(theme.expressiveness.portalOpacity, ";background-color:black;-webkit-transition:opacity 0.35s cubic-bezier(0.4,0,0.2,1);transition:opacity 0.35s cubic-bezier(0.4,0,0.2,1);pointer-events:none;z-index:1000;}.backdrop-wrapper-enter.__jsx-style-dynamic-selector .layer.__jsx-style-dynamic-selector{opacity:0;}.backdrop-wrapper-enter-active.__jsx-style-dynamic-selector .layer.__jsx-style-dynamic-selector{opacity:").concat(theme.expressiveness.portalOpacity, ";}.backdrop-wrapper-leave.__jsx-style-dynamic-selector .layer.__jsx-style-dynamic-selector{opacity:").concat(theme.expressiveness.portalOpacity, ";}.backdrop-wrapper-leave-active.__jsx-style-dynamic-selector .layer.__jsx-style-dynamic-selector{opacity:0;}"))));
+});
+Backdrop.displayName = 'Backdrop';
+export default Backdrop;

package/esm/shared/css-transition.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface Props {
+    visible?: boolean;
+    enterTime?: number;
+    leaveTime?: number;
+    clearTime?: number;
+    className?: string;
+    name?: string;
+}
+export type CssTransitionProps = Props;
+declare const CssTransition: React.FC<CssTransitionProps>;
+export default CssTransition;

package/esm/shared/css-transition.js

@@ -0,0 +1,65 @@
+"use client";
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "className", "visible", "enterTime", "leaveTime", "clearTime", "name"];
+import React, { useEffect, useState } from 'react';
+var CssTransition = function CssTransition(_ref) {
+  var children = _ref.children,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    _ref$visible = _ref.visible,
+    visible = _ref$visible === void 0 ? false : _ref$visible,
+    _ref$enterTime = _ref.enterTime,
+    enterTime = _ref$enterTime === void 0 ? 60 : _ref$enterTime,
+    _ref$leaveTime = _ref.leaveTime,
+    leaveTime = _ref$leaveTime === void 0 ? 60 : _ref$leaveTime,
+    _ref$clearTime = _ref.clearTime,
+    clearTime = _ref$clearTime === void 0 ? 60 : _ref$clearTime,
+    _ref$name = _ref.name,
+    name = _ref$name === void 0 ? 'transition' : _ref$name,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    classes = _useState2[0],
+    setClasses = _useState2[1];
+  var _useState3 = useState(visible),
+    _useState4 = _slicedToArray(_useState3, 2),
+    renderable = _useState4[0],
+    setRenderable = _useState4[1];
+  useEffect(function () {
+    var statusClassName = visible ? 'enter' : 'leave';
+    var time = visible ? enterTime : leaveTime;
+    if (visible && !renderable) {
+      setRenderable(true);
+    }
+    setClasses("".concat(name, "-").concat(statusClassName));
+
+    // set class to active
+    var timer = setTimeout(function () {
+      setClasses("".concat(name, "-").concat(statusClassName, " ").concat(name, "-").concat(statusClassName, "-active"));
+      clearTimeout(timer);
+    }, time);
+
+    // remove classess when animation over
+    var clearClassesTimer = setTimeout(function () {
+      if (!visible) {
+        setClasses('');
+        setRenderable(false);
+      }
+      clearTimeout(clearClassesTimer);
+    }, time + clearTime);
+    return function () {
+      clearTimeout(timer);
+      clearTimeout(clearClassesTimer);
+    };
+  }, [visible, renderable]);
+  if (! /*#__PURE__*/React.isValidElement(children) || !renderable) return null;
+  var propsTransition = _extends({}, props, {
+    className: "".concat(children.props.className, " ").concat(className, " ").concat(classes)
+  });
+  return /*#__PURE__*/React.cloneElement(children, propsTransition);
+};
+CssTransition.displayName = 'CssTransition';
+export default CssTransition;

package/esm/shared/dropdown.d.ts

@@ -0,0 +1,9 @@
+import React, { MutableRefObject } from 'react';
+interface Props {
+    parent?: MutableRefObject<HTMLElement | null> | undefined;
+    visible: boolean;
+    disableMatchWidth?: boolean;
+    getPopupContainer?: () => HTMLElement | null;
+}
+declare const Dropdown: React.FC<React.PropsWithChildren<Props>>;
+export default Dropdown;