@koslibs/components 1.10.0 → 1.11.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @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

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/index.d.ts

@@ -10,6 +10,8 @@ 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';

package/dist/index.js

@@ -4,6 +4,7 @@ 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";

package/package.json

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