@broxus/react-uikit 0.1.0

package/dist/cjs/components/Width/index.scss

@@ -0,0 +1,690 @@
+// Name:            Width
+// Description:     Utilities for widths
+//
+// Component:       `uk-child-width-*`
+//                  `uk-width-*`
+//
+// ========================================================================
+
+// Variables
+// ========================================================================
+
+@import '../../styles/variables.scss';
+
+
+/* ========================================================================
+   Component: Width
+ ========================================================================== */
+
+
+/* Equal child widths
+ ========================================================================== */
+
+[class*='uk-child-width'] > * {
+    box-sizing: border-box;
+    width: 100%;
+}
+
+.uk-child-width-1-2 > * {
+    width: 50%;
+}
+
+.uk-child-width-1-3 > * {
+    width: unquote('calc(100% * 1 / 3.001)');
+}
+
+.uk-child-width-1-4 > * {
+    width: 25%;
+}
+
+.uk-child-width-1-5 > * {
+    width: 20%;
+}
+
+.uk-child-width-1-6 > * {
+    width: unquote('calc(100% * 1 / 6.001)');
+}
+
+.uk-child-width-auto > * {
+    width: auto;
+}
+
+/*
+ * 1. Reset the `min-width`, which is set to auto by default, because
+ *    flex items won't shrink below their minimum intrinsic content size.
+ *    Using `1px` instead of `0`, so items still wrap into the next line,
+ *    if they have zero width and padding and the predecessor is 100% wide.
+ */
+
+.uk-child-width-expand > :not([class*='uk-width']) {
+    flex: 1;
+
+    /* 1 */
+    min-width: 1px;
+}
+
+/* Phone landscape and bigger */
+// noinspection Stylelint
+@media (min-width: $breakpoint-small) {
+    .uk-child-width-1-1\@s > * {
+        width: 100%;
+    }
+
+    .uk-child-width-1-2\@s > * {
+        width: 50%;
+    }
+
+    .uk-child-width-1-3\@s > * {
+        width: unquote('calc(100% * 1 / 3.001)');
+    }
+
+    .uk-child-width-1-4\@s > * {
+        width: 25%;
+    }
+
+    .uk-child-width-1-5\@s > * {
+        width: 20%;
+    }
+
+    .uk-child-width-1-6\@s > * {
+        width: unquote('calc(100% * 1 / 6.001)');
+    }
+
+    .uk-child-width-auto\@s > * {
+        width: auto;
+    }
+
+    .uk-child-width-expand\@s > :not([class*='uk-width']) {
+        flex: 1;
+        min-width: 1px;
+    }
+}
+
+/* Tablet landscape and bigger */
+// noinspection Stylelint
+@media (min-width: $breakpoint-medium) {
+    .uk-child-width-1-1\@m > * {
+        width: 100%;
+    }
+
+    .uk-child-width-1-2\@m > * {
+        width: 50%;
+    }
+
+    .uk-child-width-1-3\@m > * {
+        width: unquote('calc(100% * 1 / 3.001)');
+    }
+
+    .uk-child-width-1-4\@m > * {
+        width: 25%;
+    }
+
+    .uk-child-width-1-5\@m > * {
+        width: 20%;
+    }
+
+    .uk-child-width-1-6\@m > * {
+        width: unquote('calc(100% * 1 / 6.001)');
+    }
+
+    .uk-child-width-auto\@m > * {
+        width: auto;
+    }
+
+    .uk-child-width-expand\@m > :not([class*='uk-width']) {
+        flex: 1;
+        min-width: 1px;
+    }
+}
+
+/* Desktop and bigger */
+// noinspection Stylelint
+@media (min-width: $breakpoint-large) {
+    .uk-child-width-1-1\@l > * {
+        width: 100%;
+    }
+
+    .uk-child-width-1-2\@l > * {
+        width: 50%;
+    }
+
+    .uk-child-width-1-3\@l > * {
+        width: unquote('calc(100% * 1 / 3.001)');
+    }
+
+    .uk-child-width-1-4\@l > * {
+        width: 25%;
+    }
+
+    .uk-child-width-1-5\@l > * {
+        width: 20%;
+    }
+
+    .uk-child-width-1-6\@l > * {
+        width: unquote('calc(100% * 1 / 6.001)');
+    }
+
+    .uk-child-width-auto\@l > * {
+        width: auto;
+    }
+
+    .uk-child-width-expand\@l > :not([class*='uk-width']) {
+        flex: 1;
+        min-width: 1px;
+    }
+}
+
+/* Large screen and bigger */
+// noinspection Stylelint
+@media (min-width: $breakpoint-xlarge) {
+    .uk-child-width-1-1\@xl > * {
+        width: 100%;
+    }
+
+    .uk-child-width-1-2\@xl > * {
+        width: 50%;
+    }
+
+    .uk-child-width-1-3\@xl > * {
+        width: unquote('calc(100% * 1 / 3.001)');
+    }
+
+    .uk-child-width-1-4\@xl > * {
+        width: 25%;
+    }
+
+    .uk-child-width-1-5\@xl > * {
+        width: 20%;
+    }
+
+    .uk-child-width-1-6\@xl > * {
+        width: unquote('calc(100% * 1 / 6.001)');
+    }
+
+    .uk-child-width-auto\@xl > * {
+        width: auto;
+    }
+
+    .uk-child-width-expand\@xl > :not([class*='uk-width']) {
+        flex: 1;
+        min-width: 1px;
+    }
+}
+
+
+/* Single Widths
+ ========================================================================== */
+
+/*
+ * 1. `max-width` is needed for the pixel-based classes
+ */
+
+[class*='uk-width'] {
+    box-sizing: border-box;
+
+    /* 1 */
+    max-width: 100%;
+    width: 100%;
+}
+
+/* Halves */
+.uk-width-1-2 {
+    width: 50%;
+}
+
+/* Thirds */
+.uk-width-1-3 {
+    width: unquote('calc(100% * 1 / 3.001)');
+}
+
+.uk-width-2-3 {
+    width: unquote('calc(100% * 2 / 3.001)');
+}
+
+/* Quarters */
+.uk-width-1-4 {
+    width: 25%;
+}
+
+.uk-width-3-4 {
+    width: 75%;
+}
+
+/* Fifths */
+.uk-width-1-5 {
+    width: 20%;
+}
+
+.uk-width-2-5 {
+    width: 40%;
+}
+
+.uk-width-3-5 {
+    width: 60%;
+}
+
+.uk-width-4-5 {
+    width: 80%;
+}
+
+/* Sixths */
+.uk-width-1-6 {
+    width: unquote('calc(100% * 1 / 6.001)');
+}
+
+.uk-width-5-6 {
+    width: unquote('calc(100% * 5 / 6.001)');
+}
+
+/* Pixel */
+.uk-width-small {
+    width: var(--width-small-width);
+}
+
+.uk-width-medium {
+    width: var(--width-medium-width);
+}
+
+.uk-width-large {
+    width: var(--width-large-width);
+}
+
+.uk-width-xlarge {
+    width: var(--width-xlarge-width);
+}
+
+.uk-width-2xlarge {
+    width: var(--width-2xlarge-width);
+}
+
+/* Auto */
+.uk-width-auto {
+    width: auto;
+}
+
+/* Expand */
+.uk-width-expand {
+    flex: 1;
+    min-width: 1px;
+}
+
+/* Phone landscape and bigger */
+// noinspection Stylelint
+@media (min-width: $breakpoint-small) {
+    /* Whole */
+    .uk-width-1-1\@s {
+        width: 100%;
+    }
+
+    /* Halves */
+    .uk-width-1-2\@s {
+        width: 50%;
+    }
+
+    /* Thirds */
+    .uk-width-1-3\@s {
+        width: unquote('calc(100% * 1 / 3.001)');
+    }
+
+    .uk-width-2-3\@s {
+        width: unquote('calc(100% * 2 / 3.001)');
+    }
+
+    /* Quarters */
+    .uk-width-1-4\@s {
+        width: 25%;
+    }
+
+    .uk-width-3-4\@s {
+        width: 75%;
+    }
+
+    /* Fifths */
+    .uk-width-1-5\@s {
+        width: 20%;
+    }
+
+    .uk-width-2-5\@s {
+        width: 40%;
+    }
+
+    .uk-width-3-5\@s {
+        width: 60%;
+    }
+
+    .uk-width-4-5\@s {
+        width: 80%;
+    }
+
+    /* Sixths */
+    .uk-width-1-6\@s {
+        width: unquote('calc(100% * 1 / 6.001)');
+    }
+
+    .uk-width-5-6\@s {
+        width: unquote('calc(100% * 5 / 6.001)');
+    }
+
+    /* Pixel */
+    .uk-width-small\@s {
+        width: var(--width-small-width);
+    }
+
+    .uk-width-medium\@s {
+        width: var(--width-medium-width);
+    }
+
+    .uk-width-large\@s {
+        width: var(--width-large-width);
+    }
+
+    .uk-width-xlarge\@s {
+        width: var(--width-xlarge-width);
+    }
+
+    .uk-width-2xlarge\@s {
+        width: var(--width-2xlarge-width);
+    }
+
+    /* Auto */
+    .uk-width-auto\@s {
+        width: auto;
+    }
+
+    /* Expand */
+    .uk-width-expand\@s {
+        flex: 1;
+        min-width: 1px;
+    }
+}
+
+/* Tablet landscape and bigger */
+// noinspection Stylelint
+@media (min-width: $breakpoint-medium) {
+    /* Whole */
+    .uk-width-1-1\@m {
+        width: 100%;
+    }
+
+    /* Halves */
+    .uk-width-1-2\@m {
+        width: 50%;
+    }
+
+    /* Thirds */
+    .uk-width-1-3\@m {
+        width: unquote('calc(100% * 1 / 3.001)');
+    }
+
+    .uk-width-2-3\@m {
+        width: unquote('calc(100% * 2 / 3.001)');
+    }
+
+    /* Quarters */
+    .uk-width-1-4\@m {
+        width: 25%;
+    }
+
+    .uk-width-3-4\@m {
+        width: 75%;
+    }
+
+    /* Fifths */
+    .uk-width-1-5\@m {
+        width: 20%;
+    }
+
+    .uk-width-2-5\@m {
+        width: 40%;
+    }
+
+    .uk-width-3-5\@m {
+        width: 60%;
+    }
+
+    .uk-width-4-5\@m {
+        width: 80%;
+    }
+
+    /* Sixths */
+    .uk-width-1-6\@m {
+        width: unquote('calc(100% * 1 / 6.001)');
+    }
+
+    .uk-width-5-6\@m {
+        width: unquote('calc(100% * 5 / 6.001)');
+    }
+
+    /* Pixel */
+    .uk-width-small\@m {
+        width: var(--width-small-width);
+    }
+
+    .uk-width-medium\@m {
+        width: var(--width-medium-width);
+    }
+
+    .uk-width-large\@m {
+        width: var(--width-large-width);
+    }
+
+    .uk-width-xlarge\@m {
+        width: var(--width-xlarge-width);
+    }
+
+    .uk-width-2xlarge\@m {
+        width: var(--width-2xlarge-width);
+    }
+
+    /* Auto */
+    .uk-width-auto\@m {
+        width: auto;
+    }
+
+    /* Expand */
+    .uk-width-expand\@m {
+        flex: 1;
+        min-width: 1px;
+    }
+}
+
+/* Desktop and bigger */
+// noinspection Stylelint
+@media (min-width: $breakpoint-large) {
+    /* Whole */
+    .uk-width-1-1\@l {
+        width: 100%;
+    }
+
+    /* Halves */
+    .uk-width-1-2\@l {
+        width: 50%;
+    }
+
+    /* Thirds */
+    .uk-width-1-3\@l {
+        width: unquote('calc(100% * 1 / 3.001)');
+    }
+
+    .uk-width-2-3\@l {
+        width: unquote('calc(100% * 2 / 3.001)');
+    }
+
+    /* Quarters */
+    .uk-width-1-4\@l {
+        width: 25%;
+    }
+
+    .uk-width-3-4\@l {
+        width: 75%;
+    }
+
+    /* Fifths */
+    .uk-width-1-5\@l {
+        width: 20%;
+    }
+
+    .uk-width-2-5\@l {
+        width: 40%;
+    }
+
+    .uk-width-3-5\@l {
+        width: 60%;
+    }
+
+    .uk-width-4-5\@l {
+        width: 80%;
+    }
+
+    /* Sixths */
+    .uk-width-1-6\@l {
+        width: unquote('calc(100% * 1 / 6.001)');
+    }
+
+    .uk-width-5-6\@l {
+        width: unquote('calc(100% * 5 / 6.001)');
+    }
+
+    /* Pixel */
+    .uk-width-small\@l {
+        width: var(--width-small-width);
+    }
+
+    .uk-width-medium\@l {
+        width: var(--width-medium-width);
+    }
+
+    .uk-width-large\@l {
+        width: var(--width-large-width);
+    }
+
+    .uk-width-xlarge\@l {
+        width: var(--width-xlarge-width);
+    }
+
+    .uk-width-2xlarge\@l {
+        width: var(--width-2xlarge-width);
+    }
+
+    /* Auto */
+    .uk-width-auto\@l {
+        width: auto;
+    }
+
+    /* Expand */
+    .uk-width-expand\@l {
+        flex: 1;
+        min-width: 1px;
+    }
+}
+
+/* Large screen and bigger */
+// noinspection Stylelint
+@media (min-width: $breakpoint-xlarge) {
+    /* Whole */
+    .uk-width-1-1\@xl {
+        width: 100%;
+    }
+
+    /* Halves */
+    .uk-width-1-2\@xl {
+        width: 50%;
+    }
+
+    /* Thirds */
+    .uk-width-1-3\@xl {
+        width: unquote('calc(100% * 1 / 3.001)');
+    }
+
+    .uk-width-2-3\@xl {
+        width: unquote('calc(100% * 2 / 3.001)');
+    }
+
+    /* Quarters */
+    .uk-width-1-4\@xl {
+        width: 25%;
+    }
+
+    .uk-width-3-4\@xl {
+        width: 75%;
+    }
+
+    /* Fifths */
+    .uk-width-1-5\@xl {
+        width: 20%;
+    }
+
+    .uk-width-2-5\@xl {
+        width: 40%;
+    }
+
+    .uk-width-3-5\@xl {
+        width: 60%;
+    }
+
+    .uk-width-4-5\@xl {
+        width: 80%;
+    }
+
+    /* Sixths */
+    .uk-width-1-6\@xl {
+        width: unquote('calc(100% * 1 / 6.001)');
+    }
+
+    .uk-width-5-6\@xl {
+        width: unquote('calc(100% * 5 / 6.001)');
+    }
+
+    /* Pixel */
+    .uk-width-small\@xl {
+        width: var(--width-small-width);
+    }
+
+    .uk-width-medium\@xl {
+        width: var(--width-medium-width);
+    }
+
+    .uk-width-large\@xl {
+        width: var(--width-large-width);
+    }
+
+    .uk-width-xlarge\@xl {
+        width: var(--width-xlarge-width);
+    }
+
+    .uk-width-2xlarge\@xl {
+        width: var(--width-2xlarge-width);
+    }
+
+    /* Auto */
+    .uk-width-auto\@xl {
+        width: auto;
+    }
+
+    /* Expand */
+    .uk-width-expand\@xl {
+        flex: 1;
+        min-width: 1px;
+    }
+}
+
+
+// Hooks
+// ========================================================================
+
+
+@if mixin-exists(hook-width-misc) {
+    @include hook-width-misc;
+}
+
+
+// Vars
+// ========================================================================
+
+:root {
+    --width-small-width: #{$width-small-width};
+    --width-medium-width: #{$width-medium-width};
+    --width-large-width: #{$width-large-width};
+    --width-xlarge-width: #{$width-xlarge-width};
+    --width-2xlarge-width: #{$width-2xlarge-width};
+}

