@luscii-healthtech/web-ui 35.8.1 → 35.9.0

package/dist/components/Tag/Tag.d.ts

@@ -5,6 +5,7 @@ interface TagPropsShared extends React.ComponentPropsWithoutRef<"span"> {
     colorTheme?: Color;
     size?: Size;
     variant?: "flat" | "bordered";
+    showIcon?: boolean;
     /**
      * Truncate the text if it overflows the tag.
      */
@@ -26,5 +27,5 @@ interface PropsWithText extends TagPropsShared {
     text: string;
 }
 export type Props = PropsWithChildren | PropsWithText;
-export declare const Tag: ({ text, colorTheme, className, size, variant, truncate, children, ...rest }: Props) => React.JSX.Element;
+export declare const Tag: ({ text, colorTheme, className, size, variant, showIcon, truncate, children, ...rest }: Props) => React.JSX.Element;
 export {};

package/dist/index.development.js

@@ -2278,15 +2278,31 @@ const Modal = (props) => {
 Modal.setAppElement = ReactModal__default.default.setAppElement;
 
 const Tag = (_a) => {
-  var { text, colorTheme = "gray", className, size = "base", variant = "flat", truncate, children } = _a, rest = __rest(_a, ["text", "colorTheme", "className", "size", "variant", "truncate", "children"]);
+  var { text, colorTheme = "gray", className, size = "base", variant = "flat", showIcon, truncate, children } = _a, rest = __rest(_a, ["text", "colorTheme", "className", "size", "variant", "showIcon", "truncate", "children"]);
+  const isBordered = variant === "bordered" || "";
   return React__namespace.default.createElement(
-    "div",
-    Object.assign({ className: classNames__default.default("ui-inline-flex ui-items-center ui-rounded-lg ui-px-2 ui-py-1", { "overflow-hidden": truncate }, className, {
-      "ui-bg-negative-background ui-text-on-negative": colorTheme === "red",
-      "ui-bg-warning-background ui-text-on-warning": colorTheme === "amber",
-      "ui-bg-positive-background ui-text-on-positive": colorTheme === "green",
-      "ui-bg-neutral-background ui-text-on-surface": colorTheme === "gray",
-      "ui-bg-primary-background ui-text-primary": colorTheme === "blue"
+    Stack,
+    Object.assign({ axis: "x", gap: "xxxxs", className: classNames__default.default("ui-inline-flex ui-items-center ui-rounded-lg ui-px-2 ui-py-1", { "overflow-hidden": truncate }, className, {
+      [[
+        "ui-bg-negative-background ui-text-on-negative",
+        isBordered && "ui-border-negative-border"
+      ].join(" ")]: colorTheme === "red",
+      [[
+        "ui-bg-warning-background ui-text-on-warning",
+        isBordered && "ui-border-warning-border"
+      ].join(" ")]: colorTheme === "amber",
+      [[
+        "ui-bg-positive-background ui-text-on-positive",
+        isBordered && "ui-border-positive-border"
+      ].join(" ")]: colorTheme === "green",
+      [[
+        "ui-bg-neutral-background ui-text-on-surface",
+        isBordered && "ui-border-neutral-border-high-contrast"
+      ].join(" ")]: colorTheme === "gray",
+      [[
+        "ui-bg-primary-background ui-text-primary",
+        isBordered && "ui-border-primary-border"
+      ].join(" ")]: colorTheme === "blue"
     }, {
       /**
        * Adding a border adds it to the outside of an element. This means that the border will
@@ -2294,8 +2310,9 @@ const Tag = (_a) => {
        * variants have the same dimensions, we need to adjust the padding to account for
        * the border width.
        */
-      "ui-border ui-border-current ui-px-[calc(theme('spacing.2')-1px)] ui-py-[calc(theme('spacing.1')-1px)]": variant === "bordered"
+      "ui-border ui-px-[calc(theme('spacing.2')-1px)] ui-py-[calc(theme('spacing.1')-1px)]": variant === "bordered"
     }) }, rest),
+    showIcon && React__namespace.default.createElement(TagIcon, { colorTheme, size }),
     React__namespace.default.createElement(
       Text,
       {
@@ -2311,6 +2328,22 @@ const Tag = (_a) => {
     )
   );
 };
+function TagIcon({ colorTheme, size }) {
+  const sizeClass = classNames__default.default({ "ui-h-[16px] ui-w-[16px]": size === "small" });
+  const props = { size: "s" };
+  switch (colorTheme) {
+    case "red":
+      return React__namespace.default.createElement(SmallCircleIcon, Object.assign({}, props, { className: sizeClass }));
+    case "amber":
+      return React__namespace.default.createElement(SmallSquareIcon, Object.assign({}, props, { className: sizeClass }));
+    case "green":
+      return React__namespace.default.createElement(SmallArrowUpIcon, Object.assign({}, props, { className: classNames__default.default(sizeClass, "ui-rotate-90") }));
+    case "gray":
+      return React__namespace.default.createElement(SmallDiamondIcon, Object.assign({}, props, { className: classNames__default.default(sizeClass, "ui-text-on-surface-variant") }));
+    case "blue":
+      return React__namespace.default.createElement(SmallArrowUpIcon, Object.assign({}, props, { className: classNames__default.default(sizeClass, "ui-rotate-90") }));
+  }
+}
 
 function ChatBubble(props) {
   const { as: Component = "div", children, className, sender: _, timestamp: __, readReceipt, color = "blue", tipPosition } = props, rest = __rest(props, ["as", "children", "className", "sender", "timestamp", "readReceipt", "color", "tipPosition"]);