@luscii-healthtech/web-ui 48.5.3 → 48.6.1

package/dist/index.development.js

@@ -6426,6 +6426,90 @@ const Indicator = () => {
 };
 HoverIndicatorControl.Indicator = Indicator;
 
+const ActionControllerContext = React.createContext(null);
+const ActionController = (_a) => {
+  var { action, className, as = "div", disabled = false, activeBackgroundColor, actionVisibility = "on-interaction", children } = _a, boxProps = __rest(_a, ["action", "className", "as", "disabled", "activeBackgroundColor", "actionVisibility", "children"]);
+  const actionRef = React.useRef(null);
+  const handleClick = (event) => {
+    if (disabled || !actionRef.current) {
+      return;
+    }
+    if (actionRef.current.contains(event.target)) {
+      return;
+    }
+    const clickableElement = actionRef.current.querySelector("button, a");
+    if (clickableElement) {
+      clickableElement.click();
+    }
+  };
+  return jsxRuntime.jsx(ActionControllerContext.Provider, { value: { action, disabled, actionRef, actionVisibility }, children: jsxRuntime.jsx(Box, Object.assign({ as, onClick: handleClick, className: classNames__default.default(
+    className,
+    "ui:group",
+    // Cursor styles
+    {
+      "ui:cursor-default": disabled,
+      "ui:cursor-pointer": !disabled
+    },
+    // Focus ring
+    {
+      "ui:focus-within:outline-2 ui:focus-within:outline-primary": !disabled
+    },
+    // Semantic background colors - neutral
+    {
+      "ui:hover:bg-background-neutral-primary-hovered ui:focus-within:bg-background-neutral-primary-hovered": activeBackgroundColor === "neutral-primary" && !disabled,
+      "ui:hover:bg-background-neutral-secondary-hovered ui:focus-within:bg-background-neutral-secondary-hovered": activeBackgroundColor === "neutral-secondary" && !disabled
+    },
+    // Semantic background colors - brand
+    {
+      "ui:hover:bg-background-brand-primary-hovered ui:focus-within:bg-background-brand-primary-hovered": activeBackgroundColor === "brand-primary" && !disabled,
+      "ui:hover:bg-background-brand-secondary-hovered ui:focus-within:bg-background-brand-secondary-hovered": activeBackgroundColor === "brand-secondary" && !disabled
+    },
+    // Semantic background colors - info
+    {
+      "ui:hover:bg-background-info-primary-hovered ui:focus-within:bg-background-info-primary-hovered": activeBackgroundColor === "info-primary" && !disabled,
+      "ui:hover:bg-background-info-secondary-hovered ui:focus-within:bg-background-info-secondary-hovered": activeBackgroundColor === "info-secondary" && !disabled
+    },
+    // Semantic background colors - success
+    {
+      "ui:hover:bg-background-success-primary-hovered ui:focus-within:bg-background-success-primary-hovered": activeBackgroundColor === "success-primary" && !disabled,
+      "ui:hover:bg-background-success-secondary-hovered ui:focus-within:bg-background-success-secondary-hovered": activeBackgroundColor === "success-secondary" && !disabled
+    },
+    // Semantic background colors - warning
+    {
+      "ui:hover:bg-background-warning-primary-hovered ui:focus-within:bg-background-warning-primary-hovered": activeBackgroundColor === "warning-primary" && !disabled,
+      "ui:hover:bg-background-warning-secondary-hovered ui:focus-within:bg-background-warning-secondary-hovered": activeBackgroundColor === "warning-secondary" && !disabled
+    },
+    // Semantic background colors - error
+    {
+      "ui:hover:bg-background-error-primary-hovered ui:focus-within:bg-background-error-primary-hovered": activeBackgroundColor === "error-primary" && !disabled,
+      "ui:hover:bg-background-error-secondary-hovered ui:focus-within:bg-background-error-secondary-hovered": activeBackgroundColor === "error-secondary" && !disabled
+    },
+    // Transitions
+    {
+      "ui:transition-colors ui:motion-reduce:transition-none": activeBackgroundColor !== void 0
+    }
+  ) }, boxProps, { children })) });
+};
+const Action = () => {
+  const context = React.useContext(ActionControllerContext);
+  const isAlwaysVisible = (context === null || context === void 0 ? void 0 : context.actionVisibility) === "always";
+  const isDisabled = (context === null || context === void 0 ? void 0 : context.disabled) === true;
+  return jsxRuntime.jsx("div", { ref: context === null || context === void 0 ? void 0 : context.actionRef, className: classNames__default.default(
+    // Base transitions
+    "ui:transition-opacity ui:duration-200 ui:ease-in-out ui:motion-reduce:transition-none",
+    // Visibility states
+    {
+      "ui:opacity-0": !isAlwaysVisible,
+      "ui:opacity-100": isAlwaysVisible
+    },
+    // Interactive visibility (hover and focus)
+    {
+      "ui:group-hover:opacity-100 ui:group-focus-within:opacity-100": !isAlwaysVisible && !isDisabled
+    }
+  ), children: context === null || context === void 0 ? void 0 : context.action });
+};
+ActionController.Action = Action;
+
 const Collapse = (props) => {
   const { children, className, contentClassName: classNameFromProps, isCollapsed, onClick, moreIndicator = jsxRuntime.jsx(Text, { className: "ui:text-center", children: "..." }), showMoreIndicator = true } = props;
   const contentClassName = classNames__default.default("w-full", classNameFromProps, {
@@ -6993,6 +7077,7 @@ Object.defineProperty(exports, "TooltipProvider", {
 exports.AbsentIcon = AbsentIcon;
 exports.AccordionList = AccordionList;
 exports.AccordionTemporary = Accordion;
+exports.ActionController = ActionController;
 exports.AddIcon = PlusIcon;
 exports.AddNoteIcon = AddNoteIcon;
 exports.AlarmClockIcon = AlarmClockIcon;