@helpdice/ui 2.6.0-beta.1 → 2.6.0-beta.2

package/dist/textarea/index.js

@@ -1787,10 +1787,10 @@ var TextComponent = function TextComponent(_ref) {
 TextComponent.displayName = 'Text';
 var Text = withScale(TextComponent);
 
-var InputBlockLabelComponent = function InputBlockLabelComponent(_ref) {
-  var children = _ref.children,
-    _ref$required = _ref.required,
-    required = _ref$required === void 0 ? false : _ref$required;
+var InputBlockLabelComponent = function InputBlockLabelComponent(_ref2) {
+  var children = _ref2.children,
+    _ref2$required = _ref2.required,
+    required = _ref2$required === void 0 ? false : _ref2$required;
   var theme$1 = theme.useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;
@@ -1809,7 +1809,7 @@ var InputBlockLabelComponent = function InputBlockLabelComponent(_ref) {
 InputBlockLabelComponent.displayName = 'InputBlockLabel';
 var InputBlockLabel = /*#__PURE__*/React.memo(InputBlockLabelComponent);
 
-var _excluded = ["type", "disabled", "readOnly", "onFocus", "onBlur", "className", "initialValue", "onChange", "value", "placeholder", "helperText", "error", "label", "resize"];
+var _excluded = ["type", "disabled", "readOnly", "onFocus", "onBlur", "className", "initialValue", "onChange", "value", "placeholder", "helperText", "error", "label", "required", "resize"];
 tuple('none', 'both', 'horizontal', 'vertical', 'initial', 'inherit');
 var TextareaComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$type = _ref.type,
@@ -1830,6 +1830,7 @@ var TextareaComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     helperText = _ref.helperText,
     error = _ref.error,
     label = _ref.label,
+    required = _ref.required,
     _ref$resize = _ref.resize,
     resize = _ref$resize === void 0 ? 'none' : _ref$resize,
     props = _objectWithoutProperties(_ref, _excluded);
@@ -1888,6 +1889,7 @@ var TextareaComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "with-label",
     children: [label && /*#__PURE__*/jsxRuntime.jsx(InputBlockLabel, {
+      required: required,
       children: label
     }), /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: _JSXStyle.dynamic([["12276481", [theme$1.layout.radius, borderColor, color, SCALES.font(0.875), SCALES.height(1, 'auto'), SCALES.width(1, 'initial'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, theme$1.palette.accents_1, theme$1.palette.accents_2, theme$1.font.sans, SCALES.pt(0.5), SCALES.pr(0.5), SCALES.pb(0.5), SCALES.pl(0.5), resize, theme$1.palette.background]]]) + " " + (classes || ""),

package/dist/textarea/textarea.d.ts

@@ -15,6 +15,7 @@ interface Props {
     onBlur?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
     className?: string;
     error?: boolean;
+    required?: boolean;
     helperText?: string;
     label?: string;
     resize?: TextareaResizes;

package/esm/index.d.ts

@@ -42,7 +42,7 @@ export { default as Container } from './container';
 export { default as HtmlRenderer } from './html-renderer';
 export { default as Image } from './image';
 export type { ImageProps, ImageBrowserProps } from './image';
-export { default as Input, getColors } from './input';
+export { default as Input, getColors, InputLabel, InputError } from './input';
 export type { InputProps, InputPasswordProps } from './input';
 export { default as Keyboard } from './keyboard';
 export type { KeyboardProps } from './keyboard';

package/esm/index.js

@@ -28,7 +28,7 @@ export { default as Grid } from './grid';
 export { default as Container } from './container';
 export { default as HtmlRenderer } from './html-renderer';
 export { default as Image } from './image';
-export { default as Input, getColors } from './input';
+export { default as Input, getColors, InputLabel, InputError } from './input';
 export { default as Keyboard } from './keyboard';
 export { default as Link } from './link';
 export { default as Loading } from './loading';

package/esm/input/index.d.ts

@@ -14,5 +14,6 @@ export type { InputProps } from './input-field';
 export type { InputTypes } from './input-props';
 export type { InputPasswordProps } from './password';
 export type { TextareaProps } from '../textarea';
+export { default as InputLabel, InputError } from "./input-block-label";
 declare const _default: InputComponentType;
 export default _default;

package/esm/input/index.js

@@ -9,4 +9,5 @@ Input.Password = InputPassword;
 Input.Phone = PhoneInput;
 Input.Currency = CurrencyInput;
 export { getColors } from './styles';
+export { default as InputLabel, InputError } from "./input-block-label";
 export default Input;

package/esm/input/input-block-label.d.ts

@@ -2,5 +2,9 @@ import React from 'react';
 export interface InputBlockLabelLabel {
     required?: boolean;
 }
+export declare const InputError: React.FC<{
+    text: string;
+    error?: string;
+}>;
 declare const InputBlockLabel: React.NamedExoticComponent<React.PropsWithChildren<InputBlockLabelLabel>>;
 export default InputBlockLabel;

package/esm/input/input-block-label.js

@@ -2,10 +2,26 @@ import _JSXStyle from "../styled-jsx.es.js";
 import React from 'react';
 import { useTheme } from '@helpdice/theme';
 import useScale from '../use-scale';
-var InputBlockLabelComponent = function InputBlockLabelComponent(_ref) {
-  var children = _ref.children,
-    _ref$required = _ref.required,
-    required = _ref$required === void 0 ? false : _ref$required;
+import Text from '../text';
+export var InputError = function InputError(_ref) {
+  var text = _ref.text,
+    error = _ref.error;
+  return /*#__PURE__*/React.createElement(Text, {
+    font: 0.8,
+    style: {
+      marginTop: 0.4,
+      marginRight: 0,
+      marginLeft: 0,
+      marginBottom: '0.4rem',
+      textAlign: 'left'
+    },
+    color: error ? "error" : 'default'
+  }, "\xA0", text);
+};
+var InputBlockLabelComponent = function InputBlockLabelComponent(_ref2) {
+  var children = _ref2.children,
+    _ref2$required = _ref2.required,
+    required = _ref2$required === void 0 ? false : _ref2$required;
   var theme = useTheme();
   var _useScale = useScale(),
     SCALES = _useScale.SCALES;

package/esm/input/input-field.js

@@ -10,10 +10,9 @@ import _JSXStyle from "../styled-jsx.es.js";
 import React, { useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { useTheme, useClasses } from '@helpdice/theme';
 import InputLabel from './input-label';
-import InputBlockLabel from './input-block-label';
+import InputBlockLabel, { InputError } from './input-block-label';
 import InputIcon from './input-icon';
 import InputClearIcon from './input-icon-clear';
-import Text from '../text';
 import { getColors } from './styles';
 import useScale, { withScale } from '../use-scale';
 var simulateChangeEvent = function simulateChangeEvent(el, event) {
@@ -182,17 +181,10 @@ var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     isRight: true
   }, labelRight), /*#__PURE__*/React.createElement("br", {
     className: _JSXStyle.dynamic([["2371903369", [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), SCALES.width(1, defaultWidth), variant === 'normal' ? theme.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme.palette.accents_1, theme.palette.accents_2, hoverBorder, SCALES.font(0.875), theme.palette.foreground, theme.palette.accents_3, theme.palette.background, color]]])
-  })), helperText && /*#__PURE__*/React.createElement(Text, {
-    font: 0.8,
-    style: {
-      marginTop: 0.4,
-      marginRight: 0,
-      marginLeft: 0,
-      marginBottom: '0.4rem',
-      textAlign: 'left'
-    },
-    color: error ? "error" : 'default'
-  }, "\xA0", helperText), /*#__PURE__*/React.createElement(_JSXStyle, {
+  })), helperText && /*#__PURE__*/React.createElement(InputError, {
+    text: helperText,
+    error: error
+  }), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "2371903369",
     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), SCALES.width(1, defaultWidth), variant === 'normal' ? theme.layout.radius : '', variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), theme.palette.accents_1, theme.palette.accents_2, hoverBorder, SCALES.font(0.875), theme.palette.foreground, theme.palette.accents_3, theme.palette.background, color]
   }, ".with-label.__jsx-style-dynamic-selector{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), ";}.input-container.__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;width:").concat(SCALES.width(1, defaultWidth), ";height:var(--input-height);}.input-wrapper.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:").concat(variant === 'normal' ? theme.layout.radius : '', ";").concat(variant === 'none' ? '' : variant === 'line' ? "border-bottom: 1px solid ".concat(borderColor) : "border: 1px solid ".concat(borderColor), ";-webkit-transition:border 0.2s ease 0s,color 0.2s ease 0s;transition:border 0.2s ease 0s,color 0.2s ease 0s;}.input-wrapper.left-label.__jsx-style-dynamic-selector{border-top-left-radius:0;border-bottom-left-radius:0;}.input-wrapper.right-label.__jsx-style-dynamic-selector{border-top-right-radius:0;border-bottom-right-radius:0;}.input-wrapper.disabled.__jsx-style-dynamic-selector{background-color:").concat(theme.palette.accents_1, ";border-color:").concat(theme.palette.accents_2, ";cursor:not-allowed;}input.disabled.__jsx-style-dynamic-selector{cursor:not-allowed;}.input-wrapper.hover.__jsx-style-dynamic-selector{border-color:").concat(hoverBorder, ";}input.__jsx-style-dynamic-selector{margin:0.25em 0.625em;padding:0;box-shadow:none;font-size:").concat(SCALES.font(0.875), ";background-color:transparent;border:none;color:").concat(theme.palette.foreground, ";outline:none;border-radius:0;width:100%;min-width:0;-webkit-appearance:none;}input.left-icon.__jsx-style-dynamic-selector{margin-left:0;}input.right-icon.__jsx-style-dynamic-selector{margin-right:0;}.__jsx-style-dynamic-selector::-webkit-input-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector::placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector::-ms-reveal{display:none !important;}input.__jsx-style-dynamic-selector:-webkit-autofill,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:hover,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:active,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:focus{-webkit-box-shadow:0 0 0 30px ").concat(theme.palette.background, " inset !important;-webkit-text-fill-color:").concat(color, " !important;}")));

