@byndyusoft-ui/view 0.0.0-stage → 1.0.0

package/README.md

@@ -1,3 +1,137 @@
-# Temporary Holding Version
+# `@byndyusoft-ui/view`
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+---
+
+> Фабрика базового компонента раскладки с типизированными отступами. `createView`
+> создаёт компонент под собственную сетку отступов вашего проекта.
+
+## Установка
+
+```sh
+npm i @byndyusoft-ui/view
+```
+
+## Фабрика createView (своя сетка)
+
+`createView` принимает конфигурацию — базовый шаг и набор именованных токенов с
+множителями шага — и возвращает компонент, типизированный токенами вашей сетки.
+Объект конфигурации обязательно помечайте `as const`: типы токенов выводятся из него.
+
+```tsx
+// src/shared/ui/layout.ts
+import { createView } from '@byndyusoft-ui/view';
+
+export const View = createView({
+    step: { value: 8, unit: 'px' },
+    values: { xs: 0.25, sm: 0.5, md: 1, lg: 1.5, xl: 2, xxl: 3 }
+} as const);
+```
+
+Поддерживаются единицы `px` и `rem`; числовое значение шага должно быть положительным
+целым числом. `prefix` задаёт namespace CSS-классов и по умолчанию равен `bsui`:
+
+```tsx
+export const AppView = createView({
+    step: { value: 8, unit: 'px' },
+    prefix: 'app',
+    values: { sm: 0.5, md: 1 }
+} as const);
+```
+
+```tsx
+import { View } from '@/shared/ui/layout';
+
+// padding: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' — автокомплит и проверка типов
+<View p="lg" mb="md" />;
+```
+
+Короткие aliases доступны для всех margin- и padding-пропсов: `m`, `mt`, `mr`, `mb`,
+`ml`, `mh`, `mv` и `p`, `pt`, `pr`, `pb`, `pl`, `ph`, `pv`. Полные имена продолжают
+поддерживаться и принимают те же токены.
+
+Если полная форма и её alias заданы одновременно, используется последняя определённая
+запись в порядке ключей итогового props-объекта; `undefined` считается отсутствующим.
+Для разных свойств действует приоритет: общий `margin`/`padding` перекрывает осевые и
+сторонние props, а `marginHorizontal`/`paddingHorizontal` и вертикальные варианты
+перекрывают соответствующие стороны.
+
+```tsx
+<View margin="sm" mt="md" />; // margin применяется ко всем сторонам
+<View mh="lg" ml="sm" />; // mh применяется слева и справа
+```
+
+CSS генерируется автоматически при создании компонента: классы `bsui-p-lg`, `bsui-mv-md`
+и т.п. получают готовые длины, рассчитанные из шага и множителя токена (например,
+`8px * 1.5` даёт `12px`). Дробные множители поддерживаются. Шаг фиксирован для созданной
+фабрики; чтобы изменить его, создайте компонент с другой конфигурацией. Inline-стили не
+используются, атрибут `style` не выставляется.
+Если все четыре эффективных стороны имеют одинаковый токен, используется один общий
+класс (`bsui-m-md` или `bsui-p-md`); одинаковые горизонтальные/вертикальные пары
+сворачиваются в `mh`/`mv` или `ph`/`pv`. Сравниваются имена токенов, не множители.
+
+```tsx
+<View marginTop="md" marginRight="md" marginBottom="md" marginLeft="md" />
+// применяет один класс bsui-m-md
+```
+
+### Namespace CSS-классов
+
+Без `prefix` имена классов используют namespace `bsui`. Для нескольких сеток на странице
+задайте каждой уникальный префикс, чтобы избежать пересечения селекторов. Например,
+`prefix: 'app'` создаёт классы `app-p-md` и `app-flex--g-md`.
+
+Префикс должен начинаться с латинской буквы или `_`; далее допустимы латинские буквы,
+цифры, дефис и `_`.
+
+### SSR
+
+В браузере стили инъецируются автоматически при импорте. Для SSR добавьте компонент
+`ViewStylesInjector` в корень приложения (или в `<head>` шаблона): серверный HTML будет
+содержать стили, а при гидратации дубли не создаются.
+
+```tsx
+import { ViewStylesInjector } from '@byndyusoft-ui/view';
+
+<html>
+    <head>
+        <ViewStylesInjector />
+    </head>
+    <body>...</body>
+</html>;
+```
+
+### Ограничения токенов
+
+Ключи сетки становятся частью имён CSS-классов, поэтому допустимы только латиница,
+цифры, дефис и подчёркивание (`'025'`, `'s-1'`, `'token_name'`). Недопустимый ключ
+вызывает ошибку при создании компонента.
+
+## Props
+
+| Проп                                                                                                            | Тип               | Описание                                           |
+| --------------------------------------------------------------------------------------------------------------- | ----------------- | -------------------------------------------------- |
+| `as`                                                                                                            | `keyof ReactHTML` | Тег или компонент для рендера (по умолчанию `div`) |
+| `className`                                                                                                     | `string`          | Дополнительный класс, мержится со сгенерированными |
+| `margin`, `marginTop`, `marginRight`, `marginBottom`, `marginLeft`, `marginHorizontal`, `marginVertical`        | токен сетки       | Внешние отступы                                    |
+| `m`, `mt`, `mr`, `mb`, `ml`, `mh`, `mv`                                                                         | токен сетки       | Короткие aliases внешних отступов                  |
+| `padding`, `paddingTop`, `paddingRight`, `paddingBottom`, `paddingLeft`, `paddingHorizontal`, `paddingVertical` | токен сетки       | Внутренние отступы                                 |
+| `p`, `pt`, `pr`, `pb`, `pl`, `ph`, `pv`                                                                         | токен сетки       | Короткие aliases внутренних отступов               |
+
+Остальные нативные атрибуты (`id`, `data-*`, `aria-*`, обработчики) передаются в DOM как есть.
+
+## Утилиты и типы
+
+Из точки входа пакета также доступны:
+
+-   `buildCss(config)` — генерация CSS отступов без регистрации стилей.
+-   `getSpacingClassName(prefix, token)` — имя класса, например `bsui-p-md`.
+-   `getSpacingValue(step, multiplier)` — готовая CSS-длина для шага `{ value, unit }`;
+    прежняя перегрузка со строковым юнитом оставлена для standalone-совместимости.
+-   `spacingPropPrefixes` — соответствие spacing-пропсов префиксам классов.
+-   `spacingUnitVariable` — прежнее имя CSS-переменной `--bsui-unit`; фабрики её не используют.
+-   `validateValuesKeys(grid)` — проверка допустимости имён токенов; при ошибке бросает исключение.
+-   `registerStyles(config, css)` и `ViewStylesInjector` — регистрация и вывод стилей, в том числе для SSR.
+
+Публичные типы: `IViewConfig`, `TSpacingValues`, `TValuesToken`, `ISpacingProps`,
+`ICreatedViewProps` и `ICreatedView`. Созданный компонент имеет `displayName = 'View'`
+и сохраняет исходную конфигурацию в `View.config`. Передача DOM-ref не поддерживается.

