test-stpr-ui-kit 0.6.15 → 1.0.0

package/dist/components/Button/Button.module.scss.js

@@ -0,0 +1,33 @@
+import './Button.css';const t = "_spButton_18oju_1", _ = "_spButton__text_18oju_34", n = "_spButton_noPadding_18oju_46", o = "_spButton_onlyIcon_18oju_50", s = "_spButton_primary_18oju_59", u = "_spButton_secondary_18oju_69", p = "_spButton_text_18oju_79", B = "_spButton_link_18oju_89", i = "_spButton_fullWidth_18oju_102", c = "_spButton_disabled_18oju_105", e = "_spButton__spinner_18oju_116", d = "_spButton__iconContainer_18oju_125", a = "_spButton__iconContainer__icon_18oju_128", l = {
+  spButton: t,
+  "spButton_size-md": "_spButton_size-md_18oju_30",
+  spButton__text: _,
+  "spButton_size-xl": "_spButton_size-xl_18oju_38",
+  spButton_noPadding: n,
+  spButton_onlyIcon: o,
+  spButton_primary: s,
+  spButton_secondary: u,
+  spButton_text: p,
+  spButton_link: B,
+  spButton_fullWidth: i,
+  spButton_disabled: c,
+  spButton__spinner: e,
+  spButton__iconContainer: d,
+  spButton__iconContainer__icon: a
+};
+export {
+  l as default,
+  t as spButton,
+  d as spButton__iconContainer,
+  a as spButton__iconContainer__icon,
+  e as spButton__spinner,
+  _ as spButton__text,
+  c as spButton_disabled,
+  i as spButton_fullWidth,
+  B as spButton_link,
+  n as spButton_noPadding,
+  o as spButton_onlyIcon,
+  s as spButton_primary,
+  u as spButton_secondary,
+  p as spButton_text
+};

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

@@ -0,0 +1,2 @@
+export { Button } from "./Button";
+export type { ButtonProps, TButtonType, TButtonVariant } from "./types";

package/dist/components/Button/types/index.d.ts

@@ -0,0 +1,24 @@
+import React, { CSSProperties } from "react";
+import { EIconName } from "../../Icons";
+export type TButtonType = "submit" | "reset" | "button";
+export type TButtonVariant = "primary" | "secondary" | "text" | "link";
+export type TButtonSize = "md" | "xl";
+export interface ButtonProps extends React.PropsWithChildren {
+    variant?: TButtonVariant;
+    size?: TButtonSize;
+    style?: CSSProperties;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    disabled?: boolean;
+    type?: TButtonType;
+    form?: string;
+    isFullWidth?: boolean;
+    noPadding?: boolean;
+    isOnlyIcon?: boolean;
+    loading?: boolean;
+    startIconName?: EIconName;
+    endIconName?: EIconName;
+    classNameRoot?: string;
+    classNameTextRoot?: string;
+    startIconRotate?: number;
+    endIconRotate?: number;
+}

package/dist/components/Checkbox/Checkbox.css

@@ -0,0 +1 @@
+._spCheckbox_3tbu0_1{display:inline-flex;flex-direction:column;align-items:flex-start;position:relative;width:fit-content}._spCheckbox_3tbu0_1{opacity:1;visibility:visible}._spCheckbox_3tbu0_1{transition:all .3s ease-in-out}@starting-style{._spCheckbox_3tbu0_1{opacity:0;visibility:hidden}}._spCheckbox__control_3tbu0_21{display:none}._spCheckbox__label_3tbu0_24{display:flex;align-items:center;font-family:var(--spui-font-family-main),serif;font-weight:var(--spui-font-weight-regular);font-size:16px;color:var(--spui-color-text-primary)}@media only screen and (min-width:768px){._spCheckbox__label_3tbu0_24{font-size:20px}}._spCheckbox__box_3tbu0_37{display:flex;justify-content:flex-start;align-items:center;cursor:pointer;gap:var(--spui-spacing-3x);-webkit-user-select:none;user-select:none;color:var(--spui-color-border-action)}._spCheckbox__box_3tbu0_37:hover{color:var(--spui-color-border-action-hover)}._spCheckbox__box_disabled_3tbu0_49{cursor:default;pointer-events:none;color:var(--spui-color-border-disabled)}._spCheckbox__box_error_3tbu0_54{color:var(--spui-color-border-error)}._spCheckbox__box_error_3tbu0_54:hover{color:var(--spui-color-red-600)}._spCheckbox__box__checkmark_3tbu0_60{display:flex;width:var(--spui-control-height-base);height:var(--spui-control-height-base);flex-direction:column;justify-content:center;align-items:center;position:relative;background-color:var(--spui-color-surface-default);border:var(--spui-border-width-md) solid currentColor}._spCheckbox__box__checkmark_3tbu0_60{transition:all .2s ease-in-out}._spCheckbox__box__checkmark--size-lg_3tbu0_74{width:var(--spui-control-height-base);height:var(--spui-control-height-base)}._spCheckbox__box__checkmark--size-md_3tbu0_78{width:var(--spui-control-height-sm);height:var(--spui-control-height-sm)}._spCheckbox__box__innerSquare_3tbu0_82{background:var(--spui-color-surface-transparent);transform:scale(0)}._spCheckbox__box__innerSquare_3tbu0_82{transition:all .2s ease-in-out}._spCheckbox__box__innerSquare--size-lg_3tbu0_89{width:var(--spui-icon-size-sm);height:var(--spui-icon-size-sm)}._spCheckbox__box__innerSquare--size-md_3tbu0_93{width:var(--spui-icon-size-xs);height:var(--spui-icon-size-xs)}._spCheckbox__box__innerSquare_checked_3tbu0_97{background-color:currentColor;transform:scale(1)}._spCheckbox__tooltip_3tbu0_101{display:inline-block;vertical-align:middle}._spCheckbox__required_3tbu0_105{margin-left:var(--spui-spacing-1x);color:var(--spui-color-text-secondary)}._spCheckbox__error_3tbu0_109{padding-top:var(--spui-spacing-2x);font-family:var(--spui-font-family-main),serif;font-weight:var(--spui-font-weight-regular);font-size:12px;color:var(--spui-color-text-error)}@media only screen and (min-width:768px){._spCheckbox__error_3tbu0_109{font-size:14px}}

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { CheckboxProps } from "./types";
+export declare const Checkbox: React.FC<CheckboxProps>;

