@broxus/react-uikit 0.1.0

package/dist/cjs/styles/vars.scss

@@ -0,0 +1,122 @@
+// Name:            Vars
+// Description:     Define.scss variables via the `var()` CSS function
+//
+// ========================================================================
+
+@import 'variables.scss';
+
+:root, ::after, ::before {
+    // Breakpoints
+    // ========================================================================
+
+    --breakpoint-xsmall: #{$breakpoint-xsmall};
+    --breakpoint-small: #{$breakpoint-small};
+    --breakpoint-medium: #{$breakpoint-medium};
+    --breakpoint-large: #{$breakpoint-large};
+    --breakpoint-xlarge: #{$breakpoint-xlarge};
+    --breakpoint-xsmall-max: #{$breakpoint-small - 1};
+    --breakpoint-small-max: #{$breakpoint-medium - 1};
+    --breakpoint-medium-max: #{$breakpoint-large - 1};
+    --breakpoint-large-max: #{$breakpoint-xlarge - 1};
+
+
+    // Global variables
+    // ========================================================================
+
+    //
+    // Typography
+    //
+    --global-font-family: #{$global-font-family};
+    --global-font-size: #{$global-font-size};
+    --global-font-weight: #{$global-font-weight};
+    --global-bold-font-weight: #{$global-bold-font-weight};
+    --global-line-height: #{$global-line-height};
+    --global-2xlarge-font-size: #{$global-2xlarge-font-size};
+    --global-xlarge-font-size: #{$global-xlarge-font-size};
+    --global-large-font-size: #{$global-large-font-size};
+    --global-medium-font-size: #{$global-medium-font-size};
+    --global-small-font-size: #{$global-small-font-size};
+    --global-xsmall-font-size: #{$global-xsmall-font-size};
+    --global-2xsmall-font-size: #{$global-2xsmall-font-size};
+
+    //
+    // Colors
+    //
+
+    --global-color: #{$global-color};
+    --global-emphasis-color: #{$global-emphasis-color};
+    --global-muted-color: #{$global-muted-color};
+    --global-link-color: #{$global-link-color};
+    --global-link-hover-color: #{$global-link-hover-color};
+    --global-inverse-color: #{$global-inverse-color};
+
+    //
+    // Backgrounds
+    //
+
+    --global-background: #{$global-background};
+    --global-default-background: #{$global-default-background};
+    --global-muted-background: #{$global-muted-background};
+    --global-primary-background: #{$global-primary-background};
+    --global-secondary-background: #{$global-secondary-background};
+    --global-tertiary-background: #{$global-tertiary-background};
+    --global-success-background: #{$global-success-background};
+    --global-warning-background: #{$global-warning-background};
+    --global-danger-background: #{$global-danger-background};
+
+    //
+    // Borders
+    //
+
+    --global-border-width: #{$global-border-width};
+    --global-border-style: #{$global-border-style};
+    --global-border: #{$global-border};
+    --global-muted-border: #{$global-muted-border};
+    --global-primary-border: #{$global-primary-border};
+    --global-secondary-border: #{$global-secondary-border};
+    --global-tertiary-border: #{$global-tertiary-border};
+    --global-border-radius: #{$global-border-radius};
+
+    //
+    // Box-Shadows
+    //
+
+    --global-small-box-shadow: #{$global-small-box-shadow};
+    --global-medium-box-shadow: #{$global-medium-box-shadow};
+    --global-large-box-shadow: #{$global-large-box-shadow};
+    --global-xlarge-box-shadow: #{$global-xlarge-box-shadow};
+
+    //
+    // Spacings
+    //
+
+    --global-margin: #{$global-margin};
+    --global-xsmall-margin: #{$global-xsmall-margin};
+    --global-small-margin: #{$global-small-margin};
+    --global-medium-margin: #{$global-medium-margin};
+    --global-large-margin: #{$global-large-margin};
+    --global-xlarge-margin: #{$global-xlarge-margin};
+    --global-gutter: #{$global-gutter};
+    --global-xsmall-gutter: #{$global-xsmall-gutter};
+    --global-small-gutter: #{$global-small-gutter};
+    --global-medium-gutter: #{$global-medium-gutter};
+    --global-large-gutter: #{$global-large-gutter};
+    --global-xlarge-gutter: #{$global-xlarge-gutter};
+
+    //
+    // Controls
+    //
+
+    --global-control-height: #{$global-control-height};
+    --global-control-xsmall-height: #{$global-control-xsmall-height};
+    --global-control-small-height: #{$global-control-small-height};
+    --global-control-medium-height: #{$global-control-medium-height};
+    --global-control-large-height: #{$global-control-large-height};
+    --global-control-xlarge-height: #{$global-control-xlarge-height};
+
+    //
+    // Z-index
+    //
+
+    --global-z-index: #{$global-z-index};
+}

