@akinon/ui-card 0.3.0 → 0.5.0

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 (9) hide show
  1. package/dist/cjs/index.d.ts +5 -3
  2. package/dist/cjs/index.d.ts.map +1 -1
  3. package/dist/cjs/index.js +60 -2
  4. package/dist/cjs/types.d.ts +76 -0
  5. package/dist/esm/index.d.ts +5 -3
  6. package/dist/esm/index.d.ts.map +1 -1
  7. package/dist/esm/index.js +61 -3
  8. package/dist/esm/types.d.ts +76 -0
  9. package/package.json +6 -12
package/dist/cjs/index.d.ts CHANGED
@@ -1,7 +1,9 @@
1
- import type { CardProps as AntCardProps } from 'antd';
2
1
  import * as React from 'react';
3
- export type CardProps = AntCardProps;
4
- export declare const Card: ({ children, ...restCardProps }: CardProps) => React.JSX.Element;
2
+ import type { CardProps } from './types';
3
+ /**
4
+ * Akinon UI Card component. Extends HTMLDivElement.
5
+ */
6
+ export declare const Card: ({ children, inner, width, padding, ...restCardProps }: CardProps) => React.JSX.Element;
5
7
  export declare const CardMeta: React.FC<import("antd/es/card").CardMetaProps>;