package/dist/components/Checkbox/Checkbox.js

@@ -0,0 +1,72 @@
+import { jsxs as t, jsx as o } from "react/jsx-runtime";
+import s from "clsx";
+import e from "./Checkbox.module.scss.js";
+import { InfoTooltip as z } from "../Tooltip/Tooltip.js";
+const L = (m) => {
+  const {
+    size: c = "lg",
+    checked: r,
+    disabled: l,
+    onChange: p,
+    name: x,
+    label: n,
+    error: a,
+    value: b,
+    required: k,
+    tooltipPosition: C,
+    infoTooltipText: h,
+    onMouseEnter: d,
+    classNameRoot: _,
+    classNameError: i
+  } = m, u = s({
+    [e.spCheckbox]: !0,
+    ..._ && { [_]: !0 }
+  }), N = s({
+    [e.spCheckbox__box]: !0,
+    [e.spCheckbox__box_disabled]: l,
+    [e.spCheckbox__box_error]: a
+  }), f = s({
+    [e.spCheckbox__box__checkmark]: !0,
+    [e[`spCheckbox__box__checkmark--size-${c}`]]: c
+  }), q = s({
+    [e.spCheckbox__box__innerSquare]: !0,
+    [e.spCheckbox__box__innerSquare_checked]: r,
+    [e[`spCheckbox__box__innerSquare--size-${c}`]]: c
+  }), v = s({
+    [e.spCheckbox__control]: !0
+  }), g = s({
+    [e.spCheckbox__label]: !0
+  }), E = s({
+    [e.spCheckbox__required]: !0
+  }), R = s({
+    [e.spCheckbox__error]: !0,
+    ...i && { [i]: !0 }
+  }), S = s({
+    [e.spCheckbox__tooltip]: !0
+  });
+  return /* @__PURE__ */ t("div", { className: u, onMouseEnter: d, children: [
+    /* @__PURE__ */ t("label", { className: N, children: [
+      /* @__PURE__ */ o(
+        "input",
+        {
+          type: "checkbox",
+          className: v,
+          checked: r,
+          onChange: (T) => {
+            l || p?.(T, { name: x, checked: !r, value: b });
+          }
+        }
+      ),
+      /* @__PURE__ */ o("span", { className: f, children: /* @__PURE__ */ o("span", { className: q }) }),
+      n && /* @__PURE__ */ t("span", { className: g, children: [
+        n,
+        k && /* @__PURE__ */ o("div", { className: E, children: "*" })
+      ] }),
+      h && /* @__PURE__ */ o("div", { className: S, children: /* @__PURE__ */ o(z, { hover: !0, position: C, text: h }) })
+    ] }),
+    a && /* @__PURE__ */ o("div", { className: R, children: a })
+  ] });
+};
+export {
+  L as Checkbox
+};

package/dist/components/Checkbox/Checkbox.module.scss.js

