colibri-ui 0.7.55 → 0.7.57

package/InputRadio/index.js

@@ -0,0 +1,76 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var classNames = require('classnames/bind');
+var index = require('../Typography/index.js');
+var styles = require('./InputRadio.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+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 InputRadio = /*#__PURE__*/React.memo(function (_a) {
+  var checked = _a.checked,
+    children = _a.children,
+    className = _a.className,
+    containerClassName = _a.containerClassName,
+    disabled = _a.disabled,
+    error = _a.error,
+    id = _a.id,
+    name = _a.name,
+    note = _a.note,
+    onBlur = _a.onBlur,
+    onFocus = _a.onFocus,
+    onChange = _a.onChange,
+    onClick = _a.onClick,
+    onMouseEnter = _a.onMouseEnter,
+    style = _a.style,
+    text = _a.text,
+    value = _a.value,
+    testid = _a.testid,
+    rest = tslib.__rest(_a, ["checked", "children", "className", "containerClassName", "disabled", "error", "id", "name", "note", "onBlur", "onFocus", "onChange", "onClick", "onMouseEnter", "style", "text", "value", "testid"]);
+  return /*#__PURE__*/React__default.default.createElement("label", {
+    className: clx(styles__default.default.label, className),
+    htmlFor: id,
+    style: style,
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    "data-testid": testid
+  }, /*#__PURE__*/React__default.default.createElement("div", {
+    className: clx(styles__default.default.container, {
+      container_disabled: !!disabled,
+      container_error: !!error
+    }, containerClassName)
+  }, /*#__PURE__*/React__default.default.createElement("input", tslib.__assign({
+    type: "radio",
+    id: id,
+    value: value,
+    name: name,
+    className: clx(styles__default.default.input, {
+      input_error: !!error,
+      input_checked: !!checked,
+      input_disabled: !!disabled
+    }),
+    checked: checked,
+    disabled: disabled,
+    onChange: onChange,
+    onFocus: onFocus,
+    onBlur: onBlur
+  }, rest)), /*#__PURE__*/React__default.default.createElement("span", {
+    className: clx(styles__default.default.icon)
+  }), /*#__PURE__*/React__default.default.createElement("span", {
+    className: clx(styles__default.default.text)
+  }, !children && text, !text && children)), !!note && ( /*#__PURE__*/React__default.default.createElement(index.default, {
+    tag: "p",
+    size: "s",
+    className: clx(styles__default.default.note)
+  }, note)));
+});
+
+exports.default = InputRadio;

package/Modal/components/Title/Title.module.css

@@ -1,4 +1,9 @@
 .wrapper {
   display: flex;
   padding: 16px;
+}
+
+.title {
+  margin: 0;
+  padding: 0;
 }

package/Modal/components/Title/index.js