package/dist/ViewStylesInjector.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const ViewStylesInjector: FC;

package/dist/ViewStylesInjector.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { getStyleEntries } from './utilities/stylesRegistry.js';
+
+const ViewStylesInjector = () => (React.createElement(React.Fragment, null, getStyleEntries().map(entry => (
+// eslint-disable-next-line react/no-danger -- CSS генерируется библиотекой из валидированной конфигурации
+React.createElement("style", { key: entry.id, id: entry.id, dangerouslySetInnerHTML: { __html: entry.css } })))));
+ViewStylesInjector.displayName = 'ViewStylesInjector';
+
+export { ViewStylesInjector };

package/dist/constants.d.ts

@@ -0,0 +1,7 @@
+import type { IResolvedSpacingProps, ISpacingProps } from './types';
+export declare const spacingUnitVariable = "--bsui-unit";
+export declare const spacingPropPrefixes: Record<keyof ISpacingProps, string>;
+export declare const spacingPropAliases: Record<keyof ISpacingProps, keyof IResolvedSpacingProps>;
+export declare const spacingSideProperties: Record<string, Array<string>>;
+export declare const valuesTokenPattern: RegExp;
+export declare const spacingPropsNames: (keyof ISpacingProps<string>)[];

package/dist/constants.js

@@ -0,0 +1,81 @@
+const spacingUnitVariable = '--bsui-unit';
+const spacingPropPrefixes = {
+    margin: 'm',
+    m: 'm',
+    marginTop: 'mt',
+    mt: 'mt',
+    marginRight: 'mr',
+    mr: 'mr',
+    marginBottom: 'mb',
+    mb: 'mb',
+    marginLeft: 'ml',
+    ml: 'ml',
+    marginHorizontal: 'mh',
+    mh: 'mh',
+    marginVertical: 'mv',
+    mv: 'mv',
+    padding: 'p',
+    p: 'p',
+    paddingTop: 'pt',
+    pt: 'pt',
+    paddingRight: 'pr',
+    pr: 'pr',
+    paddingBottom: 'pb',
+    pb: 'pb',
+    paddingLeft: 'pl',
+    pl: 'pl',
+    paddingHorizontal: 'ph',
+    ph: 'ph',
+    paddingVertical: 'pv',
+    pv: 'pv'
+};
+const spacingPropAliases = {
+    margin: 'margin',
+    m: 'margin',
+    marginTop: 'marginTop',
+    mt: 'marginTop',
+    marginRight: 'marginRight',
+    mr: 'marginRight',
+    marginBottom: 'marginBottom',
+    mb: 'marginBottom',
+    marginLeft: 'marginLeft',
+    ml: 'marginLeft',
+    marginHorizontal: 'marginHorizontal',
+    mh: 'marginHorizontal',
+    marginVertical: 'marginVertical',
+    mv: 'marginVertical',
+    padding: 'padding',
+    p: 'padding',
+    paddingTop: 'paddingTop',
+    pt: 'paddingTop',
+    paddingRight: 'paddingRight',
+    pr: 'paddingRight',
+    paddingBottom: 'paddingBottom',
+    pb: 'paddingBottom',
+    paddingLeft: 'paddingLeft',
+    pl: 'paddingLeft',
+    paddingHorizontal: 'paddingHorizontal',
+    ph: 'paddingHorizontal',
+    paddingVertical: 'paddingVertical',
+    pv: 'paddingVertical'
+};
+const spacingSideProperties = {
+    m: ['margin'],
+    mt: ['margin-top'],
+    mr: ['margin-right'],
+    mb: ['margin-bottom'],
+    ml: ['margin-left'],
+    mh: ['margin-left', 'margin-right'],
+    mv: ['margin-top', 'margin-bottom'],
+    p: ['padding'],
+    pt: ['padding-top'],
+    pr: ['padding-right'],
+    pb: ['padding-bottom'],
+    pl: ['padding-left'],
+    ph: ['padding-left', 'padding-right'],
+    pv: ['padding-top', 'padding-bottom']
+};
+const valuesTokenPattern = /^[A-Za-z0-9_-]+$/;
+const spacingPropsNames = Object.keys(spacingPropPrefixes);
+
+export { spacingPropAliases, spacingPropPrefixes, spacingPropsNames, spacingSideProperties, spacingUnitVariable, valuesTokenPattern };