@@ -0,0 +1,33 @@
+import './Checkbox.css';const _ = "_spCheckbox_3tbu0_1", e = "_spCheckbox__control_3tbu0_21", o = "_spCheckbox__label_3tbu0_24", b = "_spCheckbox__box_3tbu0_37", c = "_spCheckbox__box_disabled_3tbu0_49", s = "_spCheckbox__box_error_3tbu0_54", x = "_spCheckbox__box__checkmark_3tbu0_60", k = "_spCheckbox__box__innerSquare_3tbu0_82", r = "_spCheckbox__box__innerSquare_checked_3tbu0_97", h = "_spCheckbox__tooltip_3tbu0_101", p = "_spCheckbox__required_3tbu0_105", C = "_spCheckbox__error_3tbu0_109", t = {
+  spCheckbox: _,
+  spCheckbox__control: e,
+  spCheckbox__label: o,
+  spCheckbox__box: b,
+  spCheckbox__box_disabled: c,
+  spCheckbox__box_error: s,
+  spCheckbox__box__checkmark: x,
+  "spCheckbox__box__checkmark--size-lg": "_spCheckbox__box__checkmark--size-lg_3tbu0_74",
+  "spCheckbox__box__checkmark--size-md": "_spCheckbox__box__checkmark--size-md_3tbu0_78",
+  spCheckbox__box__innerSquare: k,
+  "spCheckbox__box__innerSquare--size-lg": "_spCheckbox__box__innerSquare--size-lg_3tbu0_89",
+  "spCheckbox__box__innerSquare--size-md": "_spCheckbox__box__innerSquare--size-md_3tbu0_93",
+  spCheckbox__box__innerSquare_checked: r,
+  spCheckbox__tooltip: h,
+  spCheckbox__required: p,
+  spCheckbox__error: C
+};
+export {
+  t as default,
+  _ as spCheckbox,
+  b as spCheckbox__box,
+  x as spCheckbox__box__checkmark,
+  k as spCheckbox__box__innerSquare,
+  r as spCheckbox__box__innerSquare_checked,
+  c as spCheckbox__box_disabled,
+  s as spCheckbox__box_error,
+  e as spCheckbox__control,
+  C as spCheckbox__error,
+  o as spCheckbox__label,
+  p as spCheckbox__required,
+  h as spCheckbox__tooltip
+};

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

@@ -0,0 +1,2 @@
+export { Checkbox } from "./Checkbox";
+export type { CheckboxProps, TOnChangeCheckbox } from "./types";

package/dist/components/Checkbox/types/index.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+import { ETooltipPosition } from "../../Tooltip";
+export type TCheckboxSize = "md" | "lg";
+export interface CheckboxProps {
+    size?: TCheckboxSize;
+    checked?: boolean;
+    disabled?: boolean;
+    onChange: TOnChangeCheckbox;
+    name: string;
+    label?: string;
+    error?: string;
+    value?: string;
+    required?: boolean;
+    tooltipPosition?: ETooltipPosition;
+    infoTooltipText?: string;
+    onMouseEnter?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    classNameRoot?: string;
+    classNameError?: string;
+}
+export type TOnChangeCheckbox = (event: React.ChangeEvent<HTMLInputElement>, data: {
+    name: string;
+    value?: string;
+    checked: boolean;
+}) => void;

package/dist/components/Confirm/Confirm.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { ConfirmProps } from "./types";
+export declare const Confirm: React.FC<ConfirmProps>;

package/dist/components/Confirm/Confirm.js

@@ -0,0 +1,85 @@
+import { jsx as l } from "react/jsx-runtime";
+import { Modal as S } from "../Modal/Modal.js";
+import { ApplyButtons as k } from "../ApplyButtons/ApplyButtons.js";
+const G = (n) => {
+  const {
+    classNameApplyButtonsRoot: i,
+    zIndex: m,
+    header: r,
+    subHeader: c,
+    cancelBtnContent: o,
+    cancelBtnDisabled: d,
+    cancelBtnIconName: t,
+    submitBtnContent: e,
+    submitBtnIconName: a,
+    submit: b,
+    formId: u,
+    onClose: s,
+    applyButtonsMobileDirection: B = "column",
+    applyButtonsAlign: f = "right",
+    modalVerticalAlign: p = "top",
+    textAlign: N = "left",
+    disabled: C = !1,
+    loading: g = !1,
+    disabledConfirm: R = !1,
+    loadingConfirm: V = !1,
+    isVisibleCloseButton: y,
+    isHiddenModal: A,
+    size: x,
+    classNameRoot: H,
+    classNameLayerRoot: I,
+    submitBtnVariant: F,
+    cancelBtnVariant: M,
+    submitBtnClassName: h,
+    cancelBtnClassName: z,
+    classNameHeaderRoot: D,
+    classNameSubHeaderRoot: j,
+    classNameFooterRoot: L
+  } = n;
+  return /* @__PURE__ */ l(
+    S,
+    {
+      zIndex: m,
+      header: r,
+      onClose: s,
+      modalVerticalAlign: p,
+      textAlign: N,
+      subHeader: c,
+      isVisibleCloseButton: y,
+      isHiddenModal: A,
+      size: x,
+      classNameRoot: H,
+      classNameLayerRoot: I,
+      classNameHeaderRoot: D,
+      classNameSubHeaderRoot: j,
+      classNameFooterRoot: L,
+      loading: V,
+      disabled: R,
+      footer: o || t || e || a ? /* @__PURE__ */ l(
+        k,
+        {
+          classNameRoot: i,
+          submitBtnClassName: h,
+          cancelBtnClassName: z,
+          applyButtonsMobileDirection: B,
+          applyButtonsAlign: f,
+          cancelBtnContent: o,
+          cancelBtnIconName: t,
+          cancelBtnDisabled: d,
+          submitBtnContent: e,
+          submitBtnIconName: a,
+          submitBtnVariant: F,
+          cancelBtnVariant: M,
+          formId: u,
+          disabled: C,
+          onClose: s,
+          submit: b,
+          loading: g
+        }
+      ) : null
+    }
+  );
+};
+export {
+  G as Confirm
+};

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

