@portnet/ui 2.0.7 → 2.0.8

package/dist/components/buttons/PuiNewUserButton.js

@@ -0,0 +1,121 @@
+"use strict";
+
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.filter.js");
+require("core-js/modules/esnext.iterator.for-each.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = require("@mui/material/styles");
+var _material = require("@mui/material");
+var _iconsMaterial = require("@mui/icons-material");
+var _apperance = require("../../config/apperance");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["onClick", "label", "size", "iconOnly"]; // Bouton stylisé pour "Nouvel utilisateur"
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+const StyledButton = (0, _styles.styled)(_material.Button)(_ref => {
+  let {
+    theme,
+    size
+  } = _ref;
+  return {
+    backgroundColor: _apperance.palette.primary,
+    color: _apperance.palette.white,
+    fontWeight: 500,
+    padding: size === 'small' ? '4px 12px' : '8px 16px',
+    borderRadius: '4px',
+    textTransform: 'none',
+    // Pas de majuscules forcées
+    boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
+    '&:hover': {
+      backgroundColor: "".concat(_apperance.palette.primary, "e0"),
+      // Légèrement plus clair au survol
+      boxShadow: '0 4px 8px rgba(0, 0, 0, 0.15)'
+    },
+    '& .MuiButton-startIcon': {
+      marginRight: size === 'small' ? '4px' : '8px'
+    }
+  };
+});
+
+// Bouton compact (icône uniquement)
+const CompactButton = (0, _styles.styled)(_material.Button)(_ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return {
+    backgroundColor: _apperance.palette.primary,
+    color: _apperance.palette.white,
+    minWidth: '36px',
+    width: '36px',
+    height: '36px',
+    padding: '8px',
+    borderRadius: '4px',
+    boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
+    '&:hover': {
+      backgroundColor: "".concat(_apperance.palette.primary, "e0"),
+      boxShadow: '0 4px 8px rgba(0, 0, 0, 0.15)'
+    },
+    '& .MuiSvgIcon-root': {
+      fontSize: '1.2rem'
+    }
+  };
+});
+
+/**
+ * Composant PuiNewUserButton - Bouton stylisé pour ajouter un nouvel utilisateur
+ * @param {Object} props - Propriétés du composant
+ * @param {function} props.onClick - Fonction appelée lors du clic sur le bouton
+ * @param {string} props.label - Texte du bouton
+ * @param {string} props.size - Taille du bouton ('small', 'medium', 'large')
+ * @param {boolean} props.iconOnly - Si true, affiche uniquement l'icône
+ */
+const PuiNewUserButton = _ref3 => {
+  let {
+      onClick,
+      label = "Nouvel utilisateur",
+      size = 'medium',
+      iconOnly = false
+    } = _ref3,
+    props = _objectWithoutProperties(_ref3, _excluded);
+  // Si iconOnly est true, on affiche un bouton compact avec une infobulle
+  if (iconOnly) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tooltip, {
+      title: label,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(CompactButton, _objectSpread(_objectSpread({
+        variant: "contained",
+        onClick: onClick,
+        "aria-label": label
+      }, props), {}, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.Add, {})
+      }))
+    });
+  }
+
+  // Sinon, on affiche le bouton standard avec texte et icône
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledButton, _objectSpread(_objectSpread({
+    variant: "contained",
+    startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconsMaterial.Add, {}),
+    onClick: onClick,
+    size: size
+  }, props), {}, {
+    children: label
+  }));
+};
+PuiNewUserButton.propTypes = {
+  onClick: _propTypes.default.func,
+  label: _propTypes.default.string,
+  size: _propTypes.default.oneOf(['small', 'medium', 'large']),
+  iconOnly: _propTypes.default.bool
+};
+var _default = exports.default = PuiNewUserButton;

package/dist/components/inputs/PuiSelect.js

@@ -128,11 +128,23 @@ const StyledMuiFormControl = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((
 });
 const LoadingProgress = () => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.CircularProgress, {
-    size: 16,
+    size: 20,
+    thickness: 4,
     sx: {
       color: _apperance.palette.primary,
       position: "absolute",
-      right: "14px"
+      right: "14px",
+      top: "calc(50% - 10px)",
+      opacity: 0.7,
+      animation: "spin 1.5s linear infinite",
+      "@keyframes spin": {
+        "0%": {
+          transform: "rotate(0deg)"
+        },
+        "100%": {
+          transform: "rotate(360deg)"
+        }
+      }
     }
   });
 };

