@luscii-healthtech/web-ui 47.0.3 → 48.0.0

package/dist/codemods/v48-tag-props-update.d.ts

@@ -0,0 +1,2 @@
+import type { API, FileInfo } from "jscodeshift";
+export default function transformer(file: FileInfo, api: API): string;

package/dist/codemods/v48-tag-props-update.js

@@ -0,0 +1,163 @@
+"use strict";
+// Codemod for Tag component breaking changes.
+//
+// Handles:
+// - colorTheme="red"|"amber"|"green"|"gray"|"blue" → _type="danger"|"negative"|"positive"|"neutral"|"info"
+// - size="base" → _size="large", size="small" → _size="small"
+// - variant → _variant
+// - truncate → _truncate
+// - text="..." → children (prop removed, value becomes children)
+// - showIcon → _leadingIcon with a TODO comment (boolean → ReactNode, can't auto-migrate)
+// - as → _as (on direct <Tag> elements only)
+// - Also handles polymorphic usage via `as={Tag}` (e.g. <Stack as={Tag} variant="bordered" />),
+//   transforming Tag-specific props on the parent element (but not renaming `as` itself)
+//
+// Usage: npx jscodeshift --parser=tsx --extensions=tsx,ts -t @luscii-healthtech/web-ui/dist/codemods/v48-tag-props-update <target-dir>
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = transformer;
+const COLOR_THEME_TO_TYPE = {
+    red: "danger",
+    amber: "negative",
+    green: "positive",
+    gray: "neutral",
+    blue: "info",
+};
+// Props that simply get an underscore prefix (no value change)
+const RENAMED_PROPS = {
+    type: "_type",
+    variant: "_variant",
+    truncate: "_truncate",
+};
+/**
+ * Transform Tag-specific props on a JSX opening element.
+ * Returns true if any changes were made.
+ */
+function transformTagProps(opening, j) {
+    var _a, _b, _c, _d, _e, _f;
+    let changed = false;
+    // --- colorTheme → _type (with value mapping) ---
+    const colorThemeAttr = findAttribute(opening, "colorTheme");
+    if (colorThemeAttr) {
+        colorThemeAttr.name = j.jsxIdentifier("_type");
+        if (((_a = colorThemeAttr.value) === null || _a === void 0 ? void 0 : _a.type) === "StringLiteral") {
+            const mapped = COLOR_THEME_TO_TYPE[colorThemeAttr.value.value];
+            if (mapped) {
+                colorThemeAttr.value = j.stringLiteral(mapped);
+            }
+        }
+        else if (((_b = colorThemeAttr.value) === null || _b === void 0 ? void 0 : _b.type) === "JSXExpressionContainer" &&
+            colorThemeAttr.value.expression.type === "StringLiteral") {
+            const mapped = COLOR_THEME_TO_TYPE[colorThemeAttr.value.expression.value];
+            if (mapped) {
+                colorThemeAttr.value = j.stringLiteral(mapped);
+            }
+        }
+        changed = true;
+    }
+    // --- size → _size (with "base" → "large") ---
+    const sizeAttr = findAttribute(opening, "size");
+    if (sizeAttr) {
+        sizeAttr.name = j.jsxIdentifier("_size");
+        if (((_c = sizeAttr.value) === null || _c === void 0 ? void 0 : _c.type) === "StringLiteral") {
+            if (sizeAttr.value.value === "base") {
+                sizeAttr.value = j.stringLiteral("large");
+            }
+        }
+        else if (((_d = sizeAttr.value) === null || _d === void 0 ? void 0 : _d.type) === "JSXExpressionContainer" &&
+            sizeAttr.value.expression.type === "StringLiteral" &&
+            sizeAttr.value.expression.value === "base") {
+            sizeAttr.value = j.stringLiteral("large");
+        }
+        changed = true;
+    }
+    // --- Simple renames (variant → _variant, truncate → _truncate) ---
+    for (const [oldName, newName] of Object.entries(RENAMED_PROPS)) {
+        const attr = findAttribute(opening, oldName);
+        if (attr) {
+            attr.name = j.jsxIdentifier(newName);
+            changed = true;
+        }
+    }
+    // --- showIcon → _leadingIcon with TODO ---
+    const showIconAttr = findAttribute(opening, "showIcon");
+    if (showIconAttr) {
+        const attrIndex = (_f = (_e = opening.attributes) === null || _e === void 0 ? void 0 : _e.indexOf(showIconAttr)) !== null && _f !== void 0 ? _f : -1;
+        if (attrIndex !== -1 && opening.attributes) {
+            opening.attributes[attrIndex] = j.jsxAttribute(j.jsxIdentifier("_leadingIcon"), j.jsxExpressionContainer(j.identifier("undefined /* TODO: showIcon was removed — pass a ReactNode icon to _leadingIcon instead */")));
+        }
+        changed = true;
+    }
+    return changed;
+}
+function transformer(file, api) {
+    const j = api.jscodeshift;
+    const root = j(file.source);
+    let hasChanges = false;
+    // --- Pass 1: Direct <Tag> elements ---
+    root.findJSXElements("Tag").forEach((path) => {
+        var _a;
+        const opening = path.value.openingElement;
+        if (transformTagProps(opening, j)) {
+            hasChanges = true;
+        }
+        // --- as → _as (Tag's own polymorphic prop) ---
+        const asAttr = findAttribute(opening, "as");
+        if (asAttr) {
+            asAttr.name = j.jsxIdentifier("_as");
+            hasChanges = true;
+        }
+        // --- text="..." → children (only for direct <Tag> usage) ---
+        const textAttr = findAttribute(opening, "text");
+        if (textAttr) {
+            const textValue = textAttr.value;
+            // Remove the text attribute
+            opening.attributes = (_a = opening.attributes) === null || _a === void 0 ? void 0 : _a.filter((a) => {
+                if (a.type !== "JSXAttribute") {
+                    return true;
+                }
+                return a.name.type === "JSXIdentifier" && a.name.name !== "text";
+            });
+            // Convert self-closing to open/close if needed
+            if (path.value.openingElement.selfClosing) {
+                path.value.openingElement.selfClosing = false;
+                path.value.closingElement = j.jsxClosingElement(j.jsxIdentifier("Tag"));
+            }
+            if ((textValue === null || textValue === void 0 ? void 0 : textValue.type) === "StringLiteral") {
+                path.value.children = [j.jsxText(textValue.value)];
+            }
+            else if ((textValue === null || textValue === void 0 ? void 0 : textValue.type) === "JSXExpressionContainer") {
+                path.value.children = [textValue];
+            }
+            hasChanges = true;
+        }
+    });
+    // --- Pass 2: Polymorphic as={Tag} usage (e.g. <Stack as={Tag} variant="bordered" />) ---
+    root.find(j.JSXOpeningElement).forEach((path) => {
+        var _a;
+        const opening = path.value;
+        const asAttr = findAttribute(opening, "as");
+        if (!asAttr) {
+            return;
+        }
+        // Check for as={Tag}
+        const isTagAs = ((_a = asAttr.value) === null || _a === void 0 ? void 0 : _a.type) === "JSXExpressionContainer" &&
+            asAttr.value.expression.type === "Identifier" &&
+            asAttr.value.expression.name === "Tag";
+        if (!isTagAs) {
+            return;
+        }
+        if (transformTagProps(opening, j)) {
+            hasChanges = true;
+        }
+    });
+    if (!hasChanges) {
+        return file.source;
+    }
+    return root.toSource({ quote: "double" });
+}
+function findAttribute(opening, name) {
+    var _a;
+    return (_a = opening.attributes) === null || _a === void 0 ? void 0 : _a.find((attr) => attr.type === "JSXAttribute" &&
+        attr.name.type === "JSXIdentifier" &&
+        attr.name.name === name);
+}

