@dxtmisha/wiki 0.39.5 → 0.39.6

package/src/media/styles/en/dimension.mdx

@@ -1,233 +0,0 @@
-import {Meta} from '@storybook/addon-docs/blocks'
-
-<Meta title='@dxtmisha/styles/en/Dimension'/>
-
-# Dimension
-
-A set of SCSS functions and mixins for managing dimensions with CSS Custom Properties support.
-
-## Functions
-
-### `getWidthByRatio`
-
-Returns width based on aspect ratio values.
-
-**Parameters:**
-- `$value` — aspect ratio string (e.g., '16/9')
-
-**Returns:** `String`
-
-```scss
-$width: getWidthByRatio('16/9'); // "16"
-```
-
-### `getHeightByRatio`
-
-Returns height based on aspect ratio values.
-
-**Parameters:**
-- `$value` — aspect ratio string (e.g., '16/9')
-
-**Returns:** `String`
-
-```scss
-$height: getHeightByRatio('16/9'); // "9"
-```
-
-## Mixins
-
-### `width`
-
-Sets width with CSS custom property.
-
-**Parameters:**
-- `$value` — width value
-
-**Returns:** `void`
-
-```scss
-.element {
-  @include width(200px);
-}
-```
-
-### `height`
-
-Sets height with CSS custom property.
-
-**Parameters:**
-- `$value` — height value
-
-**Returns:** `void`
-
-```scss
-.element {
-  @include height(100px);
-}
-```
-
-### `widthDevice`
-
-Sets width using device viewport width (dvw).
-
-**Parameters:**
-- `$value` — width value in dvw units
-
-**Returns:** `void`
-
-```scss
-.element {
-  @include widthDevice(100);
-}
-```
-
-### `heightDevice`
-
-Sets height using device viewport height (dvh).
-
-**Parameters:**
-- `$value` — height value in dvh units
-
-**Returns:** `void`
-
-```scss
-.element {
-  @include heightDevice(100);
-}
-```
-
-### `maxWidthDevice`
-
-Sets max-width using device viewport width (dvw).
-
-**Parameters:**
-- `$value` — max-width value in dvw units
-
-**Returns:** `void`
-
-```scss
-.element {
-  @include maxWidthDevice(90);
-}
-```
-
-### `maxHeightDevice`
-
-Sets max-height using device viewport height (dvh).
-
-**Parameters:**
-- `$value` — max-height value in dvh units
-
-**Returns:** `void`
-
-```scss
-.element {
-  @include maxHeightDevice(80);
-}
-```
-
-### `widthBasis`
-
-Sets width with flex-basis and max-width constraint.
-
-**Parameters:**
-- `$value` — width value
-
-**Returns:** `void`
-
-```scss
-.element {
-  @include widthBasis(300px);
-}
-```
-
-### `heightBasis`
-
-Sets height with flex-basis and max-height constraint.
-
-**Parameters:**
-- `$value` — height value
-
-**Returns:** `void`
-
-```scss
-.element {
-  @include heightBasis(200px);
-}
-```
-
-### `aspectRatio`
-
-Sets aspect ratio.
-
-**Parameters:**
-- `$value` — aspect ratio value
-
-**Returns:** `void`
-
-```scss
-.element {
-  @include aspectRatio(16/9);
-}
-```
-
-### `aspectRatioWidth`
-
-Sets aspect ratio (alias for aspectRatio).
-
-**Parameters:**
-- `$value` — aspect ratio value
-
-**Returns:** `void`
-
-```scss
-.element {
-  @include aspectRatioWidth(16/9);
-}
-```
-
-### `aspectRatioHeight`
-
-Sets aspect ratio (alias for aspectRatio).
-
-**Parameters:**
-- `$value` — aspect ratio value
-
-**Returns:** `void`
-
-```scss
-.element {
-  @include aspectRatioHeight(4/3);
-}
-```
-
-### `squared`
-
-Creates a square element with aspect ratio 1:1.
-
-**Parameters:**
-- `$value` — size value
-
-**Returns:** `void`
-
-```scss
-.element {
-  @include squared(100px);
-}
-```
-
-### `circle`
-
-Creates a circular element.
-
-**Parameters:**
-- `$value` — size value
-
-**Returns:** `void`
-
-```scss
-.element {
-  @include circle(50px);
-}
-```
-

package/src/media/styles/en/dir.mdx

