@broxus/react-uikit 0.1.0

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

@@ -0,0 +1,655 @@
+// Name:            Form
+// Description:     Styles for forms
+//
+// Component:       `uk-form-*`
+//                  `uk-input`
+//                  `uk-textarea`
+//                  `uk-legend`
+//                  `uk-fieldset`
+//
+// Sub-objects:     `uk-form-custom`
+//                  `uk-form-stacked`
+//                  `uk-form-horizontal`
+//                  `uk-form-label`
+//                  `uk-form-controls`
+//                  `uk-form-icon`
+//
+// Modifiers:       `uk-form-small`
+//                  `uk-form-medium`
+//                  `uk-form-large`
+//                  `uk-form-danger`
+//                  `uk-form-warning`
+//                  `uk-form-success`
+//                  `uk-form-blank`
+//                  `uk-form-width-xsmall`
+//                  `uk-form-width-small`
+//                  `uk-form-width-medium`
+//                  `uk-form-width-large`
+//                  `uk-form-controls-text`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import '../../styles/variables.scss';
+
+
+/* ========================================================================
+   Component: Form
+ ========================================================================== */
+
+/*
+ * 1. Define consistent box sizing.
+ *    Default is `content-box` with following exceptions set to `border-box`
+ *    `input[type="search"]` in Chrome, Safari and Opera
+ *    `input[type="color"]` in Firefox
+ * 2. Address margins set differently in Firefox/IE and Chrome/Safari/Opera.
+ * 3. Remove `border-radius` in iOS.
+ * 4. Change font properties to `inherit` in all browsers.
+ * 5. Prevent content overflow if a fixed width is used
+ * 6. Remove default style in iOS.
+ * 7. Take the full width
+ * 8. Reset default
+ * 9. Style
+ */
+
+.uk-input,
+.uk-textarea {
+    -webkit-appearance: none; /* 6 */
+    background: var(--form-background); /* 9 */
+    border: 0 none; /* 9 */
+    border-radius: 0; /* 3 */
+    box-sizing: border-box; /* 1 */
+    color: var(--form-color); /* 9 */
+    font: inherit; /* 4 */
+    margin: 0; /* 2 */
+    max-width: 100%; /* 5 */
+    padding: 0 var(--form-padding-horizontal); /* 8 */
+    width: 100%; /* 7 */
+    @if mixin-exists(hook-form) {
+        @include hook-form;
+    }
+}
+
+/*
+ * Single-line
+ * 1. Show the overflow in Edge.
+ * 2. Allow any element to look like an `input` or `select` element
+ * 3. Make sure line-height is not larger than height
+ *    Also needed to center the text vertically
+ */
+
+.uk-input {
+    /* 2 */
+    display: inline-block;
+    height: var(--form-height);
+
+    /* 1 */
+    overflow: visible;
+    vertical-align: middle;
+    @if mixin-exists(hook-form-single-line) {
+        @include hook-form-single-line;
+    }
+}
+
+/* 2 */
+.uk-input:not(input) {
+    line-height: var(--form-line-height);
+}
+
+/*
+ * Multi-line
+ * 1. Remove the default vertical scrollbar in IE 10+.
+ */
+
+.uk-textarea {
+    /* 1 */
+    overflow: auto;
+    padding-bottom: var(--form-padding-vertical);
+    padding-top: var(--form-padding-vertical);
+    vertical-align: top;
+    @if mixin-exists(hook-form-multi-line) {
+        @include hook-form-multi-line;
+    }
+}
+
+/*
+ * Remove the inner padding and cancel buttons in Chrome on OS X and Safari on OS X.
+ */
+
+.uk-input[type='search']::-webkit-search-cancel-button,
+.uk-input[type='search']::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+
+/*
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+.uk-input[type='number']::-webkit-inner-spin-button,
+.uk-input[type='number']::-webkit-outer-spin-button {
+    height: auto;
+}
+
+
+/*
+ * Define consistent border, margin, and padding.
+ */
+
+.uk-fieldset {
+    border: none;
+    margin: 0;
+    padding: 0;
+}
+
+
+/*
+ * Placeholder
+ */
+
+.uk-input::-ms-input-placeholder {
+    color: var(--form-placeholder-color) !important;
+}
+
+.uk-input::placeholder {
+    color: var(--form-placeholder-color);
+}
+
+.uk-textarea::-ms-input-placeholder {
+    color: var(--form-placeholder-color) !important;
+}
+
+.uk-textarea::placeholder {
+    color: var(--form-placeholder-color);
+}
+
+/*
+ * Removes placeholder transparency in Firefox.
+ */
+
+.uk-input::-moz-placeholder,
+.uk-textarea::-moz-placeholder {
+    opacity: 1;
+}
+
+/* Focus */
+.uk-input:focus,
+.uk-textarea:focus {
+    background-color: var(--form-focus-background);
+    color: var(--form-focus-color);
+    outline: none;
+    @if mixin-exists(hook-form-focus) {
+        @include hook-form-focus;
+    }
+}
+
+/* Disabled */
+.uk-input:disabled,
+.uk-textarea:disabled {
+    background-color: var(--form-disabled-background);
+    color: var(--form-disabled-color);
+    @if mixin-exists(hook-form-disabled) {
+        @include hook-form-disabled;
+    }
+}
+
+
+/* Size modifier (`uk-input` and `uk-textarea`)
+ ========================================================================== */
+
+/*
+ * Small
+ */
+
+.uk-form-small {
+    font-size: var(--form-small-font-size);
+}
+
+/* Multi-line */
+textarea.uk-form-small,
+[multiple].uk-form-small,
+[size].uk-form-small {
+    padding: var(--form-small-padding-vertical) var(--form-small-padding-horizontal);
+}
+
+.uk-form-small:not(input, textarea) {
+    line-height: var(--form-small-line-height);
+}
+
+/* Single-line */
+.uk-form-small:not(textarea, [multiple], [size]) {
+    height: var(--form-small-height);
+    padding-left: var(--form-small-padding-horizontal);
+    padding-right: var(--form-small-padding-horizontal);
+}
+
+/*
+ * Medium
+ */
+
+.uk-form-medium {
+    font-size: var(--form-medium-font-size);
+}
+
+/* Multi-line */
+textarea.uk-form-medium,
+[multiple].uk-form-medium,
+[size].uk-form-medium {
+    padding: var(--form-medium-padding-vertical) var(--form-medium-padding-horizontal);
+}
+
+.uk-form-medium:not(input, textarea) {
+    line-height: var(--form-medium-line-height);
+}
+
+/* Single-line */
+.uk-form-medium:not(textarea, [multiple], [size]) {
+    height: var(--form-medium-height);
+    padding-left: var(--form-medium-padding-horizontal);
+    padding-right: var(--form-medium-padding-horizontal);
+}
+
+/*
+ * Large
+ */
+
+.uk-form-large {
+    font-size: var(--form-large-font-size);
+}
+
+/* Multi-line */
+textarea.uk-form-large,
+[multiple].uk-form-large,
+[size].uk-form-large {
+    padding: var(--form-large-padding-vertical) var(--form-large-padding-horizontal);
+}
+
+.uk-form-large:not(input, textarea) {
+    line-height: var(--form-large-line-height);
+}
+
+/* Single-line */
+.uk-form-large:not(textarea, [multiple], [size]) {
+    height: var(--form-large-height);
+    padding-left: var(--form-large-padding-horizontal);
+    padding-right: var(--form-large-padding-horizontal);
+}
+
+
+/* Style modifier (`uk-input` and `uk-textarea`)
+ ========================================================================== */
+
+/*
+ * Error
+ */
+
+.uk-form-danger,
+.uk-form-danger:focus {
+    color: var(--form-danger-color);
+    @if mixin-exists(hook-form-danger) {
+        @include hook-form-danger;
+    }
+}
+
+/*
+ * Warning
+ */
+
+.uk-form-warning,
+.uk-form-warning:focus {
+    color: var(--form-warning-color);
+    @if mixin-exists(hook-form-warning) {
+        @include hook-form-warning;
+    }
+}
+
+/*
+ * Success
+ */
+
+.uk-form-success,
+.uk-form-success:focus {
+    color: var(--form-success-color);
+    @if mixin-exists(hook-form-success) {
+        @include hook-form-success;
+    }
+}
+
+/*
+ * Blank
+ */
+
+.uk-form-blank {
+    background: none;
+    @if mixin-exists(hook-form-blank) {
+        @include hook-form-blank;
+    }
+}
+
+.uk-form-blank:focus {
+    @if mixin-exists(hook-form-blank-focus) {
+        @include hook-form-blank-focus;
+    }
+}
+
+
+/* Width modifiers (`uk-input` and `uk-textarea`)
+ ========================================================================== */
+
+/*
+ * Fixed widths
+ * Different widths for mini sized `input` and `select` elements
+ */
+
+input.uk-form-width-xsmall {
+    width: var(--form-width-xsmall);
+}
+
+.uk-form-width-xsmall {
+    width: var(--form-width-xsmall);
+}
+
+.uk-form-width-small {
+    width: var(--form-width-small);
+}
+
+.uk-form-width-medium {
+    width: var(--form-width-medium);
+}
+
+.uk-form-width-large {
+    width: var(--form-width-large);
+}
+
+
+/* Datalist
+ ========================================================================== */
+
+/*
+ * 1. Remove default style in Chrome
+ */
+
+.uk-input[list] {
+    background-position: 100% 50%;
+    background-repeat: no-repeat;
+    padding-right: var(--form-datalist-padding-right);
+}
+
+/* 1 */
+.uk-input[list]::-webkit-calendar-picker-indicator {
+    display: none;
+}
+
+.uk-input[list]:hover,
+.uk-input[list]:focus {
+    @if mixin-exists(svg-fill) {
+        @include svg-fill($form-icon-datalist-image-path, '#000', $form-datalist-icon-color);
+    }
+}
+
+
+/* Legend
+ ========================================================================== */
+
+/*
+ * Legend
+ * 1. Behave like block element
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove padding so people aren't caught out if they zero out fieldsets.
+ * 4. Style
+ */
+
+.uk-legend {
+    /* 2 */
+    color: inherit;
+
+    /* 4 */
+    font-size: var(--form-legend-font-size);
+    line-height: var(--form-legend-line-height);
+
+    /* 3 */
+    padding: 0;
+
+    /* 1 */
+    width: 100%;
+    @if mixin-exists(hook-form-legend) {
+        @include hook-form-legend;
+    }
+}
+
+
+/* Custom controls
+ ========================================================================== */
+
+/*
+ * 1. Container fits its content
+ * 2. Create position context
+ * 3. Prevent content overflow
+ * 4. Behave like most inline-block elements
+ */
+
+.uk-form-custom {
+    /* 1 */
+    display: inline-block;
+
+    /* 3 */
+    max-width: 100%;
+
+    /* 2 */
+    position: relative;
+
+    /* 4 */
+    vertical-align: middle;
+}
+
+/*
+ * 1. Position and resize the form control to always cover its container
+ * 2. Required for Firefox for positioning to the left
+ * 3. Required for Webkit to make `height` work
+ * 4. Hide control and show cursor
+ * 5. Needed for the cursor
+ * 6. Clip height caused by 5. Needed for Webkit only
+ */
+
+.uk-form-custom select,
+.uk-form-custom input[type='file'] {
+    /* 3 */
+    -webkit-appearance: none;
+    cursor: pointer;
+    height: 100%;
+
+    /* 2 */
+    left: 0;
+
+    /* 4 */
+    opacity: 0;
+
+    /* 1 */
+    position: absolute;
+    top: 0;
+    width: 100%;
+    z-index: 1;
+}
+
+.uk-form-custom input[type='file'] {
+    /* 5 */
+    font-size: 500px;
+
+    /* 6 */
+    overflow: hidden;
+}
+
+
+/* Label
+ ========================================================================== */
+
+.uk-form-label {
+    @if mixin-exists(hook-form-label) {
+        @include hook-form-label;
+    }
+}
+
+
+/* Layout
+ ========================================================================== */
+
+/*
+ * Stacked
+ */
+
+.uk-form-stacked .uk-form-label {
+    display: block;
+    margin-bottom: var(--form-stacked-margin-bottom);
+    @if mixin-exists(hook-form-stacked-label) {
+        @include hook-form-stacked-label;
+    }
+}
+
+/*
+ * Horizontal
+ */
+
+/* Tablet portrait and smaller */
+@media (max-width: $breakpoint-small-max) {
+    /* Behave like `uk-form-stacked` */
+    .uk-form-horizontal .uk-form-label {
+        display: block;
+        margin-bottom: var(--form-stacked-margin-bottom);
+        @if mixin-exists(hook-form-stacked-label) {
+            @include hook-form-stacked-label;
+        }
+    }
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: $breakpoint-medium) {
+    .uk-form-horizontal .uk-form-label {
+        float: left;
+        margin-top: var(--form-horizontal-label-margin-top);
+        width: var(--form-horizontal-label-width);
+        @if mixin-exists(hook-form-horizontal-label) {
+            @include hook-form-horizontal-label;
+        }
+    }
+
+    .uk-form-horizontal .uk-form-controls {
+        margin-left: var(--form-horizontal-controls-margin-left);
+    }
+
+    /* Better vertical alignment if controls are checkboxes and radio buttons with text */
+    .uk-form-horizontal .uk-form-controls-text {
+        padding-top: var(--form-horizontal-controls-text-padding-top);
+    }
+}
+
+
+/* Icons
+ ========================================================================== */
+
+/*
+ * 1. Set width
+ * 2. Center icon vertically and horizontally
+ * 3. Style
+ */
+
+.uk-form-icon {
+    align-items: center;
+
+    /* 3 */
+    color: var(--form-icon-color);
+
+    /* 2 */
+    display: inline-flex;
+    justify-content: center;
+
+    /* 1 */
+    width: var(--form-icon-width);
+}
+
+/*
+ * Make `input` element clickable through icon, e.g. if it's a `span`
+ */
+
+.uk-form-icon:not(a, button, input) {
+    pointer-events: none;
+}
+
+/*
+ * Required for `a`.
+ */
+
+.uk-form-icon:hover {
+    color: var(--form-icon-hover-color);
+}
+
+
+// Hooks
+// ========================================================================
+
+@if mixin-exists(hook-form-misc) {
+    @include hook-form-misc;
+}
+
+
+// Vars
+// ========================================================================
+
+:root {
+    --form-height: var(--global-control-height);
+    --form-line-height: var(--form-height);
+    --form-padding-horizontal: #{$form-padding-horizontal};
+    --form-padding-vertical: #{$form-padding-vertical};
+    --form-background: #{$form-background};
+    --form-color: var(--global-color);
+    --form-focus-background: #{$form-focus-background};
+    --form-focus-color: var(--global-color);
+    --form-disabled-background: #{$form-disabled-background};
+    --form-disabled-color: var(--global-color);
+    --form-placeholder-color: var(--global-muted-color);
+    --form-small-height: var(--global-control-small-height);
+    --form-small-padding-horizontal: #{$form-small-padding-horizontal};
+    --form-small-padding-vertical: #{$form-small-padding-vertical};
+    --form-small-line-height: var(--form-small-height);
+    --form-small-font-size: var(--global-small-font-size);
+    --form-medium-height: var(--global-control-medium-height);
+    --form-medium-padding-horizontal: #{$form-medium-padding-horizontal};
+    --form-medium-padding-vertical: #{$form-medium-padding-vertical};
+    --form-medium-line-height: var(--form-medium-height);
+    --form-medium-font-size: var(--global-font-size);
+    --form-large-height: var(--global-control-large-height);
+    --form-large-padding-horizontal: #{$form-large-padding-horizontal};
+    --form-large-padding-vertical: #{$form-large-padding-vertical};
+    --form-large-line-height: var(--form-large-height);
+    --form-large-font-size: var(--global-medium-font-size);
+    --form-danger-color: var(--global-danger-background);
+    --form-warning-color: var(--global-warning-background);
+    --form-success-color: var(--global-success-background);
+    --form-width-xsmall: #{$form-width-xsmall};
+    --form-width-small: #{$form-width-small};
+    --form-width-medium: #{$form-width-medium};
+    --form-width-large: #{$form-width-large};
+    --form-datalist-padding-right: #{$form-datalist-padding-right};
+    --form-datalist-icon-color: var(--global-color);
+    --form-legend-font-size: var(--global-large-font-size);
+    --form-legend-line-height: #{$form-legend-line-height};
+    --form-stacked-margin-bottom: var(--global-small-margin);
+    --form-horizontal-label-width: #{$form-horizontal-label-width};
+    --form-horizontal-label-margin-top: #{$form-horizontal-label-margin-top};
+    --form-horizontal-controls-margin-left: #{$form-horizontal-controls-margin-left};
+    --form-horizontal-controls-text-padding-top: #{$form-horizontal-controls-text-padding-top};
+    --form-icon-width: var(--form-height);
+    --form-icon-color: var(--global-muted-color);
+    --form-icon-hover-color: var(--global-color);
+
+    // Inverse
+    --inverse-form-background: var(--inverse-global-muted-background);
+    --inverse-form-color: var(--inverse-global-color);
+    --inverse-form-focus-background: var(--inverse-global-muted-background);
+    --inverse-form-focus-color: var(--inverse-global-color);
+    --inverse-form-placeholder-color: var(--inverse-global-muted-color);
+    --inverse-form-datalist-icon-color: var(--inverse-global-color);
+    --inverse-form-icon-color: var(--inverse-global-muted-color);
+    --inverse-form-icon-hover-color: var(--inverse-global-color);
+}

