@broxus/react-uikit 0.8.1 → 0.9.0

package/dist/cjs/components/Article/Meta.d.ts

@@ -3,7 +3,7 @@ import { type PolymorphicProps } from '../../components/Component';
 export type ArticleMetaOwnProps = {
     prefixCls?: string;
 };
-export type ArticleMetaProps<E extends React.ElementType> = React.PropsWithChildren<ArticleMetaOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, ArticleMetaOwnProps>;
+export type ArticleMetaProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<ArticleMetaOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, ArticleMetaOwnProps>;
 declare const defaultElement = "p";
 export declare function Meta<E extends React.ElementType = typeof defaultElement>(props: ArticleMetaProps<E>): React.JSX.Element;
 export declare namespace Meta {

package/dist/cjs/components/Article/Title.d.ts

@@ -3,7 +3,7 @@ import { type PolymorphicProps } from '../../components/Component';
 export type ArticleTitleOwnProps = {
     prefixCls?: string;
 };
-export type ArticleTitleProps<E extends React.ElementType> = React.PropsWithChildren<ArticleTitleOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, ArticleTitleOwnProps>;
+export type ArticleTitleProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<ArticleTitleOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, ArticleTitleOwnProps>;
 declare const defaultElement = "h1";
 export declare function Title<E extends React.ElementType = typeof defaultElement>(props: ArticleTitleProps<E>): React.JSX.Element;
 export declare namespace Title {

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

@@ -4,7 +4,7 @@ import './index.scss';
 export type BadgeOwnProps = {
     prefixCls?: string;
 };
-export type BadgeProps<E extends React.ElementType> = React.PropsWithChildren<BadgeOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, BadgeOwnProps>;
+export type BadgeProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<BadgeOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, BadgeOwnProps>;
 declare const defaultElement = "span";
 export declare function Badge<E extends React.ElementType = typeof defaultElement>(props: BadgeProps<E>): React.JSX.Element;
 export declare namespace Badge {

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

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { type PolymorphicProps } from '../../components/Component';
-export interface AnchorButtonProps extends Omit<React.AnchorHTMLAttributes<any>, 'onClick'> {
+export interface AnchorButtonProps extends Omit<React.AnchorHTMLAttributes<React.ElementType>, 'onClick'> {
     href: string;
     target?: string;
     onClick?: React.MouseEventHandler<HTMLElement>;
 }
-export interface NativeButtonProps extends Omit<React.ButtonHTMLAttributes<any>, 'type' | 'onClick'> {
+export interface NativeButtonProps extends Omit<React.ButtonHTMLAttributes<React.ElementType>, 'type' | 'onClick'> {
     htmlType?: 'button' | 'reset' | 'submit';
     onClick?: React.MouseEventHandler<HTMLElement>;
 }
@@ -16,5 +16,5 @@ export interface ButtonOwnProps extends Partial<AnchorButtonProps>, Partial<Nati
     size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
     type?: 'default' | 'primary' | 'secondary' | 'tertiary' | 'danger' | 'link' | 'text';
 }
-export type ButtonProps<E extends React.ElementType = any> = React.PropsWithChildren<ButtonOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, ButtonOwnProps>;
-export declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps<any>, "ref"> & React.RefAttributes<any>>;
+export type ButtonProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<ButtonOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, ButtonOwnProps>;
+export declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps<React.ElementType<any>>, "ref"> & React.RefAttributes<any>>;

package/dist/cjs/components/Button/Button.js

@@ -47,7 +47,7 @@ exports.Button = React.forwardRef((props, ref) => {
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'button'), [config, prefixCls]);
     const className = React.useMemo(() => (0, classnames_1.default)(rootCls, {
         [`${rootCls}-${type}`]: type !== undefined,
-        [`${rootCls}-ghost`]: ghost !== undefined,
+        [`${rootCls}-ghost`]: ghost === true,
         [`${rootCls}-${size}`]: size !== undefined,
         [`${rootCls}-${shape}`]: shape !== undefined && ['circle', 'round'].includes(shape),
     }, restProps.className), [rootCls, type, ghost, size, shape, restProps.className]);

package/dist/cjs/components/Card/Badge.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type BadgeProps } from '../../components/Badge';
-export type CardBadgeProps<E extends React.ElementType> = BadgeProps<E>;
+export type CardBadgeProps<E extends React.ElementType = React.ElementType> = BadgeProps<E>;
 declare const defaultElement = "span";
 export declare function Badge<E extends React.ElementType = typeof defaultElement>(props: CardBadgeProps<E>): React.JSX.Element;
 export declare namespace Badge {

package/dist/cjs/components/Card/Body.d.ts

@@ -3,7 +3,7 @@ import { type PolymorphicProps } from '../../components/Component';
 export type CardBodyOwnProps = {
     prefixCls?: string;
 };
-export type CardBodyProps<E extends React.ElementType> = React.PropsWithChildren<CardBodyOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, CardBodyOwnProps>;
+export type CardBodyProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<CardBodyOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, CardBodyOwnProps>;
 declare const defaultElement = "div";
 export declare function Body<E extends React.ElementType = typeof defaultElement>(props: CardBodyProps<E>): React.JSX.Element;
 export declare namespace Body {

package/dist/cjs/components/Card/Footer.d.ts

@@ -3,7 +3,7 @@ import { type PolymorphicProps } from '../../components/Component';
 export type CardFooterOwnProps = {
     prefixCls?: string;
 };
-export type CardFooterProps<E extends React.ElementType> = React.PropsWithChildren<CardFooterOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, CardFooterOwnProps>;
+export type CardFooterProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<CardFooterOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, CardFooterOwnProps>;
 declare const defaultElement = "footer";
 export declare function Footer<E extends React.ElementType = typeof defaultElement>(props: CardFooterProps<E>): React.JSX.Element;
 export declare namespace Footer {

package/dist/cjs/components/Card/Header.d.ts

@@ -3,7 +3,7 @@ import { type PolymorphicProps } from '../../components/Component';
 export type CardHeaderOwnProps = {
     prefixCls?: string;
 };
-export type CardHeaderProps<E extends React.ElementType> = React.PropsWithChildren<CardHeaderOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, CardHeaderOwnProps>;
+export type CardHeaderProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<CardHeaderOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, CardHeaderOwnProps>;
 declare const defaultElement = "header";
 export declare function Header<E extends React.ElementType = typeof defaultElement>(props: CardHeaderProps<E>): React.JSX.Element;
 export declare namespace Header {

package/dist/cjs/components/Card/Media.d.ts

@@ -4,7 +4,7 @@ export type CardMediaOwnProps = {
     position: 'left' | 'top' | 'right' | 'bottom';
     prefixCls?: string;
 };
-export type CardMediaProps<E extends React.ElementType> = React.PropsWithChildren<CardMediaOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, CardMediaOwnProps>;
+export type CardMediaProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<CardMediaOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, CardMediaOwnProps>;
 declare const defaultElement = "div";
 export declare function Media<E extends React.ElementType = typeof defaultElement>(props: CardMediaProps<E>): React.JSX.Element;
 export declare namespace Media {

package/dist/cjs/components/Card/Title.d.ts

@@ -3,7 +3,7 @@ import { type PolymorphicProps } from '../../components/Component';
 export type CardTitleOwnProps = {
     prefixCls?: string;
 };
-export type CardTitleProps<E extends React.ElementType> = React.PropsWithChildren<CardTitleOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, CardTitleOwnProps>;
+export type CardTitleProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<CardTitleOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, CardTitleOwnProps>;
 declare const defaultElement = "h3";
 export declare function Title<E extends React.ElementType = typeof defaultElement>(props: CardTitleProps<E>): React.JSX.Element;
 export declare namespace Title {

package/dist/cjs/components/Control/Select/index.scss

@@ -538,7 +538,7 @@
 /* Control
  ========================================================================== */
 
-.uk-control-select {
+.uk-control.uk-control-select {
     align-items: unset;
     border: 0 none;
     height: auto;

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

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { type PolymorphicProps } from '../../components/Component';
 import { type BreakpointsConfig } from '../../types';
-export type FlexAlignContent = 'stretch' | 'between' | 'around' | 'top' | 'middle' | 'bottom';
-export type FlexAlignItems = 'stretch' | 'top' | 'middle' | 'bottom';
+export type FlexAlignContent = 'stretch' | 'between' | 'around' | 'start' | 'middle' | 'end';
+export type FlexAlignItems = 'stretch' | 'start' | 'middle' | 'end';
 export type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
 export type FlexWrap = 'wrap' | 'nowrap' | 'wrap-reverse';
-export type FlexJustifyContent = 'left' | 'center' | 'right' | 'between' | 'around';
+export type FlexJustifyContent = 'start' | 'center' | 'end' | 'between' | 'around';
 export type FlexBreakpoint = {
     alignContent?: FlexAlignContent;
     alignItems?: FlexAlignItems;

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

@@ -6,7 +6,7 @@ export type HeadingOwnProps = {
     prefixCls?: string;
     size?: 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge';
 };
-export type HeadingProps<E extends React.ElementType> = React.PropsWithChildren<HeadingOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, HeadingOwnProps>;
+export type HeadingProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<HeadingOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, HeadingOwnProps>;
 declare const defaultElement = "div";
 export declare function Heading<E extends React.ElementType = typeof defaultElement>(props: HeadingProps<E>): React.JSX.Element;
 export declare namespace Heading {

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

@@ -5,13 +5,14 @@ export type TextAlign = 'left' | 'right' | 'center' | 'justify';
 export type TextOwnProps = {
     align?: TextAlign | BreakpointsConfig<TextAlign>;
     className?: string;
-    color?: 'meta' | 'muted' | 'emphasis' | 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'danger';
+    color?: 'muted' | 'emphasis' | 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'danger';
     column?: number | BreakpointsConfig<number>;
     decoration?: 'none';
     dropcap?: boolean;
     italic?: boolean;
+    kind?: 'meta' | 'lead' | 'base';
     prefixCls?: string;
-    size?: 'default' | 'xsmall' | 'small' | 'medium' | 'large' | 'lead';
+    size?: 'xsmall' | 'small' | 'large';
     transform?: 'capitalize' | 'uppercase' | 'lowercase';
     verticalAlign?: 'top' | 'middle' | 'bottom' | 'baseline';
     weight?: 'thin' | 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'lighter' | 'bolder';

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

@@ -35,7 +35,7 @@ const utils_1 = require("../../utils");
 const defaultElement = 'span';
 function Text(props) {
     const config = (0, ConfigProvider_1.useConfig)();
-    const { align, className, color, column, decoration, dropcap, italic, prefixCls = config.prefixCls, size, transform, verticalAlign, weight, wrap, ...restProps } = props;
+    const { align, className, color, column, decoration, dropcap, italic, kind, prefixCls = config.prefixCls, size, transform, verticalAlign, weight, wrap, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'text'), [config, prefixCls]);
     const alignClassName = React.useMemo(() => (typeof align === 'string'
         ? `${rootCls}-${align}`
@@ -46,6 +46,7 @@ function Text(props) {
     return (React.createElement(Component_1.Component, { className: (0, classnames_1.default)(columnClassName, alignClassName, {
             [`${prefixCls || config.prefixCls}-dropcap`]: dropcap,
             [`${rootCls}-${color}`]: color !== undefined,
+            [`${rootCls}-${kind}`]: kind !== undefined,
             [`${rootCls}-${size}`]: size !== undefined,
             [`${rootCls}-${transform}`]: transform !== undefined,
             [`${rootCls}-${verticalAlign}`]: verticalAlign !== undefined,

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

@@ -0,0 +1,315 @@
+// Name:            Text
+// Description:     Utilities for text
+//
+// Component:       `uk-text-*`
+//
+// ========================================================================
+
+
+// Variables
+// ========================================================================
+
+@import '../../styles/variables.scss';
+
+
+/* ========================================================================
+   Component: Text
+ ========================================================================== */
+
+
+/* Style modifiers
+ ========================================================================== */
+
+.uk-text-lead {
+    color: var(--text-lead-color);
+    font-size: var(--text-lead-font-size);
+    line-height: var(--text-lead-line-height);
+    @if mixin-exists(hook-text-lead) {
+        @include hook-text-lead;
+    }
+}
+
+.uk-text-meta {
+    color: var(--text-meta-color);
+    font-size: var(--text-meta-font-size);
+    line-height: var(--text-meta-line-height);
+    @if mixin-exists(hook-text-meta) {
+        @include hook-text-meta;
+    }
+}
+
+.uk-text-base {
+    color: var(--text-base-font-size);
+    font-size: var(--text-base-font-size);
+    line-height: var(--text-base-line-height);
+    @if mixin-exists(hook-text-base) {
+        @include hook-text-base;
+    }
+}
+
+
+/* Size modifiers
+ ========================================================================== */
+
+.uk-text-xsmall {
+    font-size: var(--text-xsmall-font-size);
+    line-height: var(--text-xsmall-line-height);
+    @if mixin-exists(hook-text-xsmall) {
+        @include hook-text-xsmall;
+    }
+}
+
+.uk-text-small {
+    font-size: var(--text-small-font-size);
+    line-height: var(--text-small-line-height);
+    @if mixin-exists(hook-text-small) {
+        @include hook-text-small;
+    }
+}
+
+.uk-text-large {
+    font-size: var(--text-large-font-size);
+    line-height: var(--text-large-line-height);
+    @if mixin-exists(hook-text-large) {
+        @include hook-text-large;
+    }
+}
+
+.uk-text-default {
+    font-size: var(--global-font-size);
+    line-height: var(--global-line-height);
+}
+
+
+/* Weight modifier
+ ========================================================================== */
+
+.uk-text-thin { font-weight: 100; }
+.uk-text-light { font-weight: 300; }
+.uk-text-normal { font-weight: 400; }
+.uk-text-medium { font-weight: 500; }
+.uk-text-semibold { font-weight: 600; }
+.uk-text-bold { font-weight: 700; }
+
+.uk-text-lighter { font-weight: lighter; }
+.uk-text-bolder { font-weight: bolder; }
+
+
+/* Style modifier
+ ========================================================================== */
+
+.uk-text-italic { font-style: italic; }
+
+
+/* Transform modifier
+ ========================================================================== */
+
+.uk-text-capitalize { text-transform: capitalize !important; }
+.uk-text-uppercase { text-transform: uppercase !important; }
+.uk-text-lowercase { text-transform: lowercase !important; }
+
+
+/* Decoration modifier
+ ========================================================================== */
+
+.uk-text-decoration-none { text-decoration: none !important; }
+
+
+/* Color modifiers
+ ========================================================================== */
+
+.uk-text-muted { color: var(--text-muted-color) !important; }
+.uk-text-emphasis { color: var(--text-emphasis-color) !important; }
+.uk-text-primary { color: var(--text-primary-color) !important; }
+.uk-text-secondary { color: var(--text-secondary-color) !important; }
+.uk-text-success { color: var(--text-success-color) !important; }
+.uk-text-warning { color: var(--text-warning-color) !important; }
+.uk-text-danger { color: var(--text-danger-color) !important; }
+
+
+/* Background modifier
+ ========================================================================== */
+
+/*
+ * 1. The background clips to the foreground text. Works in Chrome, Firefox, Safari, Edge and Opera
+ *    Default color is set to transparent
+ * 2. Container fits the text
+ * 3. Fallback color for IE11
+ */
+
+.uk-text-background {
+    /* 1 */
+    -webkit-background-clip: text;
+
+    /* 3 */
+    color: var(--text-background-color) !important;
+
+    /* 2 */
+    display: inline-block;
+}
+
+@supports (-webkit-background-clip: text) {
+    .uk-text-background {
+        background-color: var(--text-background-color);
+        color: transparent !important;
+        @if mixin-exists(hook-text-background) {
+            @include hook-text-background;
+        }
+    }
+}
+
+
+/* Alignment modifiers
+ ========================================================================== */
+
+.uk-text-left { text-align: left !important; }
+.uk-text-right { text-align: right !important; }
+.uk-text-center { text-align: center !important; }
+.uk-text-justify { text-align: justify !important; }
+
+/* Phone landscape and bigger */
+// noinspection Stylelint
+@media (min-width: $breakpoint-small) {
+
+    .uk-text-left\@s { text-align: left !important; }
+    .uk-text-right\@s { text-align: right !important; }
+    .uk-text-center\@s { text-align: center !important; }
+
+}
+
+/* Tablet landscape and bigger */
+// noinspection Stylelint
+@media (min-width: $breakpoint-medium) {
+
+    .uk-text-left\@m { text-align: left !important; }
+    .uk-text-right\@m { text-align: right !important; }
+    .uk-text-center\@m { text-align: center !important; }
+
+}
+
+/* Desktop and bigger */
+// noinspection Stylelint
+@media (min-width: $breakpoint-large) {
+
+    .uk-text-left\@l { text-align: left !important; }
+    .uk-text-right\@l { text-align: right !important; }
+    .uk-text-center\@l { text-align: center !important; }
+
+}
+
+/* Large screen and bigger */
+// noinspection Stylelint
+@media (min-width: $breakpoint-xlarge) {
+
+    .uk-text-left\@xl { text-align: left !important; }
+    .uk-text-right\@xl { text-align: right !important; }
+    .uk-text-center\@xl { text-align: center !important; }
+
+}
+
+/*
+ * Vertical
+ */
+
+.uk-text-top { vertical-align: top !important; }
+.uk-text-middle { vertical-align: middle !important; }
+.uk-text-bottom { vertical-align: bottom !important; }
+.uk-text-baseline { vertical-align: baseline !important; }
+
+
+/* Wrap modifiers
+ ========================================================================== */
+
+/*
+ * Prevent text from wrapping onto multiple lines
+ */
+
+.uk-text-nowrap { white-space: nowrap; }
+
+/*
+ * 1. Make sure a max-width is set after which truncation can occur
+ * 2. Prevent text from wrapping onto multiple lines, and truncate with an ellipsis
+ * 3. Fix for table cells
+ */
+
+.uk-text-truncate {
+    /* 1 */
+    max-width: 100%;
+
+    /* 2 */
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+/* 2 */
+th.uk-text-truncate,
+td.uk-text-truncate { max-width: 0; }
+
+
+/*
+ * 1. Wrap long words onto the next line and break them if they are too long to fit
+ * 2. Legacy `word-wrap` as fallback for `overflow-wrap`
+ * 3. Fix `overflow-wrap` which doesn't work with table cells in Chrome, Opera, IE11 and Edge
+ *    Must use `break-all` to support IE11 and Edge
+ * Note: Not using `hyphens: auto;` because it hyphenates text even if not needed
+ */
+
+.uk-text-break {
+    /* 1 */
+    overflow-wrap: break-word;
+
+    /* 2 */
+    word-wrap: break-word;
+}
+
+/* 3 */
+th.uk-text-break,
+td.uk-text-break { word-break: break-all; }
+
+
+// Hooks
+// ========================================================================
+
+@if mixin-exists(hook-text-misc) {
+    @include hook-text-misc;
+}
+
+
+// Vars
+// ========================================================================
+
+:root {
+    --text-base-font-size: var(--global-font-size);
+    --text-base-line-height: var(--global-line-height);
+    --text-base-color: var(--global-base-color);
+    --text-lead-font-size: var(--global-large-font-size);
+    --text-lead-line-height: #{$text-lead-line-height};
+    --text-lead-color: var(--global-emphasis-color);
+    --text-meta-font-size: var(--global-small-font-size);
+    --text-meta-line-height: #{$text-meta-line-height};
+    --text-meta-color: var(--global-muted-color);
+    --text-xsmall-font-size: var(--global-xsmall-font-size);
+    --text-xsmall-line-height: #{$text-xsmall-line-height};
+    --text-small-font-size: var(--global-small-font-size);
+    --text-small-line-height: #{$text-small-line-height};
+    --text-large-font-size: var(--global-large-font-size);
+    --text-large-line-height: #{$text-large-line-height};
+    --text-muted-color: var(--global-muted-color);
+    --text-emphasis-color: var(--global-emphasis-color);
+    --text-primary-color: var(--global-primary-background);
+    --text-secondary-color: var(--global-secondary-background);
+    --text-success-color: var(--global-success-background);
+    --text-warning-color: var(--global-warning-background);
+    --text-danger-color: var(--global-danger-background);
+    --text-background-color: var(--global-primary-background);
+
+    // Inverse
+    --inverse-text-lead-color: var(--inverse-global-color);
+    --inverse-text-meta-color: var(--inverse-global-muted-color);
+    --inverse-text-muted-color: var(--inverse-global-muted-color);
+    --inverse-text-emphasis-color: var(--inverse-global-emphasis-color);
+    --inverse-text-primary-color: var(--inverse-global-primary-background);
+    --inverse-text-secondary-color: var(--inverse-global-primary-background);
+    --inverse-text-tertiary-color: var(--inverse-global-primary-background);
+}