@cambly/syntax-core 9.1.0 → 9.2.0

package/dist/index.mjs

@@ -978,7 +978,6 @@ var IconButton_module_default = { "iconButton": "_iconButton_4e8qe_1", "sm": "_s
 
 // src/IconButton/IconButton.tsx
 import { jsx as jsx12 } from "react/jsx-runtime";
-"use client";
 var iconSize2 = {
   ["sm"]: IconButton_module_default.smIcon,
   ["md"]: IconButton_module_default.mdIcon,
@@ -1501,13 +1500,27 @@ SelectList.Option = SelectOption_default;
 
 // src/TapArea/TapArea.tsx
 var import_classnames13 = __toESM(require_classnames());
-import { forwardRef as forwardRef6 } from "react";
+import { forwardRef as forwardRef6, useReducer } from "react";
 
 // css-module:./TapArea.module.css#css-module
-var TapArea_module_default = { "tapArea": "_tapArea_1rlyl_1", "fullWidth": "_fullWidth_1rlyl_5", "disabled": "_disabled_1rlyl_9", "enabled": "_enabled_1rlyl_16" };
+var TapArea_module_default = { "tapArea": "_tapArea_1so6s_1", "fullWidth": "_fullWidth_1so6s_5", "disabled": "_disabled_1so6s_9", "enabled": "_enabled_1so6s_16", "overlay": "_overlay_1so6s_29", "hoveredOrFocussed": "_hoveredOrFocussed_1so6s_38" };
 
 // src/TapArea/TapArea.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
+function reducer(state, action) {
+  switch (action.type) {
+    case "BLUR":
+      return __spreadProps(__spreadValues({}, state), { focussed: false });
+    case "FOCUS":
+      return __spreadProps(__spreadValues({}, state), { focussed: true });
+    case "MOUSE_ENTER":
+      return __spreadProps(__spreadValues({}, state), { hovered: true });
+    case "MOUSE_LEAVE":
+      return __spreadProps(__spreadValues({}, state), { hovered: false });
+    default:
+      return state;
+  }
+}
 var TapArea = forwardRef6(
   ({
     children,
@@ -1521,6 +1534,10 @@ var TapArea = forwardRef6(
   }, ref) => {
     const isHydrated = useIsHydrated();
     const disabled = !isHydrated || disabledProp;
+    const [{ hovered, focussed }, dispatch] = useReducer(reducer, {
+      hovered: false,
+      focussed: false
+    });
     const handleClick = (event) => !disabled ? onClick(event) : void 0;
     const handleKeyDown = (event) => {
       if (disabled)
@@ -1530,7 +1547,8 @@ var TapArea = forwardRef6(
         onClick(event);
       }
     };
-    return /* @__PURE__ */ jsx20(
+    const isHoveredOrFocussed = !disabled && (hovered || focussed);
+    return /* @__PURE__ */ jsxs9(
       "div",
       {
         "aria-disabled": disabled,
@@ -1539,15 +1557,30 @@ var TapArea = forwardRef6(
           TapArea_module_default.tapArea,
           TapArea_module_default[`${disabled ? "disabled" : "enabled"}`],
           fullWidth && TapArea_module_default.fullWidth,
-          rounding !== "none" && rounding_module_default[`rounding${rounding}`]
+          isHoveredOrFocussed && TapArea_module_default.hoveredOrFocussed
         ),
         "data-testid": dataTestId,
         onClick: handleClick,
         onKeyDown: handleKeyDown,
+        onMouseEnter: () => dispatch({ type: "MOUSE_ENTER" }),
+        onMouseLeave: () => dispatch({ type: "MOUSE_LEAVE" }),
+        onFocus: () => dispatch({ type: "FOCUS" }),
+        onBlur: () => dispatch({ type: "BLUR" }),
         ref,
         role: "button",
         tabIndex: disabled ? void 0 : tabIndex,
-        children
+        children: [
+          !disabled && (hovered || focussed) && /* @__PURE__ */ jsx20(
+            "div",
+            {
+              className: (0, import_classnames13.default)(
+                TapArea_module_default.overlay,
+                rounding !== "none" && rounding_module_default[`rounding${rounding}`]
+              )
+            }
+          ),
+          children
+        ]
       }
     );
   }
@@ -1565,7 +1598,7 @@ import {
 var TextField_module_default = { "textfield": "_textfield_cltsv_1", "label": "_label_cltsv_21", "sm": "_sm_cltsv_25", "md": "_md_cltsv_30", "lg": "_lg_cltsv_35", "inputError": "_inputError_cltsv_40" };
 
 // src/TextField/TextField.tsx
-import { jsx as jsx21, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs10 } from "react/jsx-runtime";
 function TextField({
   autoComplete,
   "data-testid": dataTestId,
@@ -1584,7 +1617,7 @@ function TextField({
   const disabled = !isHydrated || disabledProp;
   const reactId = useId2();
   const inputId = id != null ? id : reactId;
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10(
     Box_default,
     {
       display: "flex",