package/esm/select/select.d.ts

@@ -24,6 +24,7 @@ interface Props {
     dropdownStyle?: CSSProperties;
     disableMatchWidth?: boolean;
     error?: boolean;
+    required?: boolean;
     helperText?: string;
     onDropdownVisibleChange?: (visible: boolean) => void;
     getPopupContainer?: () => HTMLElement | null;

package/esm/select/select.js

@@ -2,7 +2,7 @@ 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", "label", "type", "disabled", "initialValue", "value", "icon", "onChange", "pure", "multiple", "fullWidth", "clearable", "placeholder", "className", "dropdownClassName", "dropdownStyle", "disableMatchWidth", "helperText", "error", "getPopupContainer", "onDropdownVisibleChange"];
+var _excluded = ["children", "label", "type", "disabled", "initialValue", "value", "icon", "onChange", "pure", "multiple", "fullWidth", "clearable", "placeholder", "className", "dropdownClassName", "dropdownStyle", "disableMatchWidth", "helperText", "error", "required", "getPopupContainer", "onDropdownVisibleChange"];
 import _JSXStyle from "../styled-jsx.es.js";
 /* "use client" */
 
@@ -18,6 +18,7 @@ import { SelectContext } from './select-context';
 import { getColors } from './styles';
 import SelectInput from './select-input';
 import useScale, { withScale } from '../use-scale';
+import InputBlockLabel from '../input/input-block-label';
 var SelectComponent = /*#__PURE__*/React.forwardRef(function (_ref, selectRef) {
   var children = _ref.children,
     label = _ref.label,
@@ -47,6 +48,7 @@ var SelectComponent = /*#__PURE__*/React.forwardRef(function (_ref, selectRef) {
     disableMatchWidth = _ref$disableMatchWidt === void 0 ? false : _ref$disableMatchWidt,
     helperText = _ref.helperText,
     error = _ref.error,
+    required = _ref.required,
     getPopupContainer = _ref.getPopupContainer,
     _ref$onDropdownVisibl = _ref.onDropdownVisibleChange,
     onDropdownVisibleChange = _ref$onDropdownVisibl === void 0 ? function () {} : _ref$onDropdownVisibl,
@@ -173,14 +175,8 @@ var SelectComponent = /*#__PURE__*/React.forwardRef(function (_ref, selectRef) {
   }, className);
   return /*#__PURE__*/React.createElement("div", {
     className: _JSXStyle.dynamic([["1795507141", [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, fullWidth ? '100%' : '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]]])
-  }, label && /*#__PURE__*/React.createElement("label", {
-    style: {
-      display: 'block',
-      marginBottom: '0.4rem',
-      fontSize: '14px',
-      fontWeight: 'light'
-    },
-    className: _JSXStyle.dynamic([["1795507141", [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, fullWidth ? '100%' : '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]]])
+  }, label && /*#__PURE__*/React.createElement(InputBlockLabel, {
+    required: required
   }, label), /*#__PURE__*/React.createElement(SelectContext.Provider, {
     value: initialValue
   }, /*#__PURE__*/React.createElement("div", _extends({

package/esm/textarea/textarea.d.ts

@@ -15,6 +15,7 @@ interface Props {
     onBlur?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
     className?: string;
     error?: boolean;
+    required?: boolean;
     helperText?: string;
     label?: string;
     resize?: TextareaResizes;

package/esm/textarea/textarea.js

@@ -1,7 +1,7 @@
 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 = ["type", "disabled", "readOnly", "onFocus", "onBlur", "className", "initialValue", "onChange", "value", "placeholder", "helperText", "error", "label", "resize"];
+var _excluded = ["type", "disabled", "readOnly", "onFocus", "onBlur", "className", "initialValue", "onChange", "value", "placeholder", "helperText", "error", "label", "required", "resize"];
 import _JSXStyle from "../styled-jsx.es.js";
 /* "use client" */
 
@@ -32,6 +32,7 @@ var TextareaComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     helperText = _ref.helperText,
     error = _ref.error,
     label = _ref.label,
+    required = _ref.required,
     _ref$resize = _ref.resize,
     resize = _ref$resize === void 0 ? 'none' : _ref$resize,
     props = _objectWithoutProperties(_ref, _excluded);
@@ -89,7 +90,9 @@ var TextareaComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var textareaProps = _extends({}, props, controlledValue);
   return /*#__PURE__*/React.createElement("div", {
     className: "with-label"
-  }, label && /*#__PURE__*/React.createElement(InputBlockLabel, null, label), /*#__PURE__*/React.createElement("div", {
+  }, label && /*#__PURE__*/React.createElement(InputBlockLabel, {
+    required: required
+  }, label), /*#__PURE__*/React.createElement("div", {
     className: _JSXStyle.dynamic([["12276481", [theme.layout.radius, borderColor, color, SCALES.font(0.875), SCALES.height(1, 'auto'), SCALES.width(1, 'initial'), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), hoverBorder, theme.palette.accents_1, theme.palette.accents_2, theme.font.sans, SCALES.pt(0.5), SCALES.pr(0.5), SCALES.pb(0.5), SCALES.pl(0.5), resize, theme.palette.background]]]) + " " + (classes || "")
   }, /*#__PURE__*/React.createElement("textarea", _extends({
     ref: textareaRef,

package/package.json

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