@koslibs/components 0.0.0 → 1.1.0

package/dist/components/Button/index_module.css

@@ -0,0 +1,243 @@
+@import "../../styles/theme.css";
+@import "./vars.css";
+
+.component-vxc0gC {
+  box-sizing: border-box;
+  vertical-align: middle;
+  width: fit-content;
+  font-family: var(--font-ubuntu, "Ubuntu", sans-serif);
+  font-size: var(--size-16, 16px);
+  text-align: center;
+  margin: var(--size-0, 0px);
+  padding: var(--size-0, 0px) var(--size-24, 24px);
+  cursor: pointer;
+  -webkit-user-select: none;
+  user-select: none;
+  border: none;
+  outline: none;
+  flex-flow: row;
+  justify-content: center;
+  align-items: center;
+  text-decoration: none;
+  transition: background-color .1s ease-in-out, color .1s ease-in-out, box-shadow .1s ease-in-out;
+  display: inline-flex;
+  position: relative;
+}
+
+.size-32-oD8MDp, .size-40-Pu2_h6 {
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+  font-family: var(--font-family-system, system-ui, sans-serif);
+}
+
+.size-32-oD8MDp {
+  min-width: 80px;
+  min-height: 32px;
+  padding: var(--size-0, 0px) var(--size-16, 16px);
+}
+
+.size-40-Pu2_h6 {
+  min-width: 88px;
+  min-height: 40px;
+  padding: var(--size-0, 0px) var(--size-20, 20px);
+}
+
+.size-48-U3XIYx, .size-56-P_94sz {
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 20px;
+  font-family: var(--font-family-system, system-ui, sans-serif);
+}
+
+.size-48-U3XIYx {
+  min-width: 104px;
+  min-height: 48px;
+  padding: var(--size-0, 0px) var(--size-24, 24px);
+}
+
+.size-56-P_94sz {
+  min-width: 128px;
+  min-height: 56px;
+  padding: var(--size-0, 0px) var(--size-28, 28px);
+}
+
+.size-64-ZlQLt3, .size-72-zkSrcs {
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 24px;
+  font-family: var(--font-family-system, system-ui, sans-serif);
+}
+
+.size-64-ZlQLt3 {
+  min-width: 160px;
+  min-height: 64px;
+  padding: var(--size-0, 0px) var(--size-32, 32px);
+}
+
+.size-72-zkSrcs {
+  min-width: 168px;
+  min-height: 72px;
+  padding: var(--size-0, 0px) var(--size-36, 36px);
+}
+
+.withRightAddon-TNcFTm {
+  &.size-32-oD8MDp {
+    padding-right: var(--size-12, 12px);
+  }
+
+  &.size-40-Pu2_h6 {
+    padding-right: var(--size-16, 16px);
+  }
+
+  &.size-48-U3XIYx {
+    padding-right: var(--size-20, 20px);
+  }
+
+  &.size-56-P_94sz {
+    padding-right: var(--size-24, 24px);
+  }
+
+  &.size-64-ZlQLt3 {
+    padding-right: var(--size-28, 28px);
+  }
+
+  &.size-72-zkSrcs {
+    padding-right: var(--size-32, 32px);
+  }
+
+  &.text-Ifdq0q {
+    padding-right: var(--size-0, 0px);
+  }
+}
+
+.withLeftAddon-N3YDHw {
+  &.size-32-oD8MDp {
+    padding-left: var(--size-12, 12px);
+  }
+
+  &.size-40-Pu2_h6 {
+    padding-left: var(--size-16, 16px);
+  }
+
+  &.size-48-U3XIYx {
+    padding-left: var(--size-20, 20px);
+  }
+
+  &.size-56-P_94sz {
+    padding-left: var(--size-24, 24px);
+  }
+
+  &.size-64-ZlQLt3 {
+    padding-left: var(--size-28, 28px);
+  }
+
+  &.size-72-zkSrcs {
+    padding-left: var(--size-32, 32px);
+  }
+
+  &.text-Ifdq0q {
+    padding-left: var(--size-0, 0px);
+  }
+}
+
+.text-Ifdq0q {
+  min-width: 0;
+  min-height: 0;
+  padding: var(--size-0, 0px);
+  appearance: none;
+  border: none;
+
+  &.size-48-U3XIYx, &.size-56-P_94sz {
+    min-height: 24px;
+  }
+}
+
+.size-48-U3XIYx, .size-56-P_94sz {
+  & .addons-NxGsiY:first-child {
+    margin-right: var(--size-8, 8px);
+  }
+
+  & .addons-NxGsiY:last-child {
+    margin-left: var(--size-8, 8px);
+  }
+
+  & .addons-NxGsiY:only-child {
+    margin: var(--size-0, 0px);
+  }
+}
+
+.size-64-ZlQLt3, .size-72-zkSrcs {
+  & .addons-NxGsiY:first-child {
+    margin-right: var(--size-12, 12px);
+  }
+
+  & .addons-NxGsiY:last-child {
+    margin-left: var(--size-12, 12px);
+  }
+
+  & .addons-NxGsiY:only-child {
+    margin: var(--size-0, 0px);
+  }
+}
+
+.block-xREK1A {
+  width: 100%;
+  display: flex;
+}
+
+.rectangular-PFbww7 {
+  border-radius: var(--border-radius-8, 8px);
+}
+
+.rounded-kQqesg {
+  border-radius: var(--border-radius-pill, 99px);
+}
+
+.addons-NxGsiY {
+  margin: var(--size-0, 0px);
+  flex-shrink: 0;
+  align-items: center;
+  display: flex;
+
+  &:first-child {
+    margin-right: var(--size-6, 6px);
+  }
+
+  &:last-child {
+    margin-left: var(--size-6, 6px);
+  }
+
+  &:only-child {
+    margin: var(--size-0, 0px);
+  }
+}
+
+.loading-DPEeSl .label-gwmTIK, .loading-DPEeSl .addons-NxGsiY {
+  opacity: 0;
+}
+
+.stretchText-Nm2RYn {
+  flex-grow: 1;
+}
+
+.hint-AFu_zz {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 18px;
+  font-family: var(--font-primary);
+  color: var(--button-hint-color);
+  display: block;
+}
+
+.loader-BRksFP {
+  left: var(--size-0, 0px);
+  right: var(--size-0, 0px);
+  margin: var(--size-0, 0px) auto;
+  position: absolute;
+}
+
+.transparent-w7vhL3 {
+  min-width: 0;
+}
+