@@ -1,193 +0,0 @@
-import {Meta} from '@storybook/addon-docs/blocks'
-
-<Meta title='@dxtmisha/styles/en/Dir'/>
-
-# Dir
-
-A set of SCSS functions and mixins for managing text direction (LTR/RTL) with CSS Custom Properties support.
-
-**How it works:** The system uses CSS custom properties to manage bidirectional text. By default, LTR (left-to-right) is set. When `html[dir="rtl"]` or `.dir-rtl` class is applied, all direction-related variables are automatically inverted, allowing seamless RTL support without code duplication.
-
-## Initialization Mixins
-
-### `initDir`
-
-Initializes direction system with CSS custom properties for LTR and RTL support.
-
-**Parameters:** none
-
-**Returns:** `void`
-
-```scss
-@include initDir;
-```
-
-### `dirToRtl`
-
-Applies RTL (right-to-left) direction styles.
-
-**Parameters:** none
-
-**Returns:** `void`
-
-```scss
-html[dir="rtl"] {
-  @include dirToRtl;
-}
-```
-
-## Validation Functions
-
-### `isDir`
-
-Returns direction multiplier (1 for LTR, -1 for RTL).
-
-**Parameters:** none
-
-**Returns:** `String`
-
-```scss
-$dir: isDir(); // var(--d-dir, 1)
-```
-
-### `isDirLeft`
-
-Checks if current direction is left-aligned.
-
-**Parameters:** none
-
-**Returns:** `String`
-
-```scss
-$isLeft: isDirLeft(); // var(--d-dir-left, 1)
-```
-
-### `isDirRight`
-
-Checks if current direction is right-aligned.
-
-**Parameters:** none
-
-**Returns:** `String`
-
-```scss
-$isRight: isDirRight(); // var(--d-dir-right, 0)
-```
-
-## Direction Functions
-
-### `dirLeft`
-
-Returns text alignment value for left side.
-
-**Parameters:** none
-
-**Returns:** `String`
-
-```scss
-text-align: dirLeft(); // left (LTR) or right (RTL)
-```
-
-### `dirRight`
-
-Returns text alignment value for right side.
-
-**Parameters:** none
-
-**Returns:** `String`
-
-```scss
-text-align: dirRight(); // right (LTR) or left (RTL)
-```
-
-### `dirLeftAuto`
-
-Returns 'auto' value for left property.
-
-**Parameters:** none
-
-**Returns:** `String`
-
-```scss
-left: dirLeftAuto(); // auto (LTR) or unset (RTL)
-```
-
-### `dirRightAuto`
-
-Returns 'auto' value for right property.
-
-**Parameters:** none
-
-**Returns:** `String`
-
-```scss
-right: dirRightAuto(); // unset (LTR) or auto (RTL)
-```
-
-### `dirFlexLeft`
-
-Returns flex alignment value for left side.
-
-**Parameters:** none
-
-**Returns:** `String`
-
-```scss
-justify-content: dirFlexLeft(); // flex-start (LTR) or flex-end (RTL)
-```
-
-### `dirFlexRight`
-
-Returns flex alignment value for right side.
-
-**Parameters:** none
-
-**Returns:** `String`
-
-```scss
-justify-content: dirFlexRight(); // flex-end (LTR) or flex-start (RTL)
-```
-
-## Position Functions
-
-### `dirToLeft`
-
-Calculates position value for left property based on direction.
-
-**Parameters:**
-- `$left` — left position variable
-- `$right` — right position variable
-
-**Returns:** `String`
-
-```scss
-left: dirToLeft(--pos-left, --pos-right);
-```
-
-### `dirToRight`
-
-Calculates position value for right property based on direction.
-
-**Parameters:**
-- `$left` — left position variable
-- `$right` — right position variable
-
-**Returns:** `String`
-
-```scss
-right: dirToRight(--pos-left, --pos-right);
-```
-
-### `dirOrder`
-
-Calculates order value based on direction multiplier.
-
-**Parameters:**
-- `$value` — order value
-
-**Returns:** `String`
-
-```scss
-order: dirOrder(2); // 3 (LTR) or 999997 (RTL)
-```
-

package/src/media/styles/en/flex.mdx

