@koslibs/components 1.9.0 → 1.11.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @koslibs/components
 
+## 1.11.0
+
+### Minor Changes
+
+- [#12](https://github.com/koslibs/components/pull/12) [`563c38f`](https://github.com/koslibs/components/commit/563c38f0dcaf306c4993e50d5e7f5e4ddd44368d) Thanks [@holypower777](https://github.com/holypower777)! - Добавлен Skeleton: CSS-пульсация с управлением через animated, настраиваемые размеры и скругление через стили, CSS-переменные фона, радиуса и длительности. Доступны ref, нативные атрибуты div, dataTestId, Storybook Docs и Playground.
+
+## 1.10.0
+
+### Minor Changes
+
+- [#11](https://github.com/koslibs/components/pull/11) [`85e4c4b`](https://github.com/koslibs/components/commit/85e4c4b523847d339a773b63fcf7916098f28327) Thanks [@holypower777](https://github.com/holypower777)! - Добавлен Space для горизонтальной и вертикальной раскладки: обязательные size и children, единый положительный отступ из --size-\*, align, wrap и fullWidth. Компонент использует CSS gap, сохраняет прямые дочерние элементы и доступен через @koslibs/components/Space. Добавлены Storybook Docs и Playground.
+
 ## 1.9.0
 
 ### Minor Changes

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

@@ -0,0 +1,2 @@
+export { Skeleton } from './skeleton.js';
+export type { SkeletonProps } from './types.js';

package/dist/components/Skeleton/index.js

@@ -0,0 +1 @@
+export { Skeleton } from "./skeleton.js";

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

@@ -0,0 +1,7 @@
+import "./index_module.css";
+const index_module = {
+    component: "component-dYdUkS",
+    animated: "animated-RXyKCh",
+    pulse: "pulse-Qjbi05"
+};
+export default index_module;

package/dist/components/Skeleton/index_module.css

@@ -0,0 +1,26 @@
+@import "./vars.css";
+
+.component-dYdUkS {
+  box-sizing: border-box;
+  border-radius: var(--skeleton-border-radius);
+  background-color: var(--skeleton-background-color);
+  flex-shrink: 0;
+  width: 100%;
+  min-width: 0;
+  display: block;
+}
+
+.animated-RXyKCh {
+  animation: pulse-Qjbi05 var(--skeleton-animation-duration) ease-in-out infinite;
+}
+
+@keyframes pulse-Qjbi05 {
+  0%, 100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: .45;
+  }
+}
+

package/dist/components/Skeleton/skeleton.d.ts

@@ -0,0 +1,5 @@
+export declare const Skeleton: import("react").ForwardRefExoticComponent<Omit<import("react").HTMLAttributes<HTMLDivElement>, "children" | "dangerouslySetInnerHTML"> & {
+    animated?: boolean;
+    children?: never;
+    dataTestId?: string;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Skeleton/skeleton.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import classnames from "classnames";
+import { forwardRef } from "react";
+import index_module from "./index.module.js";
+const Skeleton = /*#__PURE__*/ forwardRef(({ animated = true, className, dataTestId, ...restProps }, ref)=>/*#__PURE__*/ jsx("div", {
+        ...restProps,
+        ref: ref,
+        className: classnames(index_module.component, {
+            [index_module.animated]: animated
+        }, className),
+        "data-test-id": dataTestId
+    }));
+Skeleton.displayName = 'Skeleton';
+export { Skeleton };

package/dist/components/Skeleton/types.d.ts

@@ -0,0 +1,16 @@
+import type { HTMLAttributes } from 'react';
+export type SkeletonProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'dangerouslySetInnerHTML'> & {
+    /**
+     * Включает пульсацию.
+     * @default true
+     */
+    animated?: boolean;
+    /**
+     * Skeleton не содержит дочерних элементов.
+     */
+    children?: never;
+    /**
+     * Идентификатор корневого элемента для тестов.
+     */
+    dataTestId?: string;
+};

package/dist/components/Skeleton/vars.css

@@ -0,0 +1,6 @@
+:root {
+  --skeleton-background-color: #e0dbce;
+  --skeleton-border-radius: var(--border-radius-8, 8px);
+  --skeleton-animation-duration: 1.6s;
+}
+

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

@@ -0,0 +1,2 @@
+export { Space } from './space.js';
+export type { SpaceProps, SpaceSize } from './types.js';

package/dist/components/Space/index.js

@@ -0,0 +1 @@
+export { Space } from "./space.js";

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

@@ -0,0 +1,14 @@
+import "./index_module.css";
+const index_module = {
+    component: "component-DK13jr",
+    vertical: "vertical-MuaZ3s",
+    horizontal: "horizontal-GVxqs5",
+    start: "start-bYNz01",
+    center: "center-PS6vZJ",
+    end: "end-KbDlui",
+    stretch: "stretch-WhVrSc",
+    baseline: "baseline-mcTNmk",
+    wrap: "wrap-Ad0xGu",
+    fullWidth: "fullWidth-c7M8Hd"
+};
+export default index_module;

package/dist/components/Space/index_module.css

@@ -0,0 +1,46 @@
+@import "../../styles/variables.css";
+
+.component-DK13jr {
+  box-sizing: border-box;
+  gap: var(--space-gap);
+  min-width: 0;
+  display: inline-flex;
+}
+
+.vertical-MuaZ3s {
+  flex-direction: column;
+}
+
+.horizontal-GVxqs5 {
+  flex-direction: row;
+}
+
+.start-bYNz01 {
+  align-items: flex-start;
+}
+
+.center-PS6vZJ {
+  align-items: center;
+}
+
+.end-KbDlui {
+  align-items: flex-end;
+}
+
+.stretch-WhVrSc {
+  align-items: stretch;
+}
+
+.baseline-mcTNmk {
+  align-items: baseline;
+}
+
+.wrap-Ad0xGu {
+  flex-wrap: wrap;
+}
+
+.fullWidth-c7M8Hd {
+  width: 100%;
+  display: flex;
+}
+

package/dist/components/Space/space.d.ts

@@ -0,0 +1,9 @@
+export declare const Space: import("react").ForwardRefExoticComponent<Omit<import("react").HTMLAttributes<HTMLDivElement>, "children"> & {
+    children: import("react").ReactNode;
+    direction?: "horizontal" | "vertical";
+    size: import("./types.js").SpaceSize;
+    align?: "start" | "center" | "end" | "stretch" | "baseline";
+    wrap?: boolean;
+    fullWidth?: boolean;
+    dataTestId?: string;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Space/space.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import classnames from "classnames";
+import { Children, forwardRef } from "react";
+import index_module from "./index.module.js";
+const Space = /*#__PURE__*/ forwardRef(({ children, direction = 'vertical', size, align = 'start', wrap = false, fullWidth = false, className, style, dataTestId, ...restProps }, ref)=>{
+    if (0 === Children.toArray(children).length) return null;
+    return /*#__PURE__*/ jsx("div", {
+        ...restProps,
+        ref: ref,
+        className: classnames(index_module.component, index_module[direction], index_module[align], {
+            [index_module.wrap]: wrap,
+            [index_module.fullWidth]: fullWidth
+        }, className),
+        style: {
+            '--space-gap': `var(--size-${size})`,
+            ...style
+        },
+        "data-test-id": dataTestId,
+        children: children
+    });
+});
+Space.displayName = 'Space';
+export { Space };

package/dist/components/Space/types.d.ts

@@ -0,0 +1,40 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+/**
+ * Положительный отступ из общей шкалы --size-*.
+ */
+export type SpaceSize = 2 | 4 | 6 | 8 | 12 | 16 | 20 | 22 | 24 | 28 | 30 | 32 | 36 | 40 | 44 | 48 | 56 | 64 | 72 | 80 | 96 | 128;
+export type SpaceProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /**
+     * Элементы раскладки. Отображаются без дополнительных обёрток.
+     */
+    children: ReactNode;
+    /**
+     * Направление раскладки.
+     * @default 'vertical'
+     */
+    direction?: 'horizontal' | 'vertical';
+    /**
+     * Единый отступ между элементами и строками.
+     * Обязательное положительное значение из глобальной шкалы --size-*.
+     */
+    size: SpaceSize;
+    /**
+     * Выравнивание по поперечной оси относительно direction.
+     * @default 'start'
+     */
+    align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+    /**
+     * Разрешает перенос элементов на следующую строку или колонку.
+     * @default false
+     */
+    wrap?: boolean;
+    /**
+     * Растягивает контейнер на всю ширину родителя.
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Идентификатор корневого элемента для тестов.
+     */
+    dataTestId?: string;
+};

package/dist/index.d.ts

@@ -10,8 +10,12 @@ 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 { Skeleton } from './components/Skeleton/index.js';
+export type { SkeletonProps } from './components/Skeleton/index.js';
 export { Status } from './components/Status/index.js';
 export type { StatusProps } from './components/Status/index.js';
+export { Space } from './components/Space/index.js';
+export type { SpaceProps, SpaceSize } from './components/Space/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

@@ -4,7 +4,9 @@ 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 { Skeleton } from "./components/Skeleton/index.js";
 export { Status } from "./components/Status/index.js";
+export { Space } from "./components/Space/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.9.0",
+    "version": "1.11.0",
     "description": "Shared React components for koslibs projects",
     "type": "module",
     "main": "./dist/index.js",