@broxus/react-uikit 0.1.0

package/dist/esm/components/Text/index.js

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { getBreakpointsConfigClasses } from '../../utils';
+import { Component } from '../Component';
+const defaultElement = 'p';
+export function Text(props) {
+    const { align, className, color, column, decoration, dropcap, italic, size, transform, verticalAlign, weight, wrap, ...restProps } = props;
+    const alignClassName = React.useMemo(() => (typeof align === 'string'
+        ? `uk-text-${align}`
+        : getBreakpointsConfigClasses('uk', 'align', align)), [align]);
+    const columnClassName = React.useMemo(() => (typeof column === 'number'
+        ? `uk-column-1-${column}`
+        : getBreakpointsConfigClasses('uk', 'column-1', column)), [column]);
+    return (React.createElement(Component, { className: classNames(columnClassName, alignClassName, {
+            'uk-dropcap': dropcap,
+            [`uk-text-${color}`]: color !== undefined,
+            [`uk-text-${size}`]: size !== undefined,
+            [`uk-text-${transform}`]: transform !== undefined,
+            [`uk-text-${verticalAlign}`]: verticalAlign !== undefined,
+            [`uk-text-${weight}`]: weight !== undefined,
+            [`uk-text-${wrap}`]: wrap !== undefined,
+            'uk-text-decoration-none': decoration === 'none',
+            'uk-text-italic': italic,
+        }, className), component: defaultElement, ...restProps }));
+}

package/dist/esm/components/Tile/index.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { PolymorphicComponentProps } from '../Component';
+import './index.scss';
+export declare type TileOwnProps = {
+    preserveColor?: boolean;
+    size?: 'xsmall' | 'small' | 'large' | 'xlarge';
+    type?: 'default' | 'muted' | 'primary' | 'secondary' | 'tertiary';
+};
+export declare type TileProps<E extends React.ElementType = React.ElementType> = PolymorphicComponentProps<E, TileOwnProps>;
+declare const defaultElement = "div";
+export declare function Tile<E extends React.ElementType = typeof defaultElement>(props: TileProps<E>): JSX.Element;
+export {};

package/dist/esm/components/Tile/index.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { Component } from '../Component';
+import './index.scss';
+const defaultElement = 'div';
+export function Tile(props) {
+    const { className, preserveColor, size, type, ...restProps } = props;
+    return (React.createElement(Component, { className: classNames('uk-tile', {
+            [`uk-tile-${size}`]: size !== undefined,
+            [`uk-tile-${type}`]: type !== undefined,
+            'uk-preserve-color': preserveColor,
+        }, className), component: defaultElement, ...restProps }));
+}

package/dist/esm/components/Tile/index.scss

