@thx/controls 16.0.0-alpha.0 → 16.0.0-alpha.23

package/dist/esm/date/YearSelect/YearSelect.js

@@ -0,0 +1,87 @@
+import debug from 'debug';
+import { Segment, Button, Icon, Dropdown } from 'semantic-ui-react';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+debug("thx.controls.date.YearSelect");
+function YearSelect(props) {
+  const thisYear = new Date().getFullYear();
+  const _a = props, { value, minYear = 1970, maxYear = thisYear, onChange, onBlur, error } = _a, rest = __objRest(_a, ["value", "minYear", "maxYear", "onChange", "onBlur", "error"]);
+  const availableYears = [];
+  for (let i = maxYear; i >= minYear; i--) {
+    availableYears.push({ value: i, text: i.toString(), key: i });
+  }
+  return /* @__PURE__ */ React.createElement(Segment, __spreadValues({
+    basic: true,
+    compact: true,
+    style: { padding: 0, margin: 0 }
+  }, rest), /* @__PURE__ */ React.createElement(Button, {
+    basic: true,
+    icon: true,
+    type: "button",
+    color: error ? "red" : "green",
+    disabled: value <= minYear,
+    onClick: () => {
+      if (onChange)
+        onChange(value - 1);
+    },
+    onBlur
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    name: "arrow left"
+  })), /* @__PURE__ */ React.createElement(Dropdown, {
+    icon: /* @__PURE__ */ React.createElement("div", null),
+    button: true,
+    basic: true,
+    scrolling: true,
+    value,
+    options: availableYears,
+    onChange: (e, val) => {
+      if (typeof val.value === "number" && onChange)
+        onChange(val.value);
+    },
+    error,
+    onBlur
+  }), /* @__PURE__ */ React.createElement(Button, {
+    basic: true,
+    icon: true,
+    type: "button",
+    color: error ? "red" : "green",
+    disabled: value >= maxYear,
+    onClick: () => {
+      if (onChange)
+        onChange(value + 1);
+    },
+    onBlur,
+    style: { marginRight: 0 }
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    name: "arrow right"
+  })));
+}
+
+export { YearSelect };

package/dist/esm/form/TForm/TForm.js

@@ -0,0 +1,28 @@
+import debug from 'debug';
+import { isFunction, isEmptyChildren, FormikProvider } from 'formik';
+import * as React from 'react';
+import { useTForm } from './useTForm.js';
+
+debug("thx.controls.form.TForm");
+function TForm(props) {
+  const tbag = useTForm(props);
+  const { component, render, children, innerRef } = props;
+  React.useImperativeHandle(innerRef, () => tbag);
+  let child = null;
+  if (component) {
+    child = React.createElement(component, tbag);
+  } else if (render) {
+    child = render(tbag);
+  } else if (children) {
+    if (isFunction(children)) {
+      child = children(tbag);
+    } else if (!isEmptyChildren(children)) {
+      child = React.Children.only(children);
+    }
+  }
+  return /* @__PURE__ */ React.createElement(FormikProvider, {
+    value: tbag
+  }, child);
+}
+
+export { TForm };

package/dist/esm/form/TForm/useTForm.js

