colibri-ui 0.7.68 → 0.7.70

package/Chip/Chip.module.css

@@ -4,13 +4,13 @@
 }
 
 .inner {
-  place-items: stretch flex-start;
   box-sizing: border-box;
   display: flex;
   font-family: Roboto, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   min-width: 0;
+  place-items: stretch flex-start;
   transition-duration: 0.3s;
   transition-property: background, box-shadow, transform;
   transition-timing-function: ease;

package/Input/index.js

@@ -21,15 +21,18 @@ var Input = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     label = _a.label,
     hint = _a.hint,
     error = _a.error,
+    required = _a.required,
     onChange = _a.onChange,
+    inputRef = _a.inputRef,
     _b = _a.variant,
     variant = _b === void 0 ? "primary" : _b,
     _c = _a.size,
     size = _c === void 0 ? "m" : _c,
-    props = tslib.__rest(_a, ["className", "startIcon", "endIcon", "label", "hint", "error", "onChange", "variant", "size"]);
+    props = tslib.__rest(_a, ["className", "startIcon", "endIcon", "label", "hint", "error", "required", "onChange", "inputRef", "variant", "size"]);
   return /*#__PURE__*/React__default.default.createElement(index.default, {
     className: classNames__default.default(className),
     label: label,
+    required: required,
     hint: hint,
     error: error
   }, /*#__PURE__*/React__default.default.createElement(index$1.default, {
@@ -41,6 +44,7 @@ var Input = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     disabled: !!props.disabled,
     error: error
   }, /*#__PURE__*/React__default.default.createElement(index$2.default, tslib.__assign({
+    ref: inputRef,
     onChange: onChange,
     type: "text"
   }, props))));

package/Input/index.props.d.ts

@@ -1,4 +1,4 @@
-import type { ChangeEvent, InputHTMLAttributes, ReactNode } from "react";
+import type { ChangeEvent, ForwardedRef, InputHTMLAttributes, ReactNode } from "react";
 import type { FormFieldProps } from "../base/FormField/index.props";
 import type { Size, Variant } from "../base/InputRoot/index.props";
 export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "size">, Omit<FormFieldProps, "children"> {
@@ -10,4 +10,6 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
     label?: ReactNode;
     hint?: ReactNode;
     error?: boolean;
+    required?: boolean;
+    inputRef?: ForwardedRef<HTMLInputElement>;
 }

package/RadioGroup/index.d.ts

@@ -21,7 +21,6 @@ interface Props {
     wrapped?: boolean;
     className?: string;
     disabled?: boolean;
-    hasError?: boolean;
 }
 declare const RadioGroup: FC<Props>;
 export default RadioGroup;

package/RadioGroup/index.js

@@ -25,14 +25,11 @@ var RadioGroup = /*#__PURE__*/React.memo(function (_a) {
     wrapped = _c === void 0 ? false : _c,
     className = _a.className,
     _d = _a.disabled,
-    disabled = _d === void 0 ? false : _d,
-    _e = _a.hasError,
-    hasError = _e === void 0 ? false : _e;
+    disabled = _d === void 0 ? false : _d;
   return /*#__PURE__*/React__default.default.createElement("div", {
     className: clx(styles__default.default.group, {
       column: column,
-      wrapped: wrapped,
-      hasError: hasError
+      wrapped: wrapped
     }, className)
   }, options.map(function (option) {
     var id = option.id,

package/Select/index.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { SelectProps } from "./index.props";
-declare const Select: <T extends string>({ options, value, zIndex, label, hint, error, placeholder, disabled, fullWidth, onChange, }: SelectProps<T>) => React.JSX.Element;
+declare const Select: <T extends string>({ options, value, zIndex, label, hint, error, required, placeholder, disabled, fullWidth, onChange, }: SelectProps<T>) => React.JSX.Element;
 export default Select;

package/Select/index.js

@@ -26,6 +26,7 @@ var Select = function Select(_a) {
     label = _a.label,
     hint = _a.hint,
     error = _a.error,
+    required = _a.required,
     placeholder = _a.placeholder,
     disabled = _a.disabled,
     _c = _a.fullWidth,
@@ -56,6 +57,7 @@ var Select = function Select(_a) {
     className: clx(styles__default.default["form-field"], {
       "form-field_fullWidth": fullWidth ? 1 : 0
     }),
+    required: required,
     label: label,
     hint: hint,
     error: error

package/Select/index.props.d.ts

@@ -12,6 +12,7 @@ export interface SelectProps<T extends string> extends Omit<FormFieldProps, "chi
     disabled?: boolean;
     placeholder?: string;
     fullWidth?: boolean;
+    required?: boolean;
 }
 export type Coordinates = {
     top: number;

package/base/FormField/FormField.module.css

@@ -1,5 +1,11 @@
+@charset "UTF-8";
 .container {
   display: flex;
   flex-direction: column;
   gap: 8px;
+}
+
+.label_required::after {
+  color: var(--typography-alert);
+  content: " *";
 }

package/base/FormField/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var classNames = require('classnames');
+var classNames = require('classnames/bind');
 var index = require('../../Typography/index.js');
 var styles = require('./FormField.module.css');
 
@@ -13,18 +13,23 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var classNames__default = /*#__PURE__*/_interopDefault(classNames);
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
+var clx = classNames__default.default.bind(styles__default.default);
 var FormField = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var label = _a.label,
     hint = _a.hint,
     children = _a.children,
     error = _a.error,
+    required = _a.required,
     className = _a.className;
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: classNames__default.default(styles__default.default.container, className),
+    className: clx(styles__default.default.container, className),
     ref: ref
-  }, label && /*#__PURE__*/React__default.default.createElement(index.default, {
+  }, label && ( /*#__PURE__*/React__default.default.createElement(index.default, {
+    className: clx(styles__default.default.label, {
+      label_required: !!required
+    }),
     tag: "label"
-  }, label), children, hint && ( /*#__PURE__*/React__default.default.createElement(index.default, {
+  }, label)), children, hint && ( /*#__PURE__*/React__default.default.createElement(index.default, {
     variant: error ? "alert" : "secondary",
     tag: "span"
   }, hint)));

package/base/FormField/index.props.d.ts

@@ -3,6 +3,7 @@ export type FormFieldProps = {
     label?: ReactNode;
     hint?: ReactNode;
     error?: boolean;
+    required?: boolean;
     className?: string;
     children: ReactNode;
 };

package/esm/Chip/Chip.module.css

@@ -4,13 +4,13 @@
 }
 
 .inner {
-  place-items: stretch flex-start;
   box-sizing: border-box;
   display: flex;
   font-family: Roboto, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   min-width: 0;
+  place-items: stretch flex-start;
   transition-duration: 0.3s;
   transition-property: background, box-shadow, transform;
   transition-timing-function: ease;

package/esm/Input/index.js

@@ -12,15 +12,18 @@ var Input = /*#__PURE__*/forwardRef(function (_a, ref) {
     label = _a.label,
     hint = _a.hint,
     error = _a.error,
+    required = _a.required,
     onChange = _a.onChange,
+    inputRef = _a.inputRef,
     _b = _a.variant,
     variant = _b === void 0 ? "primary" : _b,
     _c = _a.size,
     size = _c === void 0 ? "m" : _c,
-    props = __rest(_a, ["className", "startIcon", "endIcon", "label", "hint", "error", "onChange", "variant", "size"]);
+    props = __rest(_a, ["className", "startIcon", "endIcon", "label", "hint", "error", "required", "onChange", "inputRef", "variant", "size"]);
   return /*#__PURE__*/React__default.createElement(FormField, {
     className: classNames(className),
     label: label,
+    required: required,
     hint: hint,
     error: error
   }, /*#__PURE__*/React__default.createElement(InputRoot, {
@@ -32,6 +35,7 @@ var Input = /*#__PURE__*/forwardRef(function (_a, ref) {
     disabled: !!props.disabled,
     error: error
   }, /*#__PURE__*/React__default.createElement(BaseInput, __assign({
+    ref: inputRef,
     onChange: onChange,
     type: "text"
   }, props))));

package/esm/Input/index.props.d.ts

@@ -1,4 +1,4 @@
-import type { ChangeEvent, InputHTMLAttributes, ReactNode } from "react";
+import type { ChangeEvent, ForwardedRef, InputHTMLAttributes, ReactNode } from "react";
 import type { FormFieldProps } from "../base/FormField/index.props";
 import type { Size, Variant } from "../base/InputRoot/index.props";
 export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "size">, Omit<FormFieldProps, "children"> {
@@ -10,4 +10,6 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
     label?: ReactNode;
     hint?: ReactNode;
     error?: boolean;
+    required?: boolean;
+    inputRef?: ForwardedRef<HTMLInputElement>;
 }

package/esm/RadioGroup/index.d.ts

@@ -21,7 +21,6 @@ interface Props {
     wrapped?: boolean;
     className?: string;
     disabled?: boolean;
-    hasError?: boolean;
 }
 declare const RadioGroup: FC<Props>;
 export default RadioGroup;

package/esm/RadioGroup/index.js

@@ -15,14 +15,11 @@ var RadioGroup = /*#__PURE__*/memo(function (_a) {
     wrapped = _c === void 0 ? false : _c,
     className = _a.className,
     _d = _a.disabled,
-    disabled = _d === void 0 ? false : _d,
-    _e = _a.hasError,
-    hasError = _e === void 0 ? false : _e;
+    disabled = _d === void 0 ? false : _d;
   return /*#__PURE__*/React__default.createElement("div", {
     className: clx(styles.group, {
       column: column,
-      wrapped: wrapped,
-      hasError: hasError
+      wrapped: wrapped
     }, className)
   }, options.map(function (option) {
     var id = option.id,

package/esm/Select/index.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { SelectProps } from "./index.props";
-declare const Select: <T extends string>({ options, value, zIndex, label, hint, error, placeholder, disabled, fullWidth, onChange, }: SelectProps<T>) => React.JSX.Element;
+declare const Select: <T extends string>({ options, value, zIndex, label, hint, error, required, placeholder, disabled, fullWidth, onChange, }: SelectProps<T>) => React.JSX.Element;
 export default Select;

package/esm/Select/index.js

@@ -16,6 +16,7 @@ var Select = function Select(_a) {
     label = _a.label,
     hint = _a.hint,
     error = _a.error,
+    required = _a.required,
     placeholder = _a.placeholder,
     disabled = _a.disabled,
     _c = _a.fullWidth,
@@ -46,6 +47,7 @@ var Select = function Select(_a) {
     className: clx(styles["form-field"], {
       "form-field_fullWidth": fullWidth ? 1 : 0
     }),
+    required: required,
     label: label,
     hint: hint,
     error: error

package/esm/Select/index.props.d.ts

@@ -12,6 +12,7 @@ export interface SelectProps<T extends string> extends Omit<FormFieldProps, "chi
     disabled?: boolean;
     placeholder?: string;
     fullWidth?: boolean;
+    required?: boolean;
 }
 export type Coordinates = {
     top: number;

package/esm/base/FormField/FormField.module.css

@@ -1,5 +1,11 @@
+@charset "UTF-8";
 .container {
   display: flex;
   flex-direction: column;
   gap: 8px;
+}
+
+.label_required::after {
+  color: var(--typography-alert);
+  content: " *";
 }

package/esm/base/FormField/index.js

@@ -1,20 +1,25 @@
 import React__default, { forwardRef } from 'react';
-import classNames from 'classnames';
+import classNames from 'classnames/bind';
 import Typography from '../../Typography/index.js';
 import styles from './FormField.module.css';
 
+var clx = classNames.bind(styles);
 var FormField = /*#__PURE__*/forwardRef(function (_a, ref) {
   var label = _a.label,
     hint = _a.hint,
     children = _a.children,
     error = _a.error,
+    required = _a.required,
     className = _a.className;
   return /*#__PURE__*/React__default.createElement("div", {
-    className: classNames(styles.container, className),
+    className: clx(styles.container, className),
     ref: ref
-  }, label && /*#__PURE__*/React__default.createElement(Typography, {
+  }, label && ( /*#__PURE__*/React__default.createElement(Typography, {
+    className: clx(styles.label, {
+      label_required: !!required
+    }),
     tag: "label"
-  }, label), children, hint && ( /*#__PURE__*/React__default.createElement(Typography, {
+  }, label)), children, hint && ( /*#__PURE__*/React__default.createElement(Typography, {
     variant: error ? "alert" : "secondary",
     tag: "span"
   }, hint)));

package/esm/base/FormField/index.props.d.ts

@@ -3,6 +3,7 @@ export type FormFieldProps = {
     label?: ReactNode;
     hint?: ReactNode;
     error?: boolean;
+    required?: boolean;
     className?: string;
     children: ReactNode;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "colibri-ui",
-  "version": "0.7.68",
+  "version": "0.7.70",
   "description": "React UI components library",
   "main": "index.js",
   "scripts": {},