package/dist/createView.d.ts

@@ -0,0 +1,2 @@
+import { ICreatedView, IViewConfig, TSpacingValues } from './types';
+export declare function createView<TGrid extends TSpacingValues>(config: IViewConfig<TGrid>): ICreatedView<TGrid>;

package/dist/createView.js

@@ -0,0 +1,30 @@
+import { createElement } from 'react';
+import { buildCss } from './utilities/buildCss.js';
+import { buildSpacingClassNames } from './utilities/buildSpacingClassNames.js';
+import { spacingPropsNames } from './constants.js';
+import { resolveSpacingProps } from './utilities/resolveSpacingProps.js';
+import { registerStyles } from './utilities/stylesRegistry.js';
+import { validateValuesKeys } from './utilities/validateValuesKeys.js';
+import { validateViewConfig } from './utilities/validateViewConfig.js';
+
+function createView(config) {
+    validateViewConfig(config);
+    validateValuesKeys(config.values);
+    registerStyles(config, buildCss(config));
+    const CreatedView = ({ as = 'div', className, children, ...props }) => {
+        const domProps = { ...props };
+        const resolvedSpacingProps = resolveSpacingProps(props);
+        spacingPropsNames.forEach(name => {
+            delete domProps[name];
+        });
+        const classNames = buildSpacingClassNames(resolvedSpacingProps, config.prefix);
+        if (className) {
+            classNames.push(className);
+        }
+        return createElement(as, { className: classNames.join(' ') || undefined, ...domProps }, children);
+    };
+    CreatedView.displayName = 'View';
+    return Object.assign(CreatedView, { config });
+}
+
+export { createView };

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { createView } from './createView';
+export { ViewStylesInjector } from './ViewStylesInjector';
+export { registerStyles, getStyleEntries, resetStyles, buildCss, getSpacingClassName, getSpacingValue, validateValuesKeys } from './utilities';
+export { spacingUnitVariable, spacingPropPrefixes, spacingSideProperties, valuesTokenPattern, spacingPropsNames } from './constants';
+export type { ISpacingStep, IViewConfig, TSpacingValues, TSpacingUnit, TValuesToken, ISpacingProps, ICreatedViewProps, ICreatedView, IViewStyleEntry as ILayoutStyleEntry } from './types';

