@luscii-healthtech/web-ui 29.0.0 → 30.0.0

package/dist/components/Card/Card.d.ts

@@ -33,7 +33,6 @@ type TitleAndMaybeActions = {
 export type Props<C extends React.ElementType> = React.ComponentPropsWithoutRef<C> & {
     as?: C;
     border?: boolean;
-    borderRadius?: BoxProps<C>["borderRadius"];
     children: React.ReactNode;
     /**
      * Adds a box-shadow to the element based on the design system
@@ -43,7 +42,6 @@ export type Props<C extends React.ElementType> = React.ComponentPropsWithoutRef<
      * The elevation from the design system to apply when hovering over the card.
      */
     elevationOnHover?: BoxProps<C>["elevation"];
-    indicatorOnHover?: boolean;
     /**
      * Whether or not to add the default padding to the card. Set this
      * to `false` if you want to render something full width inside of the

package/dist/index.development.js

@@ -2089,7 +2089,26 @@ const createShadowClassName = (elevation, options) => {
   if (!elevation || !ELEVATION[elevation]) {
     return "";
   }
-  const { modifier } = options || {};
+  const { modifier, transition } = options || {};
+  let transitionClassName = "";
+  if (transition) {
+    transitionClassName = classNames__default.default({
+      "hover:ui-transition-shadow ui-duration-300": modifier === "hover",
+      "focus:ui-transition-shadow ui-duration-300": modifier === "focus",
+      "active:ui-transition-shadow ui-duration-300": modifier === "active"
+    });
+  }
+  if (!modifier) {
+    return classNames__default.default({
+      "ui-shadow-base": elevation === "base",
+      "ui-shadow-small": elevation === "small",
+      "ui-shadow-medium": elevation === "medium",
+      "ui-shadow-large": elevation === "large",
+      "ui-shadow-surface": elevation === "surface",
+      "ui-shadow-extraLarge": elevation === "extraLarge",
+      "ui-shadow-drag": elevation === "drag"
+    }, transitionClassName);
+  }
   if (modifier === "hover") {
     return classNames__default.default({
       "hover:ui-shadow-base": elevation === "base",
@@ -2099,7 +2118,7 @@ const createShadowClassName = (elevation, options) => {
       "hover:ui-shadow-surface": elevation === "surface",
       "hover:ui-shadow-extraLarge": elevation === "extraLarge",
       "hover:ui-shadow-drag": elevation === "drag"
-    });
+    }, transitionClassName);
   }
   if (modifier === "focus") {
     return classNames__default.default({
@@ -2110,28 +2129,17 @@ const createShadowClassName = (elevation, options) => {
       "focus:ui-shadow-surface": elevation === "surface",
       "focus:ui-shadow-extraLarge": elevation === "extraLarge",
       "focus:ui-shadow-drag": elevation === "drag"
-    });
-  }
-  if (modifier === "active") {
-    return classNames__default.default({
-      "active:ui-shadow-base": elevation === "base",
-      "active:ui-shadow-small": elevation === "small",
-      "active:ui-shadow-medium": elevation === "medium",
-      "active:ui-shadow-large": elevation === "large",
-      "active:ui-shadow-surface": elevation === "surface",
-      "active:ui-shadow-extraLarge": elevation === "extraLarge",
-      "active:ui-shadow-drag": elevation === "drag"
-    });
+    }, transitionClassName);
   }
   return classNames__default.default({
-    "ui-shadow-base": elevation === "base",
-    "ui-shadow-small": elevation === "small",
-    "ui-shadow-medium": elevation === "medium",
-    "ui-shadow-large": elevation === "large",
-    "ui-shadow-surface": elevation === "surface",
-    "ui-shadow-extraLarge": elevation === "extraLarge",
-    "ui-shadow-drag": elevation === "drag"
-  });
+    "active:ui-shadow-base": elevation === "base",
+    "active:ui-shadow-small": elevation === "small",
+    "active:ui-shadow-medium": elevation === "medium",
+    "active:ui-shadow-large": elevation === "large",
+    "active:ui-shadow-surface": elevation === "surface",
+    "active:ui-shadow-extraLarge": elevation === "extraLarge",
+    "active:ui-shadow-drag": elevation === "drag"
+  }, transitionClassName);
 };
 
 const SIZES = {
@@ -5054,7 +5062,7 @@ function Section$1(_a) {
   var { title, footer, children, headerAside, className, isLoading = false, headerTitle } = _a, restProps = __rest(_a, ["title", "footer", "children", "headerAside", "className", "isLoading", "headerTitle"]);
   return React__namespace.default.createElement(
     Stack,
-    Object.assign({ as: "section", "aria-label": title, title, width: "full", className: "ui-rounded-lg ui-bg-white" }, restProps),
+    Object.assign({ as: "section", "aria-label": title, title, width: "full", className: classNames__default.default("ui-rounded-lg ui-bg-white", className) }, restProps),
     (title || headerAside || headerTitle) && React__namespace.default.createElement(SectionHeader, { title: headerTitle || title, aside: headerAside, isLoading }),
     React__namespace.default.createElement(Box, { width: "full", className: classNames__default.default({
       "ui-border-t-1 ui-border-t-slate-200": children
@@ -5903,38 +5911,26 @@ function TopBar(props) {
 }
 TopBar.Actions = Actions;
 
-const HoverIndicator = (props) => {
-  const { borderRadius = "xxs", children } = props;
-  const boxClasses = classNames__default.default("ui-relative ui-border ui-border-l-[16px] ui-border-transparent ui-border-l-transparent hover:ui-border-l-primary", "before:ui-absolute before:ui-inset-[-1px] before:-ui-ml-[15px] before:ui-w-[16px] hover:before:ui-bg-primary", { [`before:ui-radius-l-${borderRadius}`]: borderRadius });
-  return React__namespace.default.createElement(
-    Box,
-    { borderRadius, className: boxClasses },
-    React__namespace.default.createElement(Box, { className: "-ui-ml-4" }, children)
-  );
-};
-
 function Card(props) {
-  const { actions: __, as: Element = "div", border, borderRadius = "xxs", children, className, elevation, elevationOnHover, indicatorOnHover, padding = true, title: _ } = props, rest = __rest(props, ["actions", "as", "border", "borderRadius", "children", "className", "elevation", "elevationOnHover", "indicatorOnHover", "padding", "title"]);
-  const cardContentClassName = classNames__default.default("ui-bg-white", {
-    "ui-ml-[16px]": indicatorOnHover
-  });
+  const { actions: __, as: Element = "div", border, children, className, elevation, elevationOnHover, padding = true, title: _ } = props, rest = __rest(props, ["actions", "as", "border", "children", "className", "elevation", "elevationOnHover", "padding", "title"]);
   const hoverShadowClassName = createShadowClassName(elevationOnHover, {
-    modifier: "hover"
+    modifier: "hover",
+    transition: true
   });
   const CardContent = () => React__namespace.default.createElement(
     Box,
-    { className: cardContentClassName },
+    { className: "ui-bg-white" },
     React__namespace.default.createElement(RenderTopBar, Object.assign({}, props)),
     padding ? React__namespace.default.createElement(Padding, null, children) : children
   );
-  const classes = classNames__default.default("ui-overflow-hidden", "ui-bg-white", className, hoverShadowClassName, {
+  const classes = classNames__default.default("ui-overflow-hidden", "ui-bg-white", "ui-transition-colors ui-duration-300", className, hoverShadowClassName, {
     "ui-border ui-border-slate-300 hover:ui-border-slate-400": border
   });
-  return React__namespace.default.createElement(Box, Object.assign({ as: Element, elevation, borderRadius }, rest, { className: classes }), indicatorOnHover ? React__namespace.default.createElement(
-    HoverIndicator,
-    { borderRadius },
+  return React__namespace.default.createElement(
+    Box,
+    Object.assign({ as: Element, elevation, borderRadius: "m" }, rest, { className: classes }),
     React__namespace.default.createElement(CardContent, null)
-  ) : React__namespace.default.createElement(CardContent, null));
+  );
 }
 Card.Title = (props) => React__namespace.default.createElement(Title, Object.assign({ type: "sm" }, props));
 Card.TopBar = TopBar;