@@ -0,0 +1,2 @@
+export { Confirm } from "./Confirm.tsx";
+export type { ConfirmProps } from "./types";

package/dist/components/Confirm/types/index.d.ts

@@ -0,0 +1,7 @@
+import { ApplyButtonsProps } from "../../ApplyButtons";
+import { ModalProps } from "../../Modal";
+export interface ConfirmProps extends Omit<ApplyButtonsProps, "classNameRoot">, Omit<ModalProps, "footer" | "children" | "style"> {
+    classNameApplyButtonsRoot?: string;
+    disabledConfirm?: boolean;
+    loadingConfirm?: boolean;
+}

package/dist/components/ContextMenu/ContextMenu.css

@@ -0,0 +1 @@
+._spContextMenu_qdudd_1{font-family:var(--spui-font-family-main),serif;font-weight:var(--spui-font-weight-regular);margin:var(--spui-spacing-none);display:flex;padding:var(--spui-spacing-2x) var(--spui-spacing-none);flex-direction:column;align-items:stretch;border:var(--spui-border-width-sm) solid var(--spui-color-border-action);background-color:var(--spui-color-surface-default)}._spContextMenu_qdudd_1{opacity:1;visibility:visible}._spContextMenu_qdudd_1{transition:all .3s ease-in-out}@starting-style{._spContextMenu_qdudd_1{opacity:0;visibility:hidden}}._spContextMenu__item_qdudd_25{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;padding:var(--spui-spacing-2x) var(--spui-spacing-6x);font-size:16px;line-height:120%;gap:var(--spui-spacing-3x)}._spContextMenu__item_qdudd_25:hover{background-color:var(--spui-color-blue-50)}._spContextMenu__item__icon_qdudd_38{color:var(--spui-color-icon-action);width:var(--spui-icon-size-xs);height:var(--spui-icon-size-xs)}._spContextMenu__item__icon_delete_qdudd_43{color:var(--spui-color-icon-error)}

package/dist/components/ContextMenu/ContextMenu.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { ContextMenuProps } from "./types";
+export declare const ContextMenu: React.FC<ContextMenuProps>;

package/dist/components/ContextMenu/ContextMenu.js

@@ -0,0 +1,39 @@
+import { jsx as n, jsxs as i } from "react/jsx-runtime";
+import m from "clsx";
+import t from "./ContextMenu.module.scss.js";
+import { Icon as u } from "../Icons/Icon.js";
+const N = (r) => {
+  const { onClickItem: s, options: c, classNameRoot: o } = r, l = m({
+    [t.spContextMenu]: !0,
+    ...o && { [o]: !0 }
+  });
+  return /* @__PURE__ */ n("ul", { className: l, children: c?.map((e) => {
+    const a = e.key === "delete";
+    return /* @__PURE__ */ i(
+      "li",
+      {
+        className: t.spContextMenu__item,
+        onClick: () => {
+          s && s(e);
+        },
+        children: [
+          e?.iconName && /* @__PURE__ */ n(
+            u,
+            {
+              name: e.iconName,
+              className: m({
+                [t.spContextMenu__item__icon]: !0,
+                [t.spContextMenu__item__icon_delete]: a
+              })
+            }
+          ),
+          e.label
+        ]
+      },
+      e.key
+    );
+  }) });
+};
+export {
+  N as ContextMenu
+};

package/dist/components/ContextMenu/ContextMenu.module.scss.js

