@uni-design-system/uni-react 0.0.11 → 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/components/card/card.component.d.ts

@@ -1,13 +1,14 @@
-import { ReactNode } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 import { ContainerColorToken, ShadowElevation, Size } from '@uni-design-system/uni-core';
+import { Property } from 'csstype';
 export type CardType = 'elevated' | 'filled' | 'outlined';
-export interface CardProps {
+export interface CardProps extends HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
     cardType?: CardType;
     colorToken?: ContainerColorToken;
     elevation?: ShadowElevation;
-    width?: number;
-    height?: number | string | undefined;
+    width?: Property.Width<number | string>;
+    height?: Property.Height<number | string>;
     borderRadius?: Size | 'none';
 }
-export declare function Card({ children, cardType, elevation, colorToken, width, height, borderRadius, }: CardProps): JSX.Element;
+export declare function Card({ children, cardType, elevation, colorToken, width, height, borderRadius, style, ...rest }: CardProps): JSX.Element;

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

@@ -1,4 +1,15 @@
 "use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -6,17 +17,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Card = void 0;
 const react_1 = __importDefault(require("react"));
 const core_1 = require("../../core");
-function Card({ children, cardType, elevation, colorToken = 'primary-container', width, height, borderRadius, }) {
+function Card(_a) {
+    var { children, cardType, elevation, colorToken = 'surface', width, height, borderRadius, style } = _a, rest = __rest(_a, ["children", "cardType", "elevation", "colorToken", "width", "height", "borderRadius", "style"]);
     const { colors, containers } = (0, core_1.useTheme)();
     const { borderRadii } = containers.card;
-    const style = Object.assign({ height,
-        width, backgroundColor: colors[colorToken || 'surface'], color: colors[`on-${colorToken}` || 'on-surface'] }, (0, core_1.Padding)('md', 'all'));
+    const styles = Object.assign(Object.assign({ height,
+        width, backgroundColor: colors[colorToken || 'surface'], color: colors[`on-${colorToken}` || 'on-surface'] }, (0, core_1.Padding)('md', 'all')), style);
     if (cardType === 'elevated') {
-        style.boxShadow = (0, core_1.BoxShadow)(elevation || 'raised');
+        styles.boxShadow = (0, core_1.BoxShadow)(elevation || 'raised');
     }
     if (borderRadii && borderRadius !== 'none') {
-        style.borderRadius = borderRadii[borderRadius || 'md'];
+        styles.borderRadius = borderRadii[borderRadius || 'md'];
     }
-    return react_1.default.createElement("div", { style: style }, children);
+    return (react_1.default.createElement("div", Object.assign({ style: styles }, rest), children));
 }
 exports.Card = Card;

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/components/card/card.component.d.ts

@@ -1,13 +1,14 @@
-import { ReactNode } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 import { ContainerColorToken, ShadowElevation, Size } from '@uni-design-system/uni-core';
+import { Property } from 'csstype';
 export type CardType = 'elevated' | 'filled' | 'outlined';
-export interface CardProps {
+export interface CardProps extends HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
     cardType?: CardType;
     colorToken?: ContainerColorToken;
     elevation?: ShadowElevation;
-    width?: number;
-    height?: number | string | undefined;
+    width?: Property.Width<number | string>;
+    height?: Property.Height<number | string>;
     borderRadius?: Size | 'none';
 }
-export declare function Card({ children, cardType, elevation, colorToken, width, height, borderRadius, }: CardProps): JSX.Element;
+export declare function Card({ children, cardType, elevation, colorToken, width, height, borderRadius, style, ...rest }: CardProps): JSX.Element;

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

@@ -1,15 +1,27 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import React from 'react';
 import { BoxShadow, Padding, useTheme } from '../../core';
-export function Card({ children, cardType, elevation, colorToken = 'primary-container', width, height, borderRadius, }) {
+export function Card(_a) {
+    var { children, cardType, elevation, colorToken = 'surface', width, height, borderRadius, style } = _a, rest = __rest(_a, ["children", "cardType", "elevation", "colorToken", "width", "height", "borderRadius", "style"]);
     const { colors, containers } = useTheme();
     const { borderRadii } = containers.card;
-    const style = Object.assign({ height,
-        width, backgroundColor: colors[colorToken || 'surface'], color: colors[`on-${colorToken}` || 'on-surface'] }, Padding('md', 'all'));
+    const styles = Object.assign(Object.assign({ height,
+        width, backgroundColor: colors[colorToken || 'surface'], color: colors[`on-${colorToken}` || 'on-surface'] }, Padding('md', 'all')), style);
     if (cardType === 'elevated') {
-        style.boxShadow = BoxShadow(elevation || 'raised');
+        styles.boxShadow = BoxShadow(elevation || 'raised');
     }
     if (borderRadii && borderRadius !== 'none') {
-        style.borderRadius = borderRadii[borderRadius || 'md'];
+        styles.borderRadius = borderRadii[borderRadius || 'md'];
     }
-    return React.createElement("div", { style: style }, children);
+    return (React.createElement("div", Object.assign({ style: styles }, rest), children));
 }

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