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

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/image/index.d.ts

@@ -0,0 +1,2 @@
+export * from './image.component';
+export * from './image.model';

package/dist/cjs/core/image/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./image.component"), exports);
+__exportStar(require("./image.model"), exports);

package/dist/cjs/core/index.d.ts

@@ -1,11 +1,12 @@
-export * from './theme';
 export * from './border';
+export * from './container';
 export * from './flex';
+export * from './hooks';
 export * from './icon';
+export * from './image';
 export * from './layout';
-export * from './container';
+export * from './overlay';
 export * from './padding';
 export * from './shadow';
 export * from './text';
-export * from './overlay';
-export * from './hooks';
+export * from './theme';

package/dist/cjs/core/index.js

@@ -14,14 +14,15 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./theme"), exports);
 __exportStar(require("./border"), exports);
+__exportStar(require("./container"), exports);
 __exportStar(require("./flex"), exports);
+__exportStar(require("./hooks"), exports);
 __exportStar(require("./icon"), exports);
+__exportStar(require("./image"), exports);
 __exportStar(require("./layout"), exports);
-__exportStar(require("./container"), exports);
+__exportStar(require("./overlay"), exports);
 __exportStar(require("./padding"), exports);
 __exportStar(require("./shadow"), exports);
 __exportStar(require("./text"), exports);
-__exportStar(require("./overlay"), exports);
-__exportStar(require("./hooks"), exports);
+__exportStar(require("./theme"), exports);

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/image/index.d.ts

@@ -0,0 +1,2 @@
+export * from './image.component';
+export * from './image.model';

package/dist/esm/core/image/index.js

@@ -0,0 +1,2 @@
+export * from './image.component';
+export * from './image.model';

package/dist/esm/core/index.d.ts

@@ -1,11 +1,12 @@
-export * from './theme';
 export * from './border';
+export * from './container';
 export * from './flex';
+export * from './hooks';
 export * from './icon';
+export * from './image';
 export * from './layout';
-export * from './container';
+export * from './overlay';
 export * from './padding';
 export * from './shadow';
 export * from './text';
-export * from './overlay';
-export * from './hooks';
+export * from './theme';

package/dist/esm/core/index.js

@@ -1,11 +1,12 @@
-export * from './theme';
 export * from './border';
+export * from './container';
 export * from './flex';
+export * from './hooks';
 export * from './icon';
+export * from './image';
 export * from './layout';
-export * from './container';
+export * from './overlay';
 export * from './padding';
 export * from './shadow';
 export * from './text';
-export * from './overlay';
-export * from './hooks';
+export * from './theme';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uni-design-system/uni-react",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "description": "React component library for the UNI Design System.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",