@broxus/react-uikit 0.2.0 → 0.2.2

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

@@ -29,8 +29,9 @@ const rc_collapse_1 = require("rc-collapse");
 const Icon_1 = require("../Icon");
 exports.Item = React.memo((props) => {
     const { expandIcon, ...restProps } = props;
-    const mergedExpandIcon = React.useMemo(() => (expandIcon || (({ isActive }) => (React.createElement(Icon_1.Icon, { icon: isActive ? 'expand_more' : 'chevron_right' })))), [expandIcon]);
-    return React.createElement(rc_collapse_1.Panel, { expandIcon: mergedExpandIcon, ...restProps });
+    const mergedExpandIcon = React.useMemo(() => expandIcon ||
+        (({ isActive }) => (React.createElement(Icon_1.Icon, { icon: isActive ? 'expand_more' : 'chevron_right' }))), [expandIcon]);
+    return React.createElement(rc_collapse_1.Panel, { expandIcon: mergedExpandIcon, ...restProps, headerClass: "fsds" });
 });
 if (process.env.NODE_ENV !== 'production') {
     exports.Item.displayName = 'Accordion.Item';

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

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

package/dist/cjs/components/Control/Checkbox/Checkbox.js

@@ -91,7 +91,8 @@ const ForwardedCheckbox = React.forwardRef((props, ref) => {
     const globalAttributes = React.useMemo(() => (0, js_utils_1.retrieveGlobalAttributes)(restProps), [restProps]);
     React.useEffect(() => {
         checkboxGroup?.registerValue(restProps.value);
-    }, [checkboxGroup, restProps.value]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [restProps.value]);
     React.useEffect(() => {
         if (skipGroup) {
             return;
@@ -102,7 +103,8 @@ const ForwardedCheckbox = React.forwardRef((props, ref) => {
         }
         // eslint-disable-next-line consistent-return
         return () => checkboxGroup?.cancelValue(restProps.value);
-    }, [checkboxGroup, restProps.value, skipGroup]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [restProps.value, skipGroup]);
     React.useEffect(() => {
         setInternalChecked(restProps.checked || restProps.defaultChecked);
     }, [restProps.checked, restProps.defaultChecked]);

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

@@ -21,6 +21,11 @@
     display: flex;
     line-height: unset;
     user-select: none;
+
+    &.uk-control {
+        background-color: var(--checkbox-control-background);
+    }
+
     @if mixin-exists(hook-checkbox-wrapper) {
         @include hook-checkbox-wrapper;
     }
@@ -28,7 +33,6 @@
 
 .uk-checkbox-wrapper .uk-checkbox {
     border: 0;
-    border-radius: var(--checkbox-border-radius);
     display: inline-block;
     height: var(--checkbox-size);
     line-height: 1;
@@ -48,16 +52,13 @@
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
-    bottom: 0;
     cursor: pointer;
     height: 100%;
-    left: 0;
+    inset: 0;
     margin: 0;
     opacity: 0;
     outline: none;
     position: absolute;
-    right: 0;
-    top: 0;
     width: 100%;
     z-index: 1;
     @if mixin-exists(hook-checkbox-input) {
@@ -66,7 +67,7 @@
 }
 
 .uk-checkbox-wrapper .uk-checkbox-inner {
-    background-color: transparent;
+    background-color: var(--checkbox-background);
     border: var(--checkbox-border-width) solid var(--checkbox-border);
     border-collapse: separate;
     border-radius: var(--checkbox-border-radius);
@@ -310,6 +311,7 @@
     --checkbox-checked-background: var(--global-primary-background);
     --checkbox-checked-border: var(--global-primary-border);
     --checkbox-checked-icon-color: var(--global-inverse-color);
+    --checkbox-control-background: #{$checkbox-control-background};
     --checkbox-checked-control-background: #{$checkbox-checked-control-background};
     --checkbox-checked-control-color: #{$checkbox-checked-control-color};
     --checkbox-checked-control-padding: #{$checkbox-checked-control-padding};

package/dist/cjs/components/Control/Radio/Radio.js

@@ -88,7 +88,8 @@ const ForwardedRadio = React.forwardRef((props, ref) => {
         setInternalChecked(restProps.checked ??
             restProps.defaultChecked ??
             ('value' in restProps && restProps.value === radioGroup?.value));
-    }, [restProps.checked, restProps.defaultChecked, radioGroup?.value, restProps]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [restProps.checked, restProps.defaultChecked, radioGroup?.value]);
     return (React.createElement("label", { className: wrapperClasses, htmlFor: id, style: style, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave },
         React.createElement("span", { className: (0, classnames_1.default)(radioClasses) },
             React.createElement("input", { className: `${rootCls}-input`, ref: ref, ...radioProps, type: "radio", ...globalAttributes }),

package/dist/cjs/components/Control/Radio/index.d.ts

@@ -1,8 +1,8 @@
 import type * as React from 'react';
-import { Group } from '../../Control/Radio/Group';
+import { Group, type RadioGroupProps } from '../../Control/Radio/Group';
 import { type RadioProps } from '../../Control/Radio/Radio';
 import './index.scss';
-export type { RadioProps };
+export type { RadioGroupProps, RadioProps };
 export interface Radio extends React.MemoExoticComponent<React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>> {
     Group: typeof Group;
 }

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

@@ -21,6 +21,11 @@
     display: flex;
     line-height: unset;
     user-select: none;
+
+    &.uk-control {
+        background-color: var(--radio-control-background);
+    }
+
     @if mixin-exists(hook-radio-wrapper) {
         @include hook-radio-wrapper;
     }
@@ -44,15 +49,12 @@
 }
 
 .uk-radio-wrapper .uk-radio-input {
-    bottom: 0;
     cursor: pointer;
     height: 100%;
-    left: 0;
+    inset: 0;
     margin: 0;
     opacity: 0;
     position: absolute;
-    right: 0;
-    top: 0;
     width: 100%;
     z-index: 1;
     @if mixin-exists(hook-radio-input) {
@@ -61,7 +63,7 @@
 }
 
 .uk-radio-wrapper .uk-radio-inner {
-    background-color: transparent;
+    background-color: var(--radio-background);
     border: var(--radio-border-width) solid var(--radio-border);
     border-radius: 50%;
     box-sizing: border-box;
@@ -256,6 +258,7 @@
     --radio-checked-background: #{$radio-checked-background};
     --radio-checked-border: var(--global-primary-border);
     --radio-checked-icon-color: var(--global-primary-background);
+    --radio-control-background: #{$radio-control-background};
     --radio-checked-control-background: #{$radio-checked-control-background};
     --radio-checked-control-color: #{$radio-checked-control-color};
     --radio-disabled-background: var(--control-disabled-background);

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

@@ -27,6 +27,9 @@
     height: auto;
     max-width: 100%;
     padding: 0;
+    @if mixin-exists(hook-control-textarea) {
+        @include hook-control-textarea;
+    }
 }
 
 .uk-control-textarea-show-count::after {
@@ -41,6 +44,9 @@
     position: absolute;
     right: 5px;
     white-space: nowrap;
+    @if mixin-exists(hook-control-textarea-counter) {
+        @include hook-control-textarea-counter;
+    }
 }
 
 
@@ -59,6 +65,9 @@
     padding: var(--textarea-padding-vertical) var(--textarea-padding-horizontal);
     resize: none;
     vertical-align: bottom;
+    @if mixin-exists(hook-control-textarea-input) {
+        @include hook-control-textarea-input;
+    }
 }
 
 /* Hover + Focus states */

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

@@ -239,6 +239,12 @@
     }
 }
 
+.uk-control-suffix {
+    @if mixin-exists(hook-control-suffix) {
+        @include hook-control-suffix;
+    }
+}
+
 .uk-control-clearfix {
     cursor: pointer;
     opacity: 0.8;

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

@@ -17,9 +17,9 @@ export type FlexBreakpoint = {
     justifyContent?: FlexJustifyContent;
 };
 export type FlexBreakpointsConfig = BreakpointsConfig<FlexBreakpoint>;
-export type FlexOwnProps = FlexBreakpoint & FlexBreakpointsConfig & {
+export type FlexOwnProps = {
     inline?: boolean;
     prefixCls?: string;
-};
+} & FlexBreakpoint & FlexBreakpointsConfig;
 export type FlexProps<E extends React.ElementType = React.ElementType> = React.PropsWithChildren<FlexOwnProps & PolymorphicProps<E>> & PolymorphicProps<E, FlexOwnProps>;
 export declare const Flex: React.MemoExoticComponent<(<E extends React.ElementType<any> = "div">(props: FlexProps<E>) => JSX.Element)>;

package/dist/cjs/components/Nav/utils/motionUtil.d.ts

@@ -1,2 +1,5 @@
 import { type CSSMotionProps } from 'rc-motion';
-export declare function getMotion(mode: string, motion?: CSSMotionProps, defaultMotions?: Record<string, CSSMotionProps>): CSSMotionProps | undefined;
+import { type NavMode } from '../../Nav/types';
+export declare function getMotion(mode: NavMode | 'other', motion?: CSSMotionProps, defaultMotions?: Partial<{
+    [key in NavMode | 'other']: CSSMotionProps;
+}>): CSSMotionProps | undefined;

package/dist/cjs/components/Navbar/Nav.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { type NavProps } from '../Nav';
 export declare function Nav(props: NavProps): JSX.Element;
 export declare namespace Nav {

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

@@ -38,7 +38,7 @@ exports.Tabs = React.memo((props) => {
     const config = (0, ConfrigProvider_1.useConfig)();
     const { addIcon, centered, className, direction, hideAdd, moreIcon = React.createElement(Icon_1.Icon, { icon: "more_horizontal" }), prefixCls = config.prefixCls, size, type, onEdit, ...restProps } = props;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'tabs'), [config, prefixCls]);
-    const editable = React.useMemo(() => type === 'editable-card'
+    const editable = React.useMemo(() => (type === 'editable-card'
         ? {
             addIcon: addIcon || React.createElement(Icon_1.Icon, { icon: "add" }),
             removeIcon: React.createElement(Icon_1.Icon, { icon: "close" }),
@@ -49,7 +49,7 @@ exports.Tabs = React.memo((props) => {
                 onEdit?.(editType === 'add' ? event : key, editType);
             },
         }
-        : undefined, [addIcon, hideAdd, onEdit, type]);
+        : undefined), [addIcon, hideAdd, onEdit, type]);
     return (React.createElement(rc_tabs_1.default, { direction: direction, moreTransitionName: (0, utils_1.getMotionName)(prefixCls || config.prefixCls, 'slide-bottom-small'), ...restProps, className: (0, classnames_1.default)({
             [`${rootCls}-${size}`]: size,
             [`${rootCls}-card`]: ['card', 'editable-card'].includes(type),

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

@@ -92,6 +92,7 @@
 
     background: transparent;
     border: 0;
+    color: var(--tabs-tab-color);
     font-size: var(--tabs-nav-more-font-size);
     padding: var(--tabs-tab-padding-vertical) var(--tabs-tab-padding-horizontal);
     position: relative;
@@ -587,6 +588,9 @@
     overflow-y: auto;
     padding: 0;
     text-align: left;
+    @if mixin-exists(hook-tabs-dropdown-menu) {
+        @include hook-tabs-dropdown-menu;
+    }
 }
 
 .uk-tabs-dropdown-menu-item {

package/dist/cjs/styles/mixins.scss

@@ -40,8 +40,8 @@
 
 @mixin hook-alert() {
     a:not([class]) {
-        text-decoration: underline;
         color: inherit;
+        text-decoration: underline;
     }
 }
 @mixin hook-alert-close() {}
@@ -63,13 +63,13 @@
     .uk-alert h6 { color: inherit; }
 
     .uk-alert a:not([class]) {
-        text-decoration: underline;
         color: inherit;
+        text-decoration: underline;
     }
 
     .uk-alert a:not([class]):hover {
-        text-decoration: underline;
         color: inherit;
+        text-decoration: underline;
     }
 
 }
@@ -386,14 +386,14 @@
     .uk-button-group {
         .uk-button-circle:not(:last-child),
         .uk-button-round:not(:last-child) {
-            border-top-right-radius: 0;
             border-bottom-right-radius: 0;
+            border-top-right-radius: 0;
         }
 
         .uk-button-circle:not(:first-child),
         .uk-button-round:not(:first-child) {
-            border-top-left-radius: 0;
             border-bottom-left-radius: 0;
+            border-top-left-radius: 0;
         }
     }
 }
@@ -959,6 +959,7 @@
     }
 }
 
+
 @mixin hook-control() {}
 @mixin hook-control-hover() {}
 @mixin hook-control-focus() {}
@@ -973,6 +974,8 @@
 @mixin hook-control-blank-focus() {}
 @mixin hook-control-input() {}
 @mixin hook-control-prefix() {}
+@mixin hook-control-suffix() {}
+
 @mixin hook-inverse-control() {}
 @mixin hook-inverse-control-hover() {}
 @mixin hook-inverse-control-focus() {}
@@ -983,8 +986,8 @@
 @mixin hook-inverse-control-blank-focus() {}
 @mixin hook-inverse-component-control() {
     .uk-control {
-        border-color: var(--inverse-control-border);
         background-color: var(--inverse-control-background);
+        border-color: var(--inverse-control-border);
         color: var(--inverse-control-color);
         @if mixin-exists(hook-inverse-control) {
             @include hook-inverse-control;
@@ -993,8 +996,8 @@
 
     // Hover state (unused for disabled state)
     .uk-control:hover {
-        border-color: var(--inverse-control-hover-border);
         background-color: var(--inverse-control-hover-background);
+        border-color: var(--inverse-control-hover-border);
         color: var(--inverse-control-hover-color);
         @if mixin-exists(hook-inverse-control-hover) {
             @include hook-inverse-control-hover;
@@ -1003,8 +1006,8 @@
 
     // Focus state (unused for disabled state)
     .uk-control:focus-within {
-        border-color: var(--inverse-control-focus-border);
         background-color: var(--inverse-control-focus-background);
+        border-color: var(--inverse-control-focus-border);
         color: var(--inverse-control-focus-color);
         @if mixin-exists(hook-inverse-control-focus) {
             @include hook-inverse-control-focus;
@@ -1013,8 +1016,8 @@
 
     // Disabled state
     .uk-control.uk-disabled {
-        border-color: var(--inverse-control-disabled-border);
         background-color: var(--inverse-ontrol-disabled-background);
+        border-color: var(--inverse-control-disabled-border);
         color: var(--inverse-control-disabled-color);
         @if mixin-exists(hook-inverse-control-disabled) {
             @include hook-inverse-control-disabled;
@@ -1108,6 +1111,10 @@
 @mixin hook-select-clear() {}
 @mixin hook-select-dropdown() {}
 
+@mixin hook-control-textarea() {}
+@mixin hook-control-textarea-counter() {}
+@mixin hook-control-textarea-input() {}
+
 @mixin hook-grid-divider-horizontal() {}
 @mixin hook-grid-divider-vertical() {}
 @mixin hook-grid-misc() {}
@@ -1883,6 +1890,7 @@
 @mixin hook-tabs-left-tab() {}
 @mixin hook-tabs-right() {}
 @mixin hook-tabs-right-tab() {}
+@mixin hook-tabs-dropdown-menu() {}
 @mixin hook-tabs-misc() {}
 @mixin hook-inverse-tabs() {}
 @mixin hook-inverse-tabs-tab() {}

package/dist/cjs/styles/variables.scss

@@ -86,7 +86,7 @@ $global-danger-background:                      #f5604b !default;
 
 $global-border-width:                           1px !default;
 $global-border-style:                           solid !default;
-$global-border:                                 $global-default-background !default;
+$global-border:                                 darken($global-default-background, 3%) !default;
 $global-muted-border:                           $global-muted-background !default;
 $global-primary-border:                         $global-primary-background !default;
 $global-secondary-border:                       $global-secondary-background !default;
@@ -857,6 +857,7 @@ $checkbox-focus-border:                         $global-primary-border !default;
 $checkbox-checked-background:                   $global-primary-background !default;
 $checkbox-checked-border:                       $global-primary-border !default;
 $checkbox-checked-icon-color:                   $global-inverse-color !default;
+$checkbox-control-background:                   rgba($control-background, 45%) !default;
 $checkbox-checked-control-background:           rgba($checkbox-checked-background, 15%) !default;
 $checkbox-checked-control-color:                $global-primary-background !default;
 $checkbox-checked-control-padding:              10px !default;
@@ -879,6 +880,7 @@ $radio-focus-border:                            $control-focus-border !default;
 $radio-checked-background:                      transparent !default;
 $radio-checked-border:                          $global-primary-border !default;
 $radio-checked-icon-color:                      $global-primary-background !default;
+$radio-control-background:                      rgba($control-background, 45%) !default;
 $radio-checked-control-background:              rgba($radio-checked-icon-color, 15%) !default;
 $radio-checked-control-color:                   $global-primary-background !default;
 $radio-disabled-background:                     $control-disabled-background !default;