package/dist/index.js

@@ -0,0 +1,8 @@
+export { createView } from './createView.js';
+export { ViewStylesInjector } from './ViewStylesInjector.js';
+export { buildCss } from './utilities/buildCss.js';
+export { spacingPropPrefixes, spacingPropsNames, spacingSideProperties, spacingUnitVariable, valuesTokenPattern } from './constants.js';
+export { getSpacingClassName } from './utilities/getSpacingClassName.js';
+export { getSpacingValue } from './utilities/getSpacingValue.js';
+export { getStyleEntries, registerStyles, resetStyles } from './utilities/stylesRegistry.js';
+export { validateValuesKeys } from './utilities/validateValuesKeys.js';

package/dist/types.d.ts

@@ -0,0 +1,56 @@
+import { FC, HTMLAttributes, ReactHTML } from 'react';
+export type TSpacingValues = Record<string, number>;
+export type TSpacingUnit = 'px' | 'rem';
+export interface ISpacingStep {
+    value: number;
+    unit: TSpacingUnit;
+}
+export interface IViewConfig<TValues extends TSpacingValues = TSpacingValues> {
+    step: ISpacingStep;
+    values: TValues;
+    prefix?: string;
+}
+export type TValuesToken<TValues extends TSpacingValues> = Extract<keyof TValues, string>;
+export interface IResolvedSpacingProps<TToken extends string = string> {
+    margin?: TToken;
+    marginTop?: TToken;
+    marginRight?: TToken;
+    marginBottom?: TToken;
+    marginLeft?: TToken;
+    marginHorizontal?: TToken;
+    marginVertical?: TToken;
+    padding?: TToken;
+    paddingTop?: TToken;
+    paddingRight?: TToken;
+    paddingBottom?: TToken;
+    paddingLeft?: TToken;
+    paddingHorizontal?: TToken;
+    paddingVertical?: TToken;
+}
+export interface ISpacingProps<TToken extends string = string> extends IResolvedSpacingProps<TToken> {
+    m?: TToken;
+    mt?: TToken;
+    mr?: TToken;
+    mb?: TToken;
+    ml?: TToken;
+    mh?: TToken;
+    mv?: TToken;
+    p?: TToken;
+    pt?: TToken;
+    pr?: TToken;
+    pb?: TToken;
+    pl?: TToken;
+    ph?: TToken;
+    pv?: TToken;
+}
+export interface ICreatedViewProps<TGrid extends TSpacingValues> extends HTMLAttributes<HTMLElement>, ISpacingProps<TValuesToken<TGrid>> {
+    as?: keyof ReactHTML;
+    className?: string;
+}
+export interface ICreatedView<TGrid extends TSpacingValues> extends FC<ICreatedViewProps<TGrid>> {
+    readonly config: IViewConfig<TGrid>;
+}
+export interface IViewStyleEntry {
+    id: string;
+    css: string;
+}

