@luscii-healthtech/web-ui 0.9.0 → 0.9.3

package/dist/components/ButtonV2/ButtonProps.type.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import { IconProps } from "../Icons/types/IconProps.type";
 import { TextColor, TextHoverColor } from "../Text/Text";
 /**
@@ -29,3 +29,10 @@ export interface ButtonProps extends BaseButtonProps, ButtonWithPendingStateProp
     textColor?: TextColor;
     textHoverColor?: TextHoverColor;
 }
+/**
+ * Interface for defining a button
+ */
+export interface ButtonDefinition<Props extends BaseButtonProps = BaseButtonProps> {
+    buttonType: React.FunctionComponent<Props>;
+    buttonProps: React.Attributes & Props;
+}

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

@@ -1,6 +1,7 @@
 import React from "react";
-import { ButtonProps } from "../ButtonV2/ButtonProps.type";
+import { ButtonDefinition } from "../ButtonV2/ButtonProps.type";
 import { IconProps } from "../Icons/types/IconProps.type";
+import { PrimaryButtonProps } from "../../index";
 export interface ListItemProps {
     itemId: string | number;
     title: string;
@@ -22,10 +23,7 @@ export interface ListItemProps {
 export declare type OnAssetLoadErrorPayload = Pick<ListItemProps, "itemId" | "subtitle" | "title" | "icon">;
 export declare type ListProps = {
     title?: string;
-    headerButton?: {
-        buttonType: React.FunctionComponent<ButtonProps>;
-        buttonProps: ButtonProps;
-    };
+    headerButton?: ButtonDefinition<PrimaryButtonProps>;
     headerTransparent?: boolean;
     items: ListItemProps[];
     onAssetLoadError?: (payload: OnAssetLoadErrorPayload) => void;

package/dist/components/Tabbar/Tabbar.d.ts

@@ -6,5 +6,5 @@ interface TabbarProps {
     onSelect?: (index: number) => void;
     className?: string;
 }
-export declare const Tabbar: ({ tabs, selectedIndex, onSelect, className }: TabbarProps) => JSX.Element;
+export declare const Tabbar: ({ tabs, selectedIndex, onSelect, className, }: TabbarProps) => JSX.Element;
 export default Tabbar;

package/dist/components/Tabbar/TabbarItem.d.ts

@@ -1,9 +1,10 @@
 /// <reference types="react" />
-export interface TabItemDetails {
+export interface TabItemDetails<T extends object = Record<string, unknown>> {
     title: string | JSX.Element;
     badgeCount?: number;
     isLoading?: boolean;
     dataTestId?: string;
+    extra?: T;
 }
 interface TabbarItemProps extends TabItemDetails {
     index: number;

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 export { default as Acknowledgement, ACKNOWLEDGEMENT_TYPE_OPTIONS, } from "./components/Acknowledgement/Acknowledgement";
 export { default as Avatar } from "./components/Avatar/Avatar";
 export { default as Badge } from "./components/Badge/Badge";
-export { BaseButtonProps as NonPrimaryButtonProps, ButtonWithPendingStateProps as PrimaryButtonProps, } from "./components/ButtonV2/ButtonProps.type";
+export { BaseButtonProps as NonPrimaryButtonProps, ButtonWithPendingStateProps as PrimaryButtonProps, ButtonDefinition } from "./components/ButtonV2/ButtonProps.type";
 export { PrimaryButton } from "./components/ButtonV2/PrimaryButton";
 export { SecondaryButton } from "./components/ButtonV2/SecondaryButton";
 export { TertiaryButton } from "./components/ButtonV2/TertiaryButton";

package/dist/web-ui-tailwind.css

@@ -1349,6 +1349,10 @@ video {
   margin-left: auto;
 }
 
+.mb-px {
+  margin-bottom: 1px;
+}
+
 .mb-2\.5 {
   margin-bottom: 0.625rem;
 }
@@ -1357,6 +1361,10 @@ video {
   margin-left: 0.625rem;
 }
 
+.-mt-px {
+  margin-top: -1px;
+}
+
 .-ml-px {
   margin-left: -1px;
 }
@@ -1521,10 +1529,6 @@ video {
   padding-left: 0.25rem;
 }
 
-.pt-3 {
-  padding-top: 0.75rem;
-}
-
 .pl-4 {
   padding-left: 1rem;
 }
@@ -1621,16 +1625,16 @@ video {
   left: 0;
 }
 
-.top-3 {
-  top: 0.75rem;
+.top-6 {
+  top: 1.5rem;
 }
 
 .-top-1 {
   top: -0.25rem;
 }
 
-.-left-3 {
-  left: -0.75rem;
+.-left-2 {
+  left: -0.5rem;
 }
 
 .-right-54 {

package/dist/web-ui.cjs.development.js

@@ -2674,8 +2674,9 @@ var List = function List(_ref) {
     "data-test-id": "list-component"
   }, (title || headerButton) && /*#__PURE__*/React__default.createElement("div", {
     "data-test-id": "list-header",
-    className: classNames("flex rounded-t flex-row items-center p-4 space-x-4", {
-      "bg-white border-b border-slate-100": !headerTransparent,
+    className: classNames("flex rounded-t flex-row items-center py-4 space-x-4", {
+      "bg-white border-b border-slate-100 px-4": !headerTransparent,
+      "mb-px": headerTransparent,
       "justify-between": title && headerButton,
       "justify-start": title && !headerButton,
       "justify-end": !title && headerButton
@@ -3948,15 +3949,36 @@ var Tabbar = function Tabbar(_ref) {
       onSelect = _ref.onSelect,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? "" : _ref$className;
+
+  var _useState = React.useState(tabs),
+      innerTabs = _useState[0],
+      setInnerTabs = _useState[1];
+
+  var _useState2 = React.useState(selectedIndex),
+      innerSelectedIndex = _useState2[0],
+      setInnerSelectedIndex = _useState2[1];
+
+  React.useEffect(function () {
+    setInnerTabs(tabs);
+  }, [tabs]);
+  React.useEffect(function () {
+    setInnerSelectedIndex(innerSelectedIndex);
+  }, [innerSelectedIndex]);
+
+  function handleOnTabSelect(index) {
+    setInnerSelectedIndex(index);
+    onSelect == null ? void 0 : onSelect(index);
+  }
+
   return /*#__PURE__*/React__default.createElement("div", {
     className: "flex flex-row w-full bg-white rounded-xl " + className
-  }, tabs == null ? void 0 : tabs.map(function (tabItemProps, index) {
+  }, innerTabs == null ? void 0 : innerTabs.map(function (tabItemProps, index) {
     var _tabItemProps$dataTes;
 
     var itemProps = _extends({
       index: index,
-      onSelect: onSelect,
-      isSelected: selectedIndex === index
+      onSelect: handleOnTabSelect,
+      isSelected: innerSelectedIndex === index
     }, tabItemProps);
 
     return /*#__PURE__*/React__default.createElement(TabbarItem, Object.assign({
@@ -4239,30 +4261,6 @@ var TextEditorV2 = function TextEditorV2(_ref) {
   }));
 };
 
-var SmallCircleIcon = function SmallCircleIcon(props) {
-  return /*#__PURE__*/React__default.createElement("svg", {
-    className: props.className,
-    onClick: props.onClick,
-    role: props.onClick ? "button" : undefined,
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React__default.createElement("circle", {
-    cx: "12",
-    cy: "12",
-    r: "6",
-    fill: "currentColor"
-  }), /*#__PURE__*/React__default.createElement("circle", {
-    cx: "14.5",
-    cy: "9.5",
-    r: "1.5",
-    fill: "white",
-    fillOpacity: "0.1"
-  }));
-};
-
 var TimelineStep = function TimelineStep(_ref) {
   var _classNames;
 
@@ -4270,11 +4268,11 @@ var TimelineStep = function TimelineStep(_ref) {
       type = _ref.type;
   var isWideStep = type === "wide";
   var borderClassNames = "ml-4 pl-6 border-blue-800 border-l-2";
-  var containerClassNames = classNames("relative", (_classNames = {}, _classNames[borderClassNames] = !isWideStep, _classNames["pt-3"] = !isWideStep, _classNames["bg-white rounded-lg overflow-hidden"] = isWideStep, _classNames));
+  var containerClassNames = classNames("relative", (_classNames = {}, _classNames[borderClassNames] = !isWideStep, _classNames["bg-white rounded-lg overflow-hidden"] = isWideStep, _classNames));
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
     className: containerClassNames
-  }, content, !isWideStep && /*#__PURE__*/React__default.createElement(SmallCircleIcon, {
-    className: "text-blue-800 absolute top-3 -left-3 -ml-px"
+  }, content, !isWideStep && /*#__PURE__*/React__default.createElement("span", {
+    className: "rounded-lg bg-blue-800 h-4 w-4 absolute top-6 -left-2 -ml-px -mt-px"
   })), /*#__PURE__*/React__default.createElement("div", {
     className: classNames(borderClassNames, "h-6 last:h-0")
   }));
@@ -5000,6 +4998,30 @@ var PinIcon = function PinIcon(props) {
   }));
 };
 
+var SmallCircleIcon = function SmallCircleIcon(props) {
+  return /*#__PURE__*/React__default.createElement("svg", {
+    className: props.className,
+    onClick: props.onClick,
+    role: props.onClick ? "button" : undefined,
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default.createElement("circle", {
+    cx: "12",
+    cy: "12",
+    r: "6",
+    fill: "currentColor"
+  }), /*#__PURE__*/React__default.createElement("circle", {
+    cx: "14.5",
+    cy: "9.5",
+    r: "1.5",
+    fill: "white",
+    fillOpacity: "0.1"
+  }));
+};
+
 var SmallDiamondIcon = function SmallDiamondIcon(props) {
   return /*#__PURE__*/React__default.createElement("svg", {
     className: props.className,