@helpdice/ui 1.7.2 → 1.7.4

package/dist/input/index.d.ts

@@ -5,6 +5,7 @@ export type InputComponentType = typeof Input & {
     Textarea: typeof Textarea;
     Password: typeof InputPassword;
 };
+export { getColors } from './styles';
 export type { InputProps } from './input';
 export type { InputTypes } from './input-props';
 export type { InputPasswordProps } from './password';

package/dist/input/index.js

@@ -1653,3 +1653,4 @@ Input.Textarea = Textarea;
 Input.Password = InputPassword;
 
 exports.default = Input;
+exports.getColors = getColors;

package/esm/PhoneInput/index.d.ts

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

package/esm/PhoneInput/index.js

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

package/esm/PhoneInput/phone.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { InputTypes } from 'components/input';
+type PhoneInputProps = {
+    onChange: (data: string) => void;
+    value?: string;
+    country?: string;
+    placeholder?: string;
+    color?: InputTypes;
+};
+declare const PhoneInput: ({ onChange, value, country, placeholder, color: _color }: PhoneInputProps) => React.JSX.Element;
+export default PhoneInput;

package/esm/PhoneInput/phone.js

@@ -0,0 +1,158 @@
+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 'components/use-theme';
+import { getColors } from 'components/input/styles';
+var PhoneInput = 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;
+  var theme = useTheme();
+  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.code).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());
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    ref: dropdownRef,
+    className: _JSXStyle.dynamic([["785147617", [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "phone-input-container ".concat(isFocused ? 'focused' : '')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["785147617", [hoverBorder, borderColor, borderColor, 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([["785147617", [hoverBorder, borderColor, borderColor, 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
+    },
+    className: _JSXStyle.dynamic([["785147617", [hoverBorder, borderColor, borderColor, 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(selectedCountry.code.toLowerCase(), ".png"),
+    srcSet: "https://flagcdn.com/w40/".concat(selectedCountry.code.toLowerCase(), ".png 2x"),
+    alt: "Flag of ".concat(selectedCountry.label),
+    className: _JSXStyle.dynamic([["785147617", [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
+  }), /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["785147617", [hoverBorder, borderColor, borderColor, 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([["785147617", [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "phone-input"
+  })), dropdownOpen && /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["785147617", [hoverBorder, borderColor, borderColor, 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([["785147617", [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "search-input"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["785147617", [hoverBorder, borderColor, borderColor, 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([["785147617", [hoverBorder, borderColor, borderColor, 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([["785147617", [hoverBorder, borderColor, borderColor, 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: "Flag of ".concat(c.label),
+      className: _JSXStyle.dynamic([["785147617", [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
+    }), c.phone, " ", /*#__PURE__*/React.createElement("span", {
+      style: {
+        color: 'grey'
+      },
+      className: _JSXStyle.dynamic([["785147617", [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]])
+    }, c.label)));
+  }) : /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["785147617", [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']]]) + " " + "dropdown-item disabled"
+  }, "No results"))), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "785147617",
+    dynamic: [hoverBorder, borderColor, borderColor, theme.type == 'dark' ? 'black' : 'white', borderColor, borderColor, theme.type == 'dark' ? '#3a3d3d' : '#efefef']
+  }, ".phone-input-container.__jsx-style-dynamic-selector{position:relative;max-width:400px;}.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, ";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{-webkit-flex:1;-ms-flex:1;flex:1;padding:5px 10px;height:35px;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:100%;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 PhoneInput;

package/esm/badge/badge.js

@@ -41,11 +41,11 @@ var BadgeComponent = function BadgeComponent(_ref) {
     dot: dot
   }, className);
   return /*#__PURE__*/React.createElement("span", _extends({}, props, {
-    className: _JSXStyle.dynamic([["1238256810", [bg, _color, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0.25), SCALES.pr(0.4375), SCALES.pb(0.25), SCALES.pl(0.4375), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.py(0.25), SCALES.px(0.25)]]]) + " " + (props && props.className != null && props.className || classes || "")
+    className: _JSXStyle.dynamic([["120113192", [bg, _color, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0.25), SCALES.pr(0.5375), SCALES.pb(0.30), SCALES.pl(0.5375), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.py(0.25), SCALES.px(0.25)]]]) + " " + (props && props.className != null && props.className || classes || "")
   }), !dot && children, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "1238256810",
-    dynamic: [bg, _color, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0.25), SCALES.pr(0.4375), SCALES.pb(0.25), SCALES.pl(0.4375), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.py(0.25), SCALES.px(0.25)]
-  }, ".badge.__jsx-style-dynamic-selector{display:inline-block;border-radius:16px;font-variant:tabular-nums;line-height:1;vertical-align:middle;background-color:".concat(bg, ";color:").concat(_color, ";border:0;font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0.25), " ").concat(SCALES.pr(0.4375), " ").concat(SCALES.pb(0.25), " ").concat(SCALES.pl(0.4375), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.dot.__jsx-style-dynamic-selector{padding:").concat(SCALES.py(0.25), " ").concat(SCALES.px(0.25), ";border-radius:50%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}")));
+    id: "120113192",
+    dynamic: [bg, _color, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0.25), SCALES.pr(0.5375), SCALES.pb(0.30), SCALES.pl(0.5375), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.py(0.25), SCALES.px(0.25)]
+  }, ".badge.__jsx-style-dynamic-selector{display:inline-block;border-radius:16px;font-variant:tabular-nums;line-height:1;vertical-align:middle;background-color:".concat(bg, ";color:").concat(_color, ";border:0;font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0.25), " ").concat(SCALES.pr(0.5375), " ").concat(SCALES.pb(0.30), " ").concat(SCALES.pl(0.5375), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.dot.__jsx-style-dynamic-selector{padding:").concat(SCALES.py(0.25), " ").concat(SCALES.px(0.25), ";border-radius:50%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}")));
 };
 BadgeComponent.displayName = 'Badge';
 var Badge = withScale(BadgeComponent);

package/esm/code-block/index.js

@@ -2,7 +2,7 @@
 
 import * as React from "react";
 // import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
-// import type { SyntaxHighlighterProps } from "react-syntax-highlighter";
+
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { dracula } from "react-syntax-highlighter/dist/cjs/styles/prism";
 var SyntaxHighlighterAny = SyntaxHighlighter;

package/esm/index.d.ts

@@ -44,7 +44,7 @@ export type { GridProps, GridContainerProps } from './grid';
 export { default as HtmlRenderer } from './html-renderer';
 export { default as Image } from './image';
 export type { ImageProps, ImageBrowserProps } from './image';
-export { default as Input } from './input';
+export { default as Input, getColors } from './input';
 export type { InputProps, InputPasswordProps } from './input';
 export { default as Keyboard } from './keyboard';
 export type { KeyboardProps } from './keyboard';
@@ -64,6 +64,7 @@ export { default as Popover } from './popover';
 export type { PopoverProps, PopoverItemProps } from './popover';
 export { default as List } from './list';
 export { default as Menu } from './menu';
+export { default as PhoneInput } from './PhoneInput';
 export { default as Progress } from './progress';
 export type { ProgressProps } from './progress';
 export { default as Radio } from './radio';

package/esm/index.js

@@ -29,7 +29,7 @@ export { default as Grid } from './grid';
 export { default as Container } from './grid/grid-container';
 export { default as HtmlRenderer } from './html-renderer';
 export { default as Image } from './image';
-export { default as Input } from './input';
+export { default as Input, getColors } from './input';
 export { default as Keyboard } from './keyboard';
 export { default as Link } from './link';
 export { default as Loading } from './loading';
@@ -40,6 +40,7 @@ export { default as Pagination } from './pagination';
 export { default as Popover } from './popover';
 export { default as List } from './list';
 export { default as Menu } from './menu';
+export { default as PhoneInput } from './PhoneInput';
 export { default as Progress } from './progress';
 export { default as Radio } from './radio';
 export { default as Rating } from './rating';

package/esm/input/index.d.ts

@@ -5,6 +5,7 @@ export type InputComponentType = typeof Input & {
     Textarea: typeof Textarea;
     Password: typeof InputPassword;
 };
+export { getColors } from './styles';
 export type { InputProps } from './input';
 export type { InputTypes } from './input-props';
 export type { InputPasswordProps } from './password';

package/esm/input/index.js

@@ -4,4 +4,5 @@ import Textarea from '../textarea';
 import InputPassword from './password';
 Input.Textarea = Textarea;
 Input.Password = InputPassword;
+export { getColors } from './styles';
 export default Input;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@helpdice/ui",
-  "version": "1.7.2",
+  "version": "1.7.4",
   "main": "dist/index.js",
   "types": "esm/index.d.ts",
   "unpkg": "dist/index.min.js",
@@ -38,8 +38,9 @@
   },
   "prettier": "@helpdice/prettier-config",
   "keywords": [
-    "iux",
+    "flux",
     "helpdice ui",
+    "flux ui",
     "components",
     "react components",
     "react ui"
@@ -56,7 +57,7 @@
     "@babel/preset-env": "^7.14.7",
     "@babel/preset-react": "^7.14.5",
     "@babel/preset-typescript": "^7.14.5",
-    "@helpdice/pro": "file:../pro/build",
+    "@helpdice/pro": "D:\\Github\\pro\\build",
     "@mapbox/rehype-prism": "^0.9.0",
     "@mdx-js/loader": "^3.1.0",
     "@mdx-js/react": "^3.1.0",
@@ -64,6 +65,7 @@
     "@next/mdx": "^15.1.6",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "28.0.2",
+    "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "16.0.0",
     "@types/enzyme": "^3.10.18",
     "@types/lodash": "^4.17.15",
@@ -124,8 +126,8 @@
     "tslib": "^2.8.1"
   },
   "peerDependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "^18.3.1 || ^19.1.0",
+    "react-dom": "^18.3.1 || ^19.1.0"
   },
   "jest": {
     "globals": {