package/dist/cjs/components/Grid/index.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import type { PolymorphicComponentProps } from '../Component';
+import type { ChildWidthBreakpointsConfig, ChildWidthSize } from '../Width';
+import './index.scss';
+export declare type GridGap = 'collapse' | 'xsmall' | 'small' | 'medium' | 'large';
+export declare type GridOwnProps = {
+    childWidth?: ChildWidthSize | ChildWidthBreakpointsConfig;
+    columnGap?: GridGap;
+    divider?: boolean;
+    gap?: GridGap;
+    margin?: GridGap;
+    match?: boolean;
+    rowGap?: GridGap;
+};
+export declare type GridProps<E extends React.ElementType = React.ElementType> = PolymorphicComponentProps<E, GridOwnProps>;
+declare const defaultElement = "div";
+export declare function Grid<E extends React.ElementType = typeof defaultElement>(props: GridProps<E>): JSX.Element;
+export {};

package/dist/cjs/components/Grid/index.js

@@ -0,0 +1,48 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Grid = void 0;
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const Component_1 = require("../Component");
+const Width_1 = require("../Width");
+require("./index.scss");
+const defaultElement = 'div';
+function Grid(props) {
+    const { childWidth, className, columnGap, divider, gap, margin, match, rowGap, ...restProps } = props;
+    const childWithClassName = React.useMemo(() => (0, Width_1.getChildWidthClassname)(childWidth), [childWidth]);
+    return (React.createElement(Component_1.Component, { className: (0, classnames_1.default)('uk-grid', {
+            [`uk-grid-${gap}`]: gap !== undefined,
+            [`uk-grid-row-${rowGap}`]: rowGap !== undefined,
+            [`uk-grid-column-${columnGap}`]: columnGap !== undefined,
+            [`uk-grid-margin-${margin}`]: margin !== undefined,
+            'uk-grid-divider': divider,
+            'uk-grid-match': match,
+        }, childWithClassName, className), component: defaultElement, "data-uk-grid": "margin: ", ...restProps }));
+}
+exports.Grid = Grid;