@helpdice/ui 2.5.1 → 2.5.3

package/esm/input/{currency-input/components/utils → utils}/cleanValue.d.ts

@@ -1,4 +1,4 @@
-import { CurrencyInputProps } from '../CurrencyInputProps';
+import { CurrencyInputProps } from '../input-currency-props';
 export type CleanValueOptions = Pick<CurrencyInputProps, 'decimalSeparator' | 'groupSeparator' | 'allowDecimals' | 'decimalsLimit' | 'allowNegativeValue' | 'disableAbbreviations' | 'prefix' | 'transformRawValue'> & {
     value: string;
 };

package/esm/input/{currency-input/components/utils → utils}/formatValue.d.ts

@@ -1,4 +1,4 @@
-import { IntlConfig } from '../CurrencyInputProps';
+import { IntlConfig } from '../input-currency-props';
 export type FormatValueOptions = {
     /**
      * Value to format

package/esm/input/{currency-input/components/utils → utils}/getLocaleConfig.d.ts

@@ -1,4 +1,4 @@
-import { IntlConfig } from '../CurrencyInputProps';
+import { IntlConfig } from '../input-currency-props';
 type LocaleConfig = {
     currencySymbol: string;
     groupSeparator: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@helpdice/ui",
-  "version": "2.5.1",
+  "version": "2.5.3",
   "main": "dist/index.js",
   "types": "esm/index.d.ts",
   "unpkg": "dist/index.min.js",

package/dist/input/currency-input/index.d.ts

@@ -1,5 +0,0 @@
-import CurrencyInput from './components/CurrencyInput';
-export type { CurrencyInputProps, CurrencyInputOnChangeValues } from './components/CurrencyInputProps';
-export { formatValue } from './components/utils/formatValue';
-export { cleanValue } from './components/utils/cleanValue';
-export default CurrencyInput;

package/dist/input/phone-input/index.d.ts

@@ -1,2 +0,0 @@
-import PhoneInput from './phone';
-export default PhoneInput;

package/esm/input/currency-input/index.d.ts

@@ -1,5 +0,0 @@
-import CurrencyInput from './components/CurrencyInput';
-export type { CurrencyInputProps, CurrencyInputOnChangeValues } from './components/CurrencyInputProps';
-export { formatValue } from './components/utils/formatValue';
-export { cleanValue } from './components/utils/cleanValue';
-export default CurrencyInput;

package/esm/input/currency-input/index.js

@@ -1,4 +0,0 @@
-import CurrencyInput from './components/CurrencyInput';
-export { formatValue } from './components/utils/formatValue';
-export { cleanValue } from './components/utils/cleanValue';
-export default CurrencyInput;

package/esm/input/phone-input/index.d.ts

@@ -1,2 +0,0 @@
-import PhoneInput from './phone';
-export default PhoneInput;

package/esm/input/phone-input/index.js

@@ -1,2 +0,0 @@
-import PhoneInput from './phone';
-export default PhoneInput;

package/esm/input/phone-input/phone.js

@@ -1,167 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _JSXStyle from "../styled-jsx.es.js";
-import React, { useState, useRef, useEffect, useMemo } from 'react';
-import countries from './countries.json';
-import { useTheme } from '@helpdice/theme';
-import { getColors } from '../styles';
-import useScale, { withScale } from '../../use-scale';
-import InputBlockLabel from '../input-block-label';
-function PhoneInput(_ref) {
-  var onChange = _ref.onChange,
-    _ref$value = _ref.value,
-    value = _ref$value === void 0 ? '' : _ref$value,
-    country = _ref.country,
-    _ref$placeholder = _ref.placeholder,
-    placeholder = _ref$placeholder === void 0 ? 'Enter phone number' : _ref$placeholder,
-    _ref$color = _ref.color,
-    _color = _ref$color === void 0 ? 'default' : _ref$color,
-    children = _ref.children,
-    fullWidth = _ref.fullWidth;
-  var theme = useTheme();
-  var _useScale = useScale(),
-    SCALES = _useScale.SCALES;
-  var defaultValue = country ? countries.findIndex(function (cn) {
-    return cn.code == country;
-  }) : 103;
-  var _useState = useState(countries[defaultValue]),
-    _useState2 = _slicedToArray(_useState, 2),
-    selectedCountry = _useState2[0],
-    setSelectedCountry = _useState2[1];
-  var _useState3 = useState(value),
-    _useState4 = _slicedToArray(_useState3, 2),
-    phoneNumber = _useState4[0],
-    setPhoneNumber = _useState4[1];
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    isFocused = _useState6[0],
-    setIsFocused = _useState6[1];
-  var _useState7 = useState(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    dropdownOpen = _useState8[0],
-    setDropdownOpen = _useState8[1];
-  var _useState9 = useState(''),
-    _useState10 = _slicedToArray(_useState9, 2),
-    searchTerm = _useState10[0],
-    setSearchTerm = _useState10[1];
-  var dropdownRef = useRef(null);
-  var _useMemo = useMemo(function () {
-      return getColors(theme.palette, _color);
-    }, [theme.palette]),
-    borderColor = _useMemo.borderColor,
-    hoverBorder = _useMemo.hoverBorder;
-  var handleSelectCountry = function handleSelectCountry(country) {
-    setSelectedCountry(country);
-    setDropdownOpen(false);
-    setSearchTerm('');
-    if (onChange) onChange("".concat(country.code, ":").concat(phoneNumber));
-  };
-  var handlePhoneChange = function handlePhoneChange(e) {
-    var value = e.target.value.replace(/[^\d]/g, '');
-    setPhoneNumber(value);
-    if (onChange) onChange("".concat(selectedCountry.phone, ",").concat(value));
-  };
-  var handleClickOutside = function handleClickOutside(e) {
-    if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
-      setDropdownOpen(false);
-      setSearchTerm('');
-    }
-  };
-  useEffect(function () {
-    document.addEventListener('mousedown', handleClickOutside);
-    return function () {
-      return document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, []);
-  var filteredCountries = countries.filter(function (c) {
-    return "".concat(c.label, " ").concat(c.code, " ").concat(c.phone).toLowerCase().includes(searchTerm.toLowerCase());
-  });
-  var defaultWidth = fullWidth ? '100%' : 'initial';
-  return /*#__PURE__*/React.createElement("div", {
-    ref: dropdownRef,
-    className: _JSXStyle.dynamic([["2480261071", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "with-label ".concat(isFocused ? 'focused' : '')
-  }, children && /*#__PURE__*/React.createElement(InputBlockLabel, null, children), /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["2480261071", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "input-wrapper"
-  }, /*#__PURE__*/React.createElement("div", {
-    onClick: function onClick() {
-      return setDropdownOpen(!dropdownOpen);
-    },
-    className: _JSXStyle.dynamic([["2480261071", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown-toggle"
-  }, /*#__PURE__*/React.createElement("span", {
-    style: {
-      display: 'flex',
-      alignItems: 'center',
-      gap: 5,
-      paddingRight: '15px'
-    },
-    className: _JSXStyle.dynamic([["2480261071", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
-  }, /*#__PURE__*/React.createElement("img", {
-    loading: "lazy",
-    width: "20",
-    height: "20",
-    src: "https://flagcdn.com/w20/".concat(selectedCountry.code.toLowerCase(), ".png"),
-    srcSet: "https://flagcdn.com/w40/".concat(selectedCountry.code.toLowerCase(), ".png 2x"),
-    alt: "".concat(selectedCountry.label, " Flag"),
-    className: _JSXStyle.dynamic([["2480261071", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
-  }), /*#__PURE__*/React.createElement("span", {
-    className: _JSXStyle.dynamic([["2480261071", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
-  }, selectedCountry.phone))), /*#__PURE__*/React.createElement("input", {
-    type: "tel",
-    placeholder: placeholder,
-    value: phoneNumber,
-    onChange: handlePhoneChange,
-    onFocus: function onFocus() {
-      return setIsFocused(true);
-    },
-    onBlur: function onBlur() {
-      return setIsFocused(false);
-    },
-    className: _JSXStyle.dynamic([["2480261071", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "phone-input"
-  })), dropdownOpen && /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["2480261071", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown"
-  }, /*#__PURE__*/React.createElement("input", {
-    type: "text",
-    placeholder: "Search country...",
-    value: searchTerm,
-    onChange: function onChange(e) {
-      return setSearchTerm(e.target.value);
-    },
-    className: _JSXStyle.dynamic([["2480261071", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "search-input"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["2480261071", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "country-list"
-  }, filteredCountries.length > 0 ? filteredCountries.map(function (c) {
-    return /*#__PURE__*/React.createElement("div", {
-      key: c.code,
-      onClick: function onClick() {
-        return handleSelectCountry(c);
-      },
-      className: _JSXStyle.dynamic([["2480261071", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown-item"
-    }, /*#__PURE__*/React.createElement("span", {
-      style: {
-        display: 'flex',
-        alignItems: 'center',
-        gap: 5
-      },
-      className: _JSXStyle.dynamic([["2480261071", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
-    }, /*#__PURE__*/React.createElement("img", {
-      loading: "lazy",
-      width: "23",
-      height: "23",
-      src: "https://flagcdn.com/w20/".concat(c.code.toLowerCase(), ".png"),
-      srcSet: "https://flagcdn.com/w40/".concat(c.code.toLowerCase(), ".png 2x"),
-      alt: "".concat(c.label, " Flag"),
-      className: _JSXStyle.dynamic([["2480261071", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
-    }), c.phone, " ", /*#__PURE__*/React.createElement("span", {
-      style: {
-        color: 'grey'
-      },
-      className: _JSXStyle.dynamic([["2480261071", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
-    }, c.label)));
-  }) : /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["2480261071", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown-item disabled"
-  }, "No results"))), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2480261071",
-    dynamic: [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, defaultWidth), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, borderColor, SCALES.width(1, defaultWidth), borderColor, SCALES.width(1, defaultWidth), theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']
-  }, ".with-label.__jsx-style-dynamic-selector{position:relative;display:inline-block;box-sizing:border-box;-webkit-box-align:center;--input-height:".concat(SCALES.height(2.25), ";font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, defaultWidth), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.phone-input-container.focused.__jsx-style-dynamic-selector{outline:1px solid ").concat(hoverBorder, ";border-radius:6px;}.input-wrapper.__jsx-style-dynamic-selector{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;border:1px solid ").concat(borderColor, ";width:").concat(SCALES.width(1, defaultWidth), ";height:var(--input-height);border-radius:6px;overflow:hidden;}.dropdown-toggle.__jsx-style-dynamic-selector{padding:7px 12px;border-radius:6px 0px 0px 6px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:14px;border-right:1px solid ").concat(borderColor, ";}.phone-input.__jsx-style-dynamic-selector{width:100%;min-width:0;padding:5px 10px;background-color:transparent;font-size:14px;border:none;}.phone-input.__jsx-style-dynamic-selector:focus{outline:none;}.dropdown.__jsx-style-dynamic-selector{position:absolute;top:100%;left:0;width:").concat(SCALES.width(1, defaultWidth), ";background:").concat(theme.type == 'dark' ? 'black' : 'white', ";border:1px solid ").concat(borderColor, ";border-radius:6px;margin-top:4px;z-index:999;box-shadow:0 4px 10px rgba(0,0,0,0.1);}.search-input.__jsx-style-dynamic-selector{width:100%;padding:8px 10px;border:none;background-color:transparent;border-bottom:1px solid ").concat(borderColor, ";font-size:14px;}.search-input.__jsx-style-dynamic-selector:focus{outline:none;}.country-list.__jsx-style-dynamic-selector{max-height:200px;overflow-y:auto;}.dropdown-item.__jsx-style-dynamic-selector{padding:10px;cursor:pointer;font-size:14px;}.dropdown-item.__jsx-style-dynamic-selector:hover{background:").concat(theme.type == 'dark' ? '#3a3d3d' : '#efefef', ";}.dropdown-item.disabled.__jsx-style-dynamic-selector{color:#888;cursor:default;}")));
-}
-;
-export default withScale(PhoneInput);