@broxus/react-uikit 0.4.7 → 0.5.0

package/dist/cjs/components/Form/context.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.FormContext = void 0;
+const React = __importStar(require("react"));
+exports.FormContext = React.createContext({
+    getRootCls() {
+        return 'uk-form';
+    },
+});

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

@@ -7,7 +7,7 @@ import { Label } from '../../components/Form/Label';
 import { Legend } from '../../components/Form/Legend';
 import './index.scss';
 export type { FormProps };
-export interface Form extends React.MemoExoticComponent<React.ForwardRefExoticComponent<FormProps>> {
+export interface Form extends React.FunctionComponent<FormProps> {
     Controls: typeof Controls;
     ControlsText: typeof ControlsText;
     Fieldset: typeof Fieldset;

package/dist/cjs/components/List/List.d.ts

@@ -5,4 +5,4 @@ export interface ListProps extends React.HTMLAttributes<HTMLUListElement> {
     size?: 'large' | 'collapse';
     type?: 'bullet' | 'disc' | 'divider' | 'striped' | 'circle' | 'square' | 'decimal' | 'hyphen';
 }
-export declare const List: React.MemoExoticComponent<(props: ListProps) => React.JSX.Element>;
+export declare function List(props: ListProps): React.JSX.Element;

package/dist/cjs/components/List/List.js

@@ -30,7 +30,7 @@ exports.List = void 0;
 const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const ConfigProvider_1 = require("../../components/ConfigProvider");
-exports.List = React.memo((props) => {
+function List(props) {
     const config = (0, ConfigProvider_1.useConfig)();
     const { className, color, prefixCls = config.prefixCls, size, type, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'list'), [config, prefixCls]);
@@ -39,4 +39,5 @@ exports.List = React.memo((props) => {
             [`${rootCls}-${size}`]: size !== undefined,
             [`${rootCls}-${type}`]: type !== undefined,
         }, className), ...restProps }));
-});
+}
+exports.List = List;

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

@@ -3,7 +3,7 @@ import { Item } from '../../components/List/Item';
 import { type ListProps } from '../../components/List/List';
 import './index.scss';
 export type { ListProps };
