@luscii-healthtech/web-ui 37.5.4 → 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/components/VerticalMenu/VerticalMenu.d.ts

@@ -1,6 +1,7 @@
-import React from "react";
+import React, { type ReactNode } from "react";
 import { Text } from "../Text/Text";
 import { Divider } from "../Divider/Divider";
+import { DetailsDisclosure } from "../DetailsDisclosure/DetailsDisclosure";
 type Props = React.ComponentPropsWithoutRef<"div"> & {
     /**
      * Renders above the menu items, but below the header.
@@ -14,6 +15,12 @@ type Props = React.ComponentPropsWithoutRef<"div"> & {
      * Renders below everything else.
      */
     footer?: React.ReactNode;
+    /**
+     * Presentation of the vertical menu.
+     *
+     * @default 'primary'
+     */
+    variant?: "primary" | "secondary";
 };
 type StaticComponents = {
     Divider: typeof MenuDivider;
@@ -22,6 +29,7 @@ type StaticComponents = {
     ItemText: typeof MenuItemText;
     ItemPadding: typeof MenuItemPadding;
     NotificationBubble: typeof MenuItemNotificationBubble;
+    ItemGroup: typeof MenuItemGroup;
 };
 export declare const VerticalMenu: React.FC<Props> & StaticComponents;
 declare function MenuItemText(props: Readonly<React.ComponentPropsWithoutRef<typeof Text>>): React.JSX.Element;
@@ -83,4 +91,7 @@ declare function MenuItemNotificationBubble(props: Readonly<{
     className?: string;
 }>): React.JSX.Element;
 declare function MenuDivider(props: React.ComponentPropsWithoutRef<typeof Divider>): React.JSX.Element;
+declare function MenuItemGroup({ title, children, ...rest }: React.ComponentPropsWithoutRef<typeof DetailsDisclosure> & {
+    title: ReactNode;
+}): React.JSX.Element;
 export {};

package/dist/index.development.js

@@ -6326,15 +6326,77 @@ const FullPageModal = ({ children, dataTestId, isOpen = false, onCloseClick, pri
 FullPageModal.Actions = FullPageModalActions;
 FullPageModal.setAppElement = ReactModal__default.default.setAppElement;
 
+const context$1 = React.createContext({ isOpen: false });
+const DetailsDisclosure = (_a) => {
+  var { children, onToggleDetails, name, onToggle, openByDefault, open } = _a, rest = __rest(_a, ["children", "onToggleDetails", "name", "onToggle", "openByDefault", "open"]);
+  const [internalIsOpen, setInternalIsOpen] = React.useState(openByDefault !== null && openByDefault !== void 0 ? openByDefault : false);
+  const isOpen = open !== null && open !== void 0 ? open : internalIsOpen;
+  return React__namespace.default.createElement(
+    context$1.Provider,
+    { value: { isOpen } },
+    React__namespace.default.createElement(Box, Object.assign({
+      as: "details",
+      /**
+       * This "name" attribute triggers a type-error on "details" eventhough it should be valid
+       * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details#name
+      // @ts-ignore*/
+      name,
+      onToggle: (e) => {
+        const wasOpened = e.currentTarget.hasAttribute("open");
+        onToggleDetails === null || onToggleDetails === void 0 ? void 0 : onToggleDetails(wasOpened);
+        setInternalIsOpen(wasOpened);
+        onToggle === null || onToggle === void 0 ? void 0 : onToggle(e);
+      },
+      open: isOpen
+    }, rest), children)
+  );
+};
+const DefaultOpenIndicator = ({ isOpen }) => {
+  return React__namespace.default.createElement(ChevronRightIcon, { className: classNames__default.default("ui-shrink-0 ui-transition-transform", {
+    "ui-rotate-90": isOpen
+  }) });
+};
+const OpenIndicator = ({ component: Component = DefaultOpenIndicator }) => {
+  const { isOpen } = React.useContext(context$1);
+  return React__namespace.default.createElement(Component, { isOpen });
+};
+const Summary = (_a) => {
+  var { children, omitOpenIndicator = false } = _a, rest = __rest(_a, ["children", "omitOpenIndicator"]);
+  const { isOpen } = React.useContext(context$1);
+  return React__namespace.default.createElement(
+    Stack,
+    Object.assign({ as: "summary", pl: "s", hoverBackgroundColor: "blue", cursor: "pointer" }, rest),
+    React__namespace.default.createElement(
+      Stack,
+      { axis: "x", justify: "between", align: "center", width: "full" },
+      React__namespace.default.createElement(
+        Stack,
+        { axis: "x", width: "full", align: "center", gap: "xxs" },
+        !omitOpenIndicator && React__namespace.default.createElement(DefaultOpenIndicator, { isOpen }),
+        React__namespace.default.createElement(Box, { width: "full" }, children)
+      )
+    )
+  );
+};
+DetailsDisclosure.Summary = Summary;
+Summary.OpenIndicator = OpenIndicator;
+
+const context = React.createContext({
+  variant: "primary"
+});
 const VerticalMenu = (props) => {
-  const { className, title, header, footer } = props, rest = __rest(props, ["className", "title", "header", "footer"]);
+  const { className, title, header, footer, variant = "primary" } = props, rest = __rest(props, ["className", "title", "header", "footer", "variant"]);
   return React__namespace.default.createElement(
-    "div",
-    Object.assign({ className: classNames__default.default("ui-flex ui-h-full ui-flex-col ui-px-xxs ui-py-m ui-text-slate-800", className) }, rest),
-    React__namespace.default.createElement("div", null, header),
-    React__namespace.default.createElement(Text, { className: "ui-px-m ui-pb-m ui-pt-xs", variant: "lg-strong" }, title),
-    React__namespace.default.createElement("div", null, props.children),
-    React__namespace.default.createElement("div", { className: "ui-mt-auto" }, footer)
+    context.Provider,
+    { value: { variant } },
+    React__namespace.default.createElement(
+      "div",
+      Object.assign({ className: classNames__default.default("ui-flex ui-h-full ui-flex-col ui-px-xxs ui-py-m ui-text-slate-800", className) }, rest),
+      header && React__namespace.default.createElement("div", null, header),
+      title && React__namespace.default.createElement(Text, { className: "ui-px-m ui-pb-m ui-pt-xs", variant: "lg-strong" }, title),
+      React__namespace.default.createElement("div", null, props.children),
+      React__namespace.default.createElement("div", { className: "ui-mt-auto" }, footer)
+    )
   );
 };
 VerticalMenu.Divider = MenuDivider;
@@ -6343,25 +6405,40 @@ VerticalMenu.ItemLayout = MenuItemLayout;
 VerticalMenu.ItemText = MenuItemText;
 VerticalMenu.ItemPadding = MenuItemPadding;
 VerticalMenu.NotificationBubble = MenuItemNotificationBubble;
+VerticalMenu.ItemGroup = MenuItemGroup;
 function MenuItemText(props) {
-  return React__namespace.default.createElement(Text, Object.assign({ color: "current", variant: "strong" }, props, { className: classNames__default.default("sm:ui-leading-[24px]", props.className) }));
+  const { variant: menuVariant } = React.useContext(context);
+  return React__namespace.default.createElement(Text, Object.assign({ inline: true, color: "current", variant: menuVariant === "primary" ? "strong" : props.variant }, props, { className: classNames__default.default("sm:ui-leading-[24px]", props.className) }));
 }
-const getClassName = ({ isActive = false, classNameProp = "" } = {}) => classNames__default.default(
-  // Base
-  "ui-block ui-w-full ui-px-m ui-py-xs ui-radius-xxs",
-  // Transitions
-  "ui-transition-[color,background,transform]",
-  // States
-  "hover:ui-bg-primary-background hover:ui-text-primary focus:ui-text-primary active:ui-scale-[0.98]",
-  {
-    "ui-bg-transparent ui-text-on-surface": !isActive,
-    "ui-bg-gradient-to-r ui-from-blue-800 ui-to-blue-700 ui-text-white hover:ui-text-white focus:ui-text-white": isActive
-  },
-  classNameProp
-);
+const useGetClassName = () => {
+  const { variant } = React.useContext(context);
+  return React.useCallback(({ isActive = false, classNameProp = "" } = {}) => {
+    const base = "ui-block ui-w-full ui-px-m ui-py-xs ui-radius-xxs";
+    switch (variant) {
+      case "primary":
+        return classNames__default.default(
+          base,
+          // Transitions
+          "ui-transition-[color,background,transform]",
+          // States
+          "hover:ui-bg-primary-background hover:ui-text-primary focus:ui-text-primary active:ui-scale-[0.98]",
+          {
+            "ui-bg-transparent ui-text-on-surface": !isActive,
+            "ui-bg-gradient-to-r ui-from-blue-800 ui-to-blue-700 ui-text-white hover:ui-text-white focus:ui-text-white": isActive
+          },
+          classNameProp
+        );
+      case "secondary":
+        return classNames__default.default(base, "hover:ui-text-primary focus:ui-text-primary active:ui-scale-[0.98]", {
+          ["[&_span]:ui-font-bold"]: isActive
+        });
+    }
+  }, [variant]);
+};
 function MenuItem(props) {
   var _a;
   const { children, paddingX = true, paddingY = true } = props;
+  const getClassName = useGetClassName();
   if (children) {
     return React__namespace.default.createElement("div", { className: classNames__default.default({
       "ui-px-m": paddingX,
@@ -6414,6 +6491,37 @@ function MenuItemNotificationBubble(props) {
 function MenuDivider(props) {
   return React__namespace.default.createElement(Divider, Object.assign({ className: "ui-m-1 ui-my-xxs last:ui-border-b-1" }, props));
 }
+function MenuItemGroupOpenIndicator({ isOpen }) {
+  return React__namespace.default.createElement(ChevronDownIcon, { className: classNames__default.default("ui-shrink-0 ui-transition-transform", {
+    "ui-rotate-180": isOpen
+  }) });
+}
+function MenuItemGroup(_a) {
+  var { title, children } = _a, rest = __rest(_a, ["title", "children"]);
+  return React__namespace.default.createElement(
+    DetailsDisclosure,
+    Object.assign({}, rest),
+    React__namespace.default.createElement(
+      DetailsDisclosure.Summary,
+      { hoverBackgroundColor: void 0, pl: void 0, omitOpenIndicator: true },
+      React__namespace.default.createElement(
+        MenuItemLayout,
+        null,
+        React__namespace.default.createElement(
+          MenuItemPadding,
+          { paddingX: false },
+          React__namespace.default.createElement(
+            Stack,
+            { axis: "x", align: "center", justify: "between", gap: "m" },
+            React__namespace.default.createElement(MenuItemText, { variant: "medium", color: "slate-500" }, title),
+            React__namespace.default.createElement(DetailsDisclosure.Summary.OpenIndicator, { component: MenuItemGroupOpenIndicator })
+          )
+        )
+      )
+    ),
+    children
+  );
+}
 
 const Actions$1 = (props) => {
   const { children, className } = props, rest = __rest(props, ["children", "className"]);
@@ -6450,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",
@@ -6462,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" },
@@ -7215,68 +7323,20 @@ const Collapse = (props) => {
   );
 };
 
-const context = React.createContext({ isOpen: false });
-const DetailsDisclosure = (_a) => {
-  var { children, onToggleDetails, name, onToggle, openByDefault, open } = _a, rest = __rest(_a, ["children", "onToggleDetails", "name", "onToggle", "openByDefault", "open"]);
-  const [internalIsOpen, setInternalIsOpen] = React.useState(openByDefault !== null && openByDefault !== void 0 ? openByDefault : false);
-  const isOpen = open !== null && open !== void 0 ? open : internalIsOpen;
-  return React__namespace.default.createElement(
-    context.Provider,
-    { value: { isOpen } },
-    React__namespace.default.createElement(Box, Object.assign({
-      as: "details",
-      /**
-       * This "name" attribute triggers a type-error on "details" eventhough it should be valid
-       * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details#name
-      // @ts-ignore*/
-      name,
-      onToggle: (e) => {
-        const wasOpened = e.currentTarget.hasAttribute("open");
-        onToggleDetails === null || onToggleDetails === void 0 ? void 0 : onToggleDetails(wasOpened);
-        setInternalIsOpen(wasOpened);
-        onToggle === null || onToggle === void 0 ? void 0 : onToggle(e);
-      },
-      open: isOpen
-    }, rest), children)
-  );
-};
-const DefaultOpenIndicator = ({ isOpen }) => {
-  return React__namespace.default.createElement(ChevronRightIcon, { className: classNames__default.default("ui-shrink-0 ui-transition-transform", {
-    "ui-rotate-90": isOpen
-  }) });
-};
-const OpenIndicator = ({ component: Component = DefaultOpenIndicator }) => {
-  const { isOpen } = React.useContext(context);
-  return React__namespace.default.createElement(Component, { isOpen });
-};
-const Summary = (_a) => {
-  var { children, omitOpenIndicator = false } = _a, rest = __rest(_a, ["children", "omitOpenIndicator"]);
-  const { isOpen } = React.useContext(context);
-  return React__namespace.default.createElement(
-    Stack,
-    Object.assign({ as: "summary", pl: "s", hoverBackgroundColor: "blue", cursor: "pointer" }, rest),
-    React__namespace.default.createElement(
-      Stack,
-      { axis: "x", justify: "between", align: "center", width: "full" },
-      React__namespace.default.createElement(
-        Stack,
-        { axis: "x", width: "full", align: "center", gap: "xxs" },
-        !omitOpenIndicator && React__namespace.default.createElement(DefaultOpenIndicator, { isOpen }),
-        React__namespace.default.createElement(Box, { width: "full" }, children)
-      )
-    )
-  );
-};
-DetailsDisclosure.Summary = Summary;
-Summary.OpenIndicator = OpenIndicator;
-
 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;
@@ -7285,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)
     )
   );
 };