@@ -0,0 +1,279 @@
+// Name:            Tile
+// Description:     Component to create tiled boxes
+//
+// Component:       `uk-tile`
+//
+// Modifiers:       `uk-tile-xsmall`
+//                  `uk-tile-small`
+//                  `uk-tile-large`
+//                  `uk-tile-xlarge`
+//                  `uk-tile-default`
+//                  `uk-tile-muted`
+//                  `uk-tile-primary`
+//                  `uk-tile-secondary`
+//
+// States:          `uk-preserve-color`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import '../../styles/variables.scss';
+
+
+/* ========================================================================
+   Component: Tile
+ ========================================================================== */
+
+.uk-tile {
+    box-sizing: border-box;
+    display: flow-root;
+    padding: var(--tile-padding-vertical) var(--tile-padding-horizontal);
+    position: relative;
+    @if mixin-exists(hook-tile) {
+        @include hook-tile;
+    }
+}
+
+/* Phone landscape and bigger */
+@media (min-width: $breakpoint-small) {
+    .uk-tile {
+        padding-left: var(--tile-padding-horizontal-s);
+        padding-right: var(--tile-padding-horizontal-s);
+    }
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: $breakpoint-medium) {
+    .uk-tile {
+        padding: var(--tile-padding-vertical-m) var(--tile-padding-horizontal-m);
+    }
+}
+
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-tile > :last-child {
+    margin-bottom: 0;
+}
+
+
+/* Size modifiers
+ ========================================================================== */
+
+/*
+ * XSmall
+ */
+
+.uk-tile-xsmall {
+    padding-bottom: var(--tile-xsmall-padding-vertical);
+    padding-top: var(--tile-xsmall-padding-vertical);
+}
+
+/*
+ * Small
+ */
+
+.uk-tile-small {
+    padding-bottom: var(--tile-small-padding-vertical);
+    padding-top: var(--tile-small-padding-vertical);
+}
+
+/*
+ * Large
+ */
+
+.uk-tile-large {
+    padding-bottom: var(--tile-large-padding-vertical);
+    padding-top: var(--tile-large-padding-vertical);
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: $breakpoint-medium) {
+    .uk-tile-large {
+        padding-bottom: var(--tile-large-padding-vertical-m);
+        padding-top: var(--tile-large-padding-vertical-m);
+    }
+}
+
+
+/*
+ * XLarge
+ */
+
+.uk-tile-xlarge {
+    padding-bottom: var(--tile-xlarge-padding-vertical);
+    padding-top: var(--tile-xlarge-padding-vertical);
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: $breakpoint-medium) {
+    .uk-tile-xlarge {
+        padding-bottom: var(--tile-xlarge-padding-vertical-m);
+        padding-top: var(--tile-xlarge-padding-vertical-m);
+    }
+}
+
+
+/* Style modifiers
+ ========================================================================== */
+
+/*
+ * Default
+ */
+
+.uk-tile-default {
+    background: var(--tile-default-background);
+    @if mixin-exists(hook-tile-default) {
+        @include hook-tile-default;
+    }
+}
+
+.uk-tile-default.uk-tile-hover:hover {
+    @if mixin-exists(hook-tile-default-hover) {
+        @include hook-tile-default-hover;
+    }
+}
+
+/*
+ * Muted
+ */
+
+.uk-tile-muted {
+    background: var(--tile-muted-background);
+    @if mixin-exists(hook-tile-muted) {
+        @include hook-tile-muted;
+    }
+}
+
+.uk-tile-muted.uk-tile-hover:hover {
+    @if mixin-exists(hook-tile-muted-hover) {
+        @include hook-tile-muted-hover;
+    }
+}
+
+/*
+ * Primary
+ */
+
+.uk-tile-primary {
+    background: var(--tile-primary-background);
+    @if mixin-exists(hook-tile-primary) {
+        @include hook-tile-primary;
+    }
+}
+
+.uk-tile-primary.uk-tile-hover:hover {
+    @if mixin-exists(hook-tile-primary-hover) {
+        @include hook-tile-primary-hover;
+    }
+}
+
+// Color Mode
+@if $tile-primary-color-mode == light {
+    .uk-tile-primary:not(.uk-preserve-color) {
+        @extend .uk-light !optional;
+    }
+}
+
+@if $tile-primary-color-mode == dark {
+    .uk-tile-primary:not(.uk-preserve-color) {
+        @extend .uk-dark !optional;
+    }
+}
+
+
+/*
+ * Secondary
+ */
+
+.uk-tile-secondary {
+    background: var(--tile-secondary-background);
+    @if mixin-exists(hook-tile-secondary) {
+        @include hook-tile-secondary;
+    }
+}
+
+.uk-tile-secondary.uk-tile-hover:hover {
+    @if mixin-exists(hook-tile-secondary-hover) {
+        @include hook-tile-secondary-hover;
+    }
+}
+
+// Color Mode
+@if $tile-secondary-color-mode == light {
+    .uk-tile-secondary:not(.uk-preserve-color) {
+        @extend .uk-light !optional;
+    }
+}
+
+@if $tile-secondary-color-mode == dark {
+    .uk-tile-secondary:not(.uk-preserve-color) {
+        @extend .uk-dark !optional;
+    }
+}
+
+
+/*
+ * Tertiary
+ */
+
+.uk-tile-tertiary {
+    background: var(--tile-tertiary-background);
+    @if mixin-exists(hook-tile-tertiary) {
+        @include hook-tile-tertiary;
+    }
+}
+
+.uk-tile-tertiary.uk-tile-hover:hover {
+    @if mixin-exists(hook-tile-tertiary-hover) {
+        @include hook-tile-tertiary-hover;
+    }
+}
+
+// Color Mode
+@if $tile-tertiary-color-mode == light {
+    .uk-tile-tertiary:not(.uk-preserve-color) {
+        @extend .uk-light !optional;
+    }
+}
+
+@if $tile-tertiary-color-mode == dark {
+    .uk-tile-tertiary:not(.uk-preserve-color) {
+        @extend .uk-dark !optional;
+    }
+}
+
+
+// Hooks
+// ========================================================================
+
+@if mixin-exists(hook-tile-misc) {
+    @include hook-tile-misc;
+}
+
+
+// Vars
+// ========================================================================
+
+:root {
+    --tile-padding-horizontal: #{$tile-padding-horizontal};
+    --tile-padding-horizontal-s: var(--global-gutter);
+    --tile-padding-horizontal-m: var(--global-medium-gutter);
+    --tile-padding-vertical: var(--global-medium-margin);
+    --tile-padding-vertical-m: var(--global-large-margin);
+    --tile-xsmall-padding-vertical: var(--global-margin);
+    --tile-small-padding-vertical: var(--global-medium-margin);
+    --tile-large-padding-vertical: var(--global-large-margin);
+    --tile-large-padding-vertical-m: var(--global-xlarge-margin);
+    --tile-xlarge-padding-vertical: var(--global-xlarge-margin);
+    --tile-xlarge-padding-vertical-m: calc(var(--global-large-margin) + var(--global-xlarge-margin));
+    --tile-default-background: var(--global-background);
+    --tile-muted-background: var(--global-muted-background);
+    --tile-primary-background: var(--global-primary-background);
+    --tile-secondary-background: var(--global-secondary-background);
+    --tile-tertiary-background: var(--global-tertiary-background);
+}

package/dist/esm/components/Width/Width.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import type { PolymorphicComponentProps } from '../Component';
+import type { WidthBreakpointsConfig, WidthSize } from './types';
+export interface WidthOwnProps extends WidthBreakpointsConfig {
+    size?: WidthSize;
+}
+export declare type WidthProps<E extends React.ElementType = React.ElementType> = PolymorphicComponentProps<E, WidthOwnProps>;
+declare const defaultElement = "div";
+export declare function Width<E extends React.ElementType = typeof defaultElement>(props: WidthProps<E>): JSX.Element;
+export {};

package/dist/esm/components/Width/Width.js

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { Component } from '../Component';
+import { getWidthClassname } from './utils';
+const defaultElement = 'div';
+export function Width(props) {
+    const { className, size, s, m, l, xl, ...restProps } = props;
+    return (React.createElement(Component, { className: classNames(getWidthClassname(size, 'uk'), getWidthClassname({ l, m, s, xl }, 'uk'), className), component: defaultElement, ...restProps }));
+}

package/dist/esm/components/Width/index.d.ts

@@ -0,0 +1,4 @@
+import './index.scss';
+export * from './Width';
+export * from './types';
+export * from './utils';

package/dist/esm/components/Width/index.js

@@ -0,0 +1,4 @@
+import './index.scss';
+export * from './Width';
+export * from './types';
+export * from './utils';