@moysklad/uikit 28.1.0

package/dist/components/Badge/Badge.d.ts

@@ -0,0 +1,26 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import type { IHasTestId, ValueOf } from '../../common/types';
+import { type PlacementValue } from '../Tooltip/Tooltip';
+export declare const badgeColors: {
+    readonly green: "green";
+    readonly red: "red";
+    readonly orange: "orange";
+    readonly purple: "purple";
+    readonly blue: "blue";
+    readonly grey: "grey";
+    readonly white: "white";
+};
+export type BadgeVariant = ValueOf<typeof badgeColors>;
+export type BadgeProps = {
+    label: string;
+    labelClassName?: string;
+    icon?: ReactNode;
+    help?: ReactNode;
+    variant: BadgeVariant;
+    helpPlacement?: PlacementValue;
+    helpZIndex?: number;
+    hintPlacement?: PlacementValue;
+    hintZIndex?: number;
+    isCompact?: boolean;
+} & HTMLAttributes<HTMLDivElement> & IHasTestId;
+export declare const Badge: ({ icon, label, labelClassName, help, className, variant, hintPlacement, helpPlacement, helpZIndex, hintZIndex, testId, isCompact, ...props }: BadgeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Badge/Badge.js

@@ -0,0 +1,68 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { cn } from "../../common/css/cn.js";
+import { Help } from "../Help/Help.js";
+import { Hint } from "../Hint/Hint.js";
+import { Text, TextColor } from "../Text/Text.js";
+import { Placement } from "../Tooltip/Tooltip.js";
+import { Support12Icon } from "../../icon/index.js";
+import Badge_module from "./Badge.module.js";
+const badgeColors = {
+    green: 'green',
+    red: 'red',
+    orange: 'orange',
+    purple: 'purple',
+    blue: 'blue',
+    grey: 'grey',
+    white: 'white'
+};
+const Badge = ({ icon, label, labelClassName, help, className, variant, hintPlacement = Placement.BOTTOM, helpPlacement = Placement.BOTTOM, helpZIndex, hintZIndex, testId, isCompact = false, ...props })=>{
+    const [isVisibleHint, setIsVisibleHint] = useState(false);
+    const handleMouseEnter = (e)=>{
+        const { scrollWidth, clientWidth } = e.currentTarget;
+        if (scrollWidth > clientWidth) setIsVisibleHint(true);
+    };
+    const handleMouseLeave = ()=>{
+        if (isVisibleHint) setIsVisibleHint(false);
+    };
+    return /*#__PURE__*/ jsx("div", {
+        "data-test-id": testId,
+        className: cn(Badge_module.badge, Badge_module[variant], className),
+        ...props,
+        children: /*#__PURE__*/ jsxs("div", {
+            className: Badge_module.content,
+            children: [
+                icon,
+                /*#__PURE__*/ jsx(Hint, {
+                    visible: isVisibleHint,
+                    testId: "badge-hint",
+                    mouseEnterDelay: 0.3,
+                    overlay: /*#__PURE__*/ jsx(Text.Body, {
+                        colorToken: TextColor.invert,
+                        children: label
+                    }),
+                    placement: hintPlacement,
+                    zIndex: hintZIndex,
+                    children: /*#__PURE__*/ jsx(Text.Body, {
+                        "data-test-id": "badge-label",
+                        className: cn(Badge_module.label, isCompact && Badge_module.compactLabel, labelClassName),
+                        onMouseEnter: handleMouseEnter,
+                        onMouseLeave: handleMouseLeave,
+                        children: label
+                    })
+                }),
+                help && /*#__PURE__*/ jsx(Help, {
+                    testId: "badge-help",
+                    className: Badge_module.help,
+                    icon: /*#__PURE__*/ jsx(Support12Icon, {}),
+                    popup: /*#__PURE__*/ jsx(Text.Body, {
+                        children: help
+                    }),
+                    placement: helpPlacement,
+                    zIndex: helpZIndex
+                })
+            ]
+        })
+    });
+};
+export { Badge, badgeColors };

package/dist/components/Badge/Badge.module.js

@@ -0,0 +1,16 @@
+import "./Badge_module.css";
+const Badge_module = {
+    badge: "badge-gtxv4j",
+    help: "help-eK4Uwn",
+    content: "content-CwHzRb",
+    label: "label-OcAgnc",
+    compactLabel: "compactLabel-CPq9Lw",
+    green: "green-RovTpA",
+    red: "red-umEyTB",
+    orange: "orange-AfMs_f",
+    purple: "purple-SHXivG",
+    blue: "blue-xZpf1N",
+    grey: "grey-gyq1JB",
+    white: "white-VZm7s3"
+};
+export default Badge_module;

package/dist/components/Badge/Badge_module.css

@@ -0,0 +1,88 @@
+.badge-gtxv4j {
+  box-sizing: border-box;
+  border-radius: 8px;
+  gap: 4px;
+  min-width: 25px;
+  max-width: fit-content;
+  padding: 0 8px;
+}
+
+.badge-gtxv4j .help-eK4Uwn svg path[stroke], .badge-gtxv4j .help-eK4Uwn:hover svg path[stroke] {
+  stroke: currentColor;
+}
+
+.content-CwHzRb {
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+  display: flex;
+  overflow: hidden;
+}
+
+.content-CwHzRb > svg {
+  flex-shrink: 0;
+}
+
+.label-OcAgnc {
+  color: currentColor;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.compactLabel-CPq9Lw {
+  visibility: hidden;
+  text-align: center;
+  width: 11px;
+  min-width: 11px;
+  position: relative;
+}
+
+.compactLabel-CPq9Lw:after {
+  content: "...";
+  color: currentColor;
+  z-index: 1;
+  visibility: visible;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.green-RovTpA {
+  color: var(--badge-green-text);
+  background-color: var(--badge-green-bgd);
+}
+
+.red-umEyTB {
+  color: var(--badge-red-text);
+  background-color: var(--badge-red-bgd);
+}
+
+.orange-AfMs_f {
+  color: var(--badge-orange-text);
+  background-color: var(--badge-orange-bgd);
+}
+
+.purple-SHXivG {
+  color: var(--badge-purple-text);
+  background-color: var(--badge-purple-bgd);
+}
+
+.blue-xZpf1N {
+  color: var(--badge-blue-text);
+  background-color: var(--badge-blue-bgd);
+}
+
+.grey-gyq1JB {
+  color: var(--text-secondary);
+  background-color: var(--badge-grey-bgd);
+}
+
+.white-VZm7s3 {
+  color: var(--text-primary);
+  background-color: var(--bgd-white);
+  border: 1px solid var(--border-normal);
+}
+

package/dist/components/Banner/Banner.d.ts

@@ -0,0 +1,12 @@
+import { type ReactNode } from 'react';
+import { type IHasTestId } from '../../common/types';
+export interface IBannerProps extends IHasTestId {
+    type: 'info' | 'warning';
+    title?: string;
+    subtitle?: string;
+    className?: string;
+    onHide?: () => void;
+}
+export declare const Banner: import("react").ForwardRefExoticComponent<IBannerProps & {
+    children?: ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Banner/Banner.js

@@ -0,0 +1,47 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../common/css/cn.js";
+import { Text, TextColor } from "../Text/Text.js";
+import { AlertWarningTriangle20Icon, InformationCircle20Icon, RemoveCloseIcon16Icon } from "../../icon/index.js";
+import Banner_module from "./Banner.module.js";
+const ICONS = {
+    info: /*#__PURE__*/ jsx(InformationCircle20Icon, {}),
+    warning: /*#__PURE__*/ jsx(AlertWarningTriangle20Icon, {})
+};
+const Banner = /*#__PURE__*/ forwardRef(({ type, testId, title, subtitle, children, className, onHide }, ref)=>/*#__PURE__*/ jsxs("div", {
+        ref: ref,
+        "data-test-id": testId,
+        className: cn(Banner_module.container, Banner_module[type], className),
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: cn(Banner_module.icon, Banner_module[type]),
+                "data-test-id": testId ? `${testId}-icon` : void 0,
+                "data-icon-type": type,
+                children: ICONS[type]
+            }),
+            title && /*#__PURE__*/ jsx(Text.H4, {
+                className: Banner_module.title,
+                testId: testId ? `${testId}-title` : void 0,
+                children: title
+            }),
+            subtitle && /*#__PURE__*/ jsx(Text.Caption, {
+                testId: testId ? `${testId}-subtitle` : void 0,
+                className: Banner_module.subtitle,
+                colorToken: TextColor.secondary,
+                children: subtitle
+            }),
+            /*#__PURE__*/ jsx("div", {
+                "data-test-id": testId ? `${testId}-content` : void 0,
+                className: cn(Banner_module.content, onHide && Banner_module.withHideButton),
+                children: children
+            }),
+            onHide && /*#__PURE__*/ jsx("button", {
+                "data-test-id": testId ? `${testId}-hide-button` : void 0,
+                className: Banner_module.hideButton,
+                onClick: onHide,
+                children: /*#__PURE__*/ jsx(RemoveCloseIcon16Icon, {})
+            })
+        ]
+    }));
+Banner.displayName = 'Banner';
+export { Banner };

package/dist/components/Banner/Banner.module.js

@@ -0,0 +1,12 @@
+import "./Banner_module.css";
+const Banner_module = {
+    container: "container-bfHXXD",
+    info: "info-MeoYJv",
+    warning: "warning-cK8lDg",
+    content: "content-h5j59N",
+    icon: "icon-o67jnB",
+    hideButton: "hideButton-m0cPoB",
+    title: "title-bgaee8",
+    subtitle: "subtitle-F_ydVb"
+};
+export default Banner_module;

package/dist/components/Banner/Banner_module.css

@@ -0,0 +1,58 @@
+.container-bfHXXD {
+  background-color: var(--light-white);
+  border: 1px solid #0000;
+  border-radius: 8px;
+  padding: 16px 48px 16px 60px;
+  position: relative;
+}
+
+.container-bfHXXD.info-MeoYJv {
+  border-color: var(--product-blue-700);
+}
+
+.container-bfHXXD.warning-cK8lDg {
+  border-color: var(--colorful-orange-600);
+}
+
+.container-bfHXXD .content-h5j59N {
+  margin: 4px 0;
+}
+
+.container-bfHXXD .icon-o67jnB {
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  position: absolute;
+  top: 20px;
+  left: 24px;
+}
+
+.container-bfHXXD .icon-o67jnB.info-MeoYJv svg path {
+  stroke: var(--product-blue-700);
+}
+
+.container-bfHXXD .icon-o67jnB.warning-cK8lDg svg path {
+  fill: var(--colorful-orange-600);
+}
+
+.container-bfHXXD .hideButton-m0cPoB {
+  cursor: pointer;
+  background-color: #0000;
+  border: none;
+  outline: none;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  position: absolute;
+  top: 20px;
+  right: 16px;
+}
+
+.title-bgaee8 {
+  margin: 4px 0;
+}
+
+.subtitle-F_ydVb {
+  margin-bottom: 4px;
+}
+

package/dist/components/BodyL/BodyL.d.ts

@@ -0,0 +1,9 @@
+import { type TypographyProps } from '../Typography/Typography';
+/**
+ * @deprecated
+ */
+export type BodyLProps = TypographyProps<HTMLElement>;
+/**
+ * @deprecated Use <Text variant='bodyL' /> or <Text.BodyL /> instead
+ */
+export declare const BodyL: import("react").ForwardRefExoticComponent<Omit<BodyLProps, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;

package/dist/components/BodyL/BodyL.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../common/css/cn.js";
+import { Typography } from "../Typography/Typography.js";
+import BodyL_module from "./BodyL.module.js";
+const BodyL = /*#__PURE__*/ forwardRef(({ tag = 'p', className, children, ...rest }, ref)=>/*#__PURE__*/ jsx(Typography, {
+        ...rest,
+        ref: ref,
+        tag: tag,
+        className: cn(BodyL_module.bodyL, className),
+        children: children
+    }));
+BodyL.displayName = 'BodyL';
+export { BodyL };

package/dist/components/BodyL/BodyL.module.js

@@ -0,0 +1,5 @@
+import "./BodyL_module.css";
+const BodyL_module = {
+    bodyL: "bodyL-tbjWM4"
+};
+export default BodyL_module;

package/dist/components/BodyL/BodyL_module.css

@@ -0,0 +1,14 @@
+.bodyL-tbjWM4.bodyL-tbjWM4 {
+  letter-spacing: 0;
+  text-transform: none;
+  font-feature-settings: "tnum" on,"lnum" on;
+  -webkit-font-smoothing: antialiased;
+  color: #091739;
+  margin: 0;
+  padding: 0;
+  font-family: ALS Hauss, sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+}
+

package/dist/components/BodyText/BodyText.d.ts

@@ -0,0 +1,9 @@
+import { type TypographyProps } from '../Typography/Typography';
+/**
+ * @deprecated
+ */
+export type BodyTextProps = TypographyProps<HTMLElement>;
+/**
+ * @deprecated Use <Text variant='body' /> or <Text.Body /> instead
+ */
+export declare const BodyText: import("react").ForwardRefExoticComponent<Omit<BodyTextProps, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;

package/dist/components/BodyText/BodyText.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../common/css/cn.js";
+import { Typography } from "../Typography/Typography.js";
+import BodyText_module from "./BodyText.module.js";
+const BodyText = /*#__PURE__*/ forwardRef(({ tag = 'p', className, children, ...rest }, ref)=>/*#__PURE__*/ jsx(Typography, {
+        ...rest,
+        ref: ref,
+        tag: tag,
+        className: cn(BodyText_module.bodyText, className),
+        children: children
+    }));
+BodyText.displayName = 'BodyText';
+export { BodyText };

package/dist/components/BodyText/BodyText.module.js

@@ -0,0 +1,5 @@
+import "./BodyText_module.css";
+const BodyText_module = {
+    bodyText: "bodyText-Omrb7e"
+};
+export default BodyText_module;

package/dist/components/BodyText/BodyText_module.css

@@ -0,0 +1,14 @@
+.bodyText-Omrb7e.bodyText-Omrb7e {
+  letter-spacing: 0;
+  text-transform: none;
+  font-feature-settings: "tnum" on,"lnum" on;
+  -webkit-font-smoothing: antialiased;
+  color: var(--body-text-color, var(--text-primary, #091739));
+  margin: 0;
+  padding: 0;
+  font-family: ALS Hauss, sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+}
+

package/dist/components/BodyTextStrong/BodyTextStrong.d.ts

@@ -0,0 +1,9 @@
+import { type TypographyProps } from '../Typography/Typography';
+/**
+ * @deprecated
+ */
+export type BodyTextStrongProps = TypographyProps<HTMLElement>;
+/**
+ * @deprecated Use <Text variant='bodyStrong' /> or <Text.BodyStrong /> instead
+ */
+export declare const BodyTextStrong: import("react").ForwardRefExoticComponent<Omit<BodyTextStrongProps, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;

package/dist/components/BodyTextStrong/BodyTextStrong.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../common/css/cn.js";
+import { Typography } from "../Typography/Typography.js";
+import BodyTextStrong_module from "./BodyTextStrong.module.js";
+const BodyTextStrong = /*#__PURE__*/ forwardRef(({ tag = 'p', className, children, ...rest }, ref)=>/*#__PURE__*/ jsx(Typography, {
+        ...rest,
+        ref: ref,
+        tag: tag,
+        className: cn(BodyTextStrong_module.bodyStrong, className),
+        children: children
+    }));
+BodyTextStrong.displayName = 'BodyTextStrong';
+export { BodyTextStrong };

package/dist/components/BodyTextStrong/BodyTextStrong.module.js

@@ -0,0 +1,5 @@
+import "./BodyTextStrong_module.css";
+const BodyTextStrong_module = {
+    bodyStrong: "bodyStrong-MK0szI"
+};
+export default BodyTextStrong_module;

package/dist/components/BodyTextStrong/BodyTextStrong_module.css

@@ -0,0 +1,14 @@
+.bodyStrong-MK0szI.bodyStrong-MK0szI {
+  letter-spacing: 0;
+  text-transform: none;
+  font-feature-settings: "tnum" on,"lnum" on;
+  -webkit-font-smoothing: antialiased;
+  color: #091739;
+  margin: 0;
+  padding: 0;
+  font-family: ALS Hauss, sans-serif;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 20px;
+}
+

package/dist/components/BodyXL/BodyXL.d.ts

@@ -0,0 +1,9 @@
+import { type TypographyProps } from '../Typography/Typography';
+/**
+ * @deprecated
+ */
+export type BodyXLProps = TypographyProps<HTMLElement>;
+/**
+ * @deprecated Use <Text variant='bodyXL' /> or <Text.BodyXL /> instead
+ */
+export declare const BodyXL: import("react").ForwardRefExoticComponent<Omit<BodyXLProps, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;

package/dist/components/BodyXL/BodyXL.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../common/css/cn.js";
+import { Typography } from "../Typography/Typography.js";
+import BodyXL_module from "./BodyXL.module.js";
+const BodyXL = /*#__PURE__*/ forwardRef(({ tag = 'p', className, children, ...rest }, ref)=>/*#__PURE__*/ jsx(Typography, {
+        ...rest,
+        ref: ref,
+        tag: tag,
+        className: cn(BodyXL_module.bodyXL, className),
+        children: children
+    }));
+BodyXL.displayName = 'BodyXL';
+export { BodyXL };

package/dist/components/BodyXL/BodyXL.module.js

@@ -0,0 +1,6 @@
+import "./BodyXL_module.css";
+const BodyXL_module = {
+    bodyXL: "bodyXL-g8NAuY",
+    bodyXl: "bodyXL-g8NAuY"
+};
+export default BodyXL_module;

package/dist/components/BodyXL/BodyXL_module.css

@@ -0,0 +1,14 @@
+.bodyXL-g8NAuY.bodyXL-g8NAuY {
+  letter-spacing: 0;
+  text-transform: none;
+  font-feature-settings: "tnum" on,"lnum" on;
+  -webkit-font-smoothing: antialiased;
+  color: #091739;
+  margin: 0;
+  padding: 0;
+  font-family: ALS Hauss, sans-serif;
+  font-size: 20px;
+  font-weight: 400;
+  line-height: 26px;
+}
+

package/dist/components/BottomSheet/BottomSheet.constants.d.ts

@@ -0,0 +1,2 @@
+import type { Transition } from 'framer-motion';
+export declare const TRANSITION: Transition;

package/dist/components/BottomSheet/BottomSheet.constants.js

@@ -0,0 +1,6 @@
+const TRANSITION = {
+    type: 'tween',
+    duration: 0.24,
+    ease: 'easeOut'
+};
+export { TRANSITION };

package/dist/components/BottomSheet/BottomSheet.d.ts

@@ -0,0 +1,15 @@
+import React, { type FC } from 'react';
+import { type IHasTestId } from '../../common/types';
+export interface BottomSheetProps extends IHasTestId {
+    isOpen: boolean;
+    onClose: () => void;
+    onCloseAnimationComplete?: () => void;
+    title?: string;
+    description?: string;
+    contentSlot?: React.ReactElement;
+    actionsSlot?: React.ReactElement;
+    closable?: boolean;
+    supportSheetText?: string;
+    maxWidthContainer?: number;
+}
+export declare const BottomSheet: FC<BottomSheetProps>;