package/dist/components/others/PuiChip.js

@@ -1,151 +1,291 @@
 "use strict";
 
 require("core-js/modules/es.weak-map.js");
-require("core-js/modules/esnext.iterator.constructor.js");
-require("core-js/modules/esnext.iterator.filter.js");
 require("core-js/modules/esnext.iterator.for-each.js");
 require("core-js/modules/web.dom-collections.iterator.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var _material = require("@mui/material");
-var _styles = require("@mui/material/styles");
+exports.default = exports.PuiStatusChip = void 0;
+require("core-js/modules/esnext.iterator.constructor.js");
+require("core-js/modules/esnext.iterator.filter.js");
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var React = _interopRequireWildcard(require("react"));
+var _antd = require("antd");
 var _apperance = require("../../config/apperance");
-var _PuiTooltip = _interopRequireDefault(require("./PuiTooltip"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["id", "className", "sx", "color", "fullWidth", "children"];
+const _excluded = ["id", "className", "sx", "color", "variant", "size", "fullWidth", "children", "clickable", "onClick", "status"],
+  _excluded2 = ["status", "children"]; // Définition des états prédéfinis et leur correspondance de style
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-const StyledChip = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Chip, _objectSpread({
-  ref: ref
-}, props))))(() => {
-  return {
-    "&.MuiChip-root": {
-      height: "25px",
-      color: "white",
-      fontWeight: "600",
-      fontSize: ".7rem"
-    }
-  };
-});
-const PrimaryChip = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledChip, _objectSpread({
-  ref: ref
-}, props))))(() => {
-  return {
-    "&.MuiChip-root": {
-      backgroundColor: _apperance.palette.primary
-    }
-  };
-});
-const SecondaryChip = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledChip, _objectSpread({
-  ref: ref
-}, props))))(() => {
-  return {
-    "&.MuiChip-root": {
-      backgroundColor: _apperance.palette.secondary,
-      border: "2px solid ".concat(_apperance.palette.gray.dark),
-      color: _apperance.palette.gray.darker
-    }
-  };
-});
-const InfoChip = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledChip, _objectSpread({
-  ref: ref
-}, props))))(() => {
-  return {
-    "&.MuiChip-root": {
-      backgroundColor: _apperance.palette.info
-    }
-  };
-});
-const SuccessChip = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledChip, _objectSpread({
-  ref: ref
-}, props))))(() => {
-  return {
-    "&.MuiChip-root": {
-      backgroundColor: _apperance.palette.success
-    }
-  };
-});
-const ErrorChip = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledChip, _objectSpread({
-  ref: ref
-}, props))))(() => {
-  return {
-    "&.MuiChip-root": {
-      backgroundColor: _apperance.palette.error
-    }
-  };
-});
-const WarningChip = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledChip, _objectSpread({
-  ref: ref
-}, props))))(() => {
-  return {
-    "&.MuiChip-root": {
-      backgroundColor: _apperance.palette.warning
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+const STATUS_CONFIG = {
+  // États génériques
+  active: {
+    color: 'success',
+    label: 'Active'
+  },
+  inactive: {
+    color: 'secondary',
+    label: 'Inactive'
+  },
+  pending: {
+    color: 'warning',
+    label: 'En attente'
+  },
+  error: {
+    color: 'error',
+    label: 'Erreur'
+  },
+  // États spécifiques
+  cancelled: {
+    color: 'error',
+    label: 'Annulée'
+  },
+  payed: {
+    color: 'success',
+    label: 'Réglée'
+  },
+  pending_payment: {
+    color: 'warning',
+    label: 'Paiement en attente'
+  },
+  shipped: {
+    color: 'info',
+    label: 'Expédiée'
+  },
+  delivered: {
+    color: 'success',
+    label: 'Livrée'
+  },
+  processing: {
+    color: 'primary',
+    label: 'En traitement'
+  },
+  refunded: {
+    color: 'error',
+    label: 'Remboursée'
+  },
+  onhold: {
+    color: 'secondary',
+    label: 'En suspens'
+  },
+  completed: {
+    color: 'success',
+    label: 'Terminée'
+  }
+};
+
+// Style CSS pour le composant custom
+const chipStyles = "\n  .pui-custom-chip {\n    display: inline-block;\n    box-sizing: border-box;\n    margin: 2px;\n    padding: 4px 8px;\n    border-radius: 4px;\n    font-size: 14px;\n    line-height: 1.5;\n    font-weight: 500;\n    transition: all 0.2s;\n    max-width: 100%;\n    vertical-align: middle;\n    border: 1px solid transparent;\n  }\n  \n  .pui-custom-chip.full-width {\n    width: 100%;\n    display: block;\n  }\n  \n  .pui-custom-chip.small {\n    font-size: 12px;\n    padding: 2px 6px;\n  }\n  \n  .pui-custom-chip.medium {\n    font-size: 14px;\n    padding: 4px 8px;\n  }\n  \n  .pui-custom-chip.large {\n    font-size: 16px;\n    padding: 6px 10px;\n  }\n  \n  .pui-custom-chip-content {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: normal;\n    word-wrap: break-word;\n    word-break: break-word;\n    width: 100%;\n  }\n  \n  .pui-custom-chip.clickable {\n    cursor: pointer;\n  }\n  \n  .pui-custom-chip.clickable:hover {\n    opacity: 0.9;\n    transform: translateY(-1px);\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n  }\n  \n  /* Styles sp\xE9cifiques pour les statuts */\n  .pui-status-chip {\n    font-weight: 600;\n    padding: 3px 10px;\n    border-radius: 12px;\n  }\n";
+
+// Injection des styles dans le document
+const injectStyles = () => {
+  const styleId = 'pui-custom-chip-styles';
+  if (!document.getElementById(styleId)) {
+    const styleElement = document.createElement('style');
+    styleElement.id = styleId;
+    styleElement.innerHTML = chipStyles;
+    document.head.appendChild(styleElement);
+  }
+};
+
+// Suppression des styles lors du démontage
+const removeStyles = () => {
+  const styleElement = document.getElementById('pui-custom-chip-styles');
+  if (styleElement) {
+    document.head.removeChild(styleElement);
+  }
+};
+
+// Configuration des couleurs selon la palette
+const getColorConfig = (color, variant) => {
+  var _colorConfigs$color;
+  const colorConfigs = {
+    primary: {
+      filled: {
+        color: '#fff',
+        backgroundColor: _apperance.palette.primary,
+        borderColor: _apperance.palette.primary
+      },
+      outlined: {
+        color: _apperance.palette.primary,
+        backgroundColor: 'transparent',
+        borderColor: _apperance.palette.primary
+      }
+    },
+    secondary: {
+      filled: {
+        color: _apperance.palette.gray.darker,
+        backgroundColor: _apperance.palette.secondary,
+        borderColor: _apperance.palette.gray.dark
+      },
+      outlined: {
+        color: _apperance.palette.gray.darker,
+        backgroundColor: 'transparent',
+        borderColor: _apperance.palette.gray.dark
+      }
+    },
+    info: {
+      filled: {
+        color: '#fff',
+        backgroundColor: _apperance.palette.info,
+        borderColor: _apperance.palette.info
+      },
+      outlined: {
+        color: _apperance.palette.info,
+        backgroundColor: 'transparent',
+        borderColor: _apperance.palette.info
+      }
+    },
+    success: {
+      filled: {
+        color: '#fff',
+        backgroundColor: _apperance.palette.success,
+        borderColor: _apperance.palette.success
+      },
+      outlined: {
+        color: _apperance.palette.success,
+        backgroundColor: 'transparent',
+        borderColor: _apperance.palette.success
+      }
+    },
+    warning: {
+      filled: {
+        color: '#fff',
+        backgroundColor: _apperance.palette.warning,
+        borderColor: _apperance.palette.warning
+      },
+      outlined: {
+        color: _apperance.palette.warning,
+        backgroundColor: 'transparent',
+        borderColor: _apperance.palette.warning
+      }
+    },
+    error: {
+      filled: {
+        color: '#fff',
+        backgroundColor: _apperance.palette.error,
+        borderColor: _apperance.palette.error
+      },
+      outlined: {
+        color: _apperance.palette.error,
+        backgroundColor: 'transparent',
+        borderColor: _apperance.palette.error
+      }
     }
   };
-});
-const getChipByColor = color => {
-  switch (color) {
-    case "primary":
-    default:
-      return PrimaryChip;
-    case "secondary":
-      return SecondaryChip;
-    case "success":
-      return SuccessChip;
-    case "error":
-      return ErrorChip;
-    case "info":
-      return InfoChip;
-    case "warning":
-      return WarningChip;
-  }
+  return ((_colorConfigs$color = colorConfigs[color]) === null || _colorConfigs$color === void 0 ? void 0 : _colorConfigs$color[variant]) || colorConfigs.primary.filled;
 };
-const PuiChip = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+const PuiChip = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
       id,
       className,
       sx,
-      color,
-      fullWidth,
-      children
+      color = "primary",
+      variant = "filled",
+      size = "medium",
+      fullWidth = false,
+      children,
+      clickable = false,
+      onClick,
+      status // Nouveau prop pour gérer les états prédéfinis
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiTooltip.default, {
-    title: children,
-    sx: {
-      width: fullWidth ? "100%" : "fit-content"
-    },
-    children: /*#__PURE__*/React.createElement(getChipByColor(color), _objectSpread({
-      ref,
-      id,
-      sx: _objectSpread(_objectSpread({}, sx), {}, {
-        width: fullWidth ? "100%" : "fit-content"
-      }),
-      className,
-      label: children
-    }, rest))
-  });
+  // Injection des styles
+  _react.default.useEffect(() => {
+    injectStyles();
+    return () => removeStyles();
+  }, []);
+
+  // Si un statut est fourni, utiliser sa configuration
+  let displayContent = children;
+  let statusColor = color;
+  if (status && STATUS_CONFIG[status]) {
+    const statusConfig = STATUS_CONFIG[status];
+    statusColor = statusConfig.color;
+    // Si aucun contenu n'est fourni, utiliser le libellé par défaut du statut
+    if (!children) {
+      displayContent = statusConfig.label;
+    }
+  }
+  const colorConfig = getColorConfig(statusColor, variant);
+  const shouldShowTooltip = typeof displayContent === 'string' && displayContent.length > 30;
+
+  // Déterminer les classes CSS
+  const chipClasses = ['pui-custom-chip', status ? 'pui-status-chip' : '', size, fullWidth ? 'full-width' : '', clickable ? 'clickable' : '', className || ''].filter(Boolean).join(' ');
+
+  // Gérer le clic
+  const handleClick = e => {
+    if (clickable && onClick) {
+      onClick(e);
+    }
+  };
+
+  // Créer le chip personnalisé
+  const chipElement = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({
+    id: id,
+    ref: ref,
+    className: chipClasses,
+    style: _objectSpread(_objectSpread({}, colorConfig), sx),
+    onClick: handleClick,
+    "data-status": status || null
+  }, rest), {}, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: "pui-custom-chip-content",
+      children: displayContent
+    })
+  }));
+  return shouldShowTooltip ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tooltip, {
+    title: displayContent,
+    placement: "top",
+    children: chipElement
+  }) : chipElement;
 });