@@ -0,0 +1,121 @@
+import flatten from 'flat';
+import { useFormik } from 'formik';
+import get from 'lodash/get';
+import property from 'lodash/property';
+import uniq from 'lodash/uniq';
+import { useEffect, useState } from 'react';
+import { Message, Segment } from 'semantic-ui-react';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+function useTForm(config) {
+  const _a = config, rest = __objRest(_a, ["render", "children"]);
+  const formik = useFormik(rest);
+  useEffect(() => {
+    if (config.onValidate)
+      config.onValidate(formik.isValid);
+  }, [formik.isValid, config.onValidate]);
+  useEffect(() => {
+    if (config.getSubmitFn)
+      config.getSubmitFn(formik.submitForm);
+  }, [formik.submitForm, config.getSubmitFn]);
+  useEffect(() => {
+    if (config.onChange)
+      config.onChange(formik.values);
+  }, [formik.values]);
+  const [errorCleared, setErrorCleared] = useState(false);
+  useEffect(() => {
+    if (config.error && config.error.message && !formik.isSubmitting) {
+      setErrorCleared(true);
+    }
+  }, [formik.values, config.error]);
+  const flatWarnings = flatten(formik.errors);
+  const flatTouched = flatten(formik.touched);
+  const warnings = uniq(Object.keys(flatWarnings).reduce((memo, value) => {
+    const isTouched = flatTouched[value];
+    if (isTouched || formik.submitCount > 0) {
+      return [...memo, get(flatWarnings, value)];
+    }
+    return memo;
+  }, []));
+  let errors = [];
+  let errorHeader = "";
+  if (config.error && config.error.message) {
+    if (config.error.graphQLErrors) {
+      errors = config.error.graphQLErrors.reduce((memo, v) => {
+        if (v.message)
+          return [...memo, v.message];
+        return memo;
+      }, []);
+    } else {
+      const errorMessage = config.error.message.slice(config.error.message.indexOf(": ") + 1);
+      errors.push(errorMessage);
+    }
+    errorHeader = config.error.message.slice(0, config.error.message.indexOf(": "));
+  }
+  errors = uniq(errors);
+  const hasWarnings = !(formik.isValid || warnings.length === 0);
+  const hasErrors = errors.length > 0;
+  function renderWarnings() {
+    if (!hasWarnings && !hasErrors)
+      return null;
+    return /* @__PURE__ */ React.createElement(Message, {
+      warning: hasWarnings,
+      error: hasErrors && !hasWarnings
+    }, /* @__PURE__ */ React.createElement(Message.Header, null, hasWarnings ? "Some fields are not complete:" : `${errorHeader}:`), /* @__PURE__ */ React.createElement(Segment, {
+      style: { overflow: "auto", maxHeight: 100 }
+    }, (hasWarnings ? warnings : errors).map((msg) => /* @__PURE__ */ React.createElement("div", {
+      key: msg
+    }, msg))));
+  }
+  function fieldError(fieldName) {
+    return (!!property(fieldName)(formik.touched) || formik.submitCount > 0) && !!property(fieldName)(formik.errors);
+  }
+  function handleSubmit(e) {
+    setErrorCleared(false);
+    formik.handleSubmit(e);
+  }
+  return __spreadProps(__spreadValues({}, formik), {
+    hasErrors: hasErrors && !errorCleared,
+    hasWarnings,
+    isValid: !hasWarnings,
+    loading: config.loading ? config.loading : false,
+    submitDisabled: hasWarnings || formik.isSubmitting,
+    errorMarkedCleared: errorCleared,
+    formError: hasErrors && !hasWarnings && !errorCleared && !formik.isSubmitting,
+    renderWarnings,
+    fieldError,
+    handleSubmit
+  });
+}
+
+export { useTForm };

package/dist/esm/index.js

