@luscii-healthtech/web-ui 27.9.0 → 27.10.0

package/dist/components/HoverIndicatorControl/HoverIndicatorControl.d.ts

@@ -0,0 +1,24 @@
+import { type FC, type ComponentProps, type ElementType, type ReactNode } from "react";
+import { Box } from "../Box/Box";
+type Props = {
+    /**
+     * The indicator to render on hover
+     */
+    indicator: ReactNode;
+    /**
+     * Disables the hover indicator
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Sets the element type, defaults to button
+     *
+     * @default 'button'
+     */
+    as?: ElementType;
+    children: ReactNode;
+} & ComponentProps<typeof Box>;
+export declare const HoverIndicatorControl: FC<Props> & {
+    Indicator: FC;
+};
+export {};

package/dist/index.d.ts

@@ -98,3 +98,4 @@ export { TimelineCard } from "./components/TimelineCard/TimelineCard";
 export { TimelineCardLayout } from "./components/TimelineCardLayout/TimelineCardLayout";
 export { LocaleProvider } from "./context/LocaleContext";
 export { StyledUnorderedList } from "./components/StyledUnorderedList/StyledUnorderedList";
+export { HoverIndicatorControl } from "./components/HoverIndicatorControl/HoverIndicatorControl";

package/dist/index.development.js

@@ -4771,7 +4771,7 @@ function Section$1(_a) {
   var { title, buttons, footer, children, headerAside, className, isLoading = false, loadingIndicatorProps } = _a, restProps = __rest(_a, ["title", "buttons", "footer", "children", "headerAside", "className", "isLoading", "loadingIndicatorProps"]);
   return React__namespace.default.createElement(
     "section",
-    Object.assign({ title }, restProps, { className: classNames__default.default("cweb-section", "ui-flex ui-flex-col ui-items-start ui-justify-start", "ui-rounded-lg", "ui-mx-0 ui-my-4", "ui-bg-white", "ui-w-full", className) }),
+    Object.assign({ "aria-label": title, title }, restProps, { className: classNames__default.default("cweb-section", "ui-flex ui-flex-col ui-items-start ui-justify-start", "ui-rounded-lg", "ui-mx-0 ui-my-4", "ui-bg-white", "ui-w-full", className) }),
     (title || buttons) && React__namespace.default.createElement(
       "header",
       { className: "cweb-section-header ui-flex ui-w-full ui-items-center ui-justify-between ui-gap-3 ui-p-4", "data-test-id": "section-header" },
@@ -6144,6 +6144,21 @@ const Item = (props) => {
 };
 StyledUnorderedList.Item = Item;
 
+const HoverIndicatorControlContext = React.createContext(null);
+const HoverIndicatorControl = (_a) => {
+  var { indicator, className, as = "button", disabled = false } = _a, boxProps = __rest(_a, ["indicator", "className", "as", "disabled"]);
+  return React__namespace.default.createElement(
+    HoverIndicatorControlContext.Provider,
+    { value: { indicator, disabled } },
+    React__namespace.default.createElement(Box, Object.assign({ as, className: classNames__default.default(className, "ui-group") }, boxProps))
+  );
+};
+const Indicator = () => {
+  const context = React.useContext(HoverIndicatorControlContext);
+  return React__namespace.default.createElement("div", { className: classNames__default.default({ "group-hover:ui-visible": (context === null || context === void 0 ? void 0 : context.disabled) === false }, "ui-invisible") }, context === null || context === void 0 ? void 0 : context.indicator);
+};
+HoverIndicatorControl.Indicator = Indicator;
+
 Object.defineProperty(exports, 'Toaster', {
     enumerable: true,
     get: function () { return sonner.Toaster; }
@@ -6237,6 +6252,7 @@ exports.HamburgerIcon = HamburgerIcon;
 exports.HandshakeIcon = HandshakeIcon;
 exports.HeartIcon = HeartIcon;
 exports.HomeIcon = HomeIcon;
+exports.HoverIndicatorControl = HoverIndicatorControl;
 exports.Icon = Icon;
 exports.Image = Image$1;
 exports.ImageIcon = ImageIcon;