@uni-design-system/uni-react 0.0.12 → 0.0.14

package/dist/cjs/components/button/button.component.d.ts

@@ -1,5 +1,5 @@
 import React, { CSSProperties, ReactNode } from 'react';
-import { ButtonType } from '@uni-design-system/uni-core';
+import { ButtonType, ContentColorToken } from '@uni-design-system/uni-core';
 import { IconName } from '../../core/icon';
 export interface ButtonProps {
     text?: string;
@@ -8,8 +8,9 @@ export interface ButtonProps {
     active?: boolean;
     disabled?: boolean;
     iconName?: IconName;
+    contentColor?: ContentColorToken;
     onClick?: React.MouseEventHandler<HTMLButtonElement>;
     disableRipple?: boolean;
     style?: CSSProperties;
 }
-export declare const Button: ({ text, children, buttonType, disabled, iconName, onClick, disableRipple, style: userStyle, ...rest }: ButtonProps) => JSX.Element;
+export declare const Button: ({ text, children, buttonType, disabled, iconName, contentColor: overrideContentColor, onClick, disableRipple, style: userStyle, ...rest }: ButtonProps) => JSX.Element;

package/dist/cjs/components/button/button.component.js

@@ -41,23 +41,18 @@ exports.Button = void 0;
 const react_1 = __importStar(require("react"));
 const core_1 = require("../../core");
 const icon_text_row_1 = require("../icon-text-row");
-const layout_hook_1 = __importDefault(require("../../core/layout/layout.hook"));
 const use_ripple_hook_1 = __importDefault(require("use-ripple-hook"));
 const Button = (_a) => {
-    var { text, children, buttonType = 'filled', disabled = false, iconName, onClick, disableRipple = false, style: userStyle } = _a, rest = __rest(_a, ["text", "children", "buttonType", "disabled", "iconName", "onClick", "disableRipple", "style"]);
-    const { deviceSize } = (0, layout_hook_1.default)();
+    var { text, children, buttonType = 'filled', disabled = false, iconName, contentColor: overrideContentColor, onClick, disableRipple = false, style: userStyle } = _a, rest = __rest(_a, ["text", "children", "buttonType", "disabled", "iconName", "contentColor", "onClick", "disableRipple", "style"]);
+    const { deviceSize } = (0, core_1.useLayout)();
     const theme = (0, core_1.useTheme)();
     const [ref, createRipple] = (0, use_ripple_hook_1.default)({ disabled: disableRipple || buttonType === 'elevated' });
     const buttonProps = theme.buttons[buttonType];
     const getOnColorToken = (color) => `on-${color}`;
-    const defaultContentColor = getOnColorToken(buttonProps.color);
+    const contentColor = overrideContentColor || getOnColorToken(buttonProps.color);
     const [hover, setHover] = (0, react_1.useState)(false);
     const [click, setClick] = (0, react_1.useState)(false);
-    const [contentColor, setContentColor] = (0, react_1.useState)(defaultContentColor);
     const style = Style(theme, buttonType, deviceSize, hover, disabled, click);
-    (0, react_1.useEffect)(() => {
-        setContentColor(getOnColorToken(disabled ? 'inverse-on-surface' : buttonProps.color));
-    }, [disabled]);
     (0, react_1.useEffect)(() => {
         setTimeout(() => {
             setClick(false);

package/dist/cjs/core/flex/flex.component.d.ts

@@ -1,5 +1,6 @@
 import React, { HTMLAttributes, ReactNode } from 'react';
 import { AlignContent, FlexDirection, FlexGrow, FlexShrink, FlexWrap, JustifyContent } from '@uni-design-system/uni-core';
+import { Property } from 'csstype';
 export interface FlexOptions extends HTMLAttributes<HTMLDivElement> {
     /**
      * Shorthand for `alignItems` style prop
@@ -37,6 +38,7 @@ export interface FlexOptions extends HTMLAttributes<HTMLDivElement> {
      * @type FlexShrink
      */
     shrink?: FlexShrink;
+    gap?: Property.Gap<number | string>;
 }
 export interface FlexProps extends FlexOptions {
     children: ReactNode;

package/dist/cjs/core/flex/flex.component.js

@@ -26,8 +26,8 @@ const react_2 = require("react");
  * @see Docs
  */
 exports.Flex = (0, react_2.forwardRef)((props, ref) => {
-    const { direction, align, justify, wrap, basis, grow, shrink, style } = props, rest = __rest(props, ["direction", "align", "justify", "wrap", "basis", "grow", "shrink", "style"]);
-    const styles = Object.assign({ display: 'flex', flexDirection: direction, alignItems: align, justifyContent: justify, flexWrap: wrap, flexBasis: basis, flexGrow: grow, flexShrink: shrink }, style);
+    const { direction, align, justify, wrap, basis, grow, shrink, gap, style } = props, rest = __rest(props, ["direction", "align", "justify", "wrap", "basis", "grow", "shrink", "gap", "style"]);
+    const styles = Object.assign({ display: 'flex', flexDirection: direction, alignItems: align, justifyContent: justify, flexWrap: wrap, flexBasis: basis, flexGrow: grow, flexShrink: shrink, gap }, style);
     return react_1.default.createElement("div", Object.assign({ ref: ref, style: styles }, rest));
 });
 exports.Flex.displayName = 'Flex';

package/dist/cjs/core/layout/layout.hook.d.ts

@@ -1,2 +1,2 @@
 import { Layout } from '@uni-design-system/uni-core';
-export default function useLayout(): Layout;
+export declare function useLayout(): Layout;

package/dist/cjs/core/layout/layout.hook.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLayout = void 0;
 const react_1 = __importDefault(require("react"));
 const uni_core_1 = require("@uni-design-system/uni-core");
 const layout_context_1 = __importDefault(require("./layout.context"));
@@ -12,4 +13,4 @@ function useLayout() {
     const orientation = (0, uni_core_1.getDeviceOrientation)(height, width);
     return { orientation, deviceSize };
 }
-exports.default = useLayout;
+exports.useLayout = useLayout;

package/dist/esm/components/button/button.component.d.ts

@@ -1,5 +1,5 @@
 import React, { CSSProperties, ReactNode } from 'react';
-import { ButtonType } from '@uni-design-system/uni-core';
+import { ButtonType, ContentColorToken } from '@uni-design-system/uni-core';
 import { IconName } from '../../core/icon';
 export interface ButtonProps {
     text?: string;
@@ -8,8 +8,9 @@ export interface ButtonProps {
     active?: boolean;
     disabled?: boolean;
     iconName?: IconName;
+    contentColor?: ContentColorToken;
     onClick?: React.MouseEventHandler<HTMLButtonElement>;
     disableRipple?: boolean;
     style?: CSSProperties;
 }
-export declare const Button: ({ text, children, buttonType, disabled, iconName, onClick, disableRipple, style: userStyle, ...rest }: ButtonProps) => JSX.Element;
+export declare const Button: ({ text, children, buttonType, disabled, iconName, contentColor: overrideContentColor, onClick, disableRipple, style: userStyle, ...rest }: ButtonProps) => JSX.Element;

package/dist/esm/components/button/button.component.js

@@ -10,25 +10,20 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { useEffect, useState } from 'react';
-import { BoxShadow, Text, useTheme } from '../../core';
+import { BoxShadow, Text, useLayout, useTheme } from '../../core';
 import { IconTextRow } from '../icon-text-row';
-import useLayout from '../../core/layout/layout.hook';
 import useRipple from 'use-ripple-hook';
 export const Button = (_a) => {
-    var { text, children, buttonType = 'filled', disabled = false, iconName, onClick, disableRipple = false, style: userStyle } = _a, rest = __rest(_a, ["text", "children", "buttonType", "disabled", "iconName", "onClick", "disableRipple", "style"]);
+    var { text, children, buttonType = 'filled', disabled = false, iconName, contentColor: overrideContentColor, onClick, disableRipple = false, style: userStyle } = _a, rest = __rest(_a, ["text", "children", "buttonType", "disabled", "iconName", "contentColor", "onClick", "disableRipple", "style"]);
     const { deviceSize } = useLayout();
     const theme = useTheme();
     const [ref, createRipple] = useRipple({ disabled: disableRipple || buttonType === 'elevated' });
     const buttonProps = theme.buttons[buttonType];
     const getOnColorToken = (color) => `on-${color}`;
-    const defaultContentColor = getOnColorToken(buttonProps.color);
+    const contentColor = overrideContentColor || getOnColorToken(buttonProps.color);
     const [hover, setHover] = useState(false);
     const [click, setClick] = useState(false);
-    const [contentColor, setContentColor] = useState(defaultContentColor);
     const style = Style(theme, buttonType, deviceSize, hover, disabled, click);
-    useEffect(() => {
-        setContentColor(getOnColorToken(disabled ? 'inverse-on-surface' : buttonProps.color));
-    }, [disabled]);
     useEffect(() => {
         setTimeout(() => {
             setClick(false);

package/dist/esm/core/flex/flex.component.d.ts

@@ -1,5 +1,6 @@
 import React, { HTMLAttributes, ReactNode } from 'react';
 import { AlignContent, FlexDirection, FlexGrow, FlexShrink, FlexWrap, JustifyContent } from '@uni-design-system/uni-core';
+import { Property } from 'csstype';
 export interface FlexOptions extends HTMLAttributes<HTMLDivElement> {
     /**
      * Shorthand for `alignItems` style prop
@@ -37,6 +38,7 @@ export interface FlexOptions extends HTMLAttributes<HTMLDivElement> {
      * @type FlexShrink
      */
     shrink?: FlexShrink;
+    gap?: Property.Gap<number | string>;
 }
 export interface FlexProps extends FlexOptions {
     children: ReactNode;

package/dist/esm/core/flex/flex.component.js

@@ -20,8 +20,8 @@ import { forwardRef } from 'react';
  * @see Docs
  */
 export const Flex = forwardRef((props, ref) => {
-    const { direction, align, justify, wrap, basis, grow, shrink, style } = props, rest = __rest(props, ["direction", "align", "justify", "wrap", "basis", "grow", "shrink", "style"]);
-    const styles = Object.assign({ display: 'flex', flexDirection: direction, alignItems: align, justifyContent: justify, flexWrap: wrap, flexBasis: basis, flexGrow: grow, flexShrink: shrink }, style);
+    const { direction, align, justify, wrap, basis, grow, shrink, gap, style } = props, rest = __rest(props, ["direction", "align", "justify", "wrap", "basis", "grow", "shrink", "gap", "style"]);
+    const styles = Object.assign({ display: 'flex', flexDirection: direction, alignItems: align, justifyContent: justify, flexWrap: wrap, flexBasis: basis, flexGrow: grow, flexShrink: shrink, gap }, style);
     return React.createElement("div", Object.assign({ ref: ref, style: styles }, rest));
 });
 Flex.displayName = 'Flex';

package/dist/esm/core/layout/layout.hook.d.ts

@@ -1,2 +1,2 @@
 import { Layout } from '@uni-design-system/uni-core';
-export default function useLayout(): Layout;
+export declare function useLayout(): Layout;

package/dist/esm/core/layout/layout.hook.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { getDeviceOrientation, getDeviceSize } from '@uni-design-system/uni-core';
 import LayoutContext from './layout.context';
-export default function useLayout() {
+export function useLayout() {
     const { height, width } = React.useContext(LayoutContext);
     const deviceSize = getDeviceSize(height, width);
     const orientation = getDeviceOrientation(height, width);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uni-design-system/uni-react",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "description": "React component library for the UNI Design System.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -36,7 +36,7 @@
     "@dnd-kit/core": "^6.0.7",
     "@dnd-kit/modifiers": "^6.0.1",
     "@dnd-kit/sortable": "^7.0.2",
-    "@uni-design-system/uni-core": "^0.0.33",
+    "@uni-design-system/uni-core": "^0.0.34",
     "@uni-design-system/uni-react-icons": "^0.1.2",
     "framer-motion": "4.1.17",
     "use-ripple-hook": "^1.0.22"