package/dist/components/Button/vars.css

@@ -0,0 +1,24 @@
+:root {
+  --button-default-color: #1c1a18;
+  --button-inverse-color: #f5f3ec;
+  --button-hint-color: #1c1a1862;
+  --button-inverse-hint-color: #f5f3ec72;
+  --button-primary-background-color: #ff6b0a;
+  --button-primary-hover-background-color: #f05f00;
+  --button-primary-active-background-color: #d95300;
+  --button-secondary-background-color: #e0dbce;
+  --button-secondary-hover-background-color: #d5cdbc;
+  --button-secondary-active-background-color: #c8beaa;
+  --button-accent-background-color: #7967f2;
+  --button-accent-hover-background-color: #6c5ae6;
+  --button-accent-active-background-color: #5e4cd8;
+  --button-transparent-background-color: transparent;
+  --button-subtle-hover-background-color: #f2f3ea;
+  --button-subtle-active-background-color: #e5e7db;
+  --button-text-hover-color: #4a463f;
+  --button-text-active-color: #6a645a;
+  --button-disabled-background-color: #cfd1cb;
+  --button-disabled-color: #858981;
+  --button-disabled-hint-color: #9da099;
+}
+

package/dist/components/Spinner/colors.module.js

@@ -0,0 +1,5 @@
+import "./colors_module.css";
+const colors_module = {
+    component: "component-xRdHbz"
+};
+export default colors_module;

package/dist/components/Spinner/colors_module.css

@@ -0,0 +1,6 @@
+@import "./vars.css";
+
+.component-xRdHbz {
+  color: var(--spinner-default-color);
+}
+

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

@@ -0,0 +1,2 @@
+export { Spinner } from './spinner.js';
+export type { SpinnerProps } from './spinner.js';

package/dist/components/Spinner/index.js

@@ -0,0 +1 @@
+export { Spinner } from "./spinner.js";

