@luscii-healthtech/web-ui 28.11.2 → 28.12.0

package/dist/components/Box/Box.d.ts

@@ -21,7 +21,7 @@ export type Props<C extends React.ElementType> = React.ComponentPropsWithoutRef<
      * Will set a border radius based on the standard sizes scale.
      * Check {@link SIZES} for reference.
      */
-    borderRadius?: "xxxs";
+    borderRadius?: keyof typeof SIZES;
 };
 export declare const Box: <C extends React.ElementType = "div">(props: Props<C>) => React.JSX.Element;
 export {};

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

@@ -32,7 +32,18 @@ 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
+     */
+    elevation?: BoxProps<C>["elevation"];
+    /**
+     * 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
@@ -42,10 +53,6 @@ export type Props<C extends React.ElementType> = React.ComponentPropsWithoutRef<
      * @default true
      */
     padding?: boolean;
-    /**
-     * Adds a box-shadow to the element based on the design system
-     */
-    elevation?: BoxProps<C>["elevation"];
 } & TitleAndMaybeActions;
 export declare function Card<C extends React.ElementType = "div">(props: Props<C>): React.JSX.Element;
 export declare namespace Card {

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

@@ -0,0 +1,8 @@
+import React from "react";
+import { type Props as BoxProps } from "../Box/Box";
+type Props = {
+    borderRadius?: BoxProps<"div">["borderRadius"];
+    children: React.ReactNode;
+};
+export declare const HoverIndicator: (props: Props) => React.JSX.Element;
+export {};

package/dist/index.development.js

@@ -2075,6 +2075,121 @@ const CenteredHero = ({ title, text, image, buttons = [], background = "slate-50
   );
 };
 
+const ELEVATION = {
+  surface: "none",
+  base: "0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.06)",
+  small: "0px 1px 2px rgba(0, 0, 0, 0.05)",
+  medium: "0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -1px rgba(0, 0, 0, 0.06)",
+  large: "0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -2px rgba(0, 0, 0, 0.05)",
+  extraLarge: "0px 6px 10px rgba(0, 0, 0, 0.14), 0px 1px 18px rgba(0, 0, 0, 0.12), 0px 3px 5px rgba(0, 0, 0, 0.2)",
+  drag: "0px 20px 25px -5px rgba(0, 0, 0, 0.1), 0px 10px 10px -5px rgba(0, 0, 0, 0.04)"
+};
+
+const createShadowClassName = (elevation, options) => {
+  if (!elevation || !ELEVATION[elevation]) {
+    return "";
+  }
+  const { modifier } = options || {};
+  if (modifier === "hover") {
+    return classNames__default.default({
+      "hover:ui-shadow-base": elevation === "base",
+      "hover:ui-shadow-small": elevation === "small",
+      "hover:ui-shadow-medium": elevation === "medium",
+      "hover:ui-shadow-large": elevation === "large",
+      "hover:ui-shadow-surface": elevation === "surface",
+      "hover:ui-shadow-extraLarge": elevation === "extraLarge",
+      "hover:ui-shadow-drag": elevation === "drag"
+    });
+  }
+  if (modifier === "focus") {
+    return classNames__default.default({
+      "focus:ui-shadow-base": elevation === "base",
+      "focus:ui-shadow-small": elevation === "small",
+      "focus:ui-shadow-medium": elevation === "medium",
+      "focus:ui-shadow-large": elevation === "large",
+      "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"
+    });
+  }
+  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"
+  });
+};
+
+const SIZES = {
+  /**
+   * Represents the tiny size of 4px.
+   */
+  xxxxs: "4px",
+  /**
+   * Represents a very extra extra small size of 6px.
+   */
+  xxxs: "6px",
+  /**
+   * Represents an extra extra small size of 8px.
+   */
+  xxs: "8px",
+  /**
+   * Represents an extra small size of 10px.
+   */
+  xs: "10px",
+  /**
+   * Represents a small size of 12px.
+   */
+  s: "12px",
+  /**
+   * Represents a medium size of 16px.
+   */
+  m: "16px",
+  /**
+   * Represents a large size of 24px.
+   */
+  l: "24px",
+  /**
+   * Represents an extra large size of 32px.
+   */
+  xl: "32px",
+  /**
+   * Represents an extra extra large size of 32px.
+   */
+  xxl: "32px"
+};
+
+const createRadiusClassName = (borderRadius) => {
+  if (!borderRadius || !SIZES[borderRadius]) {
+    return "";
+  }
+  return classNames__default.default({
+    "ui-radius-xxxxs": borderRadius === "xxxxs",
+    "ui-radius-xxxs": borderRadius === "xxxs",
+    "ui-radius-xxs": borderRadius === "xxs",
+    "ui-radius-xs": borderRadius === "xs",
+    "ui-radius-s": borderRadius === "s",
+    "ui-radius-m": borderRadius === "m",
+    "ui-radius-l": borderRadius === "l",
+    "ui-radius-xl": borderRadius === "xl",
+    "ui-radius-xxl": borderRadius === "xxl"
+  });
+};
+
 const spacingKeys = [
   "p",
   "pt",
@@ -2095,8 +2210,10 @@ const createSpacingClassNames = (keys, spacingProps) => {
   return keys.filter((key) => spacingProps[key]).map((key) => `ui-${key}-${spacingProps[key]}`).join(" ");
 };
 const Box = (props) => {
-  const { as: Element = "div", className, elevation, width } = props, attributes = __rest(props, ["as", "className", "elevation", "width"]);
+  const { as: Element = "div", borderRadius, className, elevation, width } = props, attributes = __rest(props, ["as", "borderRadius", "className", "elevation", "width"]);
   const spacingClasses = createSpacingClassNames(spacingKeys, props);
+  const shadowClassName = createShadowClassName(elevation);
+  const borderRadiusClassName = createRadiusClassName(borderRadius);
   const attributesWithoutSpacingKeys = omit__default.default(attributes, spacingKeys);
   return React__namespace.default.createElement(Element, Object.assign({ className: classNames__default.default(spacingClasses, {
     "ui-bg-slate-100": props.backgroundColor === "base",
@@ -2104,11 +2221,9 @@ const Box = (props) => {
     "ui-bg-red-50": props.backgroundColor === "red",
     " ui-bg-green-50": props.backgroundColor === "green",
     " ui-bg-amber-50": props.backgroundColor === "amber",
-    [`ui-shadow-${elevation}`]: elevation,
     [`ui-w-${width}`]: width && width !== "full",
-    "ui-w-full": width === "full",
-    "ui-radius-xxxs": props.borderRadius
-  }, className) }, attributesWithoutSpacingKeys));
+    "ui-w-full": width === "full"
+  }, className, shadowClassName, borderRadiusClassName) }, attributesWithoutSpacingKeys));
 };
 
 const Stack = (props) => {
@@ -5783,14 +5898,38 @@ function TopBar(props) {
 }
 TopBar.Actions = Actions;
 
-function Card(props) {
-  const { as: Element = "div", title: _, actions: __, padding = true, children, className, elevation } = props, rest = __rest(props, ["as", "title", "actions", "padding", "children", "className", "elevation"]);
+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,
-    Object.assign({ as: Element, elevation }, rest, { className: classNames__default.default("ui-overflow-hidden", "ui-rounded-lg ui-bg-white", className) }),
+    { 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 hoverShadowClassName = createShadowClassName(elevationOnHover, {
+    modifier: "hover"
+  });
+  const CardContent = () => React__namespace.default.createElement(
+    Box,
+    { className: cardContentClassName },
     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, {
+    "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 },
+    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;