+
+// Composant utilitaire simplifié pour afficher un statut
+const PuiStatusChip = exports.PuiStatusChip = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+  let {
+      status,
+      children
+    } = _ref2,
+    props = _objectWithoutProperties(_ref2, _excluded2);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(PuiChip, _objectSpread(_objectSpread({
+    ref: ref,
+    status: status,
+    variant: "filled"
+  }, props), {}, {
+    children: children
+  }));
+});
+PuiStatusChip.propTypes = {
+  status: _propTypes.default.oneOf(Object.keys(STATUS_CONFIG)),
+  children: _propTypes.default.node
+};
 PuiChip.propTypes = {
   id: _propTypes.default.string,
   className: _propTypes.default.string,
   sx: _propTypes.default.object,
+  color: _propTypes.default.oneOf(["primary", "secondary", "info", "success", "warning", "error"]),
+  variant: _propTypes.default.oneOf(["filled", "outlined"]),
+  size: _propTypes.default.oneOf(["small", "medium", "large"]),
   fullWidth: _propTypes.default.bool,
-  color: _propTypes.default.oneOf(["primary", "secondary", "info", "success", "warning", "error"])
+  clickable: _propTypes.default.bool,
+  onClick: _propTypes.default.func,
+  status: _propTypes.default.oneOf(Object.keys(STATUS_CONFIG))
 };
 PuiChip.defaultProps = {
-  color: "primary"
+  color: "primary",
+  variant: "filled",
+  size: "medium",
+  fullWidth: false,
+  clickable: false
 };
 var _default = exports.default = PuiChip;