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

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

@@ -41,11 +41,10 @@ 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)();
+    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];

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.js

@@ -10,9 +10,8 @@ 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"]);

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.13",
   "description": "React component library for the UNI Design System.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",