@dxtmisha/wiki 0.24.2 → 0.24.3

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

@@ -0,0 +1,233 @@
+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

@@ -0,0 +1,193 @@
+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

@@ -0,0 +1,249 @@
+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;
+}
+```
+