@@ -0,0 +1,13 @@
+import './ContextMenu.css';const e = "_spContextMenu_qdudd_1", _ = "_spContextMenu__item_qdudd_25", t = "_spContextMenu__item__icon_qdudd_38", n = "_spContextMenu__item__icon_delete_qdudd_43", o = {
+  spContextMenu: e,
+  spContextMenu__item: _,
+  spContextMenu__item__icon: t,
+  spContextMenu__item__icon_delete: n
+};
+export {
+  o as default,
+  e as spContextMenu,
+  _ as spContextMenu__item,
+  t as spContextMenu__item__icon,
+  n as spContextMenu__item__icon_delete
+};

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

@@ -0,0 +1,2 @@
+export { ContextMenu } from "./ContextMenu";
+export type { ContextMenuProps, TContextMenuOption } from "./types";

package/dist/components/ContextMenu/types/index.d.ts

@@ -0,0 +1,12 @@
+import { EIconName } from "../../Icons";
+export interface ContextMenuProps {
+    classNameRoot?: string;
+    options: Array<TContextMenuOption> | [];
+    onClickItem?: (option: TContextMenuOption) => void;
+}
+export type TContextMenuOption = {
+    key?: string;
+    value?: string;
+    label?: string;
+    iconName?: EIconName;
+};

package/dist/components/DatePicker/DatePicker.css

