colibri-ui 0.8.71 → 0.8.73

package/NumberInput/index.props.d.ts

@@ -0,0 +1,28 @@
+import type { InputProps } from "../Input/index.props";
+export type NumberInputGroupStyle = "thousand" | "lakh" | "wan" | "none";
+export type NumberInputSize = "s" | "m" | "l";
+export interface NumberInputValues {
+    value: string;
+    formattedValue: string;
+    floatValue?: number;
+}
+export interface NumberInputProps extends Omit<InputProps, "type" | "inputMode" | "value" | "defaultValue" | "onChange" | "min" | "max" | "prefix"> {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (values: NumberInputValues) => void;
+    thousandSeparator?: string | false;
+    decimalSeparator?: string;
+    thousandsGroupStyle?: NumberInputGroupStyle;
+    decimalScale?: number;
+    fixedDecimalScale?: boolean;
+    allowNegative?: boolean;
+    allowLeadingZeros?: boolean;
+    prefix?: string;
+    suffix?: string;
+    min?: number;
+    max?: number;
+    isAllowed?: (values: NumberInputValues) => boolean;
+    clearable?: boolean;
+    clearLabel?: string;
+    size?: NumberInputSize;
+}

package/NumberInput/package.json

@@ -0,0 +1,9 @@
+{
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss"
+  ],
+  "module": "../esm/NumberInput/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/Portal/index.d.ts

@@ -1,5 +1,3 @@
-import type { FC, PropsWithChildren } from "react";
-declare const Portal: FC<PropsWithChildren<{
-    node?: HTMLElement | null;
-}>>;
-export default Portal;
+import type { FC } from "react";
+import type { PortalProps } from "./index.props";
+export declare const Portal: FC<PortalProps>;

package/Portal/index.js

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var React = require('react');
 var ReactDOM = require('react-dom');
@@ -24,4 +22,4 @@ var Portal = function Portal(_ref) {
   return mountNode ? /*#__PURE__*/ReactDOM__default.default.createPortal(children, mountNode) : mountNode;
 };
 
-exports.default = Portal;
+exports.Portal = Portal;

package/Portal/index.props.d.ts

@@ -0,0 +1,4 @@
+import type { PropsWithChildren } from "react";
+export type PortalProps = PropsWithChildren<{
+    node?: HTMLElement | null;
+}>;

package/Progress/Progress.d.ts

@@ -1,20 +1,3 @@
 import React from "react";
-import type { HTMLAttributes, ReactNode } from "react";
-export type ProgressSize = "s" | "m" | "l";
-export type ProgressBarSize = "2" | "4" | "6" | "8";
-export type ProgressView = "default" | "secondary" | "accent" | "accentGradient" | "info" | "positive" | "warning" | "negative";
-export interface ProgressProps extends HTMLAttributes<HTMLDivElement> {
-    value: number;
-    hasValue?: boolean;
-    view?: ProgressView | string;
-    size?: ProgressSize | string;
-    progressSize?: ProgressBarSize | string;
-    label?: string;
-    labelIcon?: ReactNode;
-    labelTextPlacement?: "left" | "right" | "none";
-    labelPlacement?: "top" | "left" | "none";
-    valuePlacement?: "top" | "right" | "none";
-    valueAlign?: "start" | "center" | "end";
-    caption?: string;
-}
+import type { ProgressProps } from "./index.props";
 export declare const Progress: React.ForwardRefExoticComponent<ProgressProps & React.RefAttributes<HTMLDivElement>>;

package/Progress/index.d.ts

@@ -1,2 +1,2 @@
 export { Progress } from "./Progress";
-export type { ProgressProps, ProgressSize, ProgressBarSize, ProgressView, } from "./Progress";
+export type { ProgressProps, ProgressSize, ProgressBarSize, ProgressView, } from "./index.props";

package/Progress/index.props.d.ts

