@koslibs/components 1.7.0 → 1.9.0

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

@@ -0,0 +1,25 @@
+import "./index_module.css";
+const index_module = {
+    component: "component-p4fC6J",
+    "size-20": "size-20-RGtFYL",
+    size20: "size-20-RGtFYL",
+    "size-24": "size-24-80Sg54",
+    size24: "size-24-80Sg54",
+    "size-32": "size-32-SU7Krr",
+    size32: "size-32-SU7Krr",
+    "size-40": "size-40-TbyUxw",
+    size40: "size-40-TbyUxw",
+    rectangular: "rectangular-ykPeeK",
+    rounded: "rounded-yFfN8M",
+    green: "green-Jd9YVz",
+    orange: "orange-tRGq_X",
+    red: "red-QhwnhH",
+    blue: "blue-AisEDx",
+    grey: "grey-T_mrQo",
+    teal: "teal-E4zwls",
+    purple: "purple-UK0BCp",
+    sand: "sand-Bcwhyf",
+    label: "label-Oml2a7",
+    addon: "addon-MKQxtF"
+};
+export default index_module;

package/dist/components/Status/index_module.css

@@ -0,0 +1,109 @@
+@import "../../styles/theme.css";
+@import "./vars.css";
+
+.component-p4fC6J {
+  box-sizing: border-box;
+  vertical-align: middle;
+  width: fit-content;
+  min-width: 0;
+  max-width: 100%;
+  height: var(--status-height);
+  padding: 0 var(--status-padding);
+  justify-content: center;
+  align-items: center;
+  gap: var(--status-geometry-gap);
+  border-radius: var(--status-radius);
+  display: inline-flex;
+}
+
+.size-20-RGtFYL {
+  --status-height: var(--status-geometry-height-20);
+  --status-padding: var(--status-geometry-padding-20);
+  --status-rectangular-radius: var(--status-geometry-radius-rectangular-20);
+  --status-rounded-radius: var(--status-geometry-radius-rounded-20);
+}
+
+.size-24-80Sg54 {
+  --status-height: var(--status-geometry-height-24);
+  --status-padding: var(--status-geometry-padding-24);
+  --status-rectangular-radius: var(--status-geometry-radius-rectangular-24);
+  --status-rounded-radius: var(--status-geometry-radius-rounded-24);
+}
+
+.size-32-SU7Krr {
+  --status-height: var(--status-geometry-height-32);
+  --status-padding: var(--status-geometry-padding-32);
+  --status-rectangular-radius: var(--status-geometry-radius-rectangular-32);
+  --status-rounded-radius: var(--status-geometry-radius-rounded-32);
+}
+
+.size-40-TbyUxw {
+  --status-height: var(--status-geometry-height-40);
+  --status-padding: var(--status-geometry-padding-40);
+  --status-rectangular-radius: var(--status-geometry-radius-rectangular-40);
+  --status-rounded-radius: var(--status-geometry-radius-rounded-40);
+}
+
+.rectangular-ykPeeK {
+  --status-radius: var(--status-rectangular-radius);
+}
+
+.rounded-yFfN8M {
+  --status-radius: var(--status-rounded-radius);
+}
+
+.green-Jd9YVz {
+  background-color: var(--status-color-green-background);
+  color: var(--status-color-green-foreground);
+}
+
+.orange-tRGq_X {
+  background-color: var(--status-color-orange-background);
+  color: var(--status-color-orange-foreground);
+}
+
+.red-QhwnhH {
+  background-color: var(--status-color-red-background);
+  color: var(--status-color-red-foreground);
+}
+
+.blue-AisEDx {
+  background-color: var(--status-color-blue-background);
+  color: var(--status-color-blue-foreground);
+}
+
+.grey-T_mrQo {
+  background-color: var(--status-color-grey-background);
+  color: var(--status-color-grey-foreground);
+}
+
+.teal-E4zwls {
+  background-color: var(--status-color-teal-background);
+  color: var(--status-color-teal-foreground);
+}
+
+.purple-UK0BCp {
+  background-color: var(--status-color-purple-background);
+  color: var(--status-color-purple-foreground);
+}
+
+.sand-Bcwhyf {
+  background-color: var(--status-color-sand-background);
+  color: var(--status-color-sand-foreground);
+}
+
+.component-p4fC6J .label-Oml2a7 {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+  line-height: normal;
+  overflow: hidden;
+}
+
+.addon-MKQxtF {
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+

package/dist/components/Status/status.d.ts

@@ -0,0 +1,85 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export type StatusProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children' | 'color'> & {
+    /**
+     * Высота плашки в пикселях.
+     * @default 24
+     */
+    size?: 20 | 24 | 32 | 40;
+    /**
+     * Форма плашки.
+     * @default 'rectangular'
+     */
+    shape?: 'rounded' | 'rectangular';
+    /**
+     * Цвет фона, подписи и аддонов.
+     * @default 'grey'
+     */
+    color?: 'green' | 'orange' | 'red' | 'blue' | 'grey' | 'teal' | 'purple' | 'sand';
+    /**
+     * Короткая подпись статуса. При ограничении ширины сокращается многоточием.
+     */
+    message: string;
+    /**
+     * Отображать подпись заглавными буквами.
+     * @default false
+     */
+    uppercase?: boolean;
+    /**
+     * Декоративный элемент слева от подписи, скрытый от скринридера.
+     */
+    leftAddon?: ReactNode;
+    /**
+     * Декоративный элемент справа от подписи, скрытый от скринридера.
+     */
+    rightAddon?: ReactNode;
+    /**
+     * Дополнительный CSS-класс подписи.
+     */
+    labelClassName?: string;
+    /**
+     * Идентификатор корневого элемента для тестов.
+     */
+    dataTestId?: string;
+};
+export declare const Status: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLSpanElement>, "color" | "children"> & {
+    /**
+     * Высота плашки в пикселях.
+     * @default 24
+     */
+    size?: 20 | 24 | 32 | 40;
+    /**
+     * Форма плашки.
+     * @default 'rectangular'
+     */
+    shape?: "rounded" | "rectangular";
+    /**
+     * Цвет фона, подписи и аддонов.
+     * @default 'grey'
+     */
+    color?: "green" | "orange" | "red" | "blue" | "grey" | "teal" | "purple" | "sand";
+    /**
+     * Короткая подпись статуса. При ограничении ширины сокращается многоточием.
+     */
+    message: string;
+    /**
+     * Отображать подпись заглавными буквами.
+     * @default false
+     */
+    uppercase?: boolean;
+    /**
+     * Декоративный элемент слева от подписи, скрытый от скринридера.
+     */
+    leftAddon?: ReactNode;
+    /**
+     * Декоративный элемент справа от подписи, скрытый от скринридера.
+     */
+    rightAddon?: ReactNode;
+    /**
+     * Дополнительный CSS-класс подписи.
+     */
+    labelClassName?: string;
+    /**
+     * Идентификатор корневого элемента для тестов.
+     */
+    dataTestId?: string;
+} & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/Status/status.js