package/dist/index.development.js

@@ -256,6 +256,7 @@ const newVariantClasses = {
   "body-small-bold": "ui-typo-body-small-bold"
 };
 const newTextColorClasses = {
+  current: "ui:text-current",
   neutral: "ui:text-text-neutral-primary-default",
   "neutral-secondary": "ui:text-text-neutral-secondary-default",
   brand: "ui:text-text-brand-primary-default",
@@ -2098,29 +2099,29 @@ const Modal = (props) => {
 Modal.setAppElement = ReactModal__default.default.setAppElement;
 
 const Tag = (_a) => {
-  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 jsxRuntime.jsxs(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, {
+  var { _as = "span", _type = "neutral", _size = "large", _variant = "flat", _leadingIcon, _trailingIcon, _truncate, children, className } = _a, rest = __rest(_a, ["_as", "_type", "_size", "_variant", "_leadingIcon", "_trailingIcon", "_truncate", "children", "className"]);
+  const isBordered = _variant === "bordered";
+  return jsxRuntime.jsxs(Stack, Object.assign({ as: _as, axis: "x", align: "center", borderRadius: "xxxxs", _gap: "s", className: classNames__default.default("ui:inline-flex", { "overflow-hidden": _truncate }, className, {
     [[
-      "ui:bg-negative-background ui:text-on-negative",
-      isBordered && "ui:border-negative-border"
-    ].join(" ")]: colorTheme === "red",
+      "ui:bg-background-error-primary-default ui:text-text-error-primary-default",
+      isBordered && "ui:border-border-error-primary-default"
+    ].filter(Boolean).join(" ")]: _type === "danger",
     [[
-      "ui:bg-warning-background ui:text-on-warning",
-      isBordered && "ui:border-warning-border"
-    ].join(" ")]: colorTheme === "amber",
+      "ui:bg-background-warning-primary-default ui:text-text-warning-primary-default",
+      isBordered && "ui:border-border-warning-primary-default"
+    ].filter(Boolean).join(" ")]: _type === "negative",
     [[
-      "ui:bg-positive-background ui:text-on-positive",
-      isBordered && "ui:border-positive-border"
-    ].join(" ")]: colorTheme === "green",
+      "ui:bg-background-success-primary-default ui:text-text-success-primary-default",
+      isBordered && "ui:border-border-success-primary-default"
+    ].filter(Boolean).join(" ")]: _type === "positive",
     [[
-      "ui:bg-neutral-background ui:text-on-surface",
-      isBordered && "ui:border-neutral-border-high-contrast"
-    ].join(" ")]: colorTheme === "gray",
+      "ui:bg-background-neutral-primary-default ui:text-text-neutral-primary-default",
+      isBordered && "ui:border-border-neutral-primary-default"
+    ].filter(Boolean).join(" ")]: _type === "neutral",
     [[
-      "ui:bg-primary-background ui:text-primary",
-      isBordered && "ui:border-primary-border"
-    ].join(" ")]: colorTheme === "blue"
+      "ui:bg-background-info-primary-default ui:text-text-info-primary-default",
+      isBordered && "ui:border-border-info-primary-default"
+    ].filter(Boolean).join(" ")]: _type === "info"
   }, {
     /**
      * Adding a border adds it to the outside of an element. This means that the border will
@@ -2128,36 +2129,19 @@ const Tag = (_a) => {
      * variants have the same dimensions, we need to adjust the padding to account for
      * the border width.
      */
-    "ui:border ui:px-[calc(--spacing(2)-1px)] ui:py-[calc(--spacing(1)-1px)]": variant === "bordered"
-  }) }, rest, { children: [showIcon && jsxRuntime.jsx(TagIcon, { colorTheme, size }), jsxRuntime.jsx(
-    Text,
-    {
-      /**
-       * Ensures the `small` size, with smaller text, is the same height as the `base` size.
-       */
-      className: "ui:leading-5",
-      color: "current",
-      variant: size === "small" ? "sm-strong" : "base",
-      truncate,
-      children: text !== null && text !== void 0 ? text : children
-    }
-  )] }));
+    "ui:px-f_base ui:py-f_s": _variant !== "bordered",
+    "ui:border ui:px-[calc(var(--ui-semantic-spacing-base)-1px)] ui:py-[calc(var(--ui-semantic-spacing-s)-1px)]": _variant === "bordered"
+  }) }, rest, { children: [sizedIcon(_leadingIcon, { size: _size }), jsxRuntime.jsx(Text, { color: "current", variant: _size === "small" ? "body-small-regular" : "body-base-regular", truncate: _truncate, children }), sizedIcon(_trailingIcon, { size: _size })] }));
 };
