@clayui/label - npm Package Compare versions

Comparing version 3.163.0 to 3.164.0

lib/cjs/index.js

@@ -31,2 +31,3 @@ "use strict";
 __export(src_exports, {
+  ContentLabel: () => ContentLabel,
   ItemAfter: () => ItemAfter,
@@ -81,6 +82,8 @@ ItemBefore: () => ItemBefore,
     dismissible,
-    displayType = "secondary",
+    displayType,
+    inverse = false,
     large = false,
     ...otherProps
   }, ref) => {
+    const useInverse = inverse && displayType !== "unstyled";
     return /* @__PURE__ */ import_react.default.createElement(
@@ -93,3 +96,4 @@ "span",
           "label-lg": large,
-          [`label-${displayType}`]: displayType
+          [`label-${displayType}`]: !useInverse && displayType,
+          [`label-inverse-${displayType}`]: useInverse
         }),
@@ -103,3 +107,3 @@ ref
 OldLabel.displayName = "ClayLabel";
-const LabelComponent = import_react.default.forwardRef(
+const BaseLabel = import_react.default.forwardRef(
   ({
@@ -143,2 +147,4 @@ children,
 );
+BaseLabel.displayName = "ClayBaseLabel";
+const LabelComponent = import_react.default.forwardRef(({ displayType = "secondary", ...props }, ref) => /* @__PURE__ */ import_react.default.createElement(BaseLabel, { ...props, displayType, ref }));
 LabelComponent.displayName = "ClayLabel";
@@ -150,2 +156,9 @@ const Label = Object.assign(LabelComponent, {
 });
+const ContentLabelComponent = import_react.default.forwardRef((props, ref) => /* @__PURE__ */ import_react.default.createElement(BaseLabel, { ...props, inverse: true, ref }));
+ContentLabelComponent.displayName = "ClayContentLabel";
+const ContentLabel = Object.assign(ContentLabelComponent, {
+  ItemAfter,
+  ItemBefore,
+  ItemExpand
+});
 var src_default = Label;

lib/esm/index.js

@@ -44,6 +44,8 @@ import ClayIcon from "@clayui/icon";
     dismissible,
-    displayType = "secondary",
+    displayType,
+    inverse = false,
     large = false,
     ...otherProps
   }, ref) => {
+    const useInverse = inverse && displayType !== "unstyled";
     return /* @__PURE__ */ React.createElement(
@@ -56,3 +58,4 @@ "span",
           "label-lg": large,
-          [`label-${displayType}`]: displayType
+          [`label-${displayType}`]: !useInverse && displayType,
+          [`label-inverse-${displayType}`]: useInverse
         }),
@@ -66,3 +69,3 @@ ref
 OldLabel.displayName = "ClayLabel";
-const LabelComponent = React.forwardRef(
+const BaseLabel = React.forwardRef(
   ({
@@ -106,2 +109,4 @@ children,
 );
+BaseLabel.displayName = "ClayBaseLabel";
+const LabelComponent = React.forwardRef(({ displayType = "secondary", ...props }, ref) => /* @__PURE__ */ React.createElement(BaseLabel, { ...props, displayType, ref }));
 LabelComponent.displayName = "ClayLabel";
@@ -113,4 +118,12 @@ const Label = Object.assign(LabelComponent, {
 });
+const ContentLabelComponent = React.forwardRef((props, ref) => /* @__PURE__ */ React.createElement(BaseLabel, { ...props, inverse: true, ref }));
+ContentLabelComponent.displayName = "ClayContentLabel";
+const ContentLabel = Object.assign(ContentLabelComponent, {
+  ItemAfter,
+  ItemBefore,
+  ItemExpand
+});
 var src_default = Label;
 export {
+  ContentLabel,
   ItemAfter,
@@ -117,0 +130,0 @@ ItemBefore,

lib/index.d.ts

@@ -6,6 +6,8 @@ /**
 import React from 'react';
+export declare type LabelDisplayType = 'danger' | 'info' | 'secondary' | 'success' | 'unstyled' | 'warning';
+export declare type ContentLabelDisplayType = 'content-0' | 'content-1' | 'content-2' | 'content-3' | 'content-4' | 'content-5' | 'content-6' | 'content-7' | 'content-8';
 export declare const ItemAfter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
 export declare const ItemBefore: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
 export declare const ItemExpand: React.ForwardRefExoticComponent<React.BaseHTMLAttributes<HTMLAnchorElement | HTMLSpanElement> & React.RefAttributes<HTMLAnchorElement | HTMLSpanElement>>;
-interface IBaseProps extends React.BaseHTMLAttributes<HTMLSpanElement> {
+interface IBaseProps<T extends string = string> extends React.BaseHTMLAttributes<HTMLSpanElement> {
     /**
@@ -18,4 +20,8 @@ * Flag to indicate if `label-dismissible` class should be applied.
      */
-    displayType?: 'secondary' | 'info' | 'warning' | 'danger' | 'success' | 'unstyled';
+    displayType: T;
     /**
+     * Flag to indicate if the label should be of the `inverse` variant.
+     */
+    inverse?: boolean;
+    /**
      * Flag to indicate if the label should be of the `large` variant.
@@ -25,3 +31,3 @@ */
 }
-interface IProps extends IBaseProps {
+interface IProps<T extends string = string> extends IBaseProps<T> {
     /**
@@ -46,3 +52,3 @@ * HTML properties that are applied to the 'x' button.
 }
-declare const Label: React.ForwardRefExoticComponent<IProps & React.RefAttributes<HTMLAnchorElement | HTMLSpanElement>> & {
+declare const Label: React.ForwardRefExoticComponent<Omit<IProps<LabelDisplayType>, "displayType"> & Partial<Pick<IProps<LabelDisplayType>, "displayType">> & React.RefAttributes<HTMLAnchorElement | HTMLSpanElement>> & {
     ItemAfter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
@@ -52,2 +58,7 @@ ItemBefore: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
 };
+export declare const ContentLabel: React.ForwardRefExoticComponent<Omit<IProps<ContentLabelDisplayType>, "inverse"> & React.RefAttributes<HTMLAnchorElement | HTMLSpanElement>> & {
+    ItemAfter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
+    ItemBefore: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
+    ItemExpand: React.ForwardRefExoticComponent<React.BaseHTMLAttributes<HTMLAnchorElement | HTMLSpanElement> & React.RefAttributes<HTMLAnchorElement | HTMLSpanElement>>;
+};
 export default Label;

package.json

@@ -6,4 +6,4 @@ {
 	"dependencies": {
-		"@clayui/icon": "^3.163.0",
-		"@clayui/link": "^3.163.0",
+		"@clayui/icon": "^3.164.0",
+		"@clayui/link": "^3.164.0",
 		"classnames": "2.3.1"
@@ -23,3 +23,3 @@ },
 	"peerDependencies": {
-		"@clayui/css": "^3.163.0",
+		"@clayui/css": "^3.164.0",
 		"react": "^16.0.0 || ^17.0.0 || ^18.0.0",
@@ -36,3 +36,3 @@ "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
 	},
-	"version": "3.163.0",
+	"version": "3.164.0",
 	"module": "lib/esm/index.js",
@@ -39,0 +39,0 @@ "exports": {

No alert changes

Improved metrics

Total package byte prevSize

14353

21.11%

Lines of code

346

11.97%

Dependency changes

• Updated

  @clayui/icon@^3.164.0

• Updated

  @clayui/link@^3.164.0