@@ -18,7 +18,8 @@ var Title = function Title(_a) {
   var children = _a.children;
   return /*#__PURE__*/React__default.default.createElement(index.default, {
     tag: "h3",
-    size: "h3"
+    size: "h3",
+    className: clx(styles__default.default.title)
   }, /*#__PURE__*/React__default.default.createElement("div", {
     className: clx(styles__default.default.wrapper)
   }, children));

package/README.md

@@ -14,6 +14,28 @@ React UI components library.
 npm i -S colibri-ui
 ```
 
+## Usage
+
+```tsx
+// app/layout.tsx
+import classNames from "classnames";
+import "colibri-ui/theme_default_variables.css";
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={classNames("theme")}>
+        {children}
+      </body>
+    </html>
+  );
+}
+```
+
 ## License
 
 MIT

package/RadioGroup/Radio.js

@@ -0,0 +1,45 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var index = require('../InputRadio/index.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+var Radio = function Radio(_a) {
+  var id = _a.id,
+    value = _a.value,
+    text = _a.text,
+    note = _a.note,
+    name = _a.name,
+    _b = _a.checked,
+    checked = _b === void 0 ? false : _b,
+    onChange = _a.onChange,
+    onBlur = _a.onBlur,
+    onClick = _a.onClick,
+    onMouseEnter = _a.onMouseEnter,
+    className = _a.className,
+    _c = _a.disabled,
+    disabled = _c === void 0 ? false : _c,
+    testId = _a.testId;
+  return /*#__PURE__*/React__default.default.createElement(index.default, {
+    id: id,
+    value: value,
+    checked: checked,
+    onChange: onChange,
+    onBlur: onBlur,
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    text: text,
+    note: note,
+    name: name,
+    className: className,
+    disabled: disabled,
+    testid: testId
+  });
+};
+
+exports.default = Radio;

package/RadioGroup/index.js

@@ -0,0 +1,68 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var classNames = require('classnames/bind');
+var Radio = require('./Radio.js');
+var styles = require('./RadioGroup.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+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 RadioGroup = /*#__PURE__*/React.memo(function (_a) {
+  var val = _a.val,
+    options = _a.options,
+    _onChange = _a.onChange,
+    onBlur = _a.onBlur,
+    _b = _a.column,
+    column = _b === void 0 ? false : _b,
+    _c = _a.wrapped,
+    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;
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clx(styles__default.default.group, {
+      column: column,
+      wrapped: wrapped,
+      hasError: hasError
+    }, className)
+  }, options.map(function (option) {
+    var id = option.id,
+      optionVal = option.val,
+      text = option.text,
+      note = option.note,
+      name = option.name,
+      onClick = option.onClick,
+      onMouseEnter = option.onMouseEnter,
+      optionClassName = option.className,
+      optionDisabled = option.disabled;
+    return /*#__PURE__*/React__default.default.createElement(Radio.default, {
+      key: optionVal,
+      id: id,
+      testId: id,
+      value: optionVal,
+      text: text,
+      note: note,
+      name: name,
+      className: clx(styles__default.default.radio, optionClassName),
+      checked: val === optionVal,
+      onChange: function onChange(e) {
+        return _onChange(e.target.value);
+      },
+      onBlur: onBlur,
+      onClick: onClick,
+      onMouseEnter: onMouseEnter,
+      disabled: disabled || optionDisabled
+    });
+  }));
+});
+
+exports.default = RadioGroup;

package/esm/InputRadio/index.js

@@ -0,0 +1,66 @@
+import { __rest, __assign } from 'tslib';
+import React, { memo } from 'react';
+import classNames from 'classnames/bind';
+import Typography from '../Typography/index.js';
+import styles from './InputRadio.module.css';
+
+var clx = classNames.bind(styles);
+var InputRadio = /*#__PURE__*/memo(function (_a) {
+  var checked = _a.checked,
+    children = _a.children,
+    className = _a.className,
+    containerClassName = _a.containerClassName,
+    disabled = _a.disabled,
+    error = _a.error,
+    id = _a.id,
+    name = _a.name,
+    note = _a.note,
+    onBlur = _a.onBlur,
+    onFocus = _a.onFocus,
+    onChange = _a.onChange,
+    onClick = _a.onClick,
+    onMouseEnter = _a.onMouseEnter,
+    style = _a.style,
+    text = _a.text,
+    value = _a.value,
+    testid = _a.testid,
+    rest = __rest(_a, ["checked", "children", "className", "containerClassName", "disabled", "error", "id", "name", "note", "onBlur", "onFocus", "onChange", "onClick", "onMouseEnter", "style", "text", "value", "testid"]);
+  return /*#__PURE__*/React.createElement("label", {
+    className: clx(styles.label, className),
+    htmlFor: id,
+    style: style,
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    "data-testid": testid
+  }, /*#__PURE__*/React.createElement("div", {
+    className: clx(styles.container, {
+      container_disabled: !!disabled,
+      container_error: !!error
+    }, containerClassName)
+  }, /*#__PURE__*/React.createElement("input", __assign({
+    type: "radio",
+    id: id,
+    value: value,
+    name: name,
+    className: clx(styles.input, {
+      input_error: !!error,
+      input_checked: !!checked,
+      input_disabled: !!disabled
+    }),
+    checked: checked,
+    disabled: disabled,
+    onChange: onChange,
+    onFocus: onFocus,
+    onBlur: onBlur
+  }, rest)), /*#__PURE__*/React.createElement("span", {
+    className: clx(styles.icon)
+  }), /*#__PURE__*/React.createElement("span", {
+    className: clx(styles.text)
+  }, !children && text, !text && children)), !!note && ( /*#__PURE__*/React.createElement(Typography, {
+    tag: "p",
+    size: "s",
+    className: clx(styles.note)
+  }, note)));
+});
+
+export { InputRadio as default };

package/esm/Modal/components/Title/Title.module.css

@@ -1,4 +1,9 @@
 .wrapper {
   display: flex;
   padding: 16px;
+}
+
+.title {
+  margin: 0;
+  padding: 0;
 }

package/esm/Modal/components/Title/index.js

@@ -8,7 +8,8 @@ var Title = function Title(_a) {
   var children = _a.children;
   return /*#__PURE__*/React.createElement(Typography, {
     tag: "h3",
-    size: "h3"
+    size: "h3",
+    className: clx(styles.title)
   }, /*#__PURE__*/React.createElement("div", {
     className: clx(styles.wrapper)
   }, children));

package/esm/RadioGroup/Radio.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import InputRadio from '../InputRadio/index.js';
+
+var Radio = function Radio(_a) {
+  var id = _a.id,
+    value = _a.value,
+    text = _a.text,
+    note = _a.note,
+    name = _a.name,
+    _b = _a.checked,
+    checked = _b === void 0 ? false : _b,
+    onChange = _a.onChange,
+    onBlur = _a.onBlur,
+    onClick = _a.onClick,
+    onMouseEnter = _a.onMouseEnter,
+    className = _a.className,
+    _c = _a.disabled,
+    disabled = _c === void 0 ? false : _c,
+    testId = _a.testId;
+  return /*#__PURE__*/React.createElement(InputRadio, {
+    id: id,
+    value: value,
+    checked: checked,
+    onChange: onChange,
+    onBlur: onBlur,
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    text: text,
+    note: note,
+    name: name,
+    className: className,
+    disabled: disabled,
+    testid: testId
+  });
+};
+
+export { Radio as default };

package/esm/RadioGroup/index.js

@@ -0,0 +1,58 @@
+import React, { memo } from 'react';
+import classNames from 'classnames/bind';
+import Radio from './Radio.js';
+import styles from './RadioGroup.module.css';
+
+var clx = classNames.bind(styles);
+var RadioGroup = /*#__PURE__*/memo(function (_a) {
+  var val = _a.val,
+    options = _a.options,
+    _onChange = _a.onChange,
+    onBlur = _a.onBlur,
+    _b = _a.column,
+    column = _b === void 0 ? false : _b,
+    _c = _a.wrapped,
+    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;
+  return /*#__PURE__*/React.createElement("div", {
+    className: clx(styles.group, {
+      column: column,
+      wrapped: wrapped,
+      hasError: hasError
+    }, className)
+  }, options.map(function (option) {
+    var id = option.id,
+      optionVal = option.val,
+      text = option.text,
+      note = option.note,
+      name = option.name,
+      onClick = option.onClick,
+      onMouseEnter = option.onMouseEnter,
+      optionClassName = option.className,
+      optionDisabled = option.disabled;
+    return /*#__PURE__*/React.createElement(Radio, {
+      key: optionVal,
+      id: id,
+      testId: id,
+      value: optionVal,
+      text: text,
+      note: note,
+      name: name,
+      className: clx(styles.radio, optionClassName),
+      checked: val === optionVal,
+      onChange: function onChange(e) {
+        return _onChange(e.target.value);
+      },
+      onBlur: onBlur,
+      onClick: onClick,
+      onMouseEnter: onMouseEnter,
+      disabled: disabled || optionDisabled
+    });
+  }));
+});
+
+export { RadioGroup as default };

package/esm/index.d.ts

@@ -11,6 +11,7 @@ export { default as Input } from "./Input";
 export { default as Menu } from "./Menu";
 export { default as Modal } from "./Modal";
 export { default as Portal } from "./Portal";
+export { default as RadioGroup } from './RadioGroup';
 export { default as Select } from "./Select";
 export { default as Separator } from "./Separator";
 export { SkeletonText, SkeletonRect } from "./Skeleton";

package/esm/index.js

@@ -11,6 +11,7 @@ export { default as Input } from './Input/index.js';
 export { default as Menu } from './Menu/index.js';
 export { default as Modal } from './Modal/index.js';
 export { default as Portal } from './Portal/index.js';
+export { default as RadioGroup } from './RadioGroup/index.js';
 export { default as Select } from './Select/index.js';
 export { default as Separator } from './Separator/index.js';
 export { SkeletonRect, SkeletonText } from './Skeleton/index.js';

package/index.d.ts

@@ -11,6 +11,7 @@ export { default as Input } from "./Input";
 export { default as Menu } from "./Menu";
 export { default as Modal } from "./Modal";
 export { default as Portal } from "./Portal";
+export { default as RadioGroup } from './RadioGroup';
 export { default as Select } from "./Select";
 export { default as Separator } from "./Separator";
 export { SkeletonText, SkeletonRect } from "./Skeleton";

package/index.js

@@ -13,13 +13,14 @@ var index$9 = require('./Input/index.js');
 var index$a = require('./Menu/index.js');
 var index$b = require('./Modal/index.js');
 var index$c = require('./Portal/index.js');
-var index$d = require('./Select/index.js');
-var index$e = require('./Separator/index.js');
-var index$f = require('./Skeleton/index.js');
-var index$g = require('./Switch/index.js');
-var index$h = require('./Theme/index.js');
-var index$i = require('./Typography/index.js');
-var index$j = require('./hooks/useMediaSizes/index.js');
+var index$d = require('./RadioGroup/index.js');
+var index$e = require('./Select/index.js');
+var index$f = require('./Separator/index.js');
+var index$g = require('./Skeleton/index.js');
+var index$h = require('./Switch/index.js');
+var index$i = require('./Theme/index.js');
+var index$j = require('./Typography/index.js');
+var index$k = require('./hooks/useMediaSizes/index.js');
 require('./Icons/index.js');
 var Cart = require('./Icons/Cart.js');
 var Chevron = require('./Icons/Chevron.js');
@@ -49,14 +50,15 @@ exports.Input = index$9.default;
 exports.Menu = index$a.default;
 exports.Modal = index$b.default;
 exports.Portal = index$c.default;
-exports.Select = index$d.default;
-exports.Separator = index$e.default;
-exports.SkeletonRect = index$f.SkeletonRect;
-exports.SkeletonText = index$f.SkeletonText;
-exports.Switch = index$g.default;
-exports.THEMES = index$h.THEMES;
-exports.Typography = index$i.default;
-exports.useMediaSizes = index$j.default;
+exports.RadioGroup = index$d.default;
+exports.Select = index$e.default;
+exports.Separator = index$f.default;
+exports.SkeletonRect = index$g.SkeletonRect;
+exports.SkeletonText = index$g.SkeletonText;
+exports.Switch = index$h.default;
+exports.THEMES = index$i.THEMES;
+exports.Typography = index$j.default;
+exports.useMediaSizes = index$k.default;
 exports.Cart = Cart.default;
 exports.Chevron = Chevron.default;
 exports.Close = Close.default;

package/package.json

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