@pisell/materials 1.0.381 → 1.0.382

package/dist/umd/static/DotsSix.57d66266.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M8 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2ZM8 6a1 1 0 1 0 0-2 1 1 0 0 0 0 2ZM8 20a1 1 0 1 0 0-2 1 1 0 0 0 0 2ZM16 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2ZM16 6a1 1 0 1 0 0-2 1 1 0 0 0 0 2ZM16 20a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>

package/dist/umd/static/arrow-left.e542294f.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.707 4.293a1 1 0 0 1 0 1.414L7.414 11H19a1 1 0 1 1 0 2H7.414l5.293 5.293a1 1 0 0 1-1.414 1.414l-7-7a1 1 0 0 1 0-1.414l7-7a1 1 0 0 1 1.414 0Z"/></svg>

package/dist/umd/static/arrow-right.763f03e0.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.293 4.293a1 1 0 0 1 1.414 0l7 7a1 1 0 0 1 0 1.414l-7 7a1 1 0 0 1-1.414-1.414L16.586 13H5a1 1 0 1 1 0-2h11.586l-5.293-5.293a1 1 0 0 1 0-1.414Z"/></svg>

package/dist/umd/static/filter-lines.04a54ae9.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M2 6a1 1 0 0 1 1-1h18a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1Zm3 6a1 1 0 0 1 1-1h12a1 1 0 1 1 0 2H6a1 1 0 0 1-1-1Zm3 6a1 1 0 0 1 1-1h6a1 1 0 1 1 0 2H9a1 1 0 0 1-1-1Z"/></svg>

package/dist/umd/static/help-circle.31c9be40.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18ZM1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12Zm11.258-3.976a2 2 0 0 0-2.225 1.308 1 1 0 1 1-1.886-.664 4 4 0 0 1 7.773 1.333c0 1.53-1.135 2.54-1.945 3.081a8.044 8.044 0 0 1-1.686.848l-.035.013-.011.003-.004.002h-.002L11.92 13l.316.949a1 1 0 0 1-.633-1.897l.016-.006.074-.027a6.051 6.051 0 0 0 1.172-.6c.69-.46 1.055-.95 1.055-1.419v-.001a2 2 0 0 0-1.662-1.975ZM11 17a1 1 0 0 1 1-1h.01a1 1 0 1 1 0 2H12a1 1 0 0 1-1-1Z"/></svg>

package/dist/umd/static/switch-vertical-01.7ebe3ba8.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6.293 3.293a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1-1.414 1.414L8 6.414V20a1 1 0 1 1-2 0V6.414L3.707 8.707a1 1 0 0 1-1.414-1.414l4-4ZM16 17.586V4a1 1 0 1 1 2 0v13.586l2.293-2.293a1 1 0 0 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 1.414-1.414L16 17.586Z"/></svg>

package/es/components/pisellTags/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import './index.less';
+export declare type PisellTagsType = 'pill_color' | 'pill_outline';
+export declare type PisellTagsColor = 'success' | 'warning' | 'error' | 'gray' | string;
+export interface PisellTagsProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> {
+    children?: React.ReactNode;
+    others?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
+    type: PisellTagsType;
+    icon?: React.ReactNode;
+    color?: PisellTagsColor;
+}
+declare const PisellTags: (props: PisellTagsProps) => React.JSX.Element;
+export default PisellTags;

package/es/components/pisellTags/index.js