@@ -0,0 +1,35 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import classnames from "classnames";
+import { forwardRef } from "react";
+import { TypographyText } from "../Typography/text.js";
+import index_module from "./index.module.js";
+function hasAddon(addon) {
+    return null != addon && 'boolean' != typeof addon;
+}
+const Status = /*#__PURE__*/ forwardRef(({ size = 24, shape = 'rectangular', color = 'grey', leftAddon, rightAddon, message, uppercase = false, className, labelClassName, dataTestId, ...restProps }, ref)=>/*#__PURE__*/ jsxs("span", {
+        ...restProps,
+        ref: ref,
+        className: classnames(index_module.component, index_module[`size-${size}`], index_module[shape], index_module[color], className),
+        "data-test-id": dataTestId,
+        children: [
+            hasAddon(leftAddon) && /*#__PURE__*/ jsx("span", {
+                className: index_module.addon,
+                "aria-hidden": "true",
+                children: leftAddon
+            }),
+            /*#__PURE__*/ jsx(TypographyText, {
+                size: size <= 24 ? 12 : 14,
+                weight: "medium",
+                caps: uppercase,
+                className: classnames(index_module.label, labelClassName),
+                children: message
+            }),
+            hasAddon(rightAddon) && /*#__PURE__*/ jsx("span", {
+                className: index_module.addon,
+                "aria-hidden": "true",
+                children: rightAddon
+            })
+        ]
+    }));
+Status.displayName = 'Status';
+export { Status };