-export interface List extends React.MemoExoticComponent<React.FunctionComponent<ListProps>> {
+export interface List extends React.FunctionComponent<ListProps> {
     Item: typeof Item;
 }
 export declare const List: List;

package/dist/cjs/components/Subnav/Item.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+type Props = React.LiHTMLAttributes<HTMLLIElement>;
+export declare function Item(props: Props): React.JSX.Element;
+export declare namespace Item {
+    var displayName: string;
+}
+export {};

package/dist/cjs/components/Subnav/Item.js

@@ -0,0 +1,34 @@
+"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.Item = void 0;
+const React = __importStar(require("react"));
+function Item(props) {
+    return React.createElement("li", { ...props });
+}
+exports.Item = Item;
+if (process.env.NODE_ENV !== 'production') {
+    Item.displayName = 'Subnav.Item';
+}

package/dist/cjs/components/Subnav/Subnav.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export interface SubnavProps extends React.HTMLAttributes<HTMLUListElement> {
+    prefixCls?: string;
+    type?: 'divider' | 'pill';
+}
+export declare function Subnav(props: SubnavProps): React.JSX.Element;

package/dist/cjs/components/{ComponentProvider/index.js → Subnav/Subnav.js}

@@ -22,28 +22,20 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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.ComponentProvider = exports.useComponentContext = exports.ComponentContext = void 0;
+exports.Subnav = void 0;
+const classnames_1 = __importDefault(require("classnames"));
 const React = __importStar(require("react"));
 const ConfigProvider_1 = require("../../components/ConfigProvider");
-const hooks_1 = require("../../hooks");
-exports.ComponentContext = React.createContext({
-    getRootCls() {
-        return undefined;
-    },
-});
-function useComponentContext() {
-    return (0, hooks_1.useContext)(exports.ComponentContext);
-}
-exports.useComponentContext = useComponentContext;
-function ComponentProvider(props) {
+function Subnav(props) {
     const config = (0, ConfigProvider_1.useConfig)();
-    const { children, component, prefixCls = config.prefixCls } = props;
-    const context = React.useMemo(() => ({
-        getRootCls() {
-            return config.getRootPrefixCls(prefixCls || config.prefixCls, component);
-        },
-    }), [component, config, prefixCls]);
-    return React.createElement(exports.ComponentContext.Provider, { value: context }, children);
+    const { className, prefixCls = config.prefixCls, type, ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'subnav'), [config, prefixCls]);
+    return (React.createElement("ul", { className: (0, classnames_1.default)(rootCls, {
+            [`${rootCls}-${type}`]: type !== undefined,
+        }, className), ...restProps, "data-uk-margin": "" }));
 }
-exports.ComponentProvider = ComponentProvider;
+exports.Subnav = Subnav;

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

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

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Subnav = void 0;
+const Item_1 = require("../../components/Subnav/Item");
+const Subnav_1 = require("../../components/Subnav/Subnav");
+require("./index.scss");
+exports.Subnav = Subnav_1.Subnav;
+exports.Subnav.Item = Item_1.Item;

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

@@ -0,0 +1,278 @@
+// Name:            List
+// Description:     Styles for lists
+//
+// Component:       `uk-list`
+//
+// Modifiers:       `uk-list-disc`
+//                  `uk-list-circle`
+//                  `uk-list-square`
+//                  `uk-list-decimal`
+//                  `uk-list-hyphen`
+//                  `uk-list-muted`
+//                  `uk-list-emphasis`
+//                  `uk-list-primary`
+//                  `uk-list-secondary`
+//                  `uk-list-bullet`
+//                  `uk-list-divider`
+//                  `uk-list-striped`
+//                  `uk-list-large`
+//                  `uk-list-collapse`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import '../../styles/variables.scss';
+
+
+/* ========================================================================
+   Component: List
+ ========================================================================== */
+
+.uk-list {
+    list-style: none;
+    padding: 0;
+}
+
+/*
+ * Remove margin from the last-child
+ */
+
+.uk-list > * > :last-child {
+    margin-bottom: 0;
+}
+
+/*
+ * Style
+ */
+
+.uk-list > :nth-child(n+2),
+.uk-list > * > ul {
+    margin-top: var(--list-margin-top);
+}
+
+
+/* Marker modifiers
+ * Moving `::marker` inside `::before` to style it differently
+ * To style the `::marker` is currently only supported in Firefox and Safari
+ ========================================================================== */
+
+.uk-list-disc > *,
+.uk-list-circle > *,
+.uk-list-square > *,
+.uk-list-decimal > *,
+.uk-list-hyphen > * {
+    padding-left: var(--list-padding-left);
+}
+
+/*
+ * Type modifiers
+ */
+
+.uk-list-decimal {
+    counter-reset: decimal;
+}
+
+.uk-list-decimal > * {
+    counter-increment: decimal;
+}
+
+[class*='uk-list'] > ::before {
+    content: '';
+    display: list-item;
+    height: var(--list-marker-height);
+    left: calc(var(--list-padding-left) * -1);
+    list-style-position: inside;
+    margin-bottom: calc(var(--list-marker-height) * -1);
+    position: relative;
+    text-align: right;
+    width: var(--list-padding-left);
+}
+
+.uk-list-disc > ::before {
+    list-style-type: disc;
+}
+
+.uk-list-circle > ::before {
+    list-style-type: circle;
+}
+
+.uk-list-square > ::before {
+    list-style-type: square;
+}
+
+.uk-list-decimal > ::before {
+    content: counter(decimal, decimal) '\200A.\00A0';
+}
+
+.uk-list-hyphen > ::before {
+    content: '–\00A0\00A0';
+}
+
+/*
+ * Color modifiers
+ */
+
+.uk-list-muted > ::before {
+    color: var(--list-muted-color) !important;
+}
+
+.uk-list-emphasis > ::before {
+    color: var(--list-emphasis-color) !important;
+}
+
+.uk-list-primary > ::before {
+    color: var(--list-primary-color) !important;
+}
+
+.uk-list-secondary > ::before {
+    color: var(--list-secondary-color) !important;
+}
+
+
+/* Image bullet modifier
+ ========================================================================== */
+
+.uk-list-bullet > * {
+    padding-left: var(--list-padding-left);
+}
+
+.uk-list-bullet > ::before {
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+    content: '';
+    height: var(--list-marker-height);
+    left: calc(var(--list-padding-left) * -1);
+    margin-bottom: calc(var(--list-marker-height) * -1);
+    position: relative;
+    width: var(--list-padding-left);
+    @if mixin-exists(svg-fill) {
+        @include svg-fill($list-bullet-icon-image-path, '#000', $list-bullet-icon-color);
+    }
+}
+
+
+/* Style modifiers
+ ========================================================================== */
+
+/*
+ * Divider
+ */
+
+.uk-list-divider > :nth-child(n+2) {
+    border-top: var(--list-divider-border-width) solid var(--list-divider-border);
+    margin-top: var(--list-divider-margin-top);
+    padding-top: var(--list-divider-margin-top);
+    @if mixin-exists(hook-list-divider) {
+        @include hook-list-divider;
+    }
+}
+
+/*
+ * Striped
+ */
+
+.uk-list-striped > * {
+    padding: var(--list-striped-padding-vertical) var(--list-striped-padding-horizontal);
+    @if mixin-exists(hook-list-striped) {
+        @include hook-list-striped;
+    }
+}
+
+.uk-list-striped > :nth-of-type(odd) {
+    background: var(--list-striped-background);
+}
+
+.uk-list-striped > :nth-child(n+2) {
+    margin-top: 0;
+}
+
+
+/* Size modifier
+ ========================================================================== */
+
+.uk-list-large > :nth-child(n+2),
+.uk-list-large > * > ul {
+    margin-top: var(--list-large-margin-top);
+}
+
+.uk-list-collapse > :nth-child(n+2),
+.uk-list-collapse > * > ul {
+    margin-top: 0;
+}
+
+/*
+ * Divider
+ */
+
+.uk-list-large.uk-list-divider > :nth-child(n+2) {
+    margin-top: var(--list-large-divider-margin-top);
+    padding-top: var(--list-large-divider-margin-top);
+}
+
+.uk-list-collapse.uk-list-divider > :nth-child(n+2) {
+    margin-top: 0;
+    padding-top: 0;
+}
+
+/*
+ * Striped
+ */
+
+.uk-list-large.uk-list-striped > * {
+    padding: var(--list-large-striped-padding-vertical) var(--list-large-striped-padding-horizontal);
+}
+
+.uk-list-collapse.uk-list-striped > * {
+    padding-bottom: 0;
+    padding-top: 0;
+}
+
+.uk-list-large.uk-list-striped > :nth-child(n+2),
+.uk-list-collapse.uk-list-striped > :nth-child(n+2) {
+    margin-top: 0;
+}
+
+
+// Hooks
+// ========================================================================
+
+@if mixin-exists(hook-list-misc) {
+    @include hook-list-misc;
+}
+
+
+// Vars
+// ========================================================================
+
+:root {
+    --list-margin-top: var(--global-small-margin);
+    --list-padding-left: #{$list-padding-left};
+    --list-marker-height: calc(var(--global-line-height) * 1em);
+    --list-muted-color: var(--global-muted-color);
+    --list-emphasis-color: var(--global-emphasis-color);
+    --list-primary-color: var(--global-primary-background);
+    --list-secondary-color: var(--global-secondary-background);
+    --list-bullet-icon-color: var(--global-color);
+    --list-divider-margin-top: var(--global-small-margin);
+    --list-divider-border-width: var(--global-border-width);
+    --list-divider-border: var(--global-border);
+    --list-striped-padding-vertical: var(--global-small-margin);
+    --list-striped-padding-horizontal: var(--global-small-margin);
+    --list-striped-background: var(--global-muted-background);
+    --list-large-margin-top: var(--global-margin);
+    --list-large-divider-margin-top: var(--global-margin);
+    --list-large-striped-padding-vertical: var(--global-margin);
+    --list-large-striped-padding-horizontal: var(--global-small-margin);
+
+    // Inverse
+    --inverse-list-muted-color: var(--inverse-global-muted-color);
+    --inverse-list-emphasis-color: var(--inverse-global-emphasis-color);
+    --inverse-list-primary-color: var(--inverse-global-primary-background);
+    --inverse-list-secondary-color: var(--inverse-global-primary-background);
+    --inverse-list-divider-border: var(--inverse-global-border);
+    --inverse-list-striped-background: var(--inverse-global-muted-background);
+    --inverse-list-bullet-icon-color: var(--inverse-global-color);
+}

package/dist/cjs/index.d.ts

@@ -32,7 +32,6 @@ export * from './components/Dropdown';
 export * from './components/Modal';
 export * from './components/Drawer';
 export * from './components/Component';
-export * from './components/ComponentProvider';
 export * from './components/ConfigProvider';
 export * from './components/Width';
 export * from './components/Text';

package/dist/cjs/index.js

@@ -48,7 +48,6 @@ __exportStar(require("./components/Dropdown"), exports);
 __exportStar(require("./components/Modal"), exports);
 __exportStar(require("./components/Drawer"), exports);
 __exportStar(require("./components/Component"), exports);
-__exportStar(require("./components/ComponentProvider"), exports);
 __exportStar(require("./components/ConfigProvider"), exports);
 __exportStar(require("./components/Width"), exports);
 __exportStar(require("./components/Text"), exports);

package/dist/cjs/styles/margin.scss

@@ -298,6 +298,7 @@
 
 :root {
     --margin: var(--global-margin);
+    --xsmall-margin: var(--global-xsmall-margin);
     --small-margin: var(--global-small-margin);
     --medium-margin: var(--global-medium-margin);
     --large-margin: var(--global-medium-margin);