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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/cjs/components/card/card.component.d.ts +6 -5
  2. package/dist/cjs/components/card/card.component.js +18 -6
  3. package/dist/esm/components/card/card.component.d.ts +6 -5
  4. package/dist/esm/components/card/card.component.js +18 -6
  5. package/package.json +1 -1
package/dist/cjs/components/card/card.component.d.ts CHANGED
@@ -1,13 +1,14 @@
1
- import { ReactNode } from 'react';
1
+ import { HTMLAttributes, ReactNode } from 'react';
2
2
  import { ContainerColorToken, ShadowElevation, Size } from '@uni-design-system/uni-core';
3
+ import { Property } from 'csstype';
3
4
  export type CardType = 'elevated' | 'filled' | 'outlined';
4
- export interface CardProps {
5
+ export interface CardProps extends HTMLAttributes<HTMLDivElement> {
5
6
  children?: ReactNode;
6
7
  cardType?: CardType;
7
8
  colorToken?: ContainerColorToken;
8
9
  elevation?: ShadowElevation;
9
- width?: number;
10
- height?: number | string | undefined;
10
+ width?: Property.Width<number | string>;
11
+ height?: Property.Height<number | string>;
11
12
  borderRadius?: Size | 'none';
12
13
  }
13
- export declare function Card({ children, cardType, elevation, colorToken, width, height, borderRadius, }: CardProps): JSX.Element;
14
+ export declare function Card({ children, cardType, elevation, colorToken, width, height, borderRadius, style, ...rest }: CardProps): JSX.Element;
package/dist/cjs/components/card/card.component.js CHANGED
@@ -1,4 +1,15 @@
1
1
  "use strict";
2
+ var __rest = (this && this.__rest) || function (s, e) {
3
+ var t = {};
4
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
5
+ t[p] = s[p];
6
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
7
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
8
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
9
+ t[p[i]] = s[p[i]];
10
+ }
11
+ return t;
12
+ };
2
13
  var __importDefault = (this && this.__importDefault) || function (mod) {
3
14
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
15
  };
@@ -6,17 +17,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
6
17
  exports.Card = void 0;
7
18
  const react_1 = __importDefault(require("react"));
8
19
  const core_1 = require("../../core");
9
- function Card({ children, cardType, elevation, colorToken = 'primary-container', width, height, borderRadius, }) {
20
+ function Card(_a) {
21
+ var { children, cardType, elevation, colorToken = 'surface', width, height, borderRadius, style } = _a, rest = __rest(_a, ["children", "cardType", "elevation", "colorToken", "width", "height", "borderRadius", "style"]);
10
22
  const { colors, containers } = (0, core_1.useTheme)();
11
23
  const { borderRadii } = containers.card;
12
- const style = Object.assign({ height,
13
- width, backgroundColor: colors[colorToken || 'surface'], color: colors[`on-${colorToken}` || 'on-surface'] }, (0, core_1.Padding)('md', 'all'));
24
+ const styles = Object.assign(Object.assign({ height,
25
+ width, backgroundColor: colors[colorToken || 'surface'], color: colors[`on-${colorToken}` || 'on-surface'] }, (0, core_1.Padding)('md', 'all')), style);
14
26
  if (cardType === 'elevated') {
15
- style.boxShadow = (0, core_1.BoxShadow)(elevation || 'raised');
27
+ styles.boxShadow = (0, core_1.BoxShadow)(elevation || 'raised');
16
28
  }
17
29
  if (borderRadii && borderRadius !== 'none') {
18
- style.borderRadius = borderRadii[borderRadius || 'md'];
30
+ styles.borderRadius = borderRadii[borderRadius || 'md'];
19
31
  }
20
- return react_1.default.createElement("div", { style: style }, children);
32
+ return (react_1.default.createElement("div", Object.assign({ style: styles }, rest), children));
21
33
  }
22
34
  exports.Card = Card;
package/dist/esm/components/card/card.component.d.ts CHANGED
@@ -1,13 +1,14 @@
1
- import { ReactNode } from 'react';
1
+ import { HTMLAttributes, ReactNode } from 'react';
2
2
  import { ContainerColorToken, ShadowElevation, Size } from '@uni-design-system/uni-core';
3
+ import { Property } from 'csstype';
3
4
  export type CardType = 'elevated' | 'filled' | 'outlined';
4
- export interface CardProps {
5
+ export interface CardProps extends HTMLAttributes<HTMLDivElement> {
5
6
  children?: ReactNode;
6
7
  cardType?: CardType;
7
8
  colorToken?: ContainerColorToken;
8
9
  elevation?: ShadowElevation;
9
- width?: number;
10
- height?: number | string | undefined;
10
+ width?: Property.Width<number | string>;
11
+ height?: Property.Height<number | string>;
11
12
  borderRadius?: Size | 'none';
12
13
  }
13
- export declare function Card({ children, cardType, elevation, colorToken, width, height, borderRadius, }: CardProps): JSX.Element;
14
+ export declare function Card({ children, cardType, elevation, colorToken, width, height, borderRadius, style, ...rest }: CardProps): JSX.Element;
package/dist/esm/components/card/card.component.js CHANGED
@@ -1,15 +1,27 @@
1
+ var __rest = (this && this.__rest) || function (s, e) {
2
+ var t = {};
3
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
4
+ t[p] = s[p];
5
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
6
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
7
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
8
+ t[p[i]] = s[p[i]];
9
+ }
10
+ return t;
11
+ };
1
12
  import React from 'react';
2
13
  import { BoxShadow, Padding, useTheme } from '../../core';
3
- export function Card({ children, cardType, elevation, colorToken = 'primary-container', width, height, borderRadius, }) {
14
+ export function Card(_a) {
15
+ var { children, cardType, elevation, colorToken = 'surface', width, height, borderRadius, style } = _a, rest = __rest(_a, ["children", "cardType", "elevation", "colorToken", "width", "height", "borderRadius", "style"]);
4
16
  const { colors, containers } = useTheme();
5
17
  const { borderRadii } = containers.card;
6
- const style = Object.assign({ height,
7
- width, backgroundColor: colors[colorToken || 'surface'], color: colors[`on-${colorToken}` || 'on-surface'] }, Padding('md', 'all'));
18
+ const styles = Object.assign(Object.assign({ height,
19
+ width, backgroundColor: colors[colorToken || 'surface'], color: colors[`on-${colorToken}` || 'on-surface'] }, Padding('md', 'all')), style);
8
20
  if (cardType === 'elevated') {
9
- style.boxShadow = BoxShadow(elevation || 'raised');
21
+ styles.boxShadow = BoxShadow(elevation || 'raised');
10
22
  }
11
23
  if (borderRadii && borderRadius !== 'none') {
12
- style.borderRadius = borderRadii[borderRadius || 'md'];
24
+ styles.borderRadius = borderRadii[borderRadius || 'md'];
13
25
  }
14
- return React.createElement("div", { style: style }, children);
26
+ return (React.createElement("div", Object.assign({ style: styles }, rest), children));
15
27
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uni-design-system/uni-react",
3
- "version": "0.0.11",
3
+ "version": "0.0.12",
4
4
  "description": "React component library for the UNI Design System.",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/esm/index.js",