package/dist/cjs/components/Width/types.d.ts

@@ -0,0 +1,6 @@
+import type { BreakpointsConfig } from '../../types';
+export declare type WidthSize = 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge' | 'auto' | 'expand' | '1-1' | '1-2' | '1-3' | '1-4' | '1-5' | '1-6' | '2-3' | '2-5' | '3-4' | '3-5' | '4-5' | '5-6';
+export declare type BreakpointsWidthSize = Exclude<WidthSize, 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge'>;
+export declare type WidthBreakpointsConfig = BreakpointsConfig<BreakpointsWidthSize>;
+export declare type ChildWidthSize = 1 | 2 | 3 | 4 | 5 | 6 | 'auto' | 'expand';
+export declare type ChildWidthBreakpointsConfig = BreakpointsConfig<ChildWidthSize>;

package/dist/cjs/components/Width/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/components/Width/utils.d.ts

@@ -0,0 +1,5 @@
+import type { ChildWidthBreakpointsConfig, ChildWidthSize, WidthBreakpointsConfig, WidthSize } from './types';
+export declare function getWidthClassname(value: WidthSize, prefixCls?: string): string;
+export declare function getWidthClassname(config: WidthBreakpointsConfig, prefixCl?: string): string;
+export declare function getChildWidthClassname(value: ChildWidthSize, prefixCls?: string): string;
+export declare function getChildWidthClassname(config: ChildWidthBreakpointsConfig, prefixCls?: string): string[];

