@luscii-healthtech/web-ui 42.11.4 → 42.12.0

package/dist/index.development.js

@@ -5199,7 +5199,8 @@ const Padding = (props) => {
 };
 const Item$1 = (props) => {
   const { _DO_NOT_USE_index } = props, rest = __rest(props, ["_DO_NOT_USE_index"]);
-  return jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [_DO_NOT_USE_index === 0 ? null : jsxRuntime.jsx("div", { "data-index": _DO_NOT_USE_index, className: classNames__default.default("ui:absolute ui:left-0 ui:right-0", "ui:border-t ui:border-slate-200") }), jsxRuntime.jsx("li", Object.assign({}, rest, { children: React__namespace.default.Children.map(props.children, (child) => {
+  const liClasses = classNames__default.default("ui:first:rounded-t-[inherit] ui:last:rounded-b-[inherit]", props.className);
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [_DO_NOT_USE_index === 0 ? null : jsxRuntime.jsx("div", { "data-index": _DO_NOT_USE_index, className: classNames__default.default("ui:absolute ui:left-0 ui:right-0", "ui:border-t ui:border-slate-200") }), jsxRuntime.jsx("li", Object.assign({ className: liClasses }, rest, { children: React__namespace.default.Children.map(props.children, (child) => {
     if (!React__namespace.default.isValidElement(child)) {
       return child;
     }
@@ -5222,9 +5223,19 @@ const Item$1 = (props) => {
 };
 const UnorderedList = (props) => {
   const { _DO_NOT_USE_isRoot = true } = props, rest = __rest(props, ["_DO_NOT_USE_isRoot"]);
-  return jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [_DO_NOT_USE_isRoot ? null : jsxRuntime.jsx("div", { className: classNames__default.default("ui:absolute ui:left-0 ui:right-0", "ui:border-t ui:border-slate-200") }), jsxRuntime.jsx("ul", Object.assign({}, rest, { className: classNames__default.default({
-    "ui:relative": _DO_NOT_USE_isRoot
-  }, props.className), children: React__namespace.default.Children.map(props.children, (child, index) => {
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [_DO_NOT_USE_isRoot ? null : jsxRuntime.jsx("div", { className: classNames__default.default("ui:absolute ui:left-0 ui:right-0", "ui:border-t ui:border-slate-200") }), jsxRuntime.jsx("ul", Object.assign({}, rest, { className: classNames__default.default(
+    {
+      "ui:relative": _DO_NOT_USE_isRoot
+    },
+    /**
+     * Inheriting border radius from the parent element.
+     *
+     * This makes the parent component (e.g. a Card component) determine the rounding
+     * of the list and its items.
+     */
+    "ui:rounded-[inherit]",
+    props.className
+  ), children: React__namespace.default.Children.map(props.children, (child, index) => {
     if (!React__namespace.default.isValidElement(child)) {
       return child !== null && child !== void 0 ? child : null;
     }
@@ -5264,18 +5275,34 @@ FullPageModal.setAppElement = ReactModal__default.default.setAppElement;
 
 const context$2 = React.createContext({ isOpen: false });
 const DetailsDisclosure = (_a) => {
-  var { children, onToggleDetails, name, onToggle, openByDefault, open } = _a, rest = __rest(_a, ["children", "onToggleDetails", "name", "onToggle", "openByDefault", "open"]);
+  var { children, onToggleDetails, name, onToggle, openByDefault, open, className, omitBorder = false } = _a, rest = __rest(_a, ["children", "onToggleDetails", "name", "onToggle", "openByDefault", "open", "className", "omitBorder"]);
   const [internalIsOpen, setInternalIsOpen] = React.useState(openByDefault !== null && openByDefault !== void 0 ? openByDefault : false);
   const isOpen = open !== null && open !== void 0 ? open : internalIsOpen;
+  const classes = classNames__default.default(
+    {
+      "ui:border-0": omitBorder,
+      "ui:border": !omitBorder
+    },
+    "ui:rounded-[inherit]",
+    /**
+     * TODO: revisit these colors after they've been standardized in the design system.
+     */
+    "ui:[&:has(summary:hover)]:border-blue-500",
+    "ui:[&:has(summary:focus)]:border-blue-500",
+    "ui:border-slate-300 ui:transition-colors",
+    "ui:details-content:opacity-0 ui:details-content:h-0 ui:details-content:transition-discrete ui:details-content:duration-300 ui:motion-reduce:details-content:duration-[0ms] ui:details-content:overflow-clip",
+    "ui:open:details-content:opacity-100 ui:open:details-content:h-auto",
+    className
+  );
   return jsxRuntime.jsx(context$2.Provider, { value: { isOpen }, children: jsxRuntime.jsx(Box, Object.assign({ as: "details", 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 })) });
+  }, open: isOpen, className: classes }, rest, { children })) });
 };
 const DefaultOpenIndicator = ({ isOpen }) => {
-  return jsxRuntime.jsx(ChevronRightIcon, { className: classNames__default.default("ui:shrink-0 ui:transition-transform", {
+  return jsxRuntime.jsx(ChevronRightIcon, { className: classNames__default.default("ui:shrink-0 ui:transition-transform ui:ml-s", {
     "ui:rotate-90": isOpen
   }) });
 };
@@ -5284,9 +5311,9 @@ const OpenIndicator = ({ component: Component = DefaultOpenIndicator }) => {
   return jsxRuntime.jsx(Component, { isOpen });
 };
 const Summary = (_a) => {
-  var { children, omitOpenIndicator = false } = _a, rest = __rest(_a, ["children", "omitOpenIndicator"]);
+  var { children, omitOpenIndicator = false, className } = _a, rest = __rest(_a, ["children", "omitOpenIndicator", "className"]);
   const { isOpen } = React.useContext(context$2);
-  return jsxRuntime.jsx(Stack, Object.assign({ as: "summary", pl: "s", hoverBackgroundColor: "blue", cursor: "pointer" }, rest, { children: jsxRuntime.jsx(Stack, { axis: "x", justify: "between", align: "center", width: "full", children: jsxRuntime.jsxs(Stack, { axis: "x", width: "full", align: "center", gap: "xxs", children: [!omitOpenIndicator && jsxRuntime.jsx(DefaultOpenIndicator, { isOpen }), jsxRuntime.jsx(Box, { width: "full", children })] }) }) }));
+  return jsxRuntime.jsx(Stack, Object.assign({ as: "summary", cursor: "pointer", className: classNames__default.default("ui:rounded-[inherit]", className) }, rest, { children: jsxRuntime.jsx(Stack, { axis: "x", justify: "between", align: "center", width: "full", children: jsxRuntime.jsxs(Stack, { axis: "x", width: "full", align: "center", gap: "xxs", children: [!omitOpenIndicator && jsxRuntime.jsx(DefaultOpenIndicator, { isOpen }), jsxRuntime.jsx(Box, { width: "full", children })] }) }) }));
 };
 DetailsDisclosure.Summary = Summary;
 Summary.OpenIndicator = OpenIndicator;
@@ -5466,7 +5493,7 @@ function MenuItemGroupOpenIndicator({ isOpen }) {
 }
 function MenuItemGroup(_a) {
   var { title, children, className } = _a, rest = __rest(_a, ["title", "children", "className"]);
-  return jsxRuntime.jsxs(DetailsDisclosure, Object.assign({ className: classNames__default.default("ui:w-full", className) }, rest, { children: [jsxRuntime.jsx(DetailsDisclosure.Summary, { hoverBackgroundColor: void 0, pl: void 0, omitOpenIndicator: true, children: jsxRuntime.jsx(MenuItemLayout, { children: jsxRuntime.jsx(MenuItemPadding, { children: jsxRuntime.jsxs(Stack, { axis: "x", align: "center", justify: "between", children: [jsxRuntime.jsx(MenuItemText, { children: title }), jsxRuntime.jsx(DetailsDisclosure.Summary.OpenIndicator, { component: MenuItemGroupOpenIndicator })] }) }) }) }), jsxRuntime.jsx(MenuItemPadding, { paddingX: true, paddingY: false, children })] }));
+  return jsxRuntime.jsxs(DetailsDisclosure, Object.assign({ omitBorder: true, className: classNames__default.default("ui:w-full", className) }, rest, { children: [jsxRuntime.jsx(DetailsDisclosure.Summary, { hoverBackgroundColor: void 0, pl: void 0, omitOpenIndicator: true, children: jsxRuntime.jsx(MenuItemLayout, { children: jsxRuntime.jsx(MenuItemPadding, { children: jsxRuntime.jsxs(Stack, { axis: "x", align: "center", justify: "between", children: [jsxRuntime.jsx(MenuItemText, { children: title }), jsxRuntime.jsx(DetailsDisclosure.Summary.OpenIndicator, { component: MenuItemGroupOpenIndicator })] }) }) }) }), jsxRuntime.jsx(MenuItemPadding, { paddingX: true, paddingY: false, children })] }));
 }
 function SectionTitle(props) {
   return jsxRuntime.jsx(MenuItemPadding, { children: jsxRuntime.jsx(Text, { variant: "strong", children: props.children }) });