package/dist/utilities/buildCss.d.ts

@@ -0,0 +1,2 @@
+import { IViewConfig, TSpacingValues } from '../types';
+export declare function buildCss<TGrid extends TSpacingValues>(config: IViewConfig<TGrid>): string;

package/dist/utilities/buildCss.js

@@ -0,0 +1,17 @@
+import { spacingSideProperties } from '../constants.js';
+import { getSpacingClassName } from './getSpacingClassName.js';
+import { getSpacingValue } from './getSpacingValue.js';
+
+function buildCss(config) {
+    const rules = [];
+    Object.entries(config.values).forEach(([token, multiplier]) => {
+        const value = getSpacingValue(config.step, multiplier);
+        Object.entries(spacingSideProperties).forEach(([prefix, properties]) => {
+            const declarations = properties.map(property => `${property}:${value}`).join(';');
+            rules.push(`.${getSpacingClassName(prefix, token, config.prefix)}{${declarations}}`);
+        });
+    });
+    return rules.join('');
+}
+
+export { buildCss };

package/dist/utilities/buildSpacingClassNames.d.ts

@@ -0,0 +1,2 @@
+import type { IResolvedSpacingProps } from '../types';
+export declare function buildSpacingClassNames<TToken extends string>(spacingProps: IResolvedSpacingProps<TToken>, classPrefix?: string): Array<string>;

package/dist/utilities/buildSpacingClassNames.js

@@ -0,0 +1,58 @@
+import { spacingPropPrefixes } from '../constants.js';
+import { getSpacingClassName } from './getSpacingClassName.js';
+
+function getSharedToken(...tokens) {
+    const [firstToken, ...remainingTokens] = tokens;
+    if (firstToken === undefined || remainingTokens.some(token => token !== firstToken)) {
+        return undefined;
+    }
+    return firstToken;
+}
+function buildBoxSpacingClassNames(boxName, spacingProps, classPrefix) {
+    const getToken = (propName) => spacingProps[propName];
+    const getClassName = (propName, token) => getSpacingClassName(spacingPropPrefixes[propName], token, classPrefix);
+    const boxPrefix = spacingPropPrefixes[boxName];
+    const allSidesToken = getToken(boxName);
+    const horizontalPropName = `${boxName}Horizontal`;
+    const verticalPropName = `${boxName}Vertical`;
+    const topPropName = `${boxName}Top`;
+    const rightPropName = `${boxName}Right`;
+    const bottomPropName = `${boxName}Bottom`;
+    const leftPropName = `${boxName}Left`;
+    const horizontalToken = getToken(horizontalPropName);
+    const verticalToken = getToken(verticalPropName);
+    const topToken = allSidesToken ?? verticalToken ?? getToken(topPropName);
+    const rightToken = allSidesToken ?? horizontalToken ?? getToken(rightPropName);
+    const bottomToken = allSidesToken ?? verticalToken ?? getToken(bottomPropName);
+    const leftToken = allSidesToken ?? horizontalToken ?? getToken(leftPropName);
+    const allSidesClassToken = getSharedToken(topToken, rightToken, bottomToken, leftToken);
+    if (allSidesClassToken !== undefined) {
+        return [getSpacingClassName(boxPrefix, allSidesClassToken, classPrefix)];
+    }
+    const horizontalPairToken = getSharedToken(leftToken, rightToken);
+    const verticalPairToken = getSharedToken(topToken, bottomToken);
+    const sideTokens = [topToken, rightToken, bottomToken, leftToken];
+    const sidePropNames = [topPropName, rightPropName, bottomPropName, leftPropName];
+    const sidePairTokens = [verticalPairToken, horizontalPairToken, verticalPairToken, horizontalPairToken];
+    const classNames = sideTokens.reduce((result, token, index) => {
+        if (token !== undefined && sidePairTokens[index] === undefined) {
+            result.push(getClassName(sidePropNames[index], token));
+        }
+        return result;
+    }, []);
+    if (horizontalPairToken !== undefined) {
+        classNames.push(getClassName(horizontalPropName, horizontalPairToken));
+    }
+    if (verticalPairToken !== undefined) {
+        classNames.push(getClassName(verticalPropName, verticalPairToken));
+    }
+    return classNames;
+}
+function buildSpacingClassNames(spacingProps, classPrefix = 'bsui') {
+    return [
+        ...buildBoxSpacingClassNames('margin', spacingProps, classPrefix),
+        ...buildBoxSpacingClassNames('padding', spacingProps, classPrefix)
+    ];
+}
+
+export { buildSpacingClassNames };