@@ -0,0 +1,31 @@
+export { useMoneyInput } from './money/useMoneyInput.js';
+export { LocalDatePicker } from './date/LocalDatePicker/LocalDatePicker.js';
+export { LocalMonthSelect } from './date/LocalMonthSelect/LocalMonthSelect.js';
+export { LocalTimePicker } from './date/LocalTimePicker/LocalTimePicker.js';
+export { MonthDayPicker } from './date/MonthDayPicker/MonthDayPicker.js';
+export { MonthYearPicker } from './date/MonthYearPicker/MonthYearPicker.js';
+export { YearSelect } from './date/YearSelect/YearSelect.js';
+export { useTForm } from './form/TForm/useTForm.js';
+export { TForm } from './form/TForm/TForm.js';
+export { MaskedInput } from './inputs/MaskedInput/MaskedInput.js';
+export { RadioGroup } from './inputs/RadioGroup/RadioGroup.js';
+export { Scriptel } from './inputs/Scriptel/Scriptel.js';
+export { withScriptel } from './inputs/Scriptel/withScriptel.js';
+export { ScriptelInput } from './inputs/ScriptelInput/ScriptelInput.js';
+export { PhoneInput } from './inputs/PhoneInput/PhoneInput.js';
+export { CreditCardInput } from './inputs/CreditCardInput/CreditCardInput.js';
+export { SinInput } from './inputs/SinInput/SinInput.js';
+export { TableInput } from './inputs/TableInput/TableInput.js';
+export { MoneyCell } from './inputs/TableInput/MoneyCell.js';
+export { MoneyEditCell } from './inputs/TableInput/MoneyEditCell.js';
+export { MoneySumFooter } from './inputs/TableInput/MoneySumFooter.js';
+export { StringEditCell } from './inputs/TableInput/StringEditCell.js';
+export { DropdownCell } from './inputs/TableInput/DropdownCell.js';
+export { HoverCell } from './inputs/TableInput/HoverCell.js';
+export { addRowOnTab } from './inputs/TableInput/addRowOnTab.js';
+export { MoneyInput } from './money/MoneyInput/MoneyInput.js';
+export { MoneyCurrencyInput } from './money/MoneyCurrencyInput/MoneyCurrencyInput.js';
+export { FormStep } from './step/FormStep.js';
+export { StepProvider } from './step/StepProvider.js';
+export { useStep } from './step/useStep.js';
+export { Step } from './step/Step.js';

package/dist/esm/inputs/CreditCardInput/CreditCardInput.js

@@ -0,0 +1,69 @@
+import { formatDate } from '@thx/date';
+import debug from 'debug';
+import { useState } from 'react';
+import CreditCards from 'react-credit-cards';
+import 'react-credit-cards/es/styles-compiled.css';
+import { Grid, Form, Input } from 'semantic-ui-react';
+import { CreditCardNumberInput } from './CreditCardNumberInput.js';
+import { MonthYearPicker } from '../../date/MonthYearPicker/MonthYearPicker.js';
+
+const d = debug("thx.controls.inputs.CreditCardInput");
+function CreditCardInput(props) {
+  const { onBlur, disabled, onChange, value } = props;
+  const { name, number, cvc, expiry } = value || {};
+  const [focus, setFocus] = useState("number");
+  return /* @__PURE__ */ React.createElement(Grid, null, /* @__PURE__ */ React.createElement(Grid.Column, {
+    width: 4
+  }, /* @__PURE__ */ React.createElement(Form, null, /* @__PURE__ */ React.createElement(Form.Group, null, /* @__PURE__ */ React.createElement(Form.Field, {
+    width: 9
+  }, /* @__PURE__ */ React.createElement("label", null, "Number"), /* @__PURE__ */ React.createElement(CreditCardNumberInput, {
+    onFocus: () => setFocus("number"),
+    onBlur,
+    onChange: (v) => {
+      onChange && onChange({ name, number: v, cvc, expiry });
+    },
+    disabled
+  })), /* @__PURE__ */ React.createElement(Form.Field, {
+    width: 4
+  }, /* @__PURE__ */ React.createElement("label", null, "CVC"), /* @__PURE__ */ React.createElement(Input, {
+    value: cvc || "",
+    onChange: (ev, v) => {
+      onChange && onChange({ name, number, cvc: v.value, expiry });
+    },
+    onFocus: () => setFocus("cvc"),
+    onBlur: () => setFocus("name"),
+    disabled
+  }))), /* @__PURE__ */ React.createElement(Form.Group, null, /* @__PURE__ */ React.createElement(Form.Field, {
+    width: 9
+  }, /* @__PURE__ */ React.createElement("label", null, "Name"), /* @__PURE__ */ React.createElement(Input, {
+    value: name || "",
+    onChange: (ev, v) => {
+      onChange && onChange({ name: v.value, number, cvc, expiry });
+    },
+    onFocus: () => setFocus("name"),
+    disabled,
+    fluid: true
+  })), /* @__PURE__ */ React.createElement(Form.Field, {
+    width: 6
+  }, /* @__PURE__ */ React.createElement("label", null, "Expiry"), /* @__PURE__ */ React.createElement(MonthYearPicker, {
+    value: expiry,
+    onChange: (v) => {
+      onChange && onChange({ name, number, cvc, expiry: v });
+    },
+    onFocus: () => setFocus("expiry"),
+    disabled
+  }))))), /* @__PURE__ */ React.createElement(Grid.Column, {
+    width: 12
+  }, /* @__PURE__ */ React.createElement(CreditCards, {
+    cvc: cvc || "",
+    expiry: formatDate(expiry, { format: "MMuu" }) || "",
+    name: name || "",
+    number: number || "",
+    focused: focus,
+    callback: (a, b) => {
+      d(a, b);
+    }
+  })));
+}
+
+export { CreditCardInput };

