@akinon/ui-card 1.0.0 → 1.0.1

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 (7) hide show
  1. package/dist/cjs/index.d.ts +0 -11
  2. package/dist/cjs/index.d.ts.map +1 -1
  3. package/dist/cjs/index.js +5 -48
  4. package/dist/esm/index.d.ts +0 -11
  5. package/dist/esm/index.d.ts.map +1 -1
  6. package/dist/esm/index.js +6 -48
  7. package/package.json +3 -5
package/dist/cjs/index.d.ts CHANGED
@@ -6,15 +6,4 @@ export type * from './types';
6
6
  */
7
7
  export declare const Card: ({ children, inner, width, padding, ...restCardProps }: CardProps) => React.JSX.Element;
8
8
  export declare const CardMeta: React.FC<import("antd/es/card").CardMetaProps>;
9
- export type SingleNavCard = {
10
- title: string;
11
- text: string;
12
- icon: string;
13
- iconColor: string;
14
- onClick?: () => void;
15
- };
16
- export type NavCardsProps = {
17
- items: SingleNavCard[];
18
- };
19
- export declare const NavCards: (props: NavCardsProps) => React.JSX.Element;
20
9
  //# sourceMappingURL=index.d.ts.map
package/dist/cjs/index.d.ts.map CHANGED
@@ -1 +1 @@
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;AACzC,mBAAmB,SAAS,CAAC;AAE7B;;GAEG;AAEH,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"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACzC,mBAAmB,SAAS,CAAC;AAE7B;;GAEG;AAEH,eAAO,MAAM,IAAI,0DAMd,SAAS,sBAiFX,CAAC;AAEF,eAAO,MAAM,QAAQ,gDAAe,CAAC"}
package/dist/cjs/index.js CHANGED
@@ -11,10 +11,8 @@ var __rest = (this && this.__rest) || function (s, e) {
11
11
  return t;
12
12
  };
13
13
  Object.defineProperty(exports, "__esModule", { value: true });
14
- exports.NavCards = exports.CardMeta = exports.Card = void 0;
15
- const icons_1 = require("@akinon/icons");
14
+ exports.CardMeta = exports.Card = void 0;
16
15
  const ui_theme_1 = require("@akinon/ui-theme");
17
- const ui_typography_1 = require("@akinon/ui-typography");
18
16
  const cssinjs_1 = require("@ant-design/cssinjs");
19
17
  const antd_1 = require("antd");
20
18
  const React = require("react");