-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 jsxRuntime.jsx(SmallCircleIcon, Object.assign({}, props, { className: sizeClass }));
-    case "amber":
-      return jsxRuntime.jsx(SmallSquareIcon, Object.assign({}, props, { className: sizeClass }));
-    case "green":
-      return jsxRuntime.jsx(SmallArrowUpIcon, Object.assign({}, props, { className: classNames__default.default(sizeClass, "ui:rotate-90") }));
-    case "gray":
-      return jsxRuntime.jsx(SmallDiamondIcon, Object.assign({}, props, { className: classNames__default.default(sizeClass, "ui:text-on-surface-variant") }));
-    case "blue":
-      return jsxRuntime.jsx(SmallArrowUpIcon, Object.assign({}, props, { className: classNames__default.default(sizeClass, "ui:rotate-90") }));
+function sizedIcon(node, options) {
+  const pixelSize = options.size === "small" ? 16 : 24;
+  if (!React.isValidElement(node)) {
+    return null;
   }
+  return jsxRuntime.jsx(Box, { className: "ui:shrink-0", children: React.cloneElement(node, {
+    width: pixelSize,
+    height: pixelSize
+  }) });
 }
 
 function ChatBubble(props) {
@@ -2208,7 +2192,7 @@ function ChatBubbleText(props) {
 }
 ChatBubble.Text = ChatBubbleText;
 function ChatBubbleDateIndicator(props) {
-  return jsxRuntime.jsx("div", { className: "ui:flex ui:justify-center", children: jsxRuntime.jsx(Tag, { colorTheme: "gray", size: "small", className: "ui:py-2", children: props.children }) });
+  return jsxRuntime.jsx("div", { className: "ui:flex ui:justify-center", children: jsxRuntime.jsx(Tag, { _type: "neutral", _size: "small", className: "ui:py-2", children: props.children }) });
 }
 ChatBubble.DateIndicator = ChatBubbleDateIndicator;
 
@@ -3554,7 +3538,7 @@ function TableBodyRowDataCell(props) {
   }
   const content = props.fieldConfig.content(props.item);
   const isTextCellEmpty = isTableFieldText(content) && !content.text && !content.tag;
-  return jsxRuntime.jsxs("td", { className: classNames__default.default("ui:px-2 ui:align-middle ui:first:pl-6 ui:last:pr-6"), children: [isTableFieldText(content) && jsxRuntime.jsxs(Stack, { axis: "x", align: "center", gap: "xs", children: [content.tag && jsxRuntime.jsx(Tag, { colorTheme: content.tag.color, children: content.tag.text }), jsxRuntime.jsx(CellTextContent, { content, emptyFieldContent: isTextCellEmpty ? props.emptyFieldContentText : void 0 })] }), isTableFieldAction(content) && jsxRuntime.jsx("div", { className: classNames__default.default("ui:flex ui:flex-row ui:justify-end", "ui:transition-opacity ui:duration-300 ui:ease-in-out", {
+  return jsxRuntime.jsxs("td", { className: classNames__default.default("ui:px-2 ui:align-middle ui:first:pl-6 ui:last:pr-6"), children: [isTableFieldText(content) && jsxRuntime.jsxs(Stack, { axis: "x", align: "center", gap: "xs", children: [content.tag && jsxRuntime.jsx(Tag, { _type: getTagType(content.tag.color), children: content.tag.text }), jsxRuntime.jsx(CellTextContent, { content, emptyFieldContent: isTextCellEmpty ? props.emptyFieldContentText : void 0 })] }), isTableFieldAction(content) && jsxRuntime.jsx("div", { className: classNames__default.default("ui:flex ui:flex-row ui:justify-end", "ui:transition-opacity ui:duration-300 ui:ease-in-out", {
     "ui:opacity-0": props.fieldConfig.onlyShowContentOnHovering,
     "ui:group-hover:opacity-100": props.fieldConfig.onlyShowContentOnHovering
   }), children: content.map((action) => {
@@ -3579,6 +3563,22 @@ const CellTextContent = (props) => {
     "ui:break-words": !props.content.description.breakAllWord
   }), variant: "sm", color: "slate-500", children: props.content.description.content })] });
 };
+function getTagType(color) {
+  switch (color) {
+    case "red":
+      return "danger";
+    case "amber":
+      return "negative";
+    case "green":
+      return "positive";
+    case "gray":
+      return "neutral";
+    case "blue":
+      return "info";
+    default:
+      return "neutral";
+  }
+}
 
 function TableBody(props) {
   var _a;
@@ -5192,7 +5192,7 @@ const MediaPicker = React__namespace.default.forwardRef((props, ref) => {
   return jsxRuntime.jsx(ImagePickerInner, Object.assign({}, mappedProps, { innerRef: ref }));
 });
 
-const TagGroup = ({ children, tags, tagSize = "base", className }) => jsxRuntime.jsxs("div", { className: classNames__default.default("ui:flex ui:flex-row ui:flex-wrap ui:gap-2", className), children: [children, tags === null || tags === void 0 ? void 0 : tags.map((tag) => jsxRuntime.jsx(Tag, Object.assign({ size: tagSize }, tag)))] });
+const TagGroup = ({ children, tags, tagSize = "large", className }) => jsxRuntime.jsxs("div", { className: classNames__default.default("ui:flex ui:flex-row ui:flex-wrap ui:gap-2", className), children: [children, tags === null || tags === void 0 ? void 0 : tags.map((tag) => jsxRuntime.jsx(Tag, Object.assign({ _size: tagSize }, tag)))] });
 
 var css_248z$2 = "/*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */\n.cweb-textarea {\n  resize: none;\n  background-color: field;\n}\n.cweb-textarea.has-icon {\n  background-size: 24px;\n  background-position: 10px 10px;\n  background-repeat: no-repeat;\n  padding-left: 44px;\n}\n.cweb-textarea.resizable {\n  resize: both;\n}\n.cweb-textarea.resizable-x {\n  resize: horizontal;\n}\n.cweb-textarea.resizable-y {\n  resize: vertical;\n}\n.cweb-textarea:focus {\n  border-color: var(--color-primary);\n}\n.cweb-textarea:disabled {\n  cursor: not-allowed;\n}\n.cweb-textarea.has-error {\n  border: 1px solid #b91c1c;\n  color: #991b1b;\n}";
 styleInject(css_248z$2);
@@ -5450,7 +5450,7 @@ const TextLink = (props) => {
   return jsxRuntime.jsx("a", { href: props.href, rel: props.rel, target: props.target, onClick: props.onClick, className: classNames__default.default(className, props.className), children: props.text });
 };
 
-var css_248z = "@font-face {\n  font-family: \"Avenir Next\";\n  font-weight: 600;\n  src: url(\"../../../public/fonts/avenir/3A0AF8_0_0.eot\");\n  src:\n    url(\"../../../public/fonts/avenir/3A0AF8_0_0.eot\")\n      format(\"embedded-opentype\"),\n    url(\"../../../public/fonts/avenir/3A0AF8_0_0.woff2\") format(\"woff2\"),\n    url(\"../../../public/fonts/avenir/3A0AF8_0_0.woff\") format(\"woff\"),\n    url(\"../../../public/fonts/avenir/3A0AF8_0_0.ttf\") format(\"truetype\");\n}\n";
+var css_248z = "@font-face {\n  font-family: \"Avenir Next\";\n  font-weight: 700;\n  src: url(\"../../../public/fonts/avenir/3A0AF8_0_0.ttf\") format(\"truetype\");\n}\n\n@font-face {\n  font-family: \"Avenir Next\";\n  font-weight: 600;\n  src: url(\"../../../public/fonts/avenir/AvenirNext-DemiBold.ttf\")\n    format(\"truetype\");\n}\n";
 styleInject(css_248z);
 
 const variantClasses = {