@@ -0,0 +1,84 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+var _excluded = ["children", "type", "icon", "color", "style", "others"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import React, { useMemo } from 'react';
+import classNames from 'classnames';
+import { generateColorShades } from "./utils";
+import "./index.less";
+
+// Pisell Tags 样式类型
+
+// 预设颜色枚举
+var pisellTagsColors = {
+  success: '#067647',
+  warning: '#B54708',
+  error: '#B42318',
+  gray: '#344054'
+};
+
+/**
+ * @title: 获取颜色
+ * @description:
+ * @param {PisellTagsColor} _color
+ * @return {*}
+ * @Author: zhiwei.Wang
+ * @Date: 2024-08-23 16:07
+ */
+var getColor = function getColor(_color) {
+  if (_color) {
+    return pisellTagsColors[_color] || _color;
+  }
+  return '#344054';
+};
+var getPillColorStyles = function getPillColorStyles(_color) {
+  var colorShades = generateColorShades(_color);
+  return {
+    '--pisell-tags-bg-color': colorShades['color_50'],
+    '--pisell-tags-font-color': colorShades['color_700'],
+    '--pisell-tags-border-color': colorShades['color_200']
+  };
+};
+var getPillOutlineStyles = function getPillOutlineStyles(_color) {
+  var colorShades = generateColorShades(_color);
+  return {
+    '--pisell-tags-bg-color': 'transparent',
+    '--pisell-tags-font-color': colorShades['color_700'],
+    '--pisell-tags-border-color': colorShades['color_600']
+  };
+};
+var PisellTags = function PisellTags(props) {
+  var children = props.children,
+    type = props.type,
+    icon = props.icon,
+    color = props.color,
+    _props$style = props.style,
+    style = _props$style === void 0 ? {} : _props$style,
+    _props$others = props.others,
+    others = _props$others === void 0 ? {} : _props$others,
+    otherProps = _objectWithoutProperties(props, _excluded);
+  document.body.id = 'body';
+  var styles = useMemo(function () {
+    var obj = _objectSpread(_objectSpread({}, style), others.style);
+    var _color = getColor(props.color);
+    if (type === 'pill_color') {
+      obj = _objectSpread(_objectSpread({}, obj), getPillColorStyles(_color));
+    }
+    if (type === 'pill_outline') {
+      obj = _objectSpread(_objectSpread({}, obj), getPillOutlineStyles(_color));
+    }
+    return obj;
+  }, [color, style, others.style, type]);
+  return /*#__PURE__*/React.createElement("span", _extends({
+    style: _objectSpread(_objectSpread({}, styles), style)
+  }, others, otherProps, {
+    className: classNames('pisell-tags', others.className, otherProps.className)
+  }), icon ? icon : null, children);
+};
+export default PisellTags;

package/es/components/pisellTags/index.less

@@ -0,0 +1,17 @@
+.pisell-tags {
+  --pisell-tags-bg-color: #F9FAFB;
+  --pisell-tags-font-color: #344054;
+  --pisell-tags-border-color: #EAECF0;
+  border-radius: 16px;
+  border: 1px solid var(--pisell-tags-border-color);
+  background: var(--pisell-tags-bg-color);
+  display: inline-flex;
+  padding: 4px 12px;
+  align-items: center;
+  gap: 6px;
+
+  color: var(--pisell-tags-font-color);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+}

package/es/components/pisellTags/utils.d.ts

@@ -0,0 +1 @@
+export declare const generateColorShades: (color: string) => Record<string, string>;

package/es/components/pisellTags/utils.js

@@ -0,0 +1,89 @@
+// 定义 RGB 类型，包括 r, g, b 和可选的 a（透明度）分量
+
+// 辅助函数：将 16 进制颜色转换为 RGB
+var hexToRgb = function hexToRgb(hex) {
+  hex = hex.replace(/^#/, ''); // 去掉开头的 #
+  if (hex.length === 3) {
+    // 处理三位颜色码，扩展为六位颜色码
+    hex = hex.split('').map(function (h) {
+      return h + h;
+    }).join('');
+  }
+  var intVal = parseInt(hex, 16); // 将 16 进制转换为整数
+  return {
+    r: intVal >> 16 & 255,
+    // 提取红色分量
+    g: intVal >> 8 & 255,
+    // 提取绿色分量
+    b: intVal & 255 // 提取蓝色分量
+  };
+};
+
+// 辅助函数：将 RGB 转换为 16 进制颜色
+var rgbToHex = function rgbToHex(r, g, b) {
+  return '#' + [r, g, b].map(function (x) {
+    var hex = x.toString(16); // 将数值转换为 16 进制字符串
+    return hex.length === 1 ? '0' + hex : hex; // 确保每个分量都是两位
+  }).join(''); // 将 RGB 分量组合为 16 进制颜色码
+};
+
+// 辅助函数：解析输入的颜色字符串，并返回 RGB 或 RGBA 对象
+var parseColor = function parseColor(color) {
+  if (color.startsWith('#')) {
+    return hexToRgb(color); // 处理 16 进制颜色
+  } else if (color.startsWith('rgb')) {
+    // 处理 RGB 或 RGBA 颜色
+    var rgba = color.replace(/rgba?\(|\s+|\)/g, '').split(',').map(Number);
+    return {
+      r: rgba[0],
+      g: rgba[1],
+      b: rgba[2],
+      a: rgba[3] !== undefined ? rgba[3] : 1
+    };
+  } else {
+    throw new Error('无效的颜色格式');
+  }
+};
+
+// 生成颜色阶梯的函数
+export var generateColorShades = function generateColorShades(color) {
+  var _parseColor = parseColor(color),
+    r = _parseColor.r,
+    g = _parseColor.g,
+    b = _parseColor.b,
+    a = _parseColor.a;
+  var max = 700;
+  var gap = 1 / max;
+
+  // 定义相对于 700 阶梯的 50, 200, 500 阶梯的比例
+  var ratios = {
+    50: gap * 50,
+    200: gap * 200,
+    500: gap * 500,
+    600: gap * 600,
+    700: gap * 700
+  };
+
+  // 调整颜色分量的函数，基于比例计算新的分量值
+  var adjustColorComponent = function adjustColorComponent(component, ratio) {
+    return Math.round(component * ratio + 255 * (1 - ratio));
+  };
+
+  // 生成不同阶梯的颜色
+  var shades = {
+    'color_50': rgbToHex(adjustColorComponent(r, ratios[50]), adjustColorComponent(g, ratios[50]), adjustColorComponent(b, ratios[50])),
+    'color_200': rgbToHex(adjustColorComponent(r, ratios[200]), adjustColorComponent(g, ratios[200]), adjustColorComponent(b, ratios[200])),
+    'color_500': rgbToHex(adjustColorComponent(r, ratios[500]), adjustColorComponent(g, ratios[500]), adjustColorComponent(b, ratios[500])),
+    'color_600': rgbToHex(adjustColorComponent(r, ratios[600]), adjustColorComponent(g, ratios[600]), adjustColorComponent(b, ratios[600])),
+    'color_700': color
+  };
+
+  // 如果原始颜色带有透明度 (RGBA)，在返回结果中包含透明度信息
+  if (a !== undefined) {
+    shades['color_50'] = "rgba(".concat(adjustColorComponent(r, ratios[50]), ", ").concat(adjustColorComponent(g, ratios[50]), ", ").concat(adjustColorComponent(b, ratios[50]), ", ").concat(a, ")");
+    shades['color_200'] = "rgba(".concat(adjustColorComponent(r, ratios[200]), ", ").concat(adjustColorComponent(g, ratios[200]), ", ").concat(adjustColorComponent(b, ratios[200]), ", ").concat(a, ")");
+    shades['color_500'] = "rgba(".concat(adjustColorComponent(r, ratios[500]), ", ").concat(adjustColorComponent(g, ratios[500]), ", ").concat(adjustColorComponent(b, ratios[500]), ", ").concat(a, ")");
+    shades['color_600'] = "rgba(".concat(adjustColorComponent(r, ratios[600]), ", ").concat(adjustColorComponent(g, ratios[600]), ", ").concat(adjustColorComponent(b, ratios[600]), ", ").concat(a, ")");
+  }
+  return shades;
+};

package/es/index.d.ts

@@ -72,7 +72,7 @@ export { default as List } from './components/list';
 export { default as Sort } from './components/sort';
 export { default as InputNumberRange } from './components/input-number-range';
 export { default as LowCodePage } from './components/lowCodePage';
-export { default as PickerView } from "./components/picker-view";
+export { default as PickerView } from './components/picker-view';
 export { default as Segmented } from './components/segmented';
 export { default as VirtualKeyboard } from './components/virtual-keyboard';
 export { default as VirtualKeyboardTime } from './components/virtual-keyboard/Time';
@@ -102,4 +102,5 @@ export { default as PisellAlert } from './components/pisellAlert';
 export { default as PisellCard } from './components/pisellCard';
 export { default as PisellInformationEntry } from './components/pisellInformationEntry';
 export { default as usePisellConfig } from './components/pisell-config-provider/hooks/usePisellConfig';
-export { globalConfig, default as PisellContext } from './components/pisell-config-provider/context';
+export { globalConfig, default as PisellContext, } from './components/pisell-config-provider/context';
+export { default as PisellTags } from './components/pisellTags';

package/es/index.js

@@ -124,4 +124,5 @@ export { default as PisellAlert } from "./components/pisellAlert";
 export { default as PisellCard } from "./components/pisellCard";
 export { default as PisellInformationEntry } from "./components/pisellInformationEntry";
 export { default as usePisellConfig } from "./components/pisell-config-provider/hooks/usePisellConfig";
-export { globalConfig, default as PisellContext } from "./components/pisell-config-provider/context";
+export { globalConfig, default as PisellContext } from "./components/pisell-config-provider/context";
+export { default as PisellTags } from "./components/pisellTags";

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import './index.less';
+export declare type PisellTagsType = 'pill_color' | 'pill_outline';
+export declare type PisellTagsColor = 'success' | 'warning' | 'error' | 'gray' | string;
+export interface PisellTagsProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> {
+    children?: React.ReactNode;
+    others?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
+    type: PisellTagsType;
+    icon?: React.ReactNode;
+    color?: PisellTagsColor;
+}
+declare const PisellTags: (props: PisellTagsProps) => React.JSX.Element;
+export default PisellTags;

package/lib/components/pisellTags/index.js

@@ -0,0 +1,114 @@
+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/pisellTags/index.tsx
+var pisellTags_exports = {};
+__export(pisellTags_exports, {
+  default: () => pisellTags_default
+});
+module.exports = __toCommonJS(pisellTags_exports);
+var import_react = __toESM(require("react"));
+var import_classnames = __toESM(require("classnames"));
+var import_utils = require("./utils");
+var import_index = require("./index.less");
+var pisellTagsColors = {
+  success: "#067647",
+  warning: "#B54708",
+  error: "#B42318",
+  gray: "#344054"
+};
+var getColor = (_color) => {
+  if (_color) {
+    return pisellTagsColors[_color] || _color;
+  }
+  return "#344054";
+};
+var getPillColorStyles = (_color) => {
+  const colorShades = (0, import_utils.generateColorShades)(_color);
+  return {
+    "--pisell-tags-bg-color": colorShades["color_50"],
+    "--pisell-tags-font-color": colorShades["color_700"],
+    "--pisell-tags-border-color": colorShades["color_200"]
+  };
+};
+var getPillOutlineStyles = (_color) => {
+  const colorShades = (0, import_utils.generateColorShades)(_color);
+  return {
+    "--pisell-tags-bg-color": "transparent",
+    "--pisell-tags-font-color": colorShades["color_700"],
+    "--pisell-tags-border-color": colorShades["color_600"]
+  };
+};
+var PisellTags = (props) => {
+  const {
+    children,
+    type,
+    icon,
+    color,
+    style = {},
+    others = {},
+    ...otherProps
+  } = props;
+  document.body.id = "body";
+  const styles = (0, import_react.useMemo)(() => {
+    let obj = {
+      ...style,
+      ...others.style
+    };
+    const _color = getColor(props.color);
+    if (type === "pill_color") {
+      obj = {
+        ...obj,
+        ...getPillColorStyles(_color)
+      };
+    }
+    if (type === "pill_outline") {
+      obj = {
+        ...obj,
+        ...getPillOutlineStyles(_color)
+      };
+    }
+    return obj;
+  }, [color, style, others.style, type]);
+  return /* @__PURE__ */ import_react.default.createElement(
+    "span",
+    {
+      style: { ...styles, ...style },
+      ...others,
+      ...otherProps,
+      className: (0, import_classnames.default)(
+        "pisell-tags",
+        others.className,
+        otherProps.className
+      )
+    },
+    icon ? icon : null,
+    children
+  );
+};
+var pisellTags_default = PisellTags;

package/lib/components/pisellTags/index.less

@@ -0,0 +1,17 @@
+.pisell-tags {
+  --pisell-tags-bg-color: #F9FAFB;
+  --pisell-tags-font-color: #344054;
+  --pisell-tags-border-color: #EAECF0;
+  border-radius: 16px;
+  border: 1px solid var(--pisell-tags-border-color);
+  background: var(--pisell-tags-bg-color);
+  display: inline-flex;
+  padding: 4px 12px;
+  align-items: center;
+  gap: 6px;
+
+  color: var(--pisell-tags-font-color);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+}

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

@@ -0,0 +1 @@
+export declare const generateColorShades: (color: string) => Record<string, string>;

package/lib/components/pisellTags/utils.js

@@ -0,0 +1,86 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pisellTags/utils.ts
+var utils_exports = {};
+__export(utils_exports, {
+  generateColorShades: () => generateColorShades
+});
+module.exports = __toCommonJS(utils_exports);
+var hexToRgb = (hex) => {
+  hex = hex.replace(/^#/, "");
+  if (hex.length === 3) {
+    hex = hex.split("").map((h) => h + h).join("");
+  }
+  const intVal = parseInt(hex, 16);
+  return {
+    r: intVal >> 16 & 255,
+    // 提取红色分量
+    g: intVal >> 8 & 255,
+    // 提取绿色分量
+    b: intVal & 255
+    // 提取蓝色分量
+  };
+};
+var rgbToHex = (r, g, b) => {
+  return "#" + [r, g, b].map((x) => {
+    const hex = x.toString(16);
+    return hex.length === 1 ? "0" + hex : hex;
+  }).join("");
+};
+var parseColor = (color) => {
+  if (color.startsWith("#")) {
+    return hexToRgb(color);
+  } else if (color.startsWith("rgb")) {
+    const rgba = color.replace(/rgba?\(|\s+|\)/g, "").split(",").map(Number);
+    return { r: rgba[0], g: rgba[1], b: rgba[2], a: rgba[3] !== void 0 ? rgba[3] : 1 };
+  } else {
+    throw new Error("无效的颜色格式");
+  }
+};
+var generateColorShades = (color) => {
+  const { r, g, b, a } = parseColor(color);
+  const max = 700;
+  const gap = 1 / max;
+  const ratios = {
+    50: gap * 50,
+    200: gap * 200,
+    500: gap * 500,
+    600: gap * 600,
+    700: gap * 700
+  };
+  const adjustColorComponent = (component, ratio) => Math.round(component * ratio + 255 * (1 - ratio));
+  const shades = {
+    "color_50": rgbToHex(adjustColorComponent(r, ratios[50]), adjustColorComponent(g, ratios[50]), adjustColorComponent(b, ratios[50])),
+    "color_200": rgbToHex(adjustColorComponent(r, ratios[200]), adjustColorComponent(g, ratios[200]), adjustColorComponent(b, ratios[200])),
+    "color_500": rgbToHex(adjustColorComponent(r, ratios[500]), adjustColorComponent(g, ratios[500]), adjustColorComponent(b, ratios[500])),
+    "color_600": rgbToHex(adjustColorComponent(r, ratios[600]), adjustColorComponent(g, ratios[600]), adjustColorComponent(b, ratios[600])),
+    "color_700": color
+  };
+  if (a !== void 0) {
+    shades["color_50"] = `rgba(${adjustColorComponent(r, ratios[50])}, ${adjustColorComponent(g, ratios[50])}, ${adjustColorComponent(b, ratios[50])}, ${a})`;
+    shades["color_200"] = `rgba(${adjustColorComponent(r, ratios[200])}, ${adjustColorComponent(g, ratios[200])}, ${adjustColorComponent(b, ratios[200])}, ${a})`;
+    shades["color_500"] = `rgba(${adjustColorComponent(r, ratios[500])}, ${adjustColorComponent(g, ratios[500])}, ${adjustColorComponent(b, ratios[500])}, ${a})`;
+    shades["color_600"] = `rgba(${adjustColorComponent(r, ratios[600])}, ${adjustColorComponent(g, ratios[600])}, ${adjustColorComponent(b, ratios[600])}, ${a})`;
+  }
+  return shades;
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  generateColorShades
+});

package/lib/index.d.ts

@@ -72,7 +72,7 @@ export { default as List } from './components/list';
 export { default as Sort } from './components/sort';
 export { default as InputNumberRange } from './components/input-number-range';
 export { default as LowCodePage } from './components/lowCodePage';
-export { default as PickerView } from "./components/picker-view";
+export { default as PickerView } from './components/picker-view';
 export { default as Segmented } from './components/segmented';
 export { default as VirtualKeyboard } from './components/virtual-keyboard';
 export { default as VirtualKeyboardTime } from './components/virtual-keyboard/Time';
@@ -102,4 +102,5 @@ export { default as PisellAlert } from './components/pisellAlert';
 export { default as PisellCard } from './components/pisellCard';
 export { default as PisellInformationEntry } from './components/pisellInformationEntry';
 export { default as usePisellConfig } from './components/pisell-config-provider/hooks/usePisellConfig';
-export { globalConfig, default as PisellContext } from './components/pisell-config-provider/context';
+export { globalConfig, default as PisellContext, } from './components/pisell-config-provider/context';
+export { default as PisellTags } from './components/pisellTags';

package/lib/index.js

@@ -90,6 +90,7 @@ __export(src_exports, {
   PisellModal: () => import_pisellModal.default,
   PisellRow: () => import_pisellRow.default,
   PisellScan: () => import_pisellScan.default,
+  PisellTags: () => import_pisellTags.default,
   PisellText: () => import_pisellText.default,
   PisellToast: () => import_pisellToast.default,
   PisellTooltip: () => import_pisellTooltip.default,
@@ -242,6 +243,7 @@ var import_pisellCard = __toESM(require("./components/pisellCard"));
 var import_pisellInformationEntry = __toESM(require("./components/pisellInformationEntry"));
 var import_usePisellConfig = __toESM(require("./components/pisell-config-provider/hooks/usePisellConfig"));
 var import_context = __toESM(require("./components/pisell-config-provider/context"));
+var import_pisellTags = __toESM(require("./components/pisellTags"));
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Affix,
@@ -305,6 +307,7 @@ var import_context = __toESM(require("./components/pisell-config-provider/contex
   PisellModal,
   PisellRow,
   PisellScan,
+  PisellTags,
   PisellText,
   PisellToast,
   PisellTooltip,

package/lowcode/pisell-tags/meta.ts

@@ -0,0 +1,123 @@
+import snippets from "./snippets";
+
+export default {
+  snippets,
+  componentName: "PisellTags",
+  title: "标签",
+  category: "数据展示",
+  docUrl: "",
+  screenshot: "",
+  devMode: "proCode",
+  npm: {
+    package: "@pisell/materials",
+    version: "1.0.1",
+    exportName: "PisellTags",
+    main: "src/index.tsx",
+    destructuring: true,
+    subName: "",
+  },
+  props: [
+    {
+      name: "children",
+      title: { label: "内容" },
+      propType: { type: "oneOfType", value: ["string", "node"] },
+      setter: ['PisellI18nSetter', 'SlotSetter']
+    },
+    {
+      name: 'type',
+      title: { label: '展示类型' },
+      setter: {
+        componentName: 'RadioGroupSetter',
+        props: {
+          options: [
+            {
+              title: '填充',
+              value: 'pill_color',
+            },
+            {
+              title: '边框',
+              value: 'pill_outline',
+            },
+          ],
+        },
+      },
+      propType: { type: 'oneOf', value: ['pill_color', 'pill_outline'] },
+      defaultValue: 'pill_color',
+    },
+    {
+      name: "icon",
+      title: {
+        label: {
+          type: "i18n",
+          "en-US": "icon",
+          "zh-CN": "图标",
+        },
+        tip: "icon | Set the icon component of the button",
+      },
+      propType: { type: "oneOfType", value: ["node"] },
+      setter: [{
+        componentName: "SlotSetter",
+        initialValue: {
+          type: "JSSlot",
+          value: [
+            {
+              componentName: "Icon",
+              props: {
+                type: "SmileOutlined",
+                size: 20,
+                rotate: 0,
+                spin: false,
+              },
+            },
+          ],
+        },
+        defaultValue: null
+      }],
+    },
+    {
+      name: 'color',
+      title: { label: '颜色' },
+      setter: [
+        {
+          componentName: 'RadioGroupSetter',
+          props: {
+            options: [
+              {
+                title: 'Success',
+                value: 'success',
+              },
+              {
+                title: 'Warning',
+                value: 'warning',
+              },
+              {
+                title: 'Error',
+                value: 'error',
+              },
+              {
+                title: 'Gray',
+                value: 'gray',
+              },
+            ],
+          },
+        },
+        'ColorSetter', "StringSetter"
+      ],
+      propType: { type: 'oneOf', value: ['success', 'warning', 'error', 'gray'] },
+      defaultValue: 'success',
+    },
+  ],
+  configure: {
+    component: { isContainer: true },
+    supports: {
+      style: true,
+      events: [
+        {
+          name: "onClick",
+          template:
+            "onClick(event,${extParams}){\n// 点击时的回调\nconsole.log('onClick', event);}",
+        },
+      ],
+    },
+  },
+};