@@ -26,6 +24,7 @@ const Card = (_a) => {
26
24
  const { getPrefixCls, theme: themeConfig } = React.useContext(antd_1.ConfigProvider.ConfigContext);
27
25
  const { token, hashId } = (0, ui_theme_1.useToken)();
28
26
  const cardToken = token.Card;
27
+ const customTokens = ui_theme_1.theme.CustomTokens || {};
29
28
  const useStyle = React.useCallback((0, cssinjs_1.useStyleRegister)({
30
29
  token: token,
31
30
  path: ['Card'],
@@ -37,14 +36,14 @@ const Card = (_a) => {
37
36
  return {
38
37
  [`${prefixCls}`]: {
39
38
  [`${prefixClsWithoutHash}-head`]: {
40
- borderBottom: 'none',
39
+ borderBottom: customTokens.border.borderNone,
41
40
  padding: `${padding || (cardToken === null || cardToken === void 0 ? void 0 : cardToken.paddingLG)}px 0 0`,
42
41
  marginBottom: -16,
43
42
  ['&-wrapper']: {
44
43
  paddingInline: padding || (cardToken === null || cardToken === void 0 ? void 0 : cardToken.paddingLG),
45
44
  ['&:before']: {
46
- content: '""',
47
- display: 'block',
45
+ content: customTokens.others.emptyContent,
46
+ display: customTokens.layout.displayBlock,
48
47
  height: '16px',
49
48
  width: '4px',
50
49
  marginInlineStart: '-4px',
@@ -81,45 +80,3 @@ const Card = (_a) => {
81
80
  };
82
81
  exports.Card = Card;
83
82
  exports.CardMeta = antd_1.Card.Meta;
84
- const NavCards = (props) => {
85
- return (React.createElement(antd_1.ConfigProvider, { theme: {
86
- token: {
87
- colorTextBase: ui_theme_1.theme.colors.neutral['950'],
88
- colorText: ui_theme_1.theme.colors.neutral['950'],
89
- fontSizeHeading4: ui_theme_1.fontSize * 1.125
90
- },
91
- components: {
92
- Card: {
93
- colorBgContainer: ui_theme_1.theme.colors.neutral['100']
94
- },
95
- Typography: {
96
- titleMarginBottom: 0,
97
- // TODO: this is not working for all titles, https://github.com/ant-design/ant-design/issues/46243
98
- // titleMarginTop: 0,
99
- fontWeightStrong: 500
100
- }
101
- }
102
- } },
103
- React.createElement("div", { style: { overflow: 'hidden' } },
104
- React.createElement(antd_1.Row, { gutter: [16, 16], style: { padding: '1.5rem 2rem' } }, props.items.map(({ title, text, iconColor, icon, onClick }, i) => (React.createElement(antd_1.Col, { key: i, span: 8 },
105
- React.createElement(antd_1.Card, { bordered: false, onClick: onClick, bodyStyle: {
106
- padding: 0,
107
- height: '127px',
108
- overflow: 'hidden',
109
- borderRadius: '0.5rem',
110
- cursor: 'pointer'
111
- } },
112
- React.createElement(antd_1.Flex, { justify: "space-between" },
113
- React.createElement("div", { style: {
114
- background: iconColor,
115
- fontSize: ui_theme_1.fontSize * 2.5,
116
- width: '80px',
117
- padding: '2rem 1.25rem',
118
- color: ui_theme_1.theme.colors.neutral['100']
119
- } },
120
- React.createElement(icons_1.Icon, { icon: icon })),
121
- React.createElement(antd_1.Flex, { vertical: true, justify: "flex-start", style: { padding: '1.25rem' } },
122
- React.createElement(ui_typography_1.Title, { level: 4, style: { marginBlockStart: 0 } }, title),
123
- React.createElement(ui_typography_1.Text, null, text)))))))))));
124
- };
125
- exports.NavCards = NavCards;
package/dist/esm/index.d.ts CHANGED
@@ -6,15 +6,4 @@ export type * from './types';
6
6
  */
7
7
  export declare const Card: ({ children, inner, width, padding, ...restCardProps }: CardProps) => React.JSX.Element;
8
8
  export declare const CardMeta: React.FC<import("antd/es/card").CardMetaProps>;
9
- export type SingleNavCard = {
10
- title: string;
11
- text: string;
12
- icon: string;
13
- iconColor: string;
14
- onClick?: () => void;
15
- };
16
- export type NavCardsProps = {
17
- items: SingleNavCard[];
18
- };
19
- export declare const NavCards: (props: NavCardsProps) => React.JSX.Element;
20
9
  //# sourceMappingURL=index.d.ts.map
package/dist/esm/index.d.ts.map CHANGED
@@ -1 +1 @@
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;AACzC,mBAAmB,SAAS,CAAC;AAE7B;;GAEG;AAEH,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"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACzC,mBAAmB,SAAS,CAAC;AAE7B;;GAEG;AAEH,eAAO,MAAM,IAAI,0DAMd,SAAS,sBAiFX,CAAC;AAEF,eAAO,MAAM,QAAQ,gDAAe,CAAC"}
package/dist/esm/index.js CHANGED
@@ -9,11 +9,9 @@ var __rest = (this && this.__rest) || function (s, e) {
9
9
  }
10
10
  return t;
11
11
  };
12
- import { Icon } from '@akinon/icons';
13
- import { fontSize, theme, useToken } from '@akinon/ui-theme';
14
- import { Text, Title } from '@akinon/ui-typography';
12
+ import { theme, useToken } from '@akinon/ui-theme';
15
13
  import { useStyleRegister } from '@ant-design/cssinjs';
16
- import { Card as AntCard, Col, ConfigProvider, Flex, Row } from 'antd';
14
+ import { Card as AntCard, ConfigProvider } from 'antd';
17
15
  import * as React from 'react';
18
16
  /**
19
17
  * Akinon UI Card component. Extends HTMLDivElement.
@@ -23,6 +21,7 @@ export const Card = (_a) => {
23
21
  const { getPrefixCls, theme: themeConfig } = React.useContext(ConfigProvider.ConfigContext);
24
22
  const { token, hashId } = useToken();
25
23
  const cardToken = token.Card;
24
+ const customTokens = theme.CustomTokens || {};
26
25
  const useStyle = React.useCallback(useStyleRegister({
27
26
  token: token,
28
27
  path: ['Card'],
@@ -34,14 +33,14 @@ export const Card = (_a) => {
34
33
  return {
35
34
  [`${prefixCls}`]: {
36
35
  [`${prefixClsWithoutHash}-head`]: {
37
- borderBottom: 'none',
36
+ borderBottom: customTokens.border.borderNone,
38
37
  padding: `${padding || (cardToken === null || cardToken === void 0 ? void 0 : cardToken.paddingLG)}px 0 0`,
39
38
  marginBottom: -16,
40
39
  ['&-wrapper']: {
41
40
  paddingInline: padding || (cardToken === null || cardToken === void 0 ? void 0 : cardToken.paddingLG),
42
41
  ['&:before']: {
43
- content: '""',
44
- display: 'block',
42
+ content: customTokens.others.emptyContent,
43
+ display: customTokens.layout.displayBlock,
45
44
  height: '16px',
46
45
  width: '4px',
47
46
  marginInlineStart: '-4px',
@@ -77,44 +76,3 @@ export const Card = (_a) => {
77
76
  } }, (inner ? { type: 'inner' } : null), restCardProps), children));
78
77
  };
79
78
  export const CardMeta = AntCard.Meta;
80
- export const NavCards = (props) => {
81
- return (React.createElement(ConfigProvider, { theme: {
82
- token: {
83
- colorTextBase: theme.colors.neutral['950'],
84
- colorText: theme.colors.neutral['950'],
85
- fontSizeHeading4: fontSize * 1.125
86
- },
87
- components: {
88
- Card: {
89
- colorBgContainer: theme.colors.neutral['100']
90
- },
91
- Typography: {
92
- titleMarginBottom: 0,
93
- // TODO: this is not working for all titles, https://github.com/ant-design/ant-design/issues/46243
94
- // titleMarginTop: 0,
95
- fontWeightStrong: 500
96
- }
97
- }
98
- } },
99
- React.createElement("div", { style: { overflow: 'hidden' } },
100
- React.createElement(Row, { gutter: [16, 16], style: { padding: '1.5rem 2rem' } }, props.items.map(({ title, text, iconColor, icon, onClick }, i) => (React.createElement(Col, { key: i, span: 8 },
101
- React.createElement(AntCard, { bordered: false, onClick: onClick, bodyStyle: {
102
- padding: 0,
103
- height: '127px',
104
- overflow: 'hidden',
105
- borderRadius: '0.5rem',
106
- cursor: 'pointer'
107
- } },
108
- React.createElement(Flex, { justify: "space-between" },
109
- React.createElement("div", { style: {
110
- background: iconColor,
111
- fontSize: fontSize * 2.5,
112
- width: '80px',
113
- padding: '2rem 1.25rem',
114
- color: theme.colors.neutral['100']
115
- } },
116
- React.createElement(Icon, { icon: icon })),
117
- React.createElement(Flex, { vertical: true, justify: "flex-start", style: { padding: '1.25rem' } },
118
- React.createElement(Title, { level: 4, style: { marginBlockStart: 0 } }, title),
119
- React.createElement(Text, null, text)))))))))));
120
- };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@akinon/ui-card",
3
- "version": "1.0.0",
3
+ "version": "1.0.1",
4
4
  "private": false,
5
5
  "type": "module",
6
6
  "main": "dist/esm/index.js",
@@ -10,16 +10,14 @@
10
10
  ],
11
11
  "dependencies": {
12
12
  "antd": "5.22.6",
13
- "@akinon/icons": "1.0.0",
14
- "@akinon/ui-theme": "1.0.0",
15
- "@akinon/ui-typography": "1.0.0"
13
+ "@akinon/ui-theme": "1.0.1"
16
14
  },
17
15
  "devDependencies": {
18
16
  "clean-package": "2.2.0",
19
17
  "copyfiles": "^2.4.1",
20
18
  "rimraf": "^5.0.5",
21
19
  "typescript": "*",
22
- "@akinon/typescript-config": "1.0.0"
20
+ "@akinon/typescript-config": "1.0.1"
23
21
  },
24
22
  "peerDependencies": {
25
23
  "react": ">=18",