@akinon/ui-card 0.5.0 → 1.0.1

package/dist/cjs/index.d.ts

@@ -1,19 +1,9 @@
 import * as React from 'react';
 import type { CardProps } from './types';
+export type * from './types';
 /**
  * Akinon UI Card component. Extends HTMLDivElement.
  */
 export declare const Card: ({ children, inner, width, padding, ...restCardProps }: CardProps) => React.JSX.Element;
 export declare const CardMeta: React.FC<import("antd/es/card").CardMetaProps>;
-export type SingleNavCard = {
-    title: string;
-    text: string;
-    icon: string;
-    iconColor: string;
-    onClick?: () => void;
-};
-export type NavCardsProps = {
-    items: SingleNavCard[];
-};
-export declare const NavCards: (props: NavCardsProps) => React.JSX.Element;
 //# sourceMappingURL=index.d.ts.map

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

@@ -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;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"}
+{"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

@@ -11,10 +11,8 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NavCards = exports.CardMeta = exports.Card = void 0;
-const icons_1 = require("@akinon/icons");
+exports.CardMeta = exports.Card = void 0;
 const ui_theme_1 = require("@akinon/ui-theme");
-const ui_typography_1 = require("@akinon/ui-typography");
 const cssinjs_1 = require("@ant-design/cssinjs");
 const antd_1 = require("antd");
 const React = require("react");
@@ -26,6 +24,7 @@ const Card = (_a) => {
     const { getPrefixCls, theme: themeConfig } = React.useContext(antd_1.ConfigProvider.ConfigContext);
     const { token, hashId } = (0, ui_theme_1.useToken)();
     const cardToken = token.Card;
+    const customTokens = ui_theme_1.theme.CustomTokens || {};
     const useStyle = React.useCallback((0, cssinjs_1.useStyleRegister)({
         token: token,
         path: ['Card'],
@@ -37,14 +36,14 @@ const Card = (_a) => {
         return {
             [`${prefixCls}`]: {
                 [`${prefixClsWithoutHash}-head`]: {
-                    borderBottom: 'none',
+                    borderBottom: customTokens.border.borderNone,
                     padding: `${padding || (cardToken === null || cardToken === void 0 ? void 0 : cardToken.paddingLG)}px 0 0`,
                     marginBottom: -16,
                     ['&-wrapper']: {
                         paddingInline: padding || (cardToken === null || cardToken === void 0 ? void 0 : cardToken.paddingLG),
                         ['&:before']: {
-                            content: '""',
-                            display: 'block',
+                            content: customTokens.others.emptyContent,
+                            display: customTokens.layout.displayBlock,
                             height: '16px',
                             width: '4px',
                             marginInlineStart: '-4px',
@@ -81,45 +80,3 @@ const Card = (_a) => {
 };
 exports.Card = Card;
 exports.CardMeta = antd_1.Card.Meta;
-const NavCards = (props) => {
-    return (React.createElement(antd_1.ConfigProvider, { theme: {
-            token: {
-                colorTextBase: ui_theme_1.theme.colors.neutral['950'],
-                colorText: ui_theme_1.theme.colors.neutral['950'],
-                fontSizeHeading4: ui_theme_1.fontSize * 1.125
-            },
-            components: {
-                Card: {
-                    colorBgContainer: ui_theme_1.theme.colors.neutral['100']
-                },
-                Typography: {
-                    titleMarginBottom: 0,
-                    // TODO: this is not working for all titles, https://github.com/ant-design/ant-design/issues/46243
-                    // titleMarginTop: 0,
-                    fontWeightStrong: 500
-                }
-            }
-        } },
-        React.createElement("div", { style: { overflow: 'hidden' } },
-            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 },
-                React.createElement(antd_1.Card, { bordered: false, onClick: onClick, bodyStyle: {
-                        padding: 0,
-                        height: '127px',
-                        overflow: 'hidden',
-                        borderRadius: '0.5rem',
-                        cursor: 'pointer'
-                    } },
-                    React.createElement(antd_1.Flex, { justify: "space-between" },
-                        React.createElement("div", { style: {
-                                background: iconColor,
-                                fontSize: ui_theme_1.fontSize * 2.5,
-                                width: '80px',
-                                padding: '2rem 1.25rem',
-                                color: ui_theme_1.theme.colors.neutral['100']
-                            } },
-                            React.createElement(icons_1.Icon, { icon: icon })),
-                        React.createElement(antd_1.Flex, { vertical: true, justify: "flex-start", style: { padding: '1.25rem' } },
-                            React.createElement(ui_typography_1.Title, { level: 4, style: { marginBlockStart: 0 } }, title),
-                            React.createElement(ui_typography_1.Text, null, text)))))))))));
-};
-exports.NavCards = NavCards;

package/dist/cjs/types.d.ts

@@ -6,50 +6,62 @@ export interface CardProps
    * The title of the card.
    */
   title?: React.ReactNode;
+
   /**
    * The extra content of the card.
    */
   extra?: React.ReactNode;
+
   /**
    * Whether the card has a border.
    */
   bordered?: boolean;
+
   /**
    * Whether the card is loading.
    */
   loading?: boolean;
+
   /**
    * Whether the card is hoverable.
    */
   hoverable?: boolean;
+
   /**
    * The children of the card.
    */
   children?: React.ReactNode;
+
   /**
    * The class name of the card.
    */
   className?: string;
+
   /**
    * The root class name of the card.
    */
   rootClassName?: string;
+
   /**
    * The size of the card.
    */
   size?: 'default' | 'small';
+
   /**
    * Whether the card is an inner card.
    */
   inner?: boolean;
+
   /**
    * The cover node of the card.
    */
   cover?: React.ReactNode;
+
   /**
    * The actions node of the card.
    */
   actions?: React.ReactNode[];
+
   /**
    * The class names of specific parts of the card.
    */
@@ -61,14 +73,17 @@ export interface CardProps
     actions?: string;
     cover?: string;
   };
+
   /**
    * The width of the card with px or percentage. `number` is in px.
    */
   width?: number | string;
+
   /**
    * The custom padding of the card.
    */
   padding?: number;
+
   /**
    * @ignore
    */

package/dist/esm/index.d.ts

@@ -1,19 +1,9 @@
 import * as React from 'react';
 import type { CardProps } from './types';
+export type * from './types';
 /**
  * Akinon UI Card component. Extends HTMLDivElement.
  */
 export declare const Card: ({ children, inner, width, padding, ...restCardProps }: CardProps) => React.JSX.Element;
 export declare const CardMeta: React.FC<import("antd/es/card").CardMetaProps>;
-export type SingleNavCard = {
-    title: string;
-    text: string;
-    icon: string;
-    iconColor: string;
-    onClick?: () => void;
-};
-export type NavCardsProps = {
-    items: SingleNavCard[];
-};
-export declare const NavCards: (props: NavCardsProps) => React.JSX.Element;
 //# sourceMappingURL=index.d.ts.map

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

@@ -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;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"}
+{"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

@@ -9,11 +9,9 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { Icon } from '@akinon/icons';
-import { fontSize, theme, useToken } from '@akinon/ui-theme';
-import { Text, Title } from '@akinon/ui-typography';
+import { theme, useToken } from '@akinon/ui-theme';
 import { useStyleRegister } from '@ant-design/cssinjs';
-import { Card as AntCard, Col, ConfigProvider, Flex, Row } from 'antd';
+import { Card as AntCard, ConfigProvider } from 'antd';
 import * as React from 'react';
 /**
  * Akinon UI Card component. Extends HTMLDivElement.
@@ -23,6 +21,7 @@ export const Card = (_a) => {
     const { getPrefixCls, theme: themeConfig } = React.useContext(ConfigProvider.ConfigContext);
     const { token, hashId } = useToken();
     const cardToken = token.Card;
+    const customTokens = theme.CustomTokens || {};
     const useStyle = React.useCallback(useStyleRegister({
         token: token,
         path: ['Card'],
@@ -34,14 +33,14 @@ export const Card = (_a) => {
         return {
             [`${prefixCls}`]: {
                 [`${prefixClsWithoutHash}-head`]: {
-                    borderBottom: 'none',
+                    borderBottom: customTokens.border.borderNone,
                     padding: `${padding || (cardToken === null || cardToken === void 0 ? void 0 : cardToken.paddingLG)}px 0 0`,
                     marginBottom: -16,
                     ['&-wrapper']: {
                         paddingInline: padding || (cardToken === null || cardToken === void 0 ? void 0 : cardToken.paddingLG),
                         ['&:before']: {
-                            content: '""',
-                            display: 'block',
+                            content: customTokens.others.emptyContent,
+                            display: customTokens.layout.displayBlock,
                             height: '16px',
                             width: '4px',
                             marginInlineStart: '-4px',
@@ -77,44 +76,3 @@ export const Card = (_a) => {
         } }, (inner ? { type: 'inner' } : null), restCardProps), children));
 };
 export const CardMeta = AntCard.Meta;
-export const NavCards = (props) => {
-    return (React.createElement(ConfigProvider, { theme: {
-            token: {
-                colorTextBase: theme.colors.neutral['950'],
-                colorText: theme.colors.neutral['950'],
-                fontSizeHeading4: fontSize * 1.125
-            },
-            components: {
-                Card: {
-                    colorBgContainer: theme.colors.neutral['100']
-                },
-                Typography: {
-                    titleMarginBottom: 0,
-                    // TODO: this is not working for all titles, https://github.com/ant-design/ant-design/issues/46243
-                    // titleMarginTop: 0,
-                    fontWeightStrong: 500
-                }
-            }
-        } },
-        React.createElement("div", { style: { overflow: 'hidden' } },
-            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 },
-                React.createElement(AntCard, { bordered: false, onClick: onClick, bodyStyle: {
-                        padding: 0,
-                        height: '127px',
-                        overflow: 'hidden',
-                        borderRadius: '0.5rem',
-                        cursor: 'pointer'
-                    } },
-                    React.createElement(Flex, { justify: "space-between" },
-                        React.createElement("div", { style: {
-                                background: iconColor,
-                                fontSize: fontSize * 2.5,
-                                width: '80px',
-                                padding: '2rem 1.25rem',
-                                color: theme.colors.neutral['100']
-                            } },
-                            React.createElement(Icon, { icon: icon })),
-                        React.createElement(Flex, { vertical: true, justify: "flex-start", style: { padding: '1.25rem' } },
-                            React.createElement(Title, { level: 4, style: { marginBlockStart: 0 } }, title),
-                            React.createElement(Text, null, text)))))))))));
-};

package/dist/esm/types.d.ts

@@ -6,50 +6,62 @@ export interface CardProps
    * The title of the card.
    */
   title?: React.ReactNode;
+
   /**
    * The extra content of the card.
    */
   extra?: React.ReactNode;
+
   /**
    * Whether the card has a border.
    */
   bordered?: boolean;
+
   /**
    * Whether the card is loading.
    */
   loading?: boolean;
+
   /**
    * Whether the card is hoverable.
    */
   hoverable?: boolean;
+
   /**
    * The children of the card.
    */
   children?: React.ReactNode;
+
   /**
    * The class name of the card.
    */
   className?: string;
+
   /**
    * The root class name of the card.
    */
   rootClassName?: string;
+
   /**
    * The size of the card.
    */
   size?: 'default' | 'small';
+
   /**
    * Whether the card is an inner card.
    */
   inner?: boolean;
+
   /**
    * The cover node of the card.
    */
   cover?: React.ReactNode;
+
   /**
    * The actions node of the card.
    */
   actions?: React.ReactNode[];
+
   /**
    * The class names of specific parts of the card.
    */
@@ -61,14 +73,17 @@ export interface CardProps
     actions?: string;
     cover?: string;
   };
+
   /**
    * The width of the card with px or percentage. `number` is in px.
    */
   width?: number | string;
+
   /**
    * The custom padding of the card.
    */
   padding?: number;
+
   /**
    * @ignore
    */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/ui-card",
-  "version": "0.5.0",
+  "version": "1.0.1",
   "private": false,
   "type": "module",
   "main": "dist/esm/index.js",
@@ -9,17 +9,15 @@
     "dist"
   ],
   "dependencies": {
-    "antd": "5.17.0",
-    "@akinon/icons": "0.6.0",
-    "@akinon/ui-theme": "0.7.0",
-    "@akinon/ui-typography": "0.5.0"
+    "antd": "5.22.6",
+    "@akinon/ui-theme": "1.0.1"
   },
   "devDependencies": {
     "clean-package": "2.2.0",
     "copyfiles": "^2.4.1",
     "rimraf": "^5.0.5",
-    "typescript": "^5.2.2",
-    "@akinon/typescript-config": "0.4.0"
+    "typescript": "*",
+    "@akinon/typescript-config": "1.0.1"
   },
   "peerDependencies": {
     "react": ">=18",