@@ -0,0 +1,18 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export type ProgressSize = "s" | "m" | "l";
+export type ProgressBarSize = "2" | "4" | "6" | "8";
+export type ProgressView = "default" | "secondary" | "accent" | "accentGradient" | "info" | "positive" | "warning" | "negative";
+export interface ProgressProps extends HTMLAttributes<HTMLDivElement> {
+    value: number;
+    hasValue?: boolean;
+    view?: ProgressView | string;
+    size?: ProgressSize | string;
+    progressSize?: ProgressBarSize | string;
+    label?: string;
+    labelIcon?: ReactNode;
+    labelTextPlacement?: "left" | "right" | "none";
+    labelPlacement?: "top" | "left" | "none";
+    valuePlacement?: "top" | "right" | "none";
+    valueAlign?: "start" | "center" | "end";
+    caption?: string;
+}

package/README.md

@@ -1,9 +1,16 @@
 # Colibri UI
 
 ![npm version](https://img.shields.io/npm/v/colibri-ui.svg?style=flat)
+![tests](https://img.shields.io/badge/tests-40%20passed-brightgreen?style=flat)
+![coverage statements](https://img.shields.io/badge/statements-90.3%25-brightgreen?style=flat)
+![coverage branches](https://img.shields.io/badge/branches-73.3%25-yellowgreen?style=flat)
+![coverage functions](https://img.shields.io/badge/functions-98.14%25-brightgreen?style=flat)
+![coverage lines](https://img.shields.io/badge/lines-95.55%25-brightgreen?style=flat)
 
 React UI components library.
 
+Colibri UI is in active development. Use it at your own risk 😈
+
 ## Demo
 
 [Demo](https://godfreyd.github.io/colibri-ui)
@@ -29,9 +36,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={clsx("theme")}>
-        {children}
-      </body>
+      <body className={clsx("theme")}>{children}</body>
     </html>
   );
 }

package/RadioGroup/Radio.d.ts

@@ -1,19 +1,3 @@
-import React from "react";
-import type { ChangeEvent, FC, FocusEvent } from "react";
-type Props = {
-    value: string | number;
-    text: string;
-    id?: string;
-    note?: string;
-    name?: string;
-    checked?: boolean;
-    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
-    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
-    onClick?: (event: React.MouseEvent<HTMLLabelElement, MouseEvent>) => void;
-    onMouseEnter?: (event: React.MouseEvent<HTMLLabelElement, MouseEvent>) => void;
-    className: string;
-    disabled?: boolean;
-    testId?: string;
-};
-declare const Radio: FC<Props>;
-export default Radio;
+import type { FC } from "react";
+import type { RadioProps } from "./index.props";
+export declare const Radio: FC<RadioProps>;

package/RadioGroup/Radio.js

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
 var index = require('../InputRadio/index.js');
 
@@ -25,7 +23,7 @@ var Radio = function Radio(_ref) {
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     testId = _ref.testId;
-  return /*#__PURE__*/React__default.default.createElement(index.default, {
+  return /*#__PURE__*/React__default.default.createElement(index.InputRadio, {
     id: id,
     value: value,
     checked: checked,
@@ -42,4 +40,4 @@ var Radio = function Radio(_ref) {
   });
 };
 
-exports.default = Radio;
+exports.Radio = Radio;

package/RadioGroup/index.d.ts

@@ -1,26 +1,3 @@
-import React from "react";
 import type { FC } from "react";
-export interface Option {
-    id?: string;
-    val: string | number;
-    text: string;
-    note?: string;
-    name?: string;
-    tooltipContent?: () => React.ReactElement;
-    onClick?: (event: React.MouseEvent<HTMLLabelElement, MouseEvent>) => void;
-    onMouseEnter?: (event: React.MouseEvent<HTMLLabelElement, MouseEvent>) => void;
-    className?: string;
-    disabled?: boolean;
-}
-export interface RadioGroupProps {
-    val?: string | number;
-    options: Option[];
-    onChange: (value: string) => void;
-    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
-    column?: boolean;
-    wrapped?: boolean;
-    className?: string;
-    disabled?: boolean;
-}
-declare const RadioGroup: FC<RadioGroupProps>;
-export default RadioGroup;
+import type { RadioGroupProps } from "./index.props";
+export declare const RadioGroup: FC<RadioGroupProps>;

package/RadioGroup/index.js

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var React = require('react');
 var clsx = require('clsx');
@@ -39,7 +37,7 @@ var RadioGroup = /*#__PURE__*/React.memo(function (_ref) {
       onMouseEnter = option.onMouseEnter,
       optionClassName = option.className,
       optionDisabled = option.disabled;
-    return /*#__PURE__*/React__default.default.createElement(Radio.default, {
+    return /*#__PURE__*/React__default.default.createElement(Radio.Radio, {
       key: optionVal,
       id: id,
       testId: id,
@@ -60,4 +58,4 @@ var RadioGroup = /*#__PURE__*/React.memo(function (_ref) {
   }));
 });
 
-exports.default = RadioGroup;
+exports.RadioGroup = RadioGroup;

package/RadioGroup/index.props.d.ts

@@ -0,0 +1,38 @@
+import type { ChangeEvent, FocusEvent, ReactElement } from "react";
+export interface Option {
+    id?: string;
+    val: string | number;
+    text: string;
+    note?: string;
+    name?: string;
+    tooltipContent?: () => ReactElement;
+    onClick?: (event: React.MouseEvent<HTMLLabelElement, MouseEvent>) => void;
+    onMouseEnter?: (event: React.MouseEvent<HTMLLabelElement, MouseEvent>) => void;
+    className?: string;
+    disabled?: boolean;
+}
+export interface RadioGroupProps {
+    val?: string | number;
+    options: Option[];
+    onChange: (value: string) => void;
+    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+    column?: boolean;
+    wrapped?: boolean;
+    className?: string;
+    disabled?: boolean;
+}
+export type RadioProps = {
+    value: string | number;
+    text: string;
+    id?: string;
+    note?: string;
+    name?: string;
+    checked?: boolean;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+    onClick?: (event: React.MouseEvent<HTMLLabelElement, MouseEvent>) => void;
+    onMouseEnter?: (event: React.MouseEvent<HTMLLabelElement, MouseEvent>) => void;
+    className: string;
+    disabled?: boolean;
+    testId?: string;
+};

package/Rating/Rating.d.ts

@@ -1,24 +1,3 @@
 import React from "react";
-import type { HTMLAttributes, ReactNode } from "react";
-export type RatingSize = "xxs" | "xs" | "s" | "m" | "l" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "displayS" | "displayM" | "displayL";
-export type RatingView = "default" | "accent";
-export interface RatingProps extends HTMLAttributes<HTMLDivElement> {
-    value?: number | null;
-    hasValue?: boolean;
-    precision?: number;
-    decimalSeparator?: string;
-    valuePlacement?: "before" | "after";
-    iconSlot?: ReactNode;
-    iconSlotOutline?: ReactNode;
-    iconSlotHalf?: ReactNode;
-    hasIcons?: boolean;
-    iconQuantity?: 1 | 5 | 10;
-    helperText?: string;
-    helperTextStretching?: "fixed" | "filled";
-    size?: RatingSize;
-    view?: RatingView | string;
-    fillColor?: string;
-    outlineColor?: string;
-}
+import type { RatingProps } from "./index.props";
 export declare const Rating: React.ForwardRefExoticComponent<RatingProps & React.RefAttributes<HTMLDivElement>>;
-export default Rating;

package/Rating/Rating.js

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var tslib = require('tslib');
 var React = require('react');
 var styles = require('./Rating.module.css');
@@ -128,4 +126,3 @@ var Rating = /*#__PURE__*/React.forwardRef(function RatingBase(_a, ref) {
 });
 
 exports.Rating = Rating;
-exports.default = Rating;

package/Rating/index.d.ts

@@ -1,2 +1,2 @@
-export { default, Rating } from "./Rating";
-export type { RatingProps, RatingSize, RatingView } from "./Rating";
+export { Rating } from "./Rating";
+export type { RatingProps, RatingSize, RatingView } from "./index.props";

package/Rating/index.js

@@ -1,10 +1,7 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var Rating = require('./Rating.js');
 
 
 
 exports.Rating = Rating.Rating;
-exports.default = Rating.Rating;

package/Rating/index.props.d.ts

@@ -0,0 +1,21 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export type RatingSize = "xxs" | "xs" | "s" | "m" | "l" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "displayS" | "displayM" | "displayL";
+export type RatingView = "default" | "accent";
+export interface RatingProps extends HTMLAttributes<HTMLDivElement> {
+    value?: number | null;
+    hasValue?: boolean;
+    precision?: number;
+    decimalSeparator?: string;
+    valuePlacement?: "before" | "after";
+    iconSlot?: ReactNode;
+    iconSlotOutline?: ReactNode;
+    iconSlotHalf?: ReactNode;
+    hasIcons?: boolean;
+    iconQuantity?: 1 | 5 | 10;
+    helperText?: string;
+    helperTextStretching?: "fixed" | "filled";
+    size?: RatingSize;
+    view?: RatingView | string;
+    fillColor?: string;
+    outlineColor?: string;
+}

package/Select/components/MenuOverlay/index.d.ts

@@ -1,12 +1,3 @@
 import React from "react";
-interface Props<T extends string> {
-    options: {
-        value: T;
-        label: React.ReactNode;
-        selected: boolean;
-        disabled?: boolean;
-    }[];
-    onChange: (value: T) => void;
-}
-declare const MenuOverlay: <T extends string>({ options, onChange }: Props<T>) => React.JSX.Element;
-export default MenuOverlay;
+import type { MenuOverlayProps } from "./index.props";
+export declare const MenuOverlay: <T extends string>({ options, onChange, }: MenuOverlayProps<T>) => React.JSX.Element;

package/Select/components/MenuOverlay/index.js

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var React = require('react');
 var index = require('../../../Menu/index.js');
@@ -48,12 +46,12 @@ var MenuOverlay = function MenuOverlay(_ref) {
   return /*#__PURE__*/React__default.default.createElement("div", {
     ref: rootRef,
     className: styles__default.default.root
-  }, /*#__PURE__*/React__default.default.createElement(index.default, {
+  }, /*#__PURE__*/React__default.default.createElement(index.Menu, {
     ref: listRef,
     selected: selected
   }, options.map(function (option, index) {
     var _a;
-    return /*#__PURE__*/React__default.default.createElement(index$1.default, {
+    return /*#__PURE__*/React__default.default.createElement(index$1.SelectItem, {
       setScrollView: setScrollView,
       option: option,
       isDisabled: (option === null || option === void 0 ? void 0 : option.disabled) || false,
@@ -66,4 +64,4 @@ var MenuOverlay = function MenuOverlay(_ref) {
   })));
 };
 
-exports.default = MenuOverlay;
+exports.MenuOverlay = MenuOverlay;

package/Select/components/MenuOverlay/index.props.d.ts

@@ -0,0 +1,11 @@
+import type { ReactNode } from "react";
+export interface MenuOverlayOption<T extends string> {
+    value: T;
+    label: ReactNode;
+    selected: boolean;
+    disabled?: boolean;
+}
+export interface MenuOverlayProps<T extends string> {
+    options: MenuOverlayOption<T>[];
+    onChange: (value: T) => void;
+}

package/Select/components/MenuOverlayItem/index.d.ts

@@ -1,16 +1,3 @@
 import React from "react";
-import type { Coordinates } from "../../index.props";
-type SelectItemProps = {
-    option: {
-        value: string;
-        label: React.ReactNode;
-        selected: boolean;
-        disabled?: boolean;
-    };
-    onClick?: () => void;
-    setScrollView: (value: Coordinates) => void;
-    isPrevDisabled?: boolean;
-    isDisabled?: boolean;
-};
-declare const SelectItem: ({ option, onClick, setScrollView, isPrevDisabled, isDisabled, }: SelectItemProps) => React.JSX.Element;
-export default SelectItem;
+import type { SelectItemProps } from "./index.props";
+export declare const SelectItem: ({ option, onClick, setScrollView, isPrevDisabled, isDisabled, }: SelectItemProps) => React.JSX.Element;

package/Select/components/MenuOverlayItem/index.js

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
 var index = require('../../../Menu/components/MenuItem/index.js');
 var Check = require('../../../Icons/Check.js');
@@ -35,15 +33,15 @@ var SelectItem = function SelectItem(_ref) {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  return /*#__PURE__*/React__default.default.createElement(index.default, {
+  return /*#__PURE__*/React__default.default.createElement(index.MenuItem, {
     ref: ref,
     onClick: onClick,
     isSelected: option.selected,
     disabled: option.disabled
-  }, option.label, option.selected && /*#__PURE__*/React__default.default.createElement(Check.default, {
+  }, option.label, option.selected && /*#__PURE__*/React__default.default.createElement(Check.Check, {
     width: 16,
     height: 16
   }));
 };
 
-exports.default = SelectItem;
+exports.SelectItem = SelectItem;

package/Select/components/MenuOverlayItem/index.props.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from "react";
+import type { Coordinates } from "../../index.props";
+export type SelectItemProps = {
+    option: {
+        value: string;
+        label: ReactNode;
+        selected: boolean;
+        disabled?: boolean;
+    };
+    onClick?: () => void;
+    setScrollView: (value: Coordinates) => void;
+    isPrevDisabled?: boolean;
+    isDisabled?: boolean;
+};

package/Select/index.d.ts

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

package/Select/index.js

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var React = require('react');
@@ -65,13 +63,13 @@ var Select = function Select(_ref) {
       return selected;
     })) === null || _a === void 0 ? void 0 : _a.label;
   }, [preparedOptions]);
-  return /*#__PURE__*/React__default.default.createElement(index.default, {
+  return /*#__PURE__*/React__default.default.createElement(index.FormField, {
     className: clsx__default.default(styles__default.default["form-field"], _defineProperty__default.default({}, styles__default.default["full-width"], Boolean(fullWidth)), className),
     required: required,
     label: label,
     hint: hint,
     hasError: hasError
-  }, /*#__PURE__*/React__default.default.createElement(index$1.default, {
+  }, /*#__PURE__*/React__default.default.createElement(index$1.Dropdown, {
     placement: "bottom-start",
     preventOverflow: true,
     onVisibleChange: setIsOpen,
@@ -79,7 +77,7 @@ var Select = function Select(_ref) {
     zIndex: zIndex,
     fontSize: fontSize,
     disabled: Boolean(disabled),
-    overlay: /*#__PURE__*/React__default.default.createElement(index$2.default, {
+    overlay: /*#__PURE__*/React__default.default.createElement(index$2.MenuOverlay, {
       options: preparedOptions,
       onChange: onChange
     }),
@@ -90,7 +88,7 @@ var Select = function Select(_ref) {
     style: {
       width: fullWidth ? "100%" : "fit-content"
     }
-  }, /*#__PURE__*/React__default.default.createElement(index$3.default, {
+  }, /*#__PURE__*/React__default.default.createElement(index$3.InputRoot, {
     hasError: hasError,
     size: size,
     active: isOpen && Boolean(!disabled),
@@ -98,7 +96,7 @@ var Select = function Select(_ref) {
       width: fullWidth ? "100%" : ""
     },
     className: styles__default.default.root,
-    endIcon: /*#__PURE__*/React__default.default.createElement(Chevron.default, {
+    endIcon: /*#__PURE__*/React__default.default.createElement(Chevron.Chevron, {
       className: clsx__default.default(styles__default.default.icon, _defineProperty__default.default({}, styles__default.default["icon_isOpen"], isOpen && Boolean(!disabled)))
     }),
     disabled: Boolean(disabled)
@@ -115,4 +113,4 @@ var Select = function Select(_ref) {
   }))))));
 };
 
-exports.default = Select;
+exports.Select = Select;

package/Separator/index.d.ts

@@ -1,6 +1,3 @@
 import type { FC } from "react";
-type Props = {
-    className?: string;
-};
-declare const Separator: FC<Props>;
-export default Separator;
+import type { SeparatorProps } from "./index.props";
+export declare const Separator: FC<SeparatorProps>;

package/Separator/index.js

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
 var clsx = require('clsx');
 var styles = require('./Separator.module.css');
@@ -19,4 +17,4 @@ var Separator = function Separator(_ref) {
   });
 };
 
-exports.default = Separator;
+exports.Separator = Separator;

package/Separator/index.props.d.ts

@@ -0,0 +1,3 @@
+export type SeparatorProps = {
+    className?: string;
+};

package/Slider/Slider.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { SliderProps } from "./index.props";
+export declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLDivElement>>;