package/dist/utilities/getSpacingClassName.d.ts

@@ -0,0 +1 @@
+export declare function getSpacingClassName(spacingPrefix: string, token: string, classPrefix?: string): string;

package/dist/utilities/getSpacingClassName.js

@@ -0,0 +1,5 @@
+function getSpacingClassName(spacingPrefix, token, classPrefix = 'bsui') {
+    return `${classPrefix}-${spacingPrefix}-${token}`;
+}
+
+export { getSpacingClassName };

package/dist/utilities/getSpacingValue.d.ts

@@ -0,0 +1,2 @@
+import type { ISpacingStep } from '../types';
+export declare function getSpacingValue(stepOrUnit: ISpacingStep | string, multiplier: number): string;

package/dist/utilities/getSpacingValue.js

@@ -0,0 +1,11 @@
+import { spacingUnitVariable } from '../constants.js';
+
+function getSpacingValue(stepOrUnit, multiplier) {
+    if (typeof stepOrUnit === 'string') {
+        return `calc(var(${spacingUnitVariable}, ${stepOrUnit}) * ${multiplier})`;
+    }
+    const value = Number((stepOrUnit.value * multiplier).toPrecision(15));
+    return `${value}${stepOrUnit.unit}`;
+}
+
+export { getSpacingValue };

package/dist/utilities/index.d.ts

@@ -0,0 +1,7 @@
+export { buildCss } from './buildCss';
+export { buildSpacingClassNames } from './buildSpacingClassNames';
+export { getSpacingClassName } from './getSpacingClassName';
+export { getSpacingValue } from './getSpacingValue';
+export { resolveSpacingProps } from './resolveSpacingProps';
+export { registerStyles, getStyleEntries, resetStyles } from './stylesRegistry';
+export { validateValuesKeys } from './validateValuesKeys';

package/dist/utilities/resolveSpacingProps.d.ts

@@ -0,0 +1,2 @@
+import type { IResolvedSpacingProps, ISpacingProps } from '../types';
+export declare function resolveSpacingProps<TToken extends string>(props: ISpacingProps<TToken>): IResolvedSpacingProps<TToken>;

package/dist/utilities/resolveSpacingProps.js