@@ -0,0 +1 @@
+._datePicker_mhgoa_1{display:flex;flex-direction:column;width:100%;-webkit-user-select:none;user-select:none}._datePicker_mhgoa_1{opacity:1;visibility:visible}._datePicker_mhgoa_1{transition:all .3s ease-in-out}@starting-style{._datePicker_mhgoa_1{opacity:0;visibility:hidden}}._datePicker_relative_mhgoa_20{position:relative}._datePicker__customHeader_mhgoa_23{display:flex;align-items:center;justify-content:space-between}._datePicker__navigationWrapper_mhgoa_28{display:flex;align-items:center;gap:var(--spui-spacing-6x)}._datePicker__navigation_mhgoa_28{display:flex;align-items:center;width:var(--spui-icon-size-base);height:var(--spui-icon-size-base);cursor:pointer}._datePicker__navigation_previous_mhgoa_40{rotate:180deg}._datePicker__error_mhgoa_43{padding-top:8px;font-family:var(--spui-font-family-main),serif;font-weight:var(--spui-font-weight-regular);font-size:12px;color:var(--spui-color-text-error)}._datePicker__error_absolutePosition_mhgoa_50{position:absolute;top:100%}@media only screen and (min-width:768px){._datePicker__error_mhgoa_43{font-size:14px}}._datePicker__footer_mhgoa_59{display:flex;align-items:center;justify-content:space-between}._datePicker__footerActions_mhgoa_64{font-size:18px;line-height:1.3;cursor:pointer}._datePicker__footerActions_clear_mhgoa_69{color:var(--spui-color-icon-error)}._datePicker__footerActions_done_mhgoa_72{color:var(--spui-color-gray-500)}._datePicker__customContainer_mhgoa_75{border-radius:0;border:none;display:flex;flex-direction:column;gap:var(--spui-spacing-3x);font-family:var(--spui-font-family-main),serif;padding:var(--spui-spacing-6x);box-shadow:0 4px 32px #13131314;background-color:var(--spui-color-surface-default)}._datePicker_mhgoa_1 .react-datepicker__triangle{display:none}._datePicker_mhgoa_1 .react-datepicker-popper:before{content:""}._datePicker_mhgoa_1 .react-datepicker__header--custom{padding:0 0 16.5px;background-color:transparent;border:none}._datePicker_mhgoa_1 .react-datepicker__day-name{color:var(--spui-color-text-secondary)}._datePicker_mhgoa_1 .react-datepicker__day,._datePicker_mhgoa_1 .react-datepicker__day-name{margin:var(--spui-spacing-none);width:42px;font-size:18px;line-height:42px;box-sizing:content-box;border:var(--spui-border-width-md) solid var(--spui-color-surface-transparent)}._datePicker_mhgoa_1 .react-datepicker__day{color:var(--spui-color-text-primary);font-weight:var(--spui-font-weight-regular)}._datePicker_mhgoa_1 .react-datepicker__day{transition:all .2s ease-in-out}._datePicker_mhgoa_1 .react-datepicker__day--disabled,._datePicker_mhgoa_1 .react-datepicker__day--outside-month{color:var(--spui-color-text-secondary)}._datePicker_mhgoa_1 .react-datepicker__day--today{border:var(--spui-border-width-md) solid var(--spui-color-border-action);background-color:var(--spui-color-surface-transparent);color:var(--spui-color-text-action)}._datePicker_mhgoa_1 .react-datepicker__day--today:focus,._datePicker_mhgoa_1 .react-datepicker__day--today:focus-visible{outline:none}._datePicker_mhgoa_1 .react-datepicker__day--keyboard-selected{color:var(--spui-color-text-action);border-radius:var(--spui-border-radius-none);background-color:var(--spui-color-surface-secondary);border:var(--spui-border-width-md) solid var(--spui-color-border-action)}._datePicker_mhgoa_1 .react-datepicker__day--keyboard-selected:focus-visible,._datePicker_mhgoa_1 .react-datepicker__day--keyboard-selected:hover{color:var(--spui-color-text-action)!important;background-color:var(--spui-color-surface-secondary-hover)}._datePicker_mhgoa_1 .react-datepicker__day--keyboard-selected:active{background-color:var(--spui-color-surface-secondary-active)}._datePicker_mhgoa_1 .react-datepicker__day--selected{color:var(--spui-color-text-on-action);border-radius:var(--spui-border-radius-none);background-color:var(--spui-color-surface-action);border:var(--spui-border-width-md) solid var(--spui-color-border-action)}._datePicker_mhgoa_1 .react-datepicker__day--selected:focus-visible,._datePicker_mhgoa_1 .react-datepicker__day--selected:hover{background-color:var(--spui-color-surface-action-hover);border:var(--spui-border-width-md) solid var(--spui-color-border-action-hover)}._datePicker_mhgoa_1 .react-datepicker__day--selected:active{background-color:var(--spui-color-surface-action-active);border:var(--spui-border-width-md) solid var(--spui-color-border-action-active)}._datePicker_mhgoa_1 .react-datepicker__day--selected:hover{background-color:var(--spui-color-surface-action-active)!important;border-color:var(--spui-color-border-action-active)}._datePicker_mhgoa_1 .react-datepicker__day:hover{border-radius:var(--spui-border-radius-none);background-color:var(--spui-color-blue-50)}._datePicker_mhgoa_1 .react-datepicker__month{margin:var(--spui-spacing-none)}._datePickerPortal_mhgoa_165 .react-datepicker-popper{z-index:1000}._datePickerPortal_mhgoa_165 .react-datepicker__triangle{display:none}._datePickerPortal_mhgoa_165 .react-datepicker-popper:before{content:""}._datePickerPortal_mhgoa_165 .react-datepicker__header--custom{padding:0 0 16.5px;background-color:var(--spui-color-surface-transparent);border:none}._datePickerPortal_mhgoa_165 .react-datepicker__day-name{color:var(--spui-color-text-secondary)}._datePickerPortal_mhgoa_165 .react-datepicker__day,._datePickerPortal_mhgoa_165 .react-datepicker__day-name{margin:var(--spui-spacing-none);width:42px;font-size:18px;line-height:42px;box-sizing:content-box;border:var(--spui-border-width-md) solid var(--spui-color-surface-transparent)}._datePickerPortal_mhgoa_165 .react-datepicker__day{color:var(--spui-color-text-primary);font-weight:var(--spui-font-weight-regular)}._datePickerPortal_mhgoa_165 .react-datepicker__day{transition:all .2s ease-in-out}._datePickerPortal_mhgoa_165 .react-datepicker__day--disabled,._datePickerPortal_mhgoa_165 .react-datepicker__day--outside-month{color:var(--spui-color-text-secondary)}._datePickerPortal_mhgoa_165 .react-datepicker__day--today{border:var(--spui-border-width-md) solid var(--spui-color-border-action);background-color:var(--spui-color-surface-transparent);color:var(--spui-color-text-action)}._datePickerPortal_mhgoa_165 .react-datepicker__day--today:focus,._datePickerPortal_mhgoa_165 .react-datepicker__day--today:focus-visible{outline:none}._datePickerPortal_mhgoa_165 .react-datepicker__day--keyboard-selected{color:var(--spui-color-text-action);border-radius:var(--spui-border-radius-none);background-color:var(--spui-color-surface-secondary);border:var(--spui-border-width-md) solid var(--spui-color-border-action)}._datePickerPortal_mhgoa_165 .react-datepicker__day--keyboard-selected:focus-visible,._datePickerPortal_mhgoa_165 .react-datepicker__day--keyboard-selected:hover{color:var(--spui-color-text-action)!important;background-color:var(--spui-color-surface-secondary-hover)}._datePickerPortal_mhgoa_165 .react-datepicker__day--keyboard-selected:active{background-color:var(--spui-color-surface-secondary-active)}._datePickerPortal_mhgoa_165 .react-datepicker__day--selected{color:var(--spui-color-text-on-action);border-radius:var(--spui-border-radius-none);background-color:var(--spui-color-surface-action);border:var(--spui-border-width-md) solid var(--spui-color-border-action)}._datePickerPortal_mhgoa_165 .react-datepicker__day--selected:focus-visible,._datePickerPortal_mhgoa_165 .react-datepicker__day--selected:hover{background-color:var(--spui-color-surface-action-hover);border:var(--spui-border-width-md) solid var(--spui-color-border-action-hover)}._datePickerPortal_mhgoa_165 .react-datepicker__day--selected:active{background-color:var(--spui-color-surface-action-active);border:var(--spui-border-width-md) solid var(--spui-color-border-action-active)}._datePickerPortal_mhgoa_165 .react-datepicker__day--selected:hover{background-color:var(--spui-color-surface-action-active)!important;border-color:var(--spui-color-border-action-active)}._datePickerPortal_mhgoa_165 .react-datepicker__day:hover{border-radius:var(--spui-border-radius-none);background-color:var(--spui-color-blue-50)}._datePickerPortal_mhgoa_165 .react-datepicker__month{margin:var(--spui-spacing-none)}

package/dist/components/DatePicker/DatePicker.d.ts

@@ -0,0 +1,4 @@
+import "react-datepicker/dist/react-datepicker.css";
+import React from "react";
+import { IDatePickerProps } from "./types";
+export declare const DatePicker: React.FC<IDatePickerProps>;

package/dist/components/DatePicker/DatePicker.js

@@ -0,0 +1,198 @@
+import { jsxs as l, jsx as r } from "react/jsx-runtime";
+import "react-datepicker/dist/react-datepicker.css";
+import a from "clsx";
+import { ru as ce } from "date-fns/locale/ru";
+import { useState as x, useEffect as ie, useRef as me } from "react";
+import de from "react-datepicker";
+import o from "./DatePicker.module.scss.js";
+import { Label as pe } from "../Label/Label.js";
+import { DatePickerInput as ue } from "../DatePickerInput/DatePickerInput.js";
+import { Text as d } from "../Text/Text.js";
+import { Icon as E } from "../Icons/Icon.js";
+import { EIconName as T } from "../Icons/types/index.js";
+const xe = (O) => {
+  const {
+    variant: S = "outlined",
+    placeholderText: A = "дд.мм.гггг",
+    dateFormatMask: B = "99.99.9999",
+    dateFormat: L = "dd.MM.yyyy",
+    readOnlyInput: M = !0,
+    isClearable: F = !0,
+    isRelative: w = !0,
+    shouldCloseOnSelect: p = !1,
+    enablePortal: n = !1,
+    closeOnScroll: V = !1,
+    disabled: u,
+    required: f,
+    error: N,
+    label: _,
+    value: j,
+    selected: C,
+    onCalendarOpen: H,
+    onCalendarClose: U,
+    onMouseDownInput: q,
+    onChange: P,
+    name: c,
+    onMouseEnter: K,
+    infoTooltipText: W,
+    tooltipPosition: Y,
+    minDate: z,
+    maxDate: G,
+    classNameRoot: k,
+    classNameDatePickerInputRoot: v,
+    classNameLabel: R,
+    classNameError: h,
+    classNameBaseTooltipRoot: J,
+    classNamePortalRoot: b
+  } = O, [I, g] = x(C), [Q, y] = x(null);
+  ie(() => {
+    if (!n) {
+      y(null);
+      return;
+    }
+    const e = "custom-datepicker-portal";
+    let t = document.getElementById(e);
+    return t || (t = document.createElement("div"), t.id = e, t.className = a(o.datePickerPortal, b), document.body.appendChild(t)), y(t), () => {
+    };
+  }, [n, b]);
+  const X = () => {
+    H?.();
+  }, i = () => {
+    U?.();
+  }, m = (e, t) => {
+    P && c && P({ name: c, value: e });
+  }, Z = (e) => {
+    p && m(e), g(e);
+  }, $ = a({
+    [o.datePicker]: !0,
+    [o.datePicker_relative]: w,
+    ...k && { [k]: !0 }
+  }), s = me(null), ee = a({
+    ...v && { [v]: !0 }
+  }), oe = a({
+    ...R && { [R]: !0 }
+  }), te = a({
+    [o.datePicker__error]: !0,
+    ...h && { [h]: !0 }
+  }), ae = (e) => {
+    e.preventDefault(), e.stopPropagation(), m(null), g(null), s.current && s.current.setOpen(!1), i();
+  }, re = (e) => {
+    e.preventDefault(), e.stopPropagation(), s.current && s.current.setOpen(!1), m(I), i();
+  };
+  return /* @__PURE__ */ l("div", { className: $, children: [
+    _ && /* @__PURE__ */ r(
+      pe,
+      {
+        classNameRoot: oe,
+        tooltipPosition: Y,
+        required: f,
+        label: _,
+        infoTooltipText: W,
+        classNameBaseTooltipRoot: J
+      }
+    ),
+    /* @__PURE__ */ r(
+      de,
+      {
+        portalId: n && Q ? "custom-datepicker-portal" : void 0,
+        popperPlacement: "bottom-end",
+        disabledKeyboardNavigation: !I,
+        onSelect: Z,
+        ref: s,
+        closeOnScroll: V,
+        shouldCloseOnSelect: p,
+        minDate: z,
+        maxDate: G,
+        dateFormat: L,
+        locale: ce,
+        required: f,
+        name: c,
+        onCalendarClose: i,
+        onCalendarOpen: X,
+        selected: C,
+        value: j,
+        disabled: u,
+        renderCustomHeader: ({
+          monthDate: e,
+          decreaseMonth: t,
+          increaseMonth: se
+        }) => {
+          const D = e.toLocaleString("ru-RU", {
+            month: "short"
+          }), le = e.getFullYear(), ne = D.charAt(0).toUpperCase() + D.slice(1) + " " + le;
+          return /* @__PURE__ */ l("div", { className: o.datePicker__customHeader, children: [
+            /* @__PURE__ */ r(d, { children: ne.replace(".", "") }),
+            /* @__PURE__ */ l("div", { className: o.datePicker__navigationWrapper, children: [
+              /* @__PURE__ */ r(
+                E,
+                {
+                  name: T.ArrowBottom,
+                  onClick: t,
+                  className: a(
+                    o.datePicker__navigation,
+                    o.datePicker__navigation_previous
+                  )
+                }
+              ),
+              /* @__PURE__ */ r(
+                E,
+                {
+                  name: T.ArrowBottom,
+                  onClick: se,
+                  className: a(o.datePicker__navigation)
+                }
+              )
+            ] })
+          ] });
+        },
+        calendarContainer: ({ className: e, children: t }) => /* @__PURE__ */ l("div", { className: a(o.datePicker__customContainer, e), children: [
+          t,
+          F && /* @__PURE__ */ l("div", { className: o.datePicker__footer, children: [
+            /* @__PURE__ */ r(
+              d,
+              {
+                classNameRoot: a(
+                  o.datePicker__footerActions,
+                  o.datePicker__footerActions_clear
+                ),
+                onClick: ae,
+                children: "Очистить"
+              }
+            ),
+            /* @__PURE__ */ r(
+              d,
+              {
+                classNameRoot: a(
+                  o.datePicker__footerActions,
+                  o.datePicker__footerActions_done
+                ),
+                onClick: re,
+                children: "Готово"
+              }
+            )
+          ] })
+        ] }),
+        customInput: /* @__PURE__ */ r(
+          ue,
+          {
+            variant: S,
+            placeholderText: A,
+            dateFormatMask: B,
+            classNameRoot: ee,
+            onMouseDownInput: q,
+            readOnlyInput: M,
+            disabled: u,
+            isVisibleCalendarIcon: !0,
+            isVisibleErrorText: !1,
+            isVisibleLabelText: !1,
+            onMouseEnter: K
+          }
+        )
+      }
+    ),
+    N && /* @__PURE__ */ r("div", { className: te, children: N })
+  ] });
+};
+export {
+  xe as DatePicker
+};

package/dist/components/DatePicker/DatePicker.module.scss.js

@@ -0,0 +1,31 @@
+import './DatePicker.css';const e = "_datePicker_mhgoa_1", _ = "_datePicker_relative_mhgoa_20", t = "_datePicker__customHeader_mhgoa_23", o = "_datePicker__navigationWrapper_mhgoa_28", a = "_datePicker__navigation_mhgoa_28", r = "_datePicker__navigation_previous_mhgoa_40", i = "_datePicker__error_mhgoa_43", c = "_datePicker__footer_mhgoa_59", n = "_datePicker__footerActions_mhgoa_64", d = "_datePicker__footerActions_clear_mhgoa_69", P = "_datePicker__footerActions_done_mhgoa_72", k = "_datePicker__customContainer_mhgoa_75", s = "_datePickerPortal_mhgoa_165", g = {
+  datePicker: e,
+  datePicker_relative: _,
+  datePicker__customHeader: t,
+  datePicker__navigationWrapper: o,
+  datePicker__navigation: a,
+  datePicker__navigation_previous: r,
+  datePicker__error: i,
+  datePicker__footer: c,
+  datePicker__footerActions: n,
+  datePicker__footerActions_clear: d,
+  datePicker__footerActions_done: P,
+  datePicker__customContainer: k,
+  datePickerPortal: s
+};
+export {
+  e as datePicker,
+  s as datePickerPortal,
+  k as datePicker__customContainer,
+  t as datePicker__customHeader,
+  i as datePicker__error,
+  c as datePicker__footer,
+  n as datePicker__footerActions,
+  d as datePicker__footerActions_clear,
+  P as datePicker__footerActions_done,
+  a as datePicker__navigation,
+  o as datePicker__navigationWrapper,
+  r as datePicker__navigation_previous,
+  _ as datePicker_relative,
+  g as default
+};

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

@@ -0,0 +1,2 @@
+export { DatePicker } from "./DatePicker";
+export type { IDatePickerProps, TOnChangeDatePicker } from "./types";