@pisell/materials 6.0.14 → 6.0.16

package/lib/components/iconSelect/index.js

@@ -0,0 +1,189 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/iconSelect/index.tsx
+var iconSelect_exports = {};
+__export(iconSelect_exports, {
+  default: () => iconSelect_default
+});
+module.exports = __toCommonJS(iconSelect_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_icons = require("@ant-design/icons");
+var import_ahooks = require("ahooks");
+var import_utils = require("@pisell/utils");
+var import_locales = require("../../locales");
+var import_utils2 = require("./utils");
+var import_index = require("./index.less");
+var IconGroupNameMap = {
+  outlined: (0, import_locales.getText)("pisell-icon-select-outlined"),
+  filled: (0, import_locales.getText)("pisell-icon-select-filled"),
+  "two-tone": (0, import_locales.getText)("pisell-icon-select-two-tone"),
+  iconfont: (0, import_locales.getText)("pisell-icon-select-iconfont")
+};
+var Icon = (props) => {
+  const { type, icons = {}, ...rest } = props;
+  const Comp = icons[type];
+  if (!Comp)
+    return null;
+  return /* @__PURE__ */ import_react.default.createElement(Comp, { ...rest });
+};
+var IconContent = ({
+  selectedGroup,
+  groups,
+  setSelectedGroup,
+  search,
+  setSearch,
+  list,
+  handleChange,
+  icons
+}) => /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode-icon-select-popup" }, /* @__PURE__ */ import_react.default.createElement(
+  import_antd.Radio.Group,
+  {
+    className: "pisell-lowcode-icon-select-radio-group",
+    size: "middle",
+    value: selectedGroup,
+    onChange: (e) => setSelectedGroup(e.target.value)
+  },
+  groups.map((item) => /* @__PURE__ */ import_react.default.createElement(import_antd.Radio.Button, { key: item.group, value: item.group }, IconGroupNameMap[item.group]))
+), /* @__PURE__ */ import_react.default.createElement(
+  import_antd.Input,
+  {
+    value: search,
+    size: "middle",
+    placeholder: (0, import_locales.getText)("pisell-icon-select-search"),
+    allowClear: true,
+    prefix: /* @__PURE__ */ import_react.default.createElement(import_icons.SearchOutlined, null),
+    onChange: (e) => setSearch(e.target.value),
+    style: { width: "100%" },
+    className: "pisell-lowcode-icon-select-search"
+  }
+), /* @__PURE__ */ import_react.default.createElement("ul", { className: "pisell-lowcode-icon-select-content" }, list.map((item) => /* @__PURE__ */ import_react.default.createElement(
+  "li",
+  {
+    className: "pisell-lowcode-icon-select-item",
+    key: item.name,
+    onClick: () => handleChange(item.name),
+    title: item.name
+  },
+  /* @__PURE__ */ import_react.default.createElement(Icon, { type: item.name, icons })
+))));
+var IconSelect = (props) => {
+  const { disabled, defaultValue } = props;
+  const [open, setOpen] = (0, import_react.useState)(false);
+  const [search, setSearch] = (0, import_react.useState)("");
+  const [icons, setIcons] = (0, import_react.useState)({});
+  const [groups, setGroups] = (0, import_react.useState)([]);
+  const [selectedGroup, setSelectedGroup] = (0, import_react.useState)("outlined");
+  const [firstLoad, setFirstLoad] = (0, import_react.useState)(true);
+  const [list, setList] = (0, import_react.useState)([]);
+  const [value, onChange] = (0, import_ahooks.useControllableValue)(props, {
+    defaultValue
+  });
+  if (firstLoad && defaultValue && (0, import_utils.isUndefined)(value)) {
+    onChange(defaultValue);
+    setFirstLoad(false);
+  }
+  (0, import_react.useEffect)(() => {
+    var _a;
+    const iconList = (0, import_utils2.getIconList)();
+    const groups2 = [];
+    const icons2 = {};
+    iconList.forEach((item) => {
+      const { group, name, icon } = item;
+      if (groups2.every((item2) => item2.group !== group)) {
+        groups2.push({ group, list: [] });
+      }
+      const target = groups2.find((item2) => item2.group === group);
+      target.list.push(item);
+      icons2[item.name] = item == null ? void 0 : item.icon;
+    });
+    setIcons(icons2);
+    setGroups(groups2);
+    setSelectedGroup((_a = groups2[0]) == null ? void 0 : _a.group);
+  }, []);
+  (0, import_react.useEffect)(() => {
+    const currentGroup = groups.find((item) => item.group === selectedGroup);
+    setList(
+      ((currentGroup == null ? void 0 : currentGroup.list) ?? []).filter((item) => {
+        return search ? item.name.toLowerCase().indexOf(search.toLowerCase()) > -1 : true;
+      })
+    );
+  }, [selectedGroup, search, groups]);
+  const handleChange = (icon) => {
+    onChange == null ? void 0 : onChange(icon);
+    hide();
+  };
+  const triggerNode = /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode-icon-select-trigger" }, /* @__PURE__ */ import_react.default.createElement(Icon, { type: value, icons, style: { fontSize: 24 } }));
+  const hide = () => {
+    setOpen(false);
+  };
+  const handleOpenChange = (newOpen) => {
+    setOpen(newOpen);
+  };
+  return /* @__PURE__ */ import_react.default.createElement(import_antd.Space.Compact, { block: true, className: "pisell-lowcode-icon-select" }, /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Popover,
+    {
+      content: /* @__PURE__ */ import_react.default.createElement(
+        IconContent,
+        {
+          selectedGroup,
+          groups,
+          setSelectedGroup,
+          search,
+          setSearch,
+          list,
+          handleChange,
+          icons
+        }
+      ),
+      trigger: "click",
+      placement: "bottom",
+      open,
+      onOpenChange: handleOpenChange
+    },
+    value ? /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Button,
+      {
+        size: "large",
+        disabled,
+        icon: triggerNode,
+        className: "pisell-lowcode-icon-select-button"
+      }
+    ) : /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { className: "pisell-lowcode-icon-select-button-text", size: "large" }, (0, import_locales.getText)("pisell-icon-select-select"))
+  ), value && !disabled && /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Button,
+    {
+      size: "large",
+      icon: /* @__PURE__ */ import_react.default.createElement(import_icons.CloseOutlined, null),
+      className: "pisell-lowcode-icon-select-button",
+      onClick: () => onChange == null ? void 0 : onChange("")
+    }
+  ));
+};
+var iconSelect_default = IconSelect;