@@ -0,0 +1,54 @@
+import { spacingPropAliases } from '../constants.js';
+
+function resolveSpacingProps(props) {
+    const resolvedProps = {};
+    Object.keys(props).forEach(propName => {
+        if (!Object.prototype.hasOwnProperty.call(spacingPropAliases, propName)) {
+            return;
+        }
+        const spacingPropName = propName;
+        const token = props[spacingPropName];
+        if (token !== undefined) {
+            resolvedProps[spacingPropAliases[spacingPropName]] = token;
+        }
+    });
+    if (resolvedProps.margin !== undefined) {
+        delete resolvedProps.marginTop;
+        delete resolvedProps.marginRight;
+        delete resolvedProps.marginBottom;
+        delete resolvedProps.marginLeft;
+        delete resolvedProps.marginHorizontal;
+        delete resolvedProps.marginVertical;
+    }
+    else {
+        if (resolvedProps.marginHorizontal !== undefined) {
+            delete resolvedProps.marginLeft;
+            delete resolvedProps.marginRight;
+        }
+        if (resolvedProps.marginVertical !== undefined) {
+            delete resolvedProps.marginTop;
+            delete resolvedProps.marginBottom;
+        }
+    }
+    if (resolvedProps.padding !== undefined) {
+        delete resolvedProps.paddingTop;
+        delete resolvedProps.paddingRight;
+        delete resolvedProps.paddingBottom;
+        delete resolvedProps.paddingLeft;
+        delete resolvedProps.paddingHorizontal;
+        delete resolvedProps.paddingVertical;
+    }
+    else {
+        if (resolvedProps.paddingHorizontal !== undefined) {
+            delete resolvedProps.paddingLeft;
+            delete resolvedProps.paddingRight;
+        }
+        if (resolvedProps.paddingVertical !== undefined) {
+            delete resolvedProps.paddingTop;
+            delete resolvedProps.paddingBottom;
+        }
+    }
+    return resolvedProps;
+}
+
+export { resolveSpacingProps };

package/dist/utilities/stylesRegistry.d.ts

@@ -0,0 +1,4 @@
+import { IViewConfig, TSpacingValues, IViewStyleEntry } from '../types';
+export declare function registerStyles<TGrid extends TSpacingValues>(config: IViewConfig<TGrid>, css: string): IViewStyleEntry;
+export declare function getStyleEntries(): Array<IViewStyleEntry>;
+export declare function resetStyles(): void;

package/dist/utilities/stylesRegistry.js

@@ -0,0 +1,57 @@
+const entries = new Map();
+function hash(value) {
+    let h1 = 0xdeadbeef;
+    let h2 = 0x41c6ce57;
+    for (let index = 0; index < value.length; index++) {
+        const char = value.charCodeAt(index);
+        h1 = Math.imul(h1 ^ char, 2654435761);
+        h2 = Math.imul(h2 ^ char, 1597334677);
+    }
+    h1 = Math.imul(h1 ^ (h1 >>> 16), 2246822507) ^ Math.imul(h2 ^ (h2 >>> 13), 3266489909);
+    h2 = Math.imul(h2 ^ (h2 >>> 16), 2246822507) ^ Math.imul(h1 ^ (h1 >>> 13), 3266489909);
+    return (h2 >>> 0).toString(36) + (h1 >>> 0).toString(36);
+}
+function injectStyleElement(entry) {
+    if (typeof document === 'undefined') {
+        return;
+    }
+    if (document.getElementById(entry.id)) {
+        return;
+    }
+    const style = document.createElement('style');
+    style.id = entry.id;
+    style.textContent = entry.css;
+    document.head.appendChild(style);
+}
+function updateStyleElement(entry) {
+    if (typeof document === 'undefined') {
+        return;
+    }
+    const style = document.getElementById(entry.id);
+    if (style && style.textContent !== entry.css) {
+        style.textContent = entry.css;
+    }
+}
+function registerStyles(config, css) {
+    const key = JSON.stringify(config);
+    const existing = entries.get(key);
+    if (existing) {
+        if (!existing.css.includes(css)) {
+            existing.css += css;
+            updateStyleElement(existing);
+        }
+        return existing;
+    }
+    const entry = { id: `bsui-layout-${hash(key)}`, css };
+    entries.set(key, entry);
+    injectStyleElement(entry);
+    return entry;
+}
+function getStyleEntries() {
+    return Array.from(entries.values());
+}
+function resetStyles() {
+    entries.clear();
+}
+
+export { getStyleEntries, registerStyles, resetStyles };