package/dist/cjs/styles/visibility.scss

@@ -0,0 +1,184 @@
+// Name:            Visibility
+// Description:     Utilities to show or hide content on breakpoints, hover or touch
+//
+// Component:       `uk-hidden-*`
+//                  `uk-visible-*`
+//                  `uk-invisible`
+//                  `uk-visible-toggle`
+//                  `uk-hidden-hover`
+//                  `uk-invisible-hover`
+//                  `uk-hidden-touch`
+//                  `uk-hidden-notouch`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import 'variables.scss';
+
+
+/* ========================================================================
+   Component: Visibility
+ ========================================================================== */
+
+/*
+ * Hidden
+ * `hidden` attribute also set here to make it stronger
+ */
+
+[hidden],
+.uk-hidden { display: none !important; }
+
+/* Phone landscape and bigger */
+@media (min-width: $breakpoint-small) {
+
+    .uk-hidden\@s { display: none !important; }
+
+}
+
+/* Tablet landscape and bigger */
+@media (min-width: $breakpoint-medium) {
+
+    .uk-hidden\@m { display: none !important; }
+
+}
+
+/* Desktop and bigger */
+@media (min-width: $breakpoint-large) {
+
+    .uk-hidden\@l { display: none !important; }
+
+}
+
+/* Large screen and bigger */
+@media (min-width: $breakpoint-xlarge) {
+
+    .uk-hidden\@xl { display: none !important; }
+
+}
+
+/*
+ * Visible
+ */
+
+/* Phone portrait and smaller */
+@media (max-width: $breakpoint-xsmall-max) {
+
+    .uk-visible\@s { display: none !important; }
+
+}
+
+/* Phone landscape and smaller */
+@media (max-width: $breakpoint-small-max) {
+
+    .uk-visible\@m { display: none !important; }
+
+}
+
+/* Tablet landscape and smaller */
+@media (max-width: $breakpoint-medium-max) {
+
+    .uk-visible\@l { display: none !important; }
+
+}
+
+/* Desktop and smaller */
+@media (max-width: $breakpoint-large-max) {
+
+    .uk-visible\@xl { display: none !important; }
+
+}
+
+
+/* Visibility
+ ========================================================================== */
+
+.uk-invisible { visibility: hidden !important; }
+
+
+/* Toggle (Hover + Focus)
+ ========================================================================== */
+
+/*
+ * Hidden
+ * 1. The toggle is triggered on touch devices using `:focus` and tabindex
+ * 2. The target stays visible if any element within receives focus through keyboard
+ *    Doesn't work in Edge, yet.
+ * 3. Can't use `display: none` nor `visibility: hidden` because both are not focusable.
+ *
+ */
+
+/* 1 + 2 */
+.uk-visible-toggle:not(:hover):not(:focus) .uk-hidden-hover:not(:focus-within) {
+    height: 0 !important;
+    margin: 0 !important;
+    overflow: hidden !important;
+    padding: 0 !important;
+
+    /* 3 */
+    position: absolute !important;
+    width: 0 !important;
+}
+
+/*
+ * Invisible
+ */
+
+/* 1 + 2 */
+.uk-visible-toggle:not(:hover):not(:focus) .uk-invisible-hover:not(:focus-within) {
+    /* 3 */
+    opacity: 0 !important;
+}
+
+/*
+ * 1. Prevent tab highlighting on iOS.
+ */
+
+.uk-visible-toggle {
+    /* 1 */
+    -webkit-tap-highlight-color: transparent;
+}
+
+/*
+ * Remove outline for `tabindex`
+ */
+
+.uk-visible-toggle:focus { outline: none; }
+
+
+/* Touch
+ ========================================================================== */
+
+/*
+ * Hide if primary pointing device has limited accuracy, e.g. a touch screen.
+ * Works on mobile browsers: Safari, Chrome and Android browser
+ */
+
+@media (pointer: coarse) {
+    .uk-hidden-touch { display: none !important; }
+}
+
+/*
+ * Hide if primary pointing device is accurate, e.g. mouse.
+ * 1. Fallback for IE11 and Firefox, because `pointer` is not supported
+ * 2. Reset if supported
+ */
+
+/* 1 */
+.uk-hidden-notouch { display: none !important; }
+
+@media (pointer: coarse) {
+    .uk-hidden-notouch { display: block !important; }
+}
+
+
+// Hooks
+// ========================================================================
+
+@if mixin-exists(hook-visibility-misc) {
+    @include hook-visibility-misc();
+}
+
+// @mixin hook-visibility-misc() {}