package/lib/components/iconSelect/index.less

@@ -0,0 +1,54 @@
+.pisell-lowcode-icon-select-trigger {
+  font-size: 20px;
+  .anticon {
+    font-size: 20px;
+  }
+}
+
+.pisell-lowcode-icon-select-button {
+  // width: 44px;
+  // height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pisell-lowcode-icon-select-button-text {
+  border-radius: 9px;
+}
+
+.pisell-lowcode-icon-select-popup {
+  width: 350px;
+  border-radius: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  .pisell-lowcode-icon-select-radio-group {
+    width: 100%;
+    display: flex;
+    & > * {
+      flex: 1;
+      padding: 0;
+      text-align: center;
+    }
+  }
+  .pisell-lowcode-icon-select-content {
+    flex: 1;
+    overflow-y: auto;
+    max-height: 280px;
+    .pisell-lowcode-icon-select-item {
+      width: 36px;
+      height: 36px;
+      line-height: 36px;
+      font-size: 24px;
+      cursor: pointer;
+      display: inline-block;
+      transition: background-color 0.2s;
+      text-align: center;
+      border-radius: 4px;
+      &:hover {
+        background-color: #f1f2f3;
+      }
+    }
+  }
+}

package/lib/components/iconSelect/utils.d.ts

@@ -0,0 +1,14 @@
+export declare type IconGroup = 'outlined' | 'filled' | 'two-tone' | 'iconfont';
+export declare function get(obj: any, path: string, defaultValue?: any): any;
+export declare function getAntdIconList(): ({
+    name: any;
+    group: "filled" | "outlined" | "two-tone";
+    icon: any;
+} | null)[];
+interface IconItem {
+    name: string;
+    group: IconGroup;
+    icon: any;
+}
+export declare function getIconList(): IconItem[];
+export {};

package/lib/components/iconSelect/utils.js

