@reportportal/ui-kit 0.0.1-alpha.7 → 0.0.1-alpha.70

package/README.md

@@ -1,11 +1,263 @@
 # ReportPortal UI kit
 
-To be updated
+This library is designed to reflect [ReportPortal Design System](https://www.figma.com/file/gjYQPbeyf4YsH3wZiVKoaj/RP-DS-6) components as React components.
+
+**alpha versions available**
 
 ## Installation
 
-## Development
+Install the package into your project using your favourite package manager:
+
+Using `npm`
+```console
+npm install @reportportal/ui-kit
+```
 
-## Build process
+or using `yarn`
+```console
+yarn add @reportportal/ui-kit
+```
+
+or using `pnpm`
+```console
+pnpm add @reportportal/ui-kit
+```
 
 ## Usage
+
+1. Import the library styles at the top-level of your application:
+
+```jsx
+import '@reportportal/ui-kit/dist/style.css';
+```
+
+2. To use the components in your project, import them from the package:
+
+```jsx
+import { Button } from '@reportportal/ui-kit';
+
+const MyComponent = () => (
+    <Button>Button</Button>
+);
+```
+
+**Note:** In the future we plan to calibrate the build process to prebuild styles individually for each component and enable tree-shaking.
+
+### Theming
+
+All components are provided with the `light` theme by default.
+To use the `dark` theme, you need to wrap your application with the `ThemeProvider` component and pass the `dark` theme as a prop:
+
+```jsx
+import { ThemeProvider, Button } from '@reportportal/ui-kit';
+
+const MyComponent = () => (
+    <ThemeProvider theme="dark">
+        <Button>Dark theme button</Button>
+    </ThemeProvider>
+);
+```
+
+`ThemeProvider` can be nested to provide different themes for different parts of the application if needed.
+
+```jsx
+import { ThemeProvider, Button } from '@reportportal/ui-kit';
+
+const MyComponent = () => (
+    <ThemeProvider theme="light">
+        <Button>Light theme button</Button>
+        <ThemeProvider theme="dark">
+            <Button>Dark theme button override</Button>
+        </ThemeProvider>
+    </ThemeProvider>
+);
+```
+
+### Custom themes
+
+The `ThemeProvider` component provides the ability to pass custom themes to the application.
+
+To use a custom theme, you need to pass an object with the custom theme name as a key and the custom theme class name as a value to the `customThemes` prop of the `ThemeProvider` component:
+
+```jsx
+import { ThemeProvider, Button } from '@reportportal/ui-kit';
+
+const MyComponent = () => (
+    <ThemeProvider customThemes={{ 'my-theme': 'my-custom-theme' }} theme="my-theme">
+        <Button>Custom theme button</Button>
+        <ThemeProvider theme="dark">
+            <Button>Dark theme button override</Button>
+        </ThemeProvider>
+    </ThemeProvider>
+);
+```
+
+Then just override the ui-kit CSS custom properties in your custom theme class:
+
+```scss
+.my-custom-theme {
+  --rp-ui-base-font-family: OpenSans, Segoe UI, Tahoma, sans-serif;
+  --rp-ui-color-primary: green;
+  --rp-ui-color-primary-hover: #69e569;
+  --rp-ui-color-primary-focused: var(--rp-ui-color-primary-hover);
+  --rp-ui-color-primary-pressed: var(--rp-ui-color-primary-hover);
+}
+```
+
+CSS custom properties and their default values can be found in the [themes](./src/assets/styles/themes).
+
+The number of custom themes is not limited and actual theme can be easily switched by changing the `theme` prop.
+
+## Components
+
+To see a published showcase of the latest components released with its API and use cases, follow the [link](https://reportportal.io/ui-kit/).
+
+### Icons
+
+The library provides a set of SVG icons and the `BaseIconButton` component to apply basic styles for hover, disabled and other states to them.
+
+The list of available icons can be found in the [icons](./src/components/icons/svg) folder.
+
+The icons exported as React components:
+
+```jsx
+import { PlusIcon } from '@reportportal/ui-kit';
+
+const MyComponent = () => (
+    <PlusIcon />
+);
+```
+
+To use the `BaseIconButton` component, you need to pass the icon component as a child:
+
+```jsx
+import { BaseIconButton, PlusIcon } from '@reportportal/ui-kit';
+
+const MyComponent = () => {
+    const handleIconClick = () => {
+        console.log('Icon clicked');
+    };
+    
+    return (
+        <BaseIconButton
+            className={cx('my-icon')}
+            disabled={false}
+            onClick={handleIconClick}
+        >
+            <PlusIcon />
+        </BaseIconButton>
+    );
+}
+```
+
+`BaseIconButton` supports all the props of the `button` HTML element.
+
+**Note:** To support styling via `BaseIconButton`, it is recommended to use *path-based*, *single-color* SVG icons.
+
+## Development
+
+The library is developed using [React](https://reactjs.org/) and [TypeScript](https://www.typescriptlang.org/).
+
+The [Storybook](https://storybook.js.org/) used as a main development environment and a showcase for components.
+
+To run it locally use
+```console
+npm run start
+```
+
+To create a ready-to-deploy version of the Storybook, run
+```console
+npm run build:storybook
+```
+
+### Build process
+
+We use [vite](https://vitejs.dev/) as a build tool.
+
+To build the library run
+```console
+npm run build
+```
+
+### Storybook showcase deploy
+
+While the library is in alpha, the showcase hosted on [GitHub Pages](https://reportportal.io/ui-kit/) should be updated based on changes from the `develop` branch.
+
+#### Deployment steps
+
+1. Navigate to the "Actions" page within the [repository](https://github.com/reportportal/ui-kit/actions).
+2. Choose the "Deploy dev storybook showcase" action from list of available workflows.
+3. Click "Run workflow" button on the right and select the `develop` branch.
+4. Wait for the deployment process to complete. The progress can be tracked on the "Actions" page.
+5. Once the deployment is finished, verify that the changes have been deployed correctly, visiting [GitHub Pages](https://reportportal.io/ui-kit/).
+
+That's it! If you encounter any issues during the deployment process, please consult the documentation or reach out to the project maintainers for assistance.
+
+### Release
+
+While the library is in alpha, the [NPM package](https://www.npmjs.com/package/@reportportal/ui-kit) should be built and published from the `develop` branch with `alpha` tag.
+
+#### Release steps
+
+1. Navigate to the "Actions" page within the [repository](https://github.com/reportportal/ui-kit/actions).
+2. Choose the "Publish dev package version" action from list of available workflows.
+3. Click "Run workflow" button on the right and select the `develop` branch.
+4. Wait for the publishing process to complete. The progress can be tracked on the "Actions" page.
+5. Once the publishing is finished, verify that the changes have been published correctly, visiting [NPM registry](https://www.npmjs.com/package/@reportportal/ui-kit?activeTab=versions).
+
+That's it! If you encounter any issues during the release process, please consult the documentation or reach out to the project maintainers for assistance.
+
+### Code style
+
+We follow the [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript) and use [ESLint](https://eslint.org/) to enforce it.
+
+### CSS
+
+We use [SCSS](https://sass-lang.com/) as a CSS preprocessor.
+
+#### Theming
+
+The project uses [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) to provide colors/fonts/etc. values for different themes via theme-specific CSS classes.
+All components get the appropriate theme values at runtime based on the cascading nature of CSS.
+
+This approach was chosen because it is easy to implement and maintain, and CSS Custom Properties are part of [WEB standards](https://www.w3.org/TR/css-variables-1/) and supported by [all major browsers](https://developer.mozilla.org/en-US/docs/Web/CSS/--*#browser_compatibility).
+
+The CSS custom properties that come from DS are prefixed with `rp-ui-base` to avoid conflicts with other CSS properties and can be found in the [base.scss](./src/assets/styles/themes/base.scss).
+
+### External libs
+
+- [classnames](https://www.npmjs.com/package/classnames) - used for conditionally joining class names together.
+- [downshift](https://www.npmjs.com/package/downshift) - used to build simple, flexible, WAI-ARIA compliant React autocomplete/dropdown/select/combobox components.
+- [framer-motion](https://www.npmjs.com/package/framer-motion) - used for animations.
+- [rc-scrollbars](https://www.npmjs.com/package/rc-scrollbars) - used for custom scrollbars.
+- [@floating-ui/react-dom](https://www.npmjs.com/package/@floating-ui/react-dom) - used for positioning menus, dropdown elements, autocompletes, etc.
+
+### Testing
+
+Each new component/hook/utility **must be** covered by unit/component tests.
+All existing uncovered stuff will be tested gradually in the scope of tech-debt elimination activities.
+
+#### Testing Tools
+
+The project uses the following testing tools:
+- **Vitest**: Fast testing framework, compatible with Vite
+- **React Testing Library**: For testing React components with a focus on user interactions
+- **@testing-library/user-event**: For simulating user events in tests
+- **JSDOM**: For simulating a DOM environment in Node.js
+- **@vitest/coverage-v8**: For code coverage reporting
+
+#### Test Scripts
+
+Available npm scripts for testing:
+- `npm run test` - Run tests in watch mode
+- `npm run test:coverage` - Run tests with coverage report
+- `npm run test:ci` - Run tests once (for CI environments)
+- `npm run test:ui` - Run tests with UI interface
+
+#### Test Coverage
+
+The project maintains a minimum of 80% test coverage threshold for:
+- Statements
+- Branches
+- Functions
+- Lines

package/dist/arrowUp-4a5caee7.js

@@ -0,0 +1,6 @@
+import * as e from "react";
+const t = (l) => /* @__PURE__ */ e.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...l }, /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.85355 12.8536C7.65829 13.0488 7.34171 13.0488 7.14645 12.8536L4.14645 9.85355C3.95118 9.65829 3.95118 9.34171 4.14645 9.14645C4.34171 8.95118 4.65829 8.95118 4.85355 9.14645L7 11.2929L7 3.5C7 3.22386 7.22386 3 7.5 3C7.77614 3 8 3.22386 8 3.5L8 11.2929L10.1464 9.14645C10.3417 8.95119 10.6583 8.95118 10.8536 9.14645C11.0488 9.34171 11.0488 9.65829 10.8536 9.85355L7.85355 12.8536Z", fill: "#A2AAB5" })), o = (l) => /* @__PURE__ */ e.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...l }, /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.14645 3.14645C7.34171 2.95118 7.65829 2.95118 7.85355 3.14645L10.8536 6.14645C11.0488 6.34171 11.0488 6.65829 10.8536 6.85355C10.6583 7.04882 10.3417 7.04882 10.1464 6.85355L8 4.70711V12.5C8 12.7761 7.77614 13 7.5 13C7.22386 13 7 12.7761 7 12.5L7 4.70711L4.85355 6.85355C4.65829 7.04882 4.34171 7.04882 4.14645 6.85355C3.95118 6.65829 3.95118 6.34171 4.14645 6.14645L7.14645 3.14645Z", fill: "#A2AAB5" }));
+export {
+  t as S,
+  o as a
+};

package/dist/baseIconButton-251479f7.js

@@ -0,0 +1,25 @@
+import { jsx as c } from "react/jsx-runtime";
+import { c as e } from "./bind-06a7ff84.js";
+const b = "_disabled_1q88n_12", i = {
+  "base-icon-button": "_base-icon-button_1q88n_1",
+  disabled: b
+}, l = e.bind(i), _ = ({
+  children: t,
+  className: o,
+  disabled: s = !1,
+  onClick: n,
+  ...a
+}) => /* @__PURE__ */ c(
+  "button",
+  {
+    className: l("base-icon-button", o, { disabled: s }),
+    type: "button",
+    disabled: s,
+    onClick: n,
+    ...a,
+    children: t
+  }
+);
+export {
+  _ as B
+};

package/dist/baseIconButton.js

@@ -0,0 +1,7 @@
+import { B as t } from "./baseIconButton-251479f7.js";
+import "react/jsx-runtime";
+import "./bind-06a7ff84.js";
+export {
+  t as BaseIconButton,
+  t as default
+};

package/dist/bubblesLoader-a7e709d4.js

@@ -0,0 +1,17 @@
+import { jsx as l } from "react/jsx-runtime";
+import { c as a } from "./bind-06a7ff84.js";
+const n = "_bubble_kn4ln_1", c = "_bubbles_kn4ln_1", r = {
+  "bubbles-loader": "_bubbles-loader_kn4ln_1",
+  "color-topaz": "_color-topaz_kn4ln_4",
+  bubble: n,
+  bubbles: c
+}, s = a.bind(r), _ = 7, i = ({
+  color: b = "topaz",
+  className: o
+}) => /* @__PURE__ */ l("div", { className: s("bubbles-loader", o, { [`color-${b}`]: b }), children: Array(_).fill(void 0).map((t, e) => (
+  // eslint-disable-next-line react/no-array-index-key
+  /* @__PURE__ */ l("div", { className: s("bubble") }, e)
+)) });
+export {
+  i as B
+};

package/dist/bubblesLoader.js

@@ -1,4 +1,4 @@
-import { B as r } from "./bubblesLoader-9bec3797.js";
+import { B as r } from "./bubblesLoader-a7e709d4.js";
 import "react/jsx-runtime";
 import "./bind-06a7ff84.js";
 export {

package/dist/button-33bc880f.js

@@ -0,0 +1,64 @@
+import { jsxs as p, jsx as b } from "react/jsx-runtime";
+import { forwardRef as l } from "react";
+import { c as u } from "./bind-06a7ff84.js";
+const x = "_button_108em_1", f = "_primary_108em_18", g = "_disabled_108em_23", y = "_ghost_108em_38", N = "_danger_108em_59", B = "_text_108em_79", $ = "_icon_108em_133", j = {
+  button: x,
+  primary: f,
+  disabled: g,
+  ghost: y,
+  danger: N,
+  text: B,
+  "width-min-width": "_width-min-width_108em_115",
+  "width-content": "_width-content_108em_119",
+  "width-wide-content": "_width-wide-content_108em_123",
+  "width-parent": "_width-parent_108em_128",
+  icon: $,
+  "icon-start": "_icon-start_108em_139",
+  "icon-end": "_icon-end_108em_143"
+}, _ = u.bind(j), v = l(
+  ({
+    variant: i = "primary",
+    icon: t,
+    iconPlace: n = "start",
+    adjustWidthOn: e = "min-width",
+    type: s = "button",
+    children: c,
+    disabled: o = !1,
+    onClick: m,
+    title: r,
+    className: d,
+    ...a
+  }, h) => {
+    const w = _("button", i, d, {
+      disabled: o,
+      [`width-${e}`]: e
+    });
+    return /* @__PURE__ */ p(
+      "button",
+      {
+        ref: h,
+        type: s,
+        disabled: o,
+        className: w,
+        onClick: m,
+        title: r,
+        ...a,
+        children: [
+          t && /* @__PURE__ */ b(
+            "i",
+            {
+              className: _("icon", {
+                [`icon-${n}`]: n
+              }),
+              children: t
+            }
+          ),
+          c
+        ]
+      }
+    );
+  }
+);
+export {
+  v as B
+};

package/dist/button.js

@@ -1,4 +1,4 @@
-import { B as o } from "./button-d4944dbc.js";
+import { B as o } from "./button-33bc880f.js";
 import "react/jsx-runtime";
 import "react";
 import "./bind-06a7ff84.js";

package/dist/calendarArrow-3e1339ea.js

@@ -0,0 +1,6 @@
+import * as e from "react";
+const l = (t) => /* @__PURE__ */ e.createElement("svg", { width: 14, height: 15, viewBox: "0 0 14 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("rect", { x: 0.5, y: 1.5, width: 13, height: 13, rx: 1.5, stroke: "#A2AAB5" }), /* @__PURE__ */ e.createElement("rect", { x: 9, width: 1, height: 3.00067, rx: 0.5, fill: "#A2AAB5" }), /* @__PURE__ */ e.createElement("rect", { x: 4, width: 1, height: 3.00067, rx: 0.5, fill: "#A2AAB5" }), /* @__PURE__ */ e.createElement("rect", { x: 14, y: 4, width: 1, height: 14, transform: "rotate(90 14 4)", fill: "#A2AAB5" }), /* @__PURE__ */ e.createElement("rect", { x: 3, y: 10, width: 2, height: 2, fill: "#A2AAB5" }), /* @__PURE__ */ e.createElement("rect", { x: 6, y: 10, width: 2, height: 2, fill: "#A2AAB5" }), /* @__PURE__ */ e.createElement("rect", { x: 6, y: 7, width: 2, height: 2, fill: "#A2AAB5" }), /* @__PURE__ */ e.createElement("rect", { x: 3, y: 7, width: 2, height: 2, fill: "#A2AAB5" }), /* @__PURE__ */ e.createElement("rect", { x: 9, y: 7, width: 2, height: 2, fill: "#A2AAB5" })), i = (t) => /* @__PURE__ */ e.createElement("svg", { width: 8, height: 13, viewBox: "0 0 8 13", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6.54134 12.2173C6.69755 12.3735 6.95081 12.3735 7.10702 12.2173L7.24844 12.0759C7.40465 11.9197 7.40465 11.6664 7.24844 11.5102L1.90539 6.16715L7.24844 0.824097C7.40465 0.667887 7.40465 0.41462 7.24844 0.258411L7.10702 0.116989C6.95081 -0.0392199 6.69755 -0.0392199 6.54134 0.116989L0.998591 5.65973L0.999562 5.6607L0.767094 5.89317C0.610884 6.04938 0.610884 6.30265 0.767093 6.45886L1.48425 7.17602L1.49215 7.16813L6.54134 12.2173Z", fill: "#C1C7D0" }));
+export {
+  l as S,
+  i as a
+};

package/dist/checkbox-aa91985d.js

@@ -0,0 +1,73 @@
+import { jsxs as x, jsx as n } from "react/jsx-runtime";
+import { c as f } from "./bind-06a7ff84.js";
+import { useRef as y, useId as C } from "react";
+import { K as p } from "./keyCodes-f63c0e11.js";
+const E = "_checkbox_1tbt5_1", D = "_disabled_1tbt5_11", K = "_input_1tbt5_16", N = "_control_1tbt5_23", I = "_children_1tbt5_149", R = {
+  checkbox: E,
+  disabled: D,
+  input: K,
+  control: N,
+  "partially-checked": "_partially-checked_1tbt5_76",
+  children: I
+}, e = f.bind(R), A = ({
+  children: s,
+  disabled: c = !1,
+  onChange: d,
+  className: h,
+  value: r,
+  partiallyChecked: k,
+  title: l,
+  ...u
+}) => {
+  const t = y(null), a = C(), m = (o) => {
+    var _, b;
+    const { keyCode: i } = o;
+    if (i === p.SPACE_KEY_CODE) {
+      o.preventDefault(), (_ = t.current) == null || _.click();
+      return;
+    }
+    i === p.ENTER_KEY_CODE && (o.preventDefault(), (b = t.current) == null || b.click());
+  };
+  return /* @__PURE__ */ x(
+    "label",
+    {
+      id: a,
+      className: e("checkbox", h, {
+        disabled: c
+      }),
+      title: l,
+      children: [
+        /* @__PURE__ */ n(
+          "input",
+          {
+            ref: t,
+            tabIndex: 0,
+            type: "checkbox",
+            onKeyDown: m,
+            className: e("input", { "partially-checked": k }),
+            disabled: c,
+            onChange: d,
+            checked: r,
+            title: l,
+            ...u
+          }
+        ),
+        /* @__PURE__ */ n(
+          "span",
+          {
+            "aria-labelledby": a,
+            role: "checkbox",
+            "aria-checked": r,
+            className: e("control", {
+              disabled: c
+            })
+          }
+        ),
+        s && /* @__PURE__ */ n("span", { className: e("children", { disabled: c }), children: s })
+      ]
+    }
+  );
+};
+export {
+  A as C
+};

package/dist/checkbox.js

@@ -1,4 +1,4 @@
-import { C as r } from "./checkbox-fdc44740.js";
+import { C as r } from "./checkbox-aa91985d.js";
 import "react/jsx-runtime";
 import "./bind-06a7ff84.js";
 import "react";

package/dist/close-4b33d7c1.js

@@ -0,0 +1,5 @@
+import * as e from "react";
+const t = (l) => /* @__PURE__ */ e.createElement("svg", { width: 16, height: 16, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...l }, /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0.732179 15.2698C0.330639 14.8683 0.33064 14.2172 0.73218 13.8157L6.54858 7.99928L0.73218 2.18288C0.33064 1.78134 0.330639 1.13031 0.732179 0.728774C1.13372 0.327235 1.78474 0.327235 2.18628 0.728774L8.00269 6.54518L13.8191 0.728767C14.2206 0.327229 14.8717 0.327228 15.2732 0.728767C15.6747 1.13031 15.6747 1.78133 15.2732 2.18287L9.45679 7.99928L15.2732 13.8157C15.6747 14.2172 15.6747 14.8683 15.2732 15.2698C14.8717 15.6713 14.2206 15.6713 13.8191 15.2698L8.00269 9.45338L2.18628 15.2698C1.78474 15.6713 1.13372 15.6713 0.732179 15.2698Z", fill: "#A2AAB5" }));
+export {
+  t as S
+};

package/dist/common/hooks/useOnClickOutside.d.ts

@@ -1,2 +1,3 @@
 import { RefObject } from 'react';
+
 export declare function useOnClickOutside<T extends HTMLElement = HTMLDivElement>(ref: RefObject<T>, handler?: (e?: MouseEvent) => void): void;

package/dist/common/types.d.ts

@@ -0,0 +1,3 @@
+export type ShapeWithClassName<P = Record<string, unknown>> = P & {
+    className?: string;
+};

package/dist/components/baseIconButton/baseIconButton.d.ts

@@ -0,0 +1,9 @@
+import { FC, MouseEventHandler, ReactNode, HTMLAttributes } from 'react';
+
+export interface BaseIconButtonProps extends HTMLAttributes<HTMLButtonElement> {
+    children: ReactNode;
+    className?: string;
+    disabled?: boolean;
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+}
+export declare const BaseIconButton: FC<BaseIconButtonProps>;

package/dist/components/baseIconButton/index.d.ts

@@ -0,0 +1,5 @@
+import { BaseIconButton, BaseIconButtonProps } from './baseIconButton';
+
+export { BaseIconButton };
+export type { BaseIconButtonProps };
+export default BaseIconButton;

package/dist/components/bubblesLoader/bubblesLoader.d.ts

@@ -1,4 +1,5 @@
 import { FC } from 'react';
+
 interface BubblesLoaderProps {
     color?: string;
     className?: string;

package/dist/components/bubblesLoader/index.d.ts

@@ -1,3 +1,4 @@
 import { BubblesLoader } from './bubblesLoader';
+
 export { BubblesLoader };
 export default BubblesLoader;

package/dist/components/button/button.d.ts

@@ -1,12 +1,12 @@
-import { FC, ReactNode, ComponentPropsWithRef, MouseEventHandler } from 'react';
+import { ReactNode, ComponentPropsWithRef, MouseEventHandler } from 'react';
+
 type IconPlace = 'start' | 'end';
 type ButtonVariant = 'primary' | 'ghost' | 'danger' | 'text';
-type ButtonWidth = 'content' | 'wide-content' | 'parent';
+type ButtonWidth = 'content' | 'wide-content' | 'parent' | 'min-width';
 export interface ButtonProps extends ComponentPropsWithRef<'button'> {
     children?: ReactNode;
     icon?: ReactNode;
     iconPlace?: IconPlace;
-    dataAutomationId?: string;
     adjustWidthOn?: ButtonWidth;
     disabled?: boolean;
     type?: 'submit' | 'reset' | 'button';
@@ -15,5 +15,5 @@ export interface ButtonProps extends ComponentPropsWithRef<'button'> {
     className?: string;
     variant?: ButtonVariant;
 }
-export declare const Button: FC<ButtonProps>;
+export declare const Button: import('react').ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
 export {};

package/dist/components/button/index.d.ts

@@ -1,4 +1,5 @@
-import { Button } from './button';
+import { Button, ButtonProps } from './button';
+
 export { Button };
-export type { ButtonProps } from './button';
+export type { ButtonProps };
 export default Button;

package/dist/components/checkbox/checkbox.d.ts

@@ -1,10 +1,13 @@
 import { FC, ReactNode, ChangeEventHandler, HTMLAttributes } from 'react';
+
 interface CheckboxProps extends HTMLAttributes<HTMLInputElement> {
     value: boolean;
     children?: ReactNode;
     disabled?: boolean;
     className?: string;
     onChange?: ChangeEventHandler<HTMLInputElement>;
+    partiallyChecked?: boolean;
+    title?: string;
 }
 export declare const Checkbox: FC<CheckboxProps>;
 export {};

package/dist/components/checkbox/index.d.ts

@@ -1,3 +1,4 @@
 import { Checkbox } from './checkbox';
+
 export { Checkbox };
 export default Checkbox;

package/dist/components/datePicker/datePicker.d.ts

@@ -0,0 +1,25 @@
+import { FC, ReactNode, ReactElement } from 'react';
+
+interface DatePickerProps {
+    onChange?: (date: Date | any) => void;
+    onBlur?: () => void;
+    onFocus?: () => void;
+    headerNodes?: ReactNode;
+    disabled?: boolean;
+    shouldCloseOnSelect?: boolean;
+    fixedHeight?: boolean;
+    startDate?: Date | undefined;
+    endDate?: Date | undefined;
+    customClassName?: string;
+    popperClassName?: string;
+    calendarClassName?: string;
+    customTimeInput?: ReactElement;
+    language?: string;
+    yearsOptions?: number[];
+    placeholder?: string;
+    dateFormat?: string;
+    selects?: 'start' | 'end' | 'none';
+    value?: Date | null;
+}
+export declare const DatePicker: FC<DatePickerProps>;
+export {};

package/dist/components/datePicker/header/datePickerHeader.d.ts

@@ -0,0 +1,16 @@
+import { FC, ReactNode } from 'react';
+
+export interface DatePickerHeaderProps {
+    changeYear: (year: number) => void;
+    changeMonth: (month: number) => void;
+    decreaseMonth: () => void;
+    increaseMonth: () => void;
+    headerNodes: ReactNode;
+    date: Date;
+    prevMonthButtonDisabled: boolean;
+    nextMonthButtonDisabled: boolean;
+    customClassName: string;
+    yearsOptions: number[];
+    locale: string;
+}
+export declare const DatePickerHeader: FC<DatePickerHeaderProps>;

package/dist/components/datePicker/header/index.d.ts

@@ -0,0 +1,4 @@
+import { DatePickerHeader } from './datePickerHeader';
+
+export { DatePickerHeader };
+export default DatePickerHeader;

package/dist/components/datePicker/index.d.ts

@@ -0,0 +1,5 @@
+import { DatePicker } from './datePicker';
+import { registerDatePickerLocale } from './utils';
+
+export { DatePicker, registerDatePickerLocale };
+export default DatePicker;

package/dist/components/datePicker/utils.d.ts

@@ -0,0 +1,4 @@
+import { Locale } from 'date-fns';
+
+export declare const registerDatePickerLocale: (language: string, locale: Locale) => void;
+export declare const getYearsFrom: (start: number, amountYearsToGenerate?: number) => number[];