package/dist/components/Spinner/index.module.js

@@ -0,0 +1,9 @@
+import "./index_module.css";
+const index_module = {
+    spinner: "spinner-KHk8mw",
+    spin_animation: "spin_animation-pow2iy",
+    spinAnimation: "spin_animation-pow2iy",
+    visible: "visible-wk34JZ",
+    gradient: "gradient-QKWB8G"
+};
+export default index_module;

package/dist/components/Spinner/index_module.css

@@ -0,0 +1,29 @@
+@import "./vars.css";
+
+.spinner-KHk8mw {
+  box-sizing: content-box;
+  animation: spin_animation-pow2iy var(--spinner-animation-duration) infinite
+        var(--spinner-animation-timing-function);
+  display: none;
+}
+
+.visible-wk34JZ {
+  display: var(--spinner-display-visible);
+  vertical-align: middle;
+}
+
+.gradient-QKWB8G {
+  width: 100%;
+  height: 100%;
+}
+
+@keyframes spin_animation-pow2iy {
+  from {
+    transform: rotate(0);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+

package/dist/components/Spinner/preset.module.js

@@ -0,0 +1,7 @@
+import "./preset_module.css";
+const preset_module = {
+    preset16: "preset16-UI50gd",
+    preset24: "preset24-PPOWk6",
+    preset48: "preset48-Py1Pzz"
+};
+export default preset_module;

package/dist/components/Spinner/preset_module.css

@@ -0,0 +1,12 @@
+.preset16-UI50gd {
+  padding: 1px;
+}
+
+.preset24-PPOWk6 {
+  padding: var(--size-2, 2px);
+}
+
+.preset48-Py1Pzz {
+  padding: var(--size-4, 4px);
+}
+

package/dist/components/Spinner/spinner.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+export type SpinnerProps = {
+    /**
+     * Управление видимостью компонента
+     * @default false
+     */
+    visible?: boolean;
+    /**
+     * Размер спиннера
+     *
+     * @default 24
+     */
+    size?: 16 | 24 | 48;
+    /**
+     * Дополнительный класс
+     */
+    className?: string;
+    /**
+     * Идентификатор компонента в DOM
+     */
+    id?: string;
+    /**
+     * Идентификатор для систем автоматизированного тестирования
+     */
+    dataTestId?: string;
+    /**
+     * Дополнительные инлайн стили для cпиннера
+     */
+    style?: React.CSSProperties;
+};
+export declare const Spinner: ({ visible, size, className, id, dataTestId, style }: SpinnerProps) => React.JSX.Element;

package/dist/components/Spinner/spinner.js

@@ -0,0 +1,80 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import classnames from "classnames";
+import { useId } from "react";
+import colors_module from "./colors.module.js";
+import index_module from "./index.module.js";
+import preset_module from "./preset.module.js";
+const PRESET_CONFIG = {
+    16: [
+        2,
+        14,
+        'preset16'
+    ],
+    24: [
+        2,
+        20,
+        'preset24'
+    ],
+    48: [
+        4,
+        40,
+        'preset48'
+    ]
+};
+const Spinner = ({ visible, size = 24, className, id, dataTestId, style })=>{
+    const [lineWidth, presetSize, styleKey] = PRESET_CONFIG[size];
+    const presetClassname = preset_module[styleKey];
+    const uniqId = useId();
+    const radius = presetSize / 2 - lineWidth / 2;
+    const rotationAngle = Math.ceil(180 * Math.asin(lineWidth / 2 / radius) / Math.PI);
+    const gap = 90;
+    const pathLength = 360;
+    const strokeDasharray = `${pathLength - gap - rotationAngle} ${gap + rotationAngle}`;
+    const gradient = `conic-gradient(from ${rotationAngle}deg, transparent ${gap - 2 * rotationAngle}deg, currentColor)`;
+    return /*#__PURE__*/ jsxs("svg", {
+        "aria-hidden": "true",
+        viewBox: `0 0 ${presetSize} ${presetSize}`,
+        style: {
+            ...style,
+            height: presetSize,
+            width: presetSize
+        },
+        className: classnames(index_module.spinner, colors_module.component, presetClassname, className, {
+            [index_module.visible]: visible
+        }),
+        "data-test-id": dataTestId,
+        id: id,
+        children: [
+            /*#__PURE__*/ jsx("defs", {
+                children: /*#__PURE__*/ jsx("mask", {
+                    id: uniqId,
+                    children: /*#__PURE__*/ jsx("circle", {
+                        cx: "50%",
+                        cy: "50%",
+                        r: radius,
+                        strokeWidth: lineWidth,
+                        strokeLinecap: "round",
+                        stroke: "#fff",
+                        strokeDashoffset: -rotationAngle,
+                        strokeDasharray: strokeDasharray,
+                        pathLength: pathLength
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsx("foreignObject", {
+                x: "0",
+                y: "0",
+                width: presetSize,
+                height: presetSize,
+                mask: `url(#${uniqId})`,
+                children: /*#__PURE__*/ jsx("div", {
+                    className: index_module.gradient,
+                    style: {
+                        backgroundImage: gradient
+                    }
+                })
+            })
+        ]
+    });
+};
+export { Spinner };

package/dist/components/Spinner/vars.css

@@ -0,0 +1,7 @@
+:root {
+  --spinner-display-visible: inline-block;
+  --spinner-animation-duration: .8s;
+  --spinner-animation-timing-function: linear;
+  --spinner-default-color: #030306e0;
+}
+

package/dist/components/Typography/colors.module.js

@@ -0,0 +1,10 @@
+import "./colors_module.css";
+const colors_module = {
+    inherit: "inherit-D2kX96",
+    primary: "primary-LVKi8J",
+    secondary: "secondary-eTdE4v",
+    inverse: "inverse-PTiWqH",
+    positive: "positive-a1clfd",
+    negative: "negative-IhTMOW"
+};
+export default colors_module;

package/dist/components/Typography/colors_module.css

@@ -0,0 +1,26 @@
+@import "./vars.css";
+
+.inherit-D2kX96 {
+  color: inherit;
+}
+
+.primary-LVKi8J {
+  color: var(--typography-primary-color);
+}
+
+.secondary-eTdE4v {
+  color: var(--typography-secondary-color);
+}
+
+.inverse-PTiWqH {
+  color: var(--typography-inverse-color);
+}
+
+.positive-a1clfd {
+  color: var(--typography-positive-color);
+}
+
+.negative-IhTMOW {
+  color: var(--typography-negative-color);
+}
+

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

@@ -0,0 +1,34 @@
+import { TypographyText } from './text.js';
+import { TypographyTitle } from './title.js';
+export { TypographyText, TypographyText as Text, TypographyTitle, TypographyTitle as Title };
+export type { TextProps, TitleProps, TypographyColor, TypographyWeight } from './shared.js';
+export declare const Typography: {
+    Text: import("react").ForwardRefExoticComponent<Omit<import("react").HTMLAttributes<HTMLElement>, "className" | "style" | "color" | "children"> & {
+        children?: import("react").ReactNode;
+        className?: string;
+        style?: import("react").CSSProperties;
+        color?: import("./shared.js").TypographyColor;
+        weight?: import("./shared.js").TypographyWeight;
+        caps?: boolean;
+        monospaceNumbers?: boolean;
+        rowLimit?: 1 | 2 | 3;
+        dataTestId?: string;
+    } & {
+        size?: 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 20;
+        tag?: "span" | "p" | "div" | "li";
+    } & import("react").RefAttributes<import("./shared.js").TextElement>>;
+    Title: import("react").ForwardRefExoticComponent<Omit<import("react").HTMLAttributes<HTMLElement>, "className" | "style" | "color" | "children"> & {
+        children?: import("react").ReactNode;
+        className?: string;
+        style?: import("react").CSSProperties;
+        color?: import("./shared.js").TypographyColor;
+        weight?: import("./shared.js").TypographyWeight;
+        caps?: boolean;
+        monospaceNumbers?: boolean;
+        rowLimit?: 1 | 2 | 3;
+        dataTestId?: string;
+    } & {
+        size?: 13 | 14 | 16 | 20 | 24 | 28 | 32;
+        tag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div";
+    } & import("react").RefAttributes<import("./shared.js").TitleElement>>;
+};

package/dist/components/Typography/index.js

@@ -0,0 +1,7 @@
+import { TypographyText } from "./text.js";
+import { TypographyTitle } from "./title.js";
+const Typography = {
+    Text: TypographyText,
+    Title: TypographyTitle
+};
+export { Typography, TypographyText as Text, TypographyText, TypographyTitle as Title, TypographyTitle };

package/dist/components/Typography/index.module.js

@@ -0,0 +1,18 @@
+import "./index_module.css";
+const index_module = {
+    component: "component-niqWjh",
+    "weight-regular": "weight-regular-cOlAcy",
+    weightRegular: "weight-regular-cOlAcy",
+    "weight-medium": "weight-medium-kDVEGI",
+    weightMedium: "weight-medium-kDVEGI",
+    "weight-semibold": "weight-semibold-euRksF",
+    weightSemibold: "weight-semibold-euRksF",
+    "weight-bold": "weight-bold-ZxTUEF",
+    weightBold: "weight-bold-ZxTUEF",
+    caps: "caps-AWFyAh",
+    monospaceNumbers: "monospaceNumbers-wR2ApQ",
+    rowLimit1: "rowLimit1-Es_q51",
+    rowLimit2: "rowLimit2-gODO9s",
+    rowLimit3: "rowLimit3-LvJseL"
+};
+export default index_module;

package/dist/components/Typography/index_module.css

@@ -0,0 +1,57 @@
+@import "../../styles/theme.css";
+@import "./vars.css";
+
+.component-niqWjh {
+  margin: var(--size-0, 0px);
+  padding: var(--size-0, 0px);
+  font-family: var(--font-primary);
+  font-style: normal;
+  line-height: var(--typography-line-height);
+  letter-spacing: var(--typography-letter-spacing);
+}
+
+.weight-regular-cOlAcy {
+  font-weight: var(--typography-regular-font-weight);
+}
+
+.weight-medium-kDVEGI {
+  font-weight: var(--typography-medium-font-weight);
+}
+
+.weight-semibold-euRksF {
+  font-weight: var(--typography-semibold-font-weight);
+}
+
+.weight-bold-ZxTUEF {
+  font-weight: var(--typography-bold-font-weight);
+}
+
+.caps-AWFyAh {
+  text-transform: uppercase;
+}
+
+.monospaceNumbers-wR2ApQ {
+  font-variant-numeric: tabular-nums lining-nums;
+}
+
+.rowLimit1-Es_q51 {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block;
+  overflow: hidden;
+}
+
+.rowLimit2-gODO9s, .rowLimit3-LvJseL {
+  -webkit-box-orient: vertical;
+  display: -webkit-box;
+  overflow: hidden;
+}
+
+.rowLimit2-gODO9s {
+  -webkit-line-clamp: 2;
+}
+
+.rowLimit3-LvJseL {
+  -webkit-line-clamp: 3;
+}
+

package/dist/components/Typography/preset.module.js

@@ -0,0 +1,30 @@
+import "./preset_module.css";
+const preset_module = {
+    "size-8": "size-8-NlI2Hs",
+    size8: "size-8-NlI2Hs",
+    "size-9": "size-9-j9FL3_",
+    size9: "size-9-j9FL3_",
+    "size-10": "size-10-GUrD5L",
+    size10: "size-10-GUrD5L",
+    "size-11": "size-11-foLp7Q",
+    size11: "size-11-foLp7Q",
+    "size-12": "size-12-E_PVmd",
+    size12: "size-12-E_PVmd",
+    "size-13": "size-13-Eu2_On",
+    size13: "size-13-Eu2_On",
+    "size-14": "size-14-OpEM1B",
+    size14: "size-14-OpEM1B",
+    "size-15": "size-15-DxWyW2",
+    size15: "size-15-DxWyW2",
+    "size-16": "size-16-OgafBi",
+    size16: "size-16-OgafBi",
+    "size-20": "size-20-eTO0D7",
+    size20: "size-20-eTO0D7",
+    "size-24": "size-24-lZpjdx",
+    size24: "size-24-lZpjdx",
+    "size-28": "size-28-CY10Yo",
+    size28: "size-28-CY10Yo",
+    "size-32": "size-32-QPCTWV",
+    size32: "size-32-QPCTWV"
+};
+export default preset_module;