@@ -0,0 +1,119 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/iconSelect/utils.tsx
+var utils_exports = {};
+__export(utils_exports, {
+  get: () => get,
+  getAntdIconList: () => getAntdIconList,
+  getIconList: () => getIconList
+});
+module.exports = __toCommonJS(utils_exports);
+var import_react = __toESM(require("react"));
+function get(obj, path, defaultValue) {
+  if (!path)
+    return defaultValue;
+  const keys = path.split(".");
+  let result = obj;
+  for (const key of keys) {
+    if (result == null) {
+      return defaultValue;
+    }
+    result = result[key];
+  }
+  return result === void 0 ? defaultValue : result;
+}
+function getIconfontIconList() {
+  const symbols = Array.prototype.slice.call(
+    window.document.querySelectorAll(
+      'svg[style="position: absolute; width: 0px; height: 0px; overflow: hidden;"][aria-hidden="true"] > symbol'
+    )
+  );
+  return symbols.map((symbol) => {
+    const { id } = symbol;
+    return {
+      name: id,
+      group: "iconfont",
+      icon: (props) => /* @__PURE__ */ import_react.default.createElement("span", { role: "img", className: "anticon" }, /* @__PURE__ */ import_react.default.createElement(
+        "svg",
+        {
+          viewBox: "64 64 896 896",
+          width: "1em",
+          height: "1em",
+          fill: "currentColor",
+          dangerouslySetInnerHTML: { __html: symbol.innerHTML }
+        }
+      ))
+    };
+  });
+}
+function getAntdIconList() {
+  const antdIcons = window.icons;
+  return Object.keys(antdIcons).map((key) => {
+    var _a;
+    const item = antdIcons[key];
+    if (typeof item !== "object") {
+      return null;
+    }
+    const name = (item == null ? void 0 : item.displayName) ?? ((_a = item == null ? void 0 : item.render) == null ? void 0 : _a.displayName) ?? key;
+    let group = "outlined";
+    const lowercaseName = name.toLowerCase();
+    if (/outlined$/.test(lowercaseName)) {
+      group = "outlined";
+    } else if (/filled$/.test(lowercaseName)) {
+      group = "filled";
+    } else if (/twotone$/.test(lowercaseName)) {
+      group = "two-tone";
+    } else {
+      return null;
+    }
+    return {
+      name,
+      group,
+      icon: item
+    };
+  }).filter(Boolean);
+}
+function getIconList() {
+  const iconfontIconList = getIconfontIconList();
+  const antdIconList = getAntdIconList();
+  const allIcons = [...iconfontIconList, ...antdIconList];
+  const uniqueIconsMap = /* @__PURE__ */ new Map();
+  allIcons.forEach((icon) => {
+    if (!uniqueIconsMap.has(icon.name)) {
+      uniqueIconsMap.set(icon.name, icon);
+    }
+  });
+  return Array.from(uniqueIconsMap.values());
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  get,
+  getAntdIconList,
+  getIconList
+});

package/lib/components/image/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { ImageProps as AntdImageProps } from 'antd';
+export interface ImageProps extends Omit<AntdImageProps, 'placeholder'> {
+    /**
+     * 占位图类型
+     */
+    fallbackType?: 'image' | 'avatar' | 'product';
+}
+declare const Image: React.FC<ImageProps>;
+export default Image;

package/lib/components/image/index.js

@@ -0,0 +1,59 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/image/index.tsx
+var image_exports = {};
+__export(image_exports, {
+  default: () => image_default
+});
+module.exports = __toCommonJS(image_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_image = __toESM(require("./image.png"));
+var import_avatar = __toESM(require("./avatar.png"));
+var import_product = __toESM(require("./product.png"));
+var defaultFallbackMap = {
+  image: import_image.default,
+  avatar: import_avatar.default,
+  product: import_product.default
+};
+var Image = ({
+  fallbackType = "image",
+  fallback,
+  ...restProps
+}) => {
+  const finalFallback = fallback || defaultFallbackMap[fallbackType];
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Image,
+    {
+      ...restProps,
+      fallback: finalFallback
+    }
+  );
+};
+var image_default = Image;

package/lib/components/page-header/index.less

@@ -2,17 +2,17 @@
   display: flex;
   flex-direction: column;
   gap: 4px;