package/dist/components/Status/vars.css

@@ -0,0 +1,36 @@
+:root {
+  --status-color-green-background: #d1f1d7;
+  --status-color-green-foreground: #08752a;
+  --status-color-orange-background: #ffe6cc;
+  --status-color-orange-foreground: #9a4600;
+  --status-color-red-background: #fde0df;
+  --status-color-red-foreground: #b42318;
+  --status-color-blue-background: #ddebff;
+  --status-color-blue-foreground: #175cd3;
+  --status-color-grey-background: #e9eaec;
+  --status-color-grey-foreground: #535862;
+  --status-color-teal-background: #d4f1ed;
+  --status-color-teal-foreground: #0b6b60;
+  --status-color-purple-background: #e9e2ff;
+  --status-color-purple-foreground: #6941c6;
+  --status-color-sand-background: #ede9de;
+  --status-color-sand-foreground: #736554;
+  --status-geometry-height-20: var(--size-20);
+  --status-geometry-height-24: var(--size-24);
+  --status-geometry-height-32: var(--size-32);
+  --status-geometry-height-40: var(--size-40);
+  --status-geometry-padding-20: var(--size-8);
+  --status-geometry-padding-24: var(--size-12);
+  --status-geometry-padding-32: var(--size-16);
+  --status-geometry-padding-40: var(--size-20);
+  --status-geometry-radius-rectangular-20: var(--border-radius-6);
+  --status-geometry-radius-rectangular-24: var(--border-radius-6);
+  --status-geometry-radius-rectangular-32: var(--border-radius-10);
+  --status-geometry-radius-rectangular-40: var(--border-radius-12);
+  --status-geometry-radius-rounded-20: var(--border-radius-10);
+  --status-geometry-radius-rounded-24: var(--border-radius-12);
+  --status-geometry-radius-rounded-32: var(--border-radius-16);
+  --status-geometry-radius-rounded-40: var(--border-radius-20);
+  --status-geometry-gap: var(--size-6);
+}
+

package/dist/index.d.ts

@@ -2,12 +2,16 @@ export { Button } from './components/Button/index.js';
 export type { ButtonProps } from './components/Button/index.js';
 export { Input } from './components/Input/index.js';
 export type { InputProps } from './components/Input/index.js';
+export { Select } from './components/Select/index.js';
+export type { SelectProps, SelectOption, SelectChangeEvent, SelectChangePayload, } from './components/Select/index.js';
 export { Textarea } from './components/Textarea/index.js';
 export type { TextareaProps } from './components/Textarea/index.js';
 export { Tab, Tabs } from './components/Tabs/index.js';
 export type { TabProps, TabsProps } from './components/Tabs/index.js';
 export { Spinner } from './components/Spinner/index.js';
 export type { SpinnerProps } from './components/Spinner/index.js';
+export { Status } from './components/Status/index.js';
+export type { StatusProps } from './components/Status/index.js';
 export { Typography, TypographyText, TypographyTitle, Text, Title } from './components/Typography/index.js';
 export type { TextProps, TitleProps, TypographyColor, TypographyWeight, } from './components/Typography/index.js';
 export { Popover } from './components/Popover/index.js';

package/dist/index.js

@@ -1,8 +1,10 @@
 export { Button } from "./components/Button/index.js";
 export { Input } from "./components/Input/index.js";
+export { Select } from "./components/Select/index.js";
 export { Textarea } from "./components/Textarea/index.js";
 export { Tab, Tabs } from "./components/Tabs/index.js";
 export { Spinner } from "./components/Spinner/index.js";
+export { Status } from "./components/Status/index.js";
 export { Text, Title, Typography, TypographyText, TypographyTitle } from "./components/Typography/index.js";
 export { Popover } from "./components/Popover/index.js";
 export { Collapse } from "./components/Collapse/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@koslibs/components",
-    "version": "1.7.0",
+    "version": "1.9.0",
     "description": "Shared React components for koslibs projects",
     "type": "module",
     "main": "./dist/index.js",