package/dist/cjs/styles/width.scss

@@ -0,0 +1 @@
+@import '../components/Width/index.scss';

package/dist/cjs/types.d.ts

@@ -0,0 +1,10 @@
+export declare type BreakpointsConfig<T> = {
+    default?: T;
+    xs?: T;
+    s?: T;
+    m?: T;
+    l?: T;
+    xl?: T;
+};
+export declare type HeadingSize = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+export declare type Direction = 'ltr' | 'rtl';

package/dist/cjs/types.js

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

package/dist/cjs/utils/get-breakpoints-config-classes.d.ts

@@ -0,0 +1,2 @@
+import { BreakpointsConfig } from '../types';
+export declare function getBreakpointsConfigClasses<E>(prefixCls: string, coreCls: string, config?: BreakpointsConfig<E>): string[];

package/dist/cjs/utils/get-breakpoints-config-classes.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getBreakpointsConfigClasses = void 0;
+function getBreakpointsConfigClasses(prefixCls, coreCls, config = {}) {
+    return Object.entries(config).map(([key, value]) => (value ? `${prefixCls}-${coreCls}-${value}${key !== 'default' ? `@${key}` : ''}` : ''));
+}
+exports.getBreakpointsConfigClasses = getBreakpointsConfigClasses;

package/dist/cjs/utils/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './useForceUpdate';

package/dist/cjs/utils/hooks/index.js

@@ -0,0 +1,17 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useForceUpdate"), exports);

package/dist/cjs/utils/hooks/useForceUpdate.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare function useForceUpdate(): React.DispatchWithoutAction;

package/dist/cjs/utils/hooks/useForceUpdate.js

@@ -0,0 +1,32 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useForceUpdate = void 0;
+const React = __importStar(require("react"));
+function useForceUpdate() {
+    const [, forceUpdate] = React.useReducer(x => x + 1, 0);
+    return forceUpdate;
+}
+exports.useForceUpdate = useForceUpdate;

package/dist/cjs/utils/index.d.ts

@@ -0,0 +1,4 @@
+export * from './hooks';
+export * from './get-breakpoints-config-classes';
+export * from './modal';
+export * from './motion';

package/dist/cjs/utils/index.js

@@ -0,0 +1,20 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./hooks"), exports);
+__exportStar(require("./get-breakpoints-config-classes"), exports);
+__exportStar(require("./modal"), exports);
+__exportStar(require("./motion"), exports);

package/dist/cjs/utils/modal.d.ts

@@ -0,0 +1,2 @@
+export declare function addModalMode(): void;
+export declare function removeModalMode(): void;

package/dist/cjs/utils/modal.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.removeModalMode = exports.addModalMode = void 0;
+const js_utils_1 = require("@broxus/js-utils");
+function addModalMode() {
+    (0, js_utils_1.addClass)(document?.documentElement, 'uk-modal-page');
+}
+exports.addModalMode = addModalMode;
+function removeModalMode() {
+    (0, js_utils_1.removeClass)(document?.documentElement, 'uk-modal-page');
+}
+exports.removeModalMode = removeModalMode;