package/dist/esm/inputs/CreditCardInput/CreditCardNumberInput.js

@@ -0,0 +1,105 @@
+import creditCardType from 'credit-card-type';
+import debug from 'debug';
+import { validate } from 'luhn';
+import { useState, useCallback, useMemo } from 'react';
+import { Input, Icon } from 'semantic-ui-react';
+import { useMaskedInput } from '../MaskedInput/useMaskedInput.js';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const d = debug("thx.controls.inputs.CreditCardInput.CreditCardNumberInput");
+function getIcon(type) {
+  switch (type) {
+    case "visa":
+      return "cc visa";
+    case "mastercard":
+      return "cc mastercard";
+    case "american-express":
+      return "cc amex";
+    case "diners-club":
+      return "cc diners club";
+    case "jcb":
+      return "cc jcb";
+    default:
+      return "credit card";
+  }
+}
+function CreditCardNumberInput(props) {
+  const _a = props, { value, onChange } = _a, rest = __objRest(_a, ["value", "onChange"]);
+  const [icon, setIcon] = useState("credit card");
+  const [color, setColor] = useState("black");
+  const checkValidation = useCallback((valueArray) => {
+    const num = valueArray.join("").replaceAll(/(_|\s)/g, "");
+    const typ = creditCardType(num);
+    const isValid = validate(num);
+    if (typ.length === 1) {
+      setIcon(getIcon(typ[0].type));
+    } else {
+      setIcon("credit card");
+    }
+    if (num.length > 0) {
+      if (isValid) {
+        setColor("green");
+      } else {
+        setColor("red");
+      }
+    } else {
+      setColor("black");
+    }
+    return isValid;
+  }, []);
+  const creditCardMask = useMemo(() => ({
+    mask: "9999 9999 9999 9999",
+    isComplete: checkValidation,
+    autoUnmask: true
+  }), [checkValidation]);
+  const cardNumberRef = useMaskedInput({
+    mask: creditCardMask,
+    value,
+    onChange: (v) => {
+      const typ = creditCardType(v || "");
+      d(v, typ);
+      onChange && onChange(v);
+    }
+  });
+  return /* @__PURE__ */ React.createElement(Input, __spreadProps(__spreadValues({}, rest), {
+    icon: true
+  }), /* @__PURE__ */ React.createElement("input", {
+    ref: cardNumberRef
+  }), /* @__PURE__ */ React.createElement(Icon, {
+    name: icon,
+    color,
+    size: "large"
+  }));
+}
+
+export { CreditCardNumberInput };

package/dist/esm/inputs/MaskedInput/MaskedInput.js

@@ -0,0 +1,45 @@
+import debug from 'debug';
+import { Input } from 'semantic-ui-react';
+import { useMaskedInput } from './useMaskedInput.js';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+debug("thx.controls.inputs.MaskedInput");
+function MaskedInput(props) {
+  const _a = props, { name, onBlur, disabled, onChange, mask, value } = _a, rest = __objRest(_a, ["name", "onBlur", "disabled", "onChange", "mask", "value"]);
+  const inputRef = useMaskedInput({ mask, value, onChange });
+  return /* @__PURE__ */ React.createElement(Input, __spreadValues({}, rest), /* @__PURE__ */ React.createElement("input", {
+    disabled,
+    name,
+    ref: inputRef,
+    onBlur
+  }));
+}
+
+export { MaskedInput };

