@shmidko61/lc-ui-kit 0.1.0 → 0.2.0

package/dist/types/layout.types.d.ts

@@ -1,3 +1,4 @@
+import { UiKitCssGlobalValue } from './shared.types';
 /**
  * Управляет CSS display элемента.
  *
@@ -39,6 +40,35 @@ export type UiKitDimensionProps = {
     minHeight?: string | number | 'none' | 'min-content' | 'max-content' | 'fit-content';
     maxHeight?: string | number | 'none' | 'min-content' | 'max-content' | 'fit-content';
 };
+/** Допустимое CSS-значение обработки переполнения элемента. */
+export type UiKitOverflowValue = 'visible' | 'hidden' | 'clip' | 'scroll' | 'auto' | UiKitCssGlobalValue;
+/**
+ * Управляет содержимым, выходящим за границы элемента.
+ *
+ * `overflow` задаёт значение сразу для обеих осей. Если одновременно передан
+ * `overflowX` или `overflowY`, значение соответствующей оси имеет приоритет.
+ * На breakpoint ограничение можно сбросить через `visible`.
+ */
+export type UiKitOverflowProps = {
+    /** Значение переполнения для обеих осей. */
+    overflow?: UiKitOverflowValue;
+    /** Значение переполнения по горизонтальной оси. */
+    overflowX?: UiKitOverflowValue;
+    /** Значение переполнения по вертикальной оси. */
+    overflowY?: UiKitOverflowValue;
+};
+/**
+ * Допустимое соотношение сторон элемента.
+ *
+ * Число передаётся в CSS без единицы измерения. Строка позволяет использовать
+ * дробь, например `16 / 9`, конструкцию `auto 4 / 3` или CSS-переменную.
+ */
+export type UiKitAspectRatioValue = number | 'auto' | (string & {});
+/** Управляет соотношением сторон элемента. */
+export type UiKitAspectRatioProps = {
+    /** Соотношение сторон. Значение `auto` сбрасывает ограничение на breakpoint. */
+    aspectRatio?: UiKitAspectRatioValue;
+};
 /**
  * Управляет CSS list-style для списков.
  *

package/dist/types/shared.types.d.ts

@@ -6,3 +6,10 @@
 export type AtLeastOne<T, Keys extends keyof T = keyof T> = Partial<T> & {
     [Key in Keys]-?: Required<Pick<T, Key>>;
 }[Keys];
+/**
+ * Глобальные CSS-значения для наследования или сброса свойства.
+ *
+ * Используются только в тех публичных props, где браузер поддерживает
+ * соответствующее глобальное значение.
+ */
+export type UiKitCssGlobalValue = 'inherit' | 'initial' | 'revert' | 'revert-layer' | 'unset';

package/dist/types/visual.types.d.ts

@@ -12,6 +12,35 @@ export type UiKitColorToken = (typeof uiKitColorTokens)[number];
  */
 export type UiKitColors = Partial<Record<UiKitColorToken, string>>;
 export type ColorKeys = UiKitColorToken;
+/**
+ * CSS-значение цвета содержимого.
+ *
+ * Токен вида `--color-text-primary` преобразуется в `var(...)`, остальные
+ * строки передаются браузеру без изменений.
+ */
+export type UiKitColorValue = UiKitColorToken | (string & {});
+/** Управляет наследуемым цветом содержимого элемента. */
+export type UiKitColorProps = {
+    /** Цвет текста и других элементов, использующих `currentColor`. */
+    color?: UiKitColorValue;
+};
+/** CSS-значение прозрачности элемента. */
+export type UiKitOpacityValue = number | (string & {});
+/** Управляет прозрачностью элемента вместе с его дочерним содержимым. */
+export type UiKitOpacityProps = {
+    /** Прозрачность элемента. Числовое значение обычно находится между `0` и `1`. */
+    opacity?: UiKitOpacityValue;
+};
+/** CSS-значение внешней тени элемента. */
+export type UiKitBoxShadowValue = 'none' | (string & {});
+/** Управляет внешней тенью элемента. */
+export type UiKitBoxShadowProps = {
+    /**
+     * Одна или несколько CSS-теней. Токен вида `--shadow-card` преобразуется в
+     * `var(...)`, а `none` сбрасывает тень на breakpoint.
+     */
+    boxShadow?: UiKitBoxShadowValue;
+};
 /**
  * CSS background/color value: токен `--color-*` или конкретное CSS-значение.
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shmidko61/lc-ui-kit",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
   "files": [
     "dist"