@@ -1,249 +0,0 @@
-import {Meta} from '@storybook/addon-docs/blocks'
-
-<Meta title='@dxtmisha/styles/en/Flex'/>
-
-# Flex
-
-A set of SCSS mixins for working with flexbox layouts with CSS Custom Properties support.
-
-**How it works:** The system provides convenient mixins for common flexbox patterns. Each mixin combines multiple flexbox properties into a single declaration, reducing code repetition. The mixins support both standard flex containers and inline-flex variants, with automatic alignment presets for horizontal/vertical layouts.
-
-## Basic Mixins
-
-### `flex`
-
-Sets display: flex.
-
-**Parameters:** none
-
-**Returns:** `void`
-
-```scss
-.container {
-  @include flex;
-}
-```
-
-### `flexInline`
-
-Sets display: inline-flex.
-
-**Parameters:** none
-
-**Returns:** `void`
-
-```scss
-.container {
-  @include flexInline;
-}
-```
-
-## Alignment Mixins
-
-### `flexX`
-
-Creates horizontal flex container with centered items.
-
-**Parameters:** none
-
-**Returns:** `void`
-
-```scss
-.container {
-  @include flexX;
-  // display: flex;
-  // align-items: center;
-}
-```
-
-### `flexY`
-
-Creates vertical flex container with centered items.
-
-**Parameters:** none
-
-**Returns:** `void`
-
-```scss
-.container {
-  @include flexY;
-  // display: flex;
-  // align-items: center;
-  // flex-flow: column;
-}
-```
-
-### `flexStretchX`
-
-Creates horizontal flex container with stretched items.
-
-**Parameters:** none
-
-**Returns:** `void`
-
-```scss
-.container {
-  @include flexStretchX;
-  // display: flex;
-  // align-items: stretch;
-}
-```
-
-### `flexStretchY`
-
-Creates vertical flex container with stretched items.
-
-**Parameters:** none
-
-**Returns:** `void`
-
-```scss
-.container {
-  @include flexStretchY;
-  // display: flex;
-  // align-items: stretch;
-  // flex-flow: column;
-}
-```
-
-### `flexCenter`
-
-Creates centered flex container (both axes).
-
-**Parameters:** none
-
-**Returns:** `void`
-
-```scss
-.container {
-  @include flexCenter;
-  // display: flex;
-  // align-items: center;
-  // justify-content: center;
-}
-```
-
-### `flexBetween`
-
-Creates flex container with space-between alignment.
-
-**Parameters:** none
-
-**Returns:** `void`
-
-```scss
-.container {
-  @include flexBetween;
-  // display: flex;
-  // align-items: center;
-  // justify-content: space-between;
-}
-```
-
-## Inline Flex Mixins
-
-### `flexInlineX`
-
-Creates horizontal inline-flex container with centered items.
-
-**Parameters:** none
-
-**Returns:** `void`
-
-```scss
-.container {
-  @include flexInlineX;
-}
-```
-
-### `flexInlineY`
-
-Creates vertical inline-flex container with centered items.
-
-**Parameters:** none
-
-**Returns:** `void`
-
-```scss
-.container {
-  @include flexInlineY;
-}
-```
-
-### `flexInlineCenter`
-
-Creates centered inline-flex container (both axes).
-
-**Parameters:** none
-
-**Returns:** `void`
-
-```scss
-.container {
-  @include flexInlineCenter;
-}
-```
-
-### `flexInlineBetween`
-
-Creates inline-flex container with space-between alignment.
-
-**Parameters:** none
-
-**Returns:** `void`
-
-```scss
-.container {
-  @include flexInlineBetween;
-}
-```
-
-## Utility Mixins
-
-### `justifyContent`
-
-Sets justify-content property.
-
-**Parameters:**
-- `$value` — justify-content value
-
-**Returns:** `void`
-
-```scss
-.container {
-  @include justifyContent(center);
-}
-```
-
-### `flexPosition`
-
-Applies flex layout based on preset value.
-
-**Parameters:**
-- `$value` — preset name ('x', 'y', 'center', 'between', 'inline-x', 'inline-y', 'inline-center', 'inline-between')
-
-**Returns:** `void`
-
-```scss
-.container {
-  @include flexPosition('center');
-}
-```
-
-### `flexDynamic`
-
-Creates flexible item that grows and shrinks.
-
-**Parameters:** none
-
-**Returns:** `void`
-
-```scss
-.item {
-  @include flexDynamic;
-  // flex-basis: 1px;
-  // flex-grow: 1;
-  // flex-shrink: 1;
-}
-```
-