package/dist/esm/inputs/MaskedInput/useMaskedInput.js

@@ -0,0 +1,76 @@
+import debug from 'debug';
+import Inputmask from 'inputmask';
+import { useRef, useEffect } from 'react';
+import useDeepCompareEffect from 'use-deep-compare-effect';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const d = debug("thx.controls.inputs.MaskedInput.useMaskedInput");
+function useMaskedInput(props) {
+  const { value, onChange, onSet, mask } = props;
+  const inputElement = useRef(null);
+  const maskInstance = useRef(null);
+  useDeepCompareEffect(() => {
+    if (!inputElement.current)
+      throw new Error("Could not get input element");
+    d("Creating input mask instance");
+    maskInstance.current = new Inputmask(__spreadProps(__spreadValues({}, mask), {
+      oncomplete() {
+        var _a;
+        if (onChange)
+          onChange((_a = inputElement.current) == null ? void 0 : _a.value);
+        if (mask == null ? void 0 : mask.oncomplete)
+          mask.oncomplete();
+      },
+      oncleared() {
+        if (onChange)
+          onChange();
+        if (mask == null ? void 0 : mask.oncleared)
+          mask.oncleared();
+      },
+      onincomplete() {
+        var _a;
+        if (onChange)
+          onChange((_a = inputElement.current) == null ? void 0 : _a.value);
+        if (mask == null ? void 0 : mask.onincomplete)
+          mask.onincomplete();
+      }
+    }));
+    maskInstance.current.mask(inputElement.current);
+    return () => {
+      if (maskInstance.current) {
+        d("Cleaning up input mask instance");
+        maskInstance.current.remove();
+        maskInstance.current = null;
+      }
+    };
+  }, [mask]);
+  useEffect(() => {
+    var _a;
+    if (inputElement.current && ((_a = inputElement.current) == null ? void 0 : _a.value) !== value && value !== void 0) {
+      d("Value is changing:", value);
+      inputElement.current.value = value;
+      onSet && onSet(value);
+    }
+  }, [value]);
+  return inputElement;
+}
+
+export { useMaskedInput };

package/dist/esm/inputs/PhoneInput/PhoneInput.js

@@ -0,0 +1,48 @@
+import debug from 'debug';
+import { MaskedInput } from '../MaskedInput/MaskedInput.js';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+debug("thx.controls.inputs.PhoneInput");
+function PhoneInput(props) {
+  const _a = props, { extension } = _a, rest = __objRest(_a, ["extension"]);
+  const mask = {
+    mask: extension ? "((999) 999-9999[ x9999])|(+9 (999) 999-9999[ x9999])" : "((999) 999-9999)|( +9 (999) 999-9999)",
+    greedy: false,
+    autoUnmask: true
+  };
+  return /* @__PURE__ */ React.createElement(MaskedInput, __spreadProps(__spreadValues({}, rest), {
+    mask
+  }));
+}
+
+export { PhoneInput };

package/dist/esm/inputs/RadioGroup/RadioGroup.js

@@ -0,0 +1,50 @@
+import debug from 'debug';
+import { Children, cloneElement } from 'react';
+import { Form, FormRadio, Radio } from 'semantic-ui-react';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+debug("thx.controls.inputs.RadioGroup");
+function RadioGroup(props) {
+  const _a = props, { children, onChange, value } = _a, rest = __objRest(_a, ["children", "onChange", "value"]);
+  return /* @__PURE__ */ React.createElement(Form.Group, __spreadValues({}, rest), Children.map(props.children, (child) => {
+    if ((child == null ? void 0 : child.type) === FormRadio || (child == null ? void 0 : child.type) === Radio || (child == null ? void 0 : child.type) === Form.Radio) {
+      return cloneElement(child, {
+        onChange: (ev, args) => {
+          if (onChange)
+            onChange(args.value);
+        },
+        checked: value === child.props.value
+      });
+    }
+    return child;
+  }));
+}
+
+export { RadioGroup };