@luscii-healthtech/web-ui 12.1.0 → 12.1.1

package/dist/components/Table/Table.types.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 import { BaseButtonProps } from "../ButtonV2/ButtonProps.type";
-import { TagColorTheme } from "../Tag/Tag";
 type TableFieldConfigBase = {
     key: string;
     headerText?: string;
@@ -29,7 +28,7 @@ export interface TableFieldText {
     breakAllWord?: boolean;
     tag?: {
         text: string;
-        color: TagColorTheme;
+        color: "red" | "amber" | "green" | "gray" | "blue";
     };
 }
 export type TableFieldAction<Item> = Pick<BaseButtonProps, "isDisabled" | "title" | "icon"> & {

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

@@ -1,17 +1,26 @@
-/// <reference types="react" />
-import { TagSize } from "./Tag.utils";
-export declare enum TagColorTheme {
-    Red = "red",
-    Amber = "amber",
-    Green = "green",
-    Gray = "gray",
-    Blue = "blue"
+import React from "react";
+type Color = "red" | "amber" | "green" | "gray" | "blue";
+type Size = "base" | "small";
+interface TagPropsShared extends React.ComponentPropsWithoutRef<"span"> {
+    colorTheme?: Color;
+    children?: string;
+    size?: Size;
+    className?: string;
+}
+interface PropsWithChildren extends TagPropsShared {
+    children?: string;
+    /**
+     * @deprecated Use `children` instead
+     */
+    text?: never;
 }
-export interface TagProps {
+interface PropsWithText extends TagPropsShared {
+    children?: never;
+    /**
+     * @deprecated Use `children` instead
+     */
     text: string;
-    colorTheme?: TagColorTheme;
-    size?: TagSize;
-    className?: string;
 }
-declare const Tag: ({ text, colorTheme, className, size, }: TagProps) => JSX.Element;
-export default Tag;
+export type Props = PropsWithChildren | PropsWithText;
+export declare const Tag: ({ text, colorTheme, className, size, children, ...rest }: Props) => React.JSX.Element;
+export {};

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

@@ -1,10 +1,23 @@
-/// <reference types="react" />
-import { TagProps } from "./Tag";
-import { TagSize } from "./Tag.utils";
-interface TagGroupProps {
-    tags: TagProps[];
-    tagSize?: TagSize;
-    className?: string;
+import React from "react";
+import { type Props as TagProps } from "./Tag";
+interface PropsWithTags {
+    /**
+     * @deprecated Use `children` instead
+     */
+    tags?: TagProps[];
+    /**
+     * @deprecated Size of each tag rendered as a child is dictated by this child itself.
+     */
+    tagSize?: TagProps["size"];
+    children?: never;
+}
+interface PropsWithChildren {
+    tags?: never;
+    tagSize?: never;
+    children?: React.ReactNode;
 }
-declare const TagGroup: ({ tags, tagSize, className, }: TagGroupProps) => JSX.Element;
-export default TagGroup;
+type Props = (PropsWithTags | PropsWithChildren) & {
+    className?: string;
+};
+export declare const TagGroup: ({ children, tags, tagSize, className, }: Props) => React.JSX.Element;
+export {};

package/dist/index.d.ts

@@ -57,8 +57,8 @@ export { MediaPicker, TargetProps } from "./components/MediaPicker/MediaPicker";
 export { default as Tabbar, TabbarProps, TabItemDetails, } from "./components/Tabbar/Tabbar";
 export { Breadcrumbs, BreadcrumbProps } from "./components/Breadcrumbs";
 export { PageHeader, PageHeaderProps } from "./components/PageHeader";
-export { default as Tag } from "./components/Tag/Tag";
-export { default as TagGroup } from "./components/Tag/TagGroup";
+export { Tag } from "./components/Tag/Tag";
+export { TagGroup } from "./components/Tag/TagGroup";
 export { Textarea, TextareaProps, ResizeTypes, } from "./components/Textarea/Textarea";
 export { TextEditor } from "./components/TextEditor/TextEditor";
 export { default as TextEditorV2 } from "./components/TextEditorV2/TextEditorV2";

package/dist/index.development.js

@@ -3064,39 +3064,37 @@ function TableHeader(props) {
   );
 }
 
-var TagSize;
-(function(TagSize2) {
-  TagSize2["small"] = "small";
-  TagSize2["base"] = "base";
-})(TagSize || (TagSize = {}));
-
-var TagColorTheme;
-(function(TagColorTheme2) {
-  TagColorTheme2["Red"] = "red";
-  TagColorTheme2["Amber"] = "amber";
-  TagColorTheme2["Green"] = "green";
-  TagColorTheme2["Gray"] = "gray";
-  TagColorTheme2["Blue"] = "blue";
-})(TagColorTheme || (TagColorTheme = {}));
-const Tag = ({ text, colorTheme = TagColorTheme.Gray, className, size = TagSize.base }) => {
-  const textColor = {
-    [TagColorTheme.Red]: "red",
-    [TagColorTheme.Amber]: "amber",
-    [TagColorTheme.Green]: "green",
-    [TagColorTheme.Gray]: "base",
-    // Blue must be 800 here to pass the contrast test
-    [TagColorTheme.Blue]: "blue-800"
-  };
+const textColor = {
+  red: "red",
+  amber: "amber",
+  green: "green",
+  gray: "base",
+  // Blue must be 800 here to pass the contrast test
+  blue: "blue-800"
+};
+const Tag = (_a) => {
+  var { text, colorTheme = "gray", className, size = "base", children } = _a, rest = __rest(_a, ["text", "colorTheme", "className", "size", "children"]);
   return React__namespace.default.createElement(
     "div",
-    { className: classNames__default.default("ui-inline-block ui-rounded-lg ui-px-2 ui-py-1", className, {
-      "ui-bg-red-50": colorTheme === TagColorTheme.Red,
-      "ui-bg-orange-50": colorTheme === TagColorTheme.Amber,
-      "ui-bg-green-50": colorTheme === TagColorTheme.Green,
-      "ui-bg-slate-50": colorTheme === TagColorTheme.Gray,
-      "ui-bg-blue-50": colorTheme === TagColorTheme.Blue
-    }) },
-    React__namespace.default.createElement(Text, { className: "ui-leading-5", color: textColor[colorTheme], text, type: size === TagSize.small ? "sm" : "base" })
+    Object.assign({ className: classNames__default.default("ui-inline-block ui-rounded-lg ui-px-2 ui-py-1", className, {
+      "ui-bg-red-50": colorTheme === "red",
+      "ui-bg-orange-50": colorTheme === "amber",
+      "ui-bg-green-50": colorTheme === "green",
+      "ui-bg-slate-50": colorTheme === "gray",
+      "ui-bg-blue-50": colorTheme === "blue"
+    }) }, rest),
+    React__namespace.default.createElement(
+      Text,
+      {
+        /**
+         * Ensures the `small` size, with smaller text, is the same height as the `base` size.
+         */
+        className: "ui-leading-5",
+        color: textColor[colorTheme],
+        variant: size === "small" ? "sm" : "base"
+      },
+      text !== null && text !== void 0 ? text : children
+    )
   );
 };
 
@@ -4804,7 +4802,12 @@ const MediaPicker = (props) => {
   return React__namespace.default.createElement(ImagePicker, Object.assign({}, mappedProps));
 };
 
-const TagGroup = ({ tags, tagSize = TagSize.base, className }) => React__namespace.default.createElement("div", { className: classNames__default.default("ui-flex ui-flex-row ui-flex-wrap", className) }, tags.map((tag) => React__namespace.default.createElement(Tag, Object.assign({ size: tagSize }, tag, { className: classNames__default.default("ui-mb-2 ui-mr-2 last:ui-mr-0") }))));
+const TagGroup = ({ children, tags, tagSize = "base", className }) => React__namespace.default.createElement(
+  "div",
+  { className: classNames__default.default("ui-flex ui-flex-row ui-flex-wrap ui-gap-2", className) },
+  children,
+  tags === null || tags === void 0 ? void 0 : tags.map((tag) => React__namespace.default.createElement(Tag, Object.assign({ size: tagSize }, tag)))
+);
 
 var css_248z$2 = "/**\n * --- DEPRECATED ---\n * DON'T USE ANYTHING FROM THIS FILE IN FUTURE CHANGES. WE SHOULD BE\n * USING TAILWIND CLASSES DIRECTLY IN OUR COMPONENTS.\n */\n.cweb-textarea {\n  border: 1px solid #cccccc;\n  border-radius: 4px;\n  outline: none;\n  background-color: #ffffff;\n  resize: none;\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::placeholder {\n  color: #737373;\n}\n.cweb-textarea:-ms-input-placeholder {\n  color: #64748b !important;\n}\n.cweb-textarea::-ms-input-placeholder {\n  color: #64748b;\n}\n.cweb-textarea:focus {\n  border-color: #0074dd;\n}\n.cweb-textarea:disabled {\n  cursor: not-allowed;\n}\n.cweb-textarea.has-error {\n  border: 1px solid #ff6266;\n  color: #ff6266;\n}";
 styleInject(css_248z$2);