@luscii-healthtech/web-ui 37.5.5 → 37.5.6

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

@@ -1,5 +1,5 @@
-import React from "react";
-import { type Props as BoxProps } from "../Box/Box";
+import React, { type ComponentProps } from "react";
+import { Box } from "../Box/Box";
 import { type TitleProps } from "../Title/Title";
 type TitleAndMaybeActions = {
     title: string;
@@ -30,18 +30,9 @@ type TitleAndMaybeActions = {
      */
     actions?: never;
 };
-export type Props<C extends React.ElementType> = React.ComponentPropsWithoutRef<C> & {
-    as?: C;
+export type Props<C extends React.ElementType = "div"> = ComponentProps<typeof Box<C>> & {
     border?: boolean;
     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"];
     /**
      * 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/components/ModalDialog/ModalDialog.d.ts

@@ -27,6 +27,18 @@ type Props = Omit<React.ComponentPropsWithoutRef<"dialog">, "open" | "onClose">
      * Determines the max-width of the modal.
      */
     size?: Size;
+    /**
+     * Determines the presentation of the modal
+     *
+     * - `"centered-dialog"`
+     * Presents a dialog centered on screen.
+     *
+     * - `"side-modal"`
+     * Presents a dialog on the right side of the screen stretching the full height of the viewport.
+     *
+     * @default "centered-dialog"
+     */
+    variant?: "centered-dialog" | "side-modal";
 };
 type SubComponents = {
     /**

package/dist/index.development.js

@@ -6558,7 +6558,7 @@ function TopBar(props) {
 TopBar.Actions = Actions$1;
 
 function Card(props) {
-  const { actions: __, as: Element = "div", children, border, className, elevation, elevationOnHover, padding = true, title: _ } = props, rest = __rest(props, ["actions", "as", "children", "border", "className", "elevation", "elevationOnHover", "padding", "title"]);
+  const { actions: __, as: Element = "div", children, border, className, elevation, elevationOnHover, padding = true, title: _, borderRadius = "m" } = props, rest = __rest(props, ["actions", "as", "children", "border", "className", "elevation", "elevationOnHover", "padding", "title", "borderRadius"]);
   const hasHoverEffect = !(elevation === elevationOnHover || elevationOnHover === void 0);
   const hoverShadowClassName = createShadowClassName(elevationOnHover, {
     modifier: "hover",
@@ -6570,7 +6570,7 @@ function Card(props) {
   });
   return React__namespace.default.createElement(
     Box,
-    Object.assign({ as: Element, elevation, borderRadius: "m" }, rest, { className: classes }),
+    Object.assign({ as: Element, elevation, borderRadius }, rest, { className: classes }),
     React__namespace.default.createElement(
       Box,
       { className: "ui-bg-white" },
@@ -7324,12 +7324,19 @@ const Collapse = (props) => {
 };
 
 const ModalDialog = (_a) => {
-  var { open, className, size, onClose, children } = _a, rest = __rest(_a, ["open", "className", "size", "onClose", "children"]);
+  var { open, className, size, onClose, children, variant = "centered-dialog" } = _a, rest = __rest(_a, ["open", "className", "size", "onClose", "children", "variant"]);
   const dialog = React.useRef(null);
-  const classes = classNames__default.default(className, "ui-bg-transparent", "ui-max-w-[calc(100dvw-theme('spacing.xl'))]", "ui-my-xl", "ui-top-0", "ui-bottom-auto", {
+  const classes = classNames__default.default(className, "ui-bg-transparent", "ui-max-w-[calc(100dvw-theme('spacing.xl'))]", {
+    "ui-my-xl": variant === "centered-dialog"
+  }, "ui-top-0", "ui-bottom-auto", {
     "md:ui-w-80": size === "s",
     "md:ui-w-132": size === "m",
     "md:ui-w-216": size === "l"
+  }, {
+    "ui-right-0": variant === "side-modal",
+    "ui-left-auto": variant === "side-modal",
+    "ui-bottom-0": variant === "side-modal",
+    "ui-max-h-full": variant === "side-modal"
   });
   React.useEffect(() => {
     var _a2, _b;
@@ -7338,14 +7345,19 @@ const ModalDialog = (_a) => {
     } else {
       (_b = dialog.current) === null || _b === void 0 ? void 0 : _b.close();
     }
-  }, [open]);
+  }, [open, variant]);
   return React__namespace.default.createElement(
     "dialog",
     Object.assign({ ref: dialog, className: classes, onClose }, rest),
     React__namespace.default.createElement(
       Card,
-      { padding: false },
-      React__namespace.default.createElement(Stack, { width: "full", align: "stretch", className: "ui-max-h-[calc(100dvh-theme('spacing.xl')*2)]" }, children)
+      { padding: false, borderRadius: variant === "side-modal" ? "none" : "m", className: classNames__default.default({
+        "ui-h-screen": variant === "side-modal"
+      }) },
+      React__namespace.default.createElement(Stack, { width: "full", align: "stretch", className: classNames__default.default({
+        "ui-max-h-[calc(100dvh-theme('spacing.xl')*2)]": variant === "centered-dialog",
+        "ui-h-screen": variant === "side-modal"
+      }) }, children)
     )
   );
 };