package/dist/utilities/validateValuesKeys.d.ts

@@ -0,0 +1,2 @@
+import { TSpacingValues } from '../types';
+export declare function validateValuesKeys(values: TSpacingValues): void;

package/dist/utilities/validateValuesKeys.js

@@ -0,0 +1,12 @@
+import { valuesTokenPattern } from '../constants.js';
+
+function validateValuesKeys(values) {
+    Object.keys(values).forEach(token => {
+        if (!valuesTokenPattern.test(token)) {
+            throw new Error(`@byndyusoft-ui/view: недопустимый токен сетки "${token}". ` +
+                'Токен может содержать только латиницу, цифры, дефис и подчёркивание.');
+        }
+    });
+}
+
+export { validateValuesKeys };

package/dist/utilities/validateViewConfig.d.ts

@@ -0,0 +1,10 @@
+interface IRuntimeViewConfig {
+    step?: {
+        value?: unknown;
+        unit?: unknown;
+    };
+    values?: unknown;
+    prefix?: unknown;
+}
+export declare function validateViewConfig(config: IRuntimeViewConfig): void;
+export {};

package/dist/utilities/validateViewConfig.js

@@ -0,0 +1,15 @@
+const cssClassPrefixPattern = /^[A-Za-z_][A-Za-z0-9_-]*$/;
+function validateViewConfig(config) {
+    const { step, prefix } = config;
+    if (!step || typeof step.value !== 'number' || !Number.isInteger(step.value) || step.value <= 0) {
+        throw new Error('@byndyusoft-ui/view: step.value должен быть положительным целым числом.');
+    }
+    if (step.unit !== 'px' && step.unit !== 'rem') {
+        throw new Error('@byndyusoft-ui/view: step.unit должен быть "px" или "rem".');
+    }
+    if (prefix !== undefined && (typeof prefix !== 'string' || !cssClassPrefixPattern.test(prefix))) {
+        throw new Error('@byndyusoft-ui/view: недопустимый prefix CSS-классов. Используйте латинскую букву или подчёркивание в начале, затем латиницу, цифры, дефис или подчёркивание.');
+    }
+}
+
+export { validateViewConfig };

package/package.json

@@ -1,6 +1,48 @@
 {
   "name": "@byndyusoft-ui/view",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "1.0.0",
+  "description": "Byndyusoft UI View React Component",
+  "keywords": [
+    "byndyusoft",
+    "byndyusoft-ui",
+    "react",
+    "view"
+  ],
+  "author": "Byndyusoft Frontend Developer <frontend@byndyusoft.com>",
+  "homepage": "https://github.com/Byndyusoft/ui/tree/master/components/view#readme",
+  "license": "Apache-2.0",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/**/*"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Byndyusoft/ui.git"
+  },
+  "scripts": {
+    "build": "rollup --config",
+    "clean": "rimraf dist && rimraf .turbo && rimraf node_modules && rimraf package-lock.json",
+    "lint:check": "npm run eslint:check && npm run prettier:check && npm run stylelint:check",
+    "lint:fix": "npm run eslint:fix && npm run prettier:fix && npm run stylelint:fix",
+    "eslint:check": "eslint src --config ../../eslint.config.js",
+    "eslint:fix": "eslint src --config ../../eslint.config.js --fix",
+    "prettier:check": "prettier --check \"**/*.{ts,tsx,css,scss,json}\"",
+    "prettier:fix": "prettier --write \"**/*.{ts,tsx,css,scss,json}\"",
+    "stylelint:check": "stylelint '**/*.{css,scss}' --allow-empty-input",
+    "stylelint:fix": "stylelint '**/*.{css,scss}' --fix --allow-empty-input",
+    "test": "vitest run --typecheck --root ../.. --exclude '**/.delta/**' components/view/src"
+  },
+  "bugs": {
+    "url": "https://github.com/Byndyusoft/ui/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": ">=17"
+  },
+  "dependencies": {
+    "classnames": "^2.5.1"
+  }
+}