package/dist/cjs/components/Width/utils.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getChildWidthClassname = exports.getWidthClassname = void 0;
+const utils_1 = require("../../utils");
+function getWidthClassname(valueOrConfig, prefixCls = 'uk') {
+    if (typeof valueOrConfig === 'string') {
+        return `${prefixCls}-width-${valueOrConfig}`;
+    }
+    if (typeof valueOrConfig === 'object' && !Array.isArray(valueOrConfig)) {
+        return (0, utils_1.getBreakpointsConfigClasses)(prefixCls, 'width', valueOrConfig);
+    }
+    return undefined;
+}
+exports.getWidthClassname = getWidthClassname;
+function getChildWidthClassname(valueOrConfig, prefixCls = 'uk') {
+    if (typeof valueOrConfig === 'string' || typeof valueOrConfig === 'number') {
+        if (typeof valueOrConfig === 'string' && ['auto', 'expand'].includes(valueOrConfig)) {
+            return `${prefixCls}-child-width-${valueOrConfig}`;
+        }
+        return `${prefixCls}-child-width-1-${valueOrConfig}`;
+    }
+    if (typeof valueOrConfig === 'object' && !Array.isArray(valueOrConfig)) {
+        return Object.entries(valueOrConfig).map(([key, value]) => `${getChildWidthClassname(value)}${key !== 'default' ? `@${key}` : ''}`);
+    }
+    return undefined;
+}
+exports.getChildWidthClassname = getChildWidthClassname;