6
8
  export type SingleNavCard = {
7
9
  title: string;
package/dist/cjs/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,IAAI,YAAY,EAAE,MAAM,MAAM,CAAC;AAEtD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,MAAM,SAAS,GAAG,YAAY,CAAC;AAErC,eAAO,MAAM,IAAI,mCAAoC,SAAS,sBAE7D,CAAC;AAEF,eAAO,MAAM,QAAQ,gDAAe,CAAC;AAErC,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,aAAa,EAAE,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,QAAQ,UAAW,aAAa,sBAmE5C,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC;;GAEG;AACH,eAAO,MAAM,IAAI,0DAMd,SAAS,sBAgFX,CAAC;AAEF,eAAO,MAAM,QAAQ,gDAAe,CAAC;AAErC,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,aAAa,EAAE,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,QAAQ,UAAW,aAAa,sBAmE5C,CAAC"}
package/dist/cjs/index.js CHANGED
@@ -15,11 +15,69 @@ exports.NavCards = exports.CardMeta = exports.Card = void 0;
15
15
  const icons_1 = require("@akinon/icons");
16
16
  const ui_theme_1 = require("@akinon/ui-theme");
17
17
  const ui_typography_1 = require("@akinon/ui-typography");
18
+ const cssinjs_1 = require("@ant-design/cssinjs");
18
19
  const antd_1 = require("antd");
19
20
  const React = require("react");
21
+ /**
22
+ * Akinon UI Card component. Extends HTMLDivElement.
23
+ */
20
24
  const Card = (_a) => {
21
- var { children } = _a, restCardProps = __rest(_a, ["children"]);
22
- return React.createElement(antd_1.Card, Object.assign({}, restCardProps), children);
25
+ var { children, inner, width, padding } = _a, restCardProps = __rest(_a, ["children", "inner", "width", "padding"]);
26
+ const { getPrefixCls, theme: themeConfig } = React.useContext(antd_1.ConfigProvider.ConfigContext);
27
+ const { token, hashId } = (0, ui_theme_1.useToken)();
28
+ const cardToken = token.Card;
29
+ const useStyle = React.useCallback((0, cssinjs_1.useStyleRegister)({
30
+ token: token,
31
+ path: ['Card'],
32
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
33
+ theme: themeConfig
34
+ }, () => {
35
+ const prefixClsWithoutHash = `.${getPrefixCls()}-card`;
36
+ const prefixCls = `:where(.${hashId})${prefixClsWithoutHash}`;
37
+ return {
38
+ [`${prefixCls}`]: {
39
+ [`${prefixClsWithoutHash}-head`]: {
40
+ borderBottom: 'none',
41
+ padding: `${padding || (cardToken === null || cardToken === void 0 ? void 0 : cardToken.paddingLG)}px 0 0`,
42
+ marginBottom: -16,
43
+ ['&-wrapper']: {
44
+ paddingInline: padding || (cardToken === null || cardToken === void 0 ? void 0 : cardToken.paddingLG),
45
+ ['&:before']: {
46
+ content: '""',
47
+ display: 'block',
48
+ height: '16px',
49
+ width: '4px',
50
+ marginInlineStart: '-4px',
51
+ background: ui_theme_1.theme === null || ui_theme_1.theme === void 0 ? void 0 : ui_theme_1.theme.colors.red['425'],
52
+ transform: `translateX(-${(padding || (cardToken === null || cardToken === void 0 ? void 0 : cardToken.paddingLG)) - 2}px)`
53
+ }
54
+ }
55
+ },
56
+ [`&>${prefixClsWithoutHash}-body`]: {
57
+ padding: padding || (cardToken === null || cardToken === void 0 ? void 0 : cardToken.paddingLG)
58
+ },
59
+ ['&-small']: {
60
+ [`${prefixClsWithoutHash}-head`]: {
61
+ padding: `${padding || (cardToken === null || cardToken === void 0 ? void 0 : cardToken.padding)}px 0`,
62
+ marginBottom: -24,
63
+ ['&-wrapper']: {
64
+ paddingInline: padding || (cardToken === null || cardToken === void 0 ? void 0 : cardToken.padding),
65
+ ['&:before']: {
66
+ transform: `translateX(-${(padding || (cardToken === null || cardToken === void 0 ? void 0 : cardToken.padding)) - 2}px)`
67
+ }
68
+ }
69
+ },
70
+ [`&>${prefixClsWithoutHash}-body`]: {
71
+ padding: padding || (cardToken === null || cardToken === void 0 ? void 0 : cardToken.padding)
72
+ }
73
+ }
74
+ }
75
+ };
76
+ }), [padding, cardToken === null || cardToken === void 0 ? void 0 : cardToken.padding, cardToken === null || cardToken === void 0 ? void 0 : cardToken.paddingLG]);
77
+ // TODO: it's not stateful, find a way to make
78
+ return useStyle(React.createElement(antd_1.Card, Object.assign({ style: {
79
+ width: typeof width === 'number' ? `${width}px` : width
80
+ } }, (inner ? { type: 'inner' } : null), restCardProps), children));
23
81
  };
24
82
  exports.Card = Card;
25
83
  exports.CardMeta = antd_1.Card.Meta;
package/dist/cjs/types.d.ts ADDED
@@ -0,0 +1,76 @@
1
+ import type { DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE } from '@akinon/ui-theme';
2
+
3
+ export interface CardProps
4
+ extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
5
+ /**
6
+ * The title of the card.
7
+ */
8
+ title?: React.ReactNode;
9
+ /**
10
+ * The extra content of the card.
11
+ */
12
+ extra?: React.ReactNode;
13
+ /**
14
+ * Whether the card has a border.
15
+ */
16
+ bordered?: boolean;
17
+ /**
18
+ * Whether the card is loading.
19
+ */
20
+ loading?: boolean;
21
+ /**
22
+ * Whether the card is hoverable.
23
+ */
24
+ hoverable?: boolean;
25
+ /**
26
+ * The children of the card.
27
+ */
28
+ children?: React.ReactNode;
29
+ /**
30
+ * The class name of the card.
31
+ */
32
+ className?: string;
33
+ /**
34
+ * The root class name of the card.
35
+ */
36
+ rootClassName?: string;
37
+ /**
38
+ * The size of the card.
39
+ */
40
+ size?: 'default' | 'small';
41
+ /**
42
+ * Whether the card is an inner card.
43
+ */
44
+ inner?: boolean;
45
+ /**
46
+ * The cover node of the card.
47
+ */
48
+ cover?: React.ReactNode;
49
+ /**
50
+ * The actions node of the card.
51
+ */
52
+ actions?: React.ReactNode[];
53
+ /**
54
+ * The class names of specific parts of the card.
55
+ */
56
+ classNames?: {
57
+ header?: string;
58
+ body?: string;
59
+ extra?: string;
60
+ title?: string;
61
+ actions?: string;
62
+ cover?: string;
63
+ };
64
+ /**
65
+ * The width of the card with px or percentage. `number` is in px.
66
+ */
67
+ width?: number | string;
68
+ /**
69
+ * The custom padding of the card.
70
+ */
71
+ padding?: number;
72
+ /**
73
+ * @ignore
74
+ */
75
+ style?: DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE;
76
+ }
package/dist/esm/index.d.ts CHANGED
@@ -1,7 +1,9 @@
1
- import type { CardProps as AntCardProps } from 'antd';
2
1
  import * as React from 'react';
3
- export type CardProps = AntCardProps;
4
- export declare const Card: ({ children, ...restCardProps }: CardProps) => React.JSX.Element;
2
+ import type { CardProps } from './types';
3
+ /**
4
+ * Akinon UI Card component. Extends HTMLDivElement.
5
+ */
6
+ export declare const Card: ({ children, inner, width, padding, ...restCardProps }: CardProps) => React.JSX.Element;
5
7
  export declare const CardMeta: React.FC<import("antd/es/card").CardMetaProps>;