package/dist/cjs/utils/motion.d.ts

@@ -0,0 +1,3 @@
+import { CSSMotionProps } from 'rc-motion';
+export declare const collapseMotion: CSSMotionProps;
+export declare const getTransitionName: (rootPrefixCls: string, motion: string, transitionName?: string) => string;

package/dist/cjs/utils/motion.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTransitionName = exports.collapseMotion = void 0;
+const getCollapsedHeight = () => ({ height: 0, opacity: 0 });
+const getRealHeight = node => ({ height: node.scrollHeight, opacity: 1 });
+const getCurrentHeight = node => ({ height: node ? node.offsetHeight : 0 });
+const skipOpacityTransition = (_, event) => (event?.deadline === true
+    || event.propertyName === 'height');
+exports.collapseMotion = {
+    leavedClassName: 'uk-hidden',
+    motionDeadline: 300,
+    motionName: 'uk-motion-collapse',
+    onAppearActive: getRealHeight,
+    onAppearEnd: skipOpacityTransition,
+    onAppearStart: getCollapsedHeight,
+    onEnterActive: getRealHeight,
+    onEnterEnd: skipOpacityTransition,
+    onEnterStart: getCollapsedHeight,
+    onLeaveActive: getCollapsedHeight,
+    onLeaveEnd: skipOpacityTransition,
+    onLeaveStart: getCurrentHeight,
+};
+const getTransitionName = (rootPrefixCls, motion, transitionName) => {
+    if (transitionName !== undefined) {
+        return transitionName;
+    }
+    return `${rootPrefixCls}-${motion}`;
+};
+exports.getTransitionName = getTransitionName;

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

@@ -0,0 +1,5 @@
+import type { CollapseProps } from 'rc-collapse/lib/interface';
+export interface AccordionProps extends CollapseProps {
+    direction?: string;
+}
+export declare function Accordion(props: AccordionProps): JSX.Element;

package/dist/esm/components/Accordion/Accordion.js

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import Collapse from 'rc-collapse';
+import { collapseMotion } from '../../utils';
+import { useConfig } from '../ConfrigProvider';
+export function Accordion(props) {
+    const config = useConfig();
+    const { direction, prefixCls = `${config.prefixCls}-accordion`, ...restProps } = props;
+    return (React.createElement(Collapse, { className: classNames({
+            [`${prefixCls}-rtl`]: direction === 'rtl',
+        }), openMotion: collapseMotion, prefixCls: prefixCls, ...restProps }));
+}

package/dist/esm/components/Accordion/Item.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import type { CollapsePanelProps } from 'rc-collapse/lib/interface';
+export declare type AccordionItemProps = React.PropsWithChildren<Omit<CollapsePanelProps, 'prefixCls'>>;
+export declare function Item(props: AccordionItemProps): JSX.Element;
+export declare namespace Item {
+    var displayName: string;
+}

package/dist/esm/components/Accordion/Item.js

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { Panel } from 'rc-collapse';
+import { Icon } from '../Icon';
+export function Item(props) {
+    const { expandIcon, ...restProps } = props;
+    const mergedExpandIcon = React.useMemo(() => (expandIcon || (({ isActive }) => (React.createElement(Icon, { icon: isActive ? 'expand_more' : 'chevron_right' })))), [expandIcon]);
+    return (React.createElement(Panel, { expandIcon: mergedExpandIcon, ...restProps }));
+}
+if (process.env.NODE_ENV !== 'production') {
+    Item.displayName = 'Accordion.Item';
+}

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { Item } from './Item';
+import type { AccordionProps } from './Accordion';
+import './index.scss';
+export interface CompoundedAccordion extends React.FunctionComponent<AccordionProps> {
+    Item: typeof Item;
+}
+export declare const Accordion: CompoundedAccordion;

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

@@ -0,0 +1,5 @@
+import { Accordion as InternalAccordion } from './Accordion';
+import { Item } from './Item';
+import './index.scss';
+export const Accordion = InternalAccordion;
+Accordion.Item = Item;