-  margin-bottom: 16px;
+  margin-bottom: 12px;
   .pisell-lowcode-page-header {
     display: flex;
-    align-items: center;    
+    align-items: start;
     justify-content: space-between;
     width: 100%;
 
     .pisell-lowcode-page-header-left {
       display: flex;
       flex-direction: column;
-      gap: 4px;
+      gap: 0px !important;
     }
 
     .pisell-lowcode-page-header-title {
@@ -21,7 +21,7 @@
       font-weight: var(--Typography-Font-Weight-fontWeightStrong, 700);
       line-height: var(
         --Typography-Line-Height-lineHeightHeading4,
-        28px
+        40px
       );
     }
 

package/lib/components/pisellAppCard/PisellAppCard.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { PisellAppCardProps } from './types';
+import './PisellAppCard.less';
+declare const PisellAppCard: React.FC<PisellAppCardProps>;
+export default PisellAppCard;

package/lib/components/pisellAppCard/PisellAppCard.js

@@ -0,0 +1,107 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pisellAppCard/PisellAppCard.tsx
+var PisellAppCard_exports = {};
+__export(PisellAppCard_exports, {
+  default: () => PisellAppCard_default
+});
+module.exports = __toCommonJS(PisellAppCard_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_classnames = __toESM(require("classnames"));
+var import_pisellTags = __toESM(require("../pisellTags"));
+var import_pisellCard = __toESM(require("../pisellCard"));
+var import_pisellAvatar = __toESM(require("../pisellAvatar"));
+var import_PisellAppCard = require("./PisellAppCard.less");
+var import_icon = __toESM(require("../icon"));
+var PisellAppCard = ({
+  className,
+  style,
+  avatar,
+  tags,
+  title,
+  description,
+  bottomButtons,
+  moreActions,
+  icon
+}) => {
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_pisellCard.default,
+    {
+      className: (0, import_classnames.default)("pisell-lowcode-app-card", className),
+      style
+    },
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode-app-card-header" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode-app-card-header-left" }, (avatar || icon) && /* @__PURE__ */ import_react.default.createElement(
+      import_pisellAvatar.default,
+      {
+        icon: icon && /* @__PURE__ */ import_react.default.createElement(import_icon.default, { type: icon }),
+        src: avatar || void 0,
+        alt: title,
+        size: "xl",
+        shape: "square",
+        style: { border: "none" },
+        borderRadius: 10
+      }
+    )), /* @__PURE__ */ import_react.default.createElement("div", null, moreActions && moreActions.length > 0 && /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Dropdown,
+      {
+        menu: {
+          items: moreActions.map((action, index) => ({
+            key: index,
+            label: action.label,
+            onClick: action.onClick
+          }))
+        },
+        placement: "bottomRight",
+        trigger: ["click"]
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        import_antd.Button,
+        {
+          icon: /* @__PURE__ */ import_react.default.createElement(import_icon.default, { type: "pisell2-dots-vertical" }),
+          size: "large"
+        }
+      )
+    ))),
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode-app-card-content" }, tags && tags.length > 0 && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode-app-card-content-tags" }, tags.map((tag, index) => /* @__PURE__ */ import_react.default.createElement(import_pisellTags.default, { key: index, type: tag.type, color: tag.color }, tag.label))), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode-app-card-content-title" }, title), description && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode-app-card-content-description" }, description))),
+    bottomButtons && bottomButtons.length > 0 && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lowcode-app-card-footer" }, bottomButtons.map(
+      (button, index) => !button.hidden && /* @__PURE__ */ import_react.default.createElement(
+        import_antd.Button,
+        {
+          type: button.type,
+          onClick: button.onClick,
+          key: index,
+          size: "large"
+        },
+        button.label
+      )
+    ))
+  );
+};
+var PisellAppCard_default = PisellAppCard;

package/lib/components/pisellAppCard/PisellAppCard.less

@@ -0,0 +1,55 @@
+.pisell-lowcode-app-card {
+  background: #fff;
+  border: 1px solid #f0f0f0;
+  cursor: auto;
+
+  .pisell-lowcode-card-body {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    &::before {
+        display: none;
+    }
+    &::after {
+        display: none;
+    }
+  }
+
+  .pisell-lowcode-app-card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .pisell-lowcode-app-card-header-left {
+      .anticon {
+        font-size: 32px !important;
+      }
+    }
+  }
+
+  .pisell-lowcode-app-card-content {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    .pisell-lowcode-app-card-content-title {
+      color: var(--Gray-900, #101828);
+      font-size: 18px;
+      font-weight: 600;
+      line-height: 28px; /* 155.556% */
+    }
+    .pisell-lowcode-app-card-content-description {
+        color: var(--Gray-600, #475467);
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 20px; /* 142.857% */
+    }
+    .pisell-lowcode-app-card-content-tags {
+        display: flex;
+        gap: 8px;
+    }
+  }
+
+  .pisell-lowcode-app-card-footer {
+    display: flex;
+    gap: 12px;
+  }
+}

package/lib/components/pisellAppCard/index.d.ts

@@ -0,0 +1,3 @@
+import PisellAppCard from './PisellAppCard';
+export default PisellAppCard;
+export type { PisellAppCardProps } from './types';