6
8
  export type SingleNavCard = {
7
9
  title: string;
package/dist/esm/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,IAAI,YAAY,EAAE,MAAM,MAAM,CAAC;AAEtD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,MAAM,SAAS,GAAG,YAAY,CAAC;AAErC,eAAO,MAAM,IAAI,mCAAoC,SAAS,sBAE7D,CAAC;AAEF,eAAO,MAAM,QAAQ,gDAAe,CAAC;AAErC,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,aAAa,EAAE,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,QAAQ,UAAW,aAAa,sBAmE5C,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC;;GAEG;AACH,eAAO,MAAM,IAAI,0DAMd,SAAS,sBAgFX,CAAC;AAEF,eAAO,MAAM,QAAQ,gDAAe,CAAC;AAErC,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,aAAa,EAAE,CAAC;CACxB,CAAC;AAEF,eAAO,MAAM,QAAQ,UAAW,aAAa,sBAmE5C,CAAC"}
package/dist/esm/index.js CHANGED
@@ -10,13 +10,71 @@ var __rest = (this && this.__rest) || function (s, e) {
10
10
  return t;
11
11
  };
12
12
  import { Icon } from '@akinon/icons';
13
- import { fontSize, theme } from '@akinon/ui-theme';
13
+ import { fontSize, theme, useToken } from '@akinon/ui-theme';
14
14
  import { Text, Title } from '@akinon/ui-typography';
15
+ import { useStyleRegister } from '@ant-design/cssinjs';
15
16
  import { Card as AntCard, Col, ConfigProvider, Flex, Row } from 'antd';
16
17
  import * as React from 'react';
18
+ /**
19
+ * Akinon UI Card component. Extends HTMLDivElement.
20
+ */
17
21
  export const Card = (_a) => {
18
- var { children } = _a, restCardProps = __rest(_a, ["children"]);
19
- return React.createElement(AntCard, Object.assign({}, restCardProps), children);
22
+ var { children, inner, width, padding } = _a, restCardProps = __rest(_a, ["children", "inner", "width", "padding"]);
23
+ const { getPrefixCls, theme: themeConfig } = React.useContext(ConfigProvider.ConfigContext);
24
+ const { token, hashId } = useToken();
25
+ const cardToken = token.Card;
26
+ const useStyle = React.useCallback(useStyleRegister({
27
+ token: token,
28
+ path: ['Card'],
29
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
30
+ theme: themeConfig
31
+ }, () => {
32
+ const prefixClsWithoutHash = `.${getPrefixCls()}-card`;
33
+ const prefixCls = `:where(.${hashId})${prefixClsWithoutHash}`;
34
+ return {
35
+ [`${prefixCls}`]: {
36
+ [`${prefixClsWithoutHash}-head`]: {
37
+ borderBottom: 'none',
38
+ padding: `${padding || (cardToken === null || cardToken === void 0 ? void 0 : cardToken.paddingLG)}px 0 0`,
39
+ marginBottom: -16,
40
+ ['&-wrapper']: {
41
+ paddingInline: padding || (cardToken === null || cardToken === void 0 ? void 0 : cardToken.paddingLG),
42
+ ['&:before']: {
43
+ content: '""',
44
+ display: 'block',
45
+ height: '16px',
46
+ width: '4px',
47
+ marginInlineStart: '-4px',
48
+ background: theme === null || theme === void 0 ? void 0 : theme.colors.red['425'],
49
+ transform: `translateX(-${(padding || (cardToken === null || cardToken === void 0 ? void 0 : cardToken.paddingLG)) - 2}px)`
50
+ }
51
+ }
52
+ },
53
+ [`&>${prefixClsWithoutHash}-body`]: {
54
+ padding: padding || (cardToken === null || cardToken === void 0 ? void 0 : cardToken.paddingLG)
55
+ },
56
+ ['&-small']: {
57
+ [`${prefixClsWithoutHash}-head`]: {
58
+ padding: `${padding || (cardToken === null || cardToken === void 0 ? void 0 : cardToken.padding)}px 0`,
59
+ marginBottom: -24,
60
+ ['&-wrapper']: {
61
+ paddingInline: padding || (cardToken === null || cardToken === void 0 ? void 0 : cardToken.padding),
62
+ ['&:before']: {
63
+ transform: `translateX(-${(padding || (cardToken === null || cardToken === void 0 ? void 0 : cardToken.padding)) - 2}px)`
64
+ }
65
+ }
66
+ },
67
+ [`&>${prefixClsWithoutHash}-body`]: {
68
+ padding: padding || (cardToken === null || cardToken === void 0 ? void 0 : cardToken.padding)
69
+ }
70
+ }
71
+ }
72
+ };
73
+ }), [padding, cardToken === null || cardToken === void 0 ? void 0 : cardToken.padding, cardToken === null || cardToken === void 0 ? void 0 : cardToken.paddingLG]);
74
+ // TODO: it's not stateful, find a way to make
75
+ return useStyle(React.createElement(AntCard, Object.assign({ style: {
76
+ width: typeof width === 'number' ? `${width}px` : width
77
+ } }, (inner ? { type: 'inner' } : null), restCardProps), children));
20
78
  };
21
79
  export const CardMeta = AntCard.Meta;
22
80
  export const NavCards = (props) => {
package/dist/esm/types.d.ts ADDED
@@ -0,0 +1,76 @@
1
+ import type { DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE } from '@akinon/ui-theme';
2
+
3
+ export interface CardProps
4
+ extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
5
+ /**
6
+ * The title of the card.
7
+ */
8
+ title?: React.ReactNode;
9
+ /**
10
+ * The extra content of the card.
11
+ */
12
+ extra?: React.ReactNode;
13
+ /**
14
+ * Whether the card has a border.
15
+ */
16
+ bordered?: boolean;
17
+ /**
18
+ * Whether the card is loading.
19
+ */
20
+ loading?: boolean;
21
+ /**
22
+ * Whether the card is hoverable.
23
+ */
24
+ hoverable?: boolean;
25
+ /**
26
+ * The children of the card.
27
+ */
28
+ children?: React.ReactNode;
29
+ /**
30
+ * The class name of the card.
31
+ */
32
+ className?: string;
33
+ /**
34
+ * The root class name of the card.
35
+ */
36
+ rootClassName?: string;
37
+ /**
38
+ * The size of the card.
39
+ */
40
+ size?: 'default' | 'small';
41
+ /**
42
+ * Whether the card is an inner card.
43
+ */
44
+ inner?: boolean;
45
+ /**
46
+ * The cover node of the card.
47
+ */
48
+ cover?: React.ReactNode;
49
+ /**
50
+ * The actions node of the card.
51
+ */
52
+ actions?: React.ReactNode[];
53
+ /**
54
+ * The class names of specific parts of the card.
55
+ */
56
+ classNames?: {
57
+ header?: string;
58
+ body?: string;
59
+ extra?: string;
60
+ title?: string;
61
+ actions?: string;
62
+ cover?: string;
63
+ };
64
+ /**
65
+ * The width of the card with px or percentage. `number` is in px.
66
+ */
67
+ width?: number | string;
68
+ /**
69
+ * The custom padding of the card.
70
+ */
71
+ padding?: number;
72
+ /**
73
+ * @ignore
74
+ */
75
+ style?: DO_NOT_USE_OR_YOU_WILL_BE_FIRED_INTERNAL_STYLE;
76
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@akinon/ui-card",
3
- "version": "0.3.0",
3
+ "version": "0.5.0",
4
4
  "private": false,
5
5
  "type": "module",
6
6
  "main": "dist/esm/index.js",
@@ -10,18 +10,16 @@
10
10
  ],
11
11
  "dependencies": {
12
12
  "antd": "5.17.0",
13
- "@akinon/ui-typography": "0.3.0",
14
- "@akinon/icons": "0.4.0",
15
- "@akinon/ui-theme": "0.5.0"
13
+ "@akinon/icons": "0.6.0",
14
+ "@akinon/ui-theme": "0.7.0",
15
+ "@akinon/ui-typography": "0.5.0"
16
16
  },
17
17
  "devDependencies": {
18
18
  "clean-package": "2.2.0",
19
19
  "copyfiles": "^2.4.1",
20
20
  "rimraf": "^5.0.5",
21
21
  "typescript": "^5.2.2",
22
- "@akinon/typescript-config": "0.2.0",
23
- "@akinon/eslint-config": "0.1.0",
24
- "@akinon/vite-config": "0.4.0"
22
+ "@akinon/typescript-config": "0.4.0"
25
23
  },
26
24
  "peerDependencies": {
27
25
  "react": ">=18",
@@ -41,12 +39,8 @@
41
39
  "build": "pnpm run build:esm && pnpm run build:commonjs && pnpm run copy:files",
42
40
  "build:esm": "tsc --outDir dist/esm",
43
41
  "build:commonjs": "tsc --module commonjs --outDir dist/cjs",
44
- "copy:files": "copyfiles -u 1 src/**/*.css dist/esm && copyfiles -u 1 src/**/*.css dist/cjs",
42
+ "copy:files": "copyfiles -u 1 \"src/**/*.!(ts|tsx)\" dist/esm && copyfiles -u 1 \"src/**/*.!(ts|tsx)\" dist/cjs",
45
43
  "clean": "rimraf dist/",
46
- "lint": "eslint *.ts*",
47
- "test": "vitest run",
48
- "test:ui": "vitest --ui",
49
- "test:watch": "vitest watch",
50
44
  "typecheck": "tsc --noEmit"
51
45
  }
52
46
  }