@cambly/syntax-core 2.10.0 → 3.0.0

package/dist/index.js

@@ -753,11 +753,95 @@ var MiniActionCard = ({
 var MiniActionCard_default = MiniActionCard;
 
 // src/RadioButton/RadioButton.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_classnames8 = __toESM(require_classnames());
 
 // css-module:./RadioButton.module.css#css-module
-var RadioButton_module_default = { "radioButton": "_radioButton_1kj8n_1", "focusedRadioButton": "_focusedRadioButton_1kj8n_8", "smBase": "_smBase_1kj8n_13", "mdBase": "_mdBase_1kj8n_18", "radioStyleOverride": "_radioStyleOverride_1kj8n_23", "smOverride": "_smOverride_1kj8n_28", "mdOverride": "_mdOverride_1kj8n_33", "outer": "_outer_1kj8n_38", "sm": "_sm_1kj8n_13", "md": "_md_1kj8n_18", "errorOuterBackgroundColor": "_errorOuterBackgroundColor_1kj8n_57", "outerBackgroundColor": "_outerBackgroundColor_1kj8n_61", "background": "_background_1kj8n_65", "errorBorderColor": "_errorBorderColor_1kj8n_71", "borderColor": "_borderColor_1kj8n_75", "circle": "_circle_1kj8n_79", "smInner": "_smInner_1kj8n_83", "mdInner": "_mdInner_1kj8n_89" };
+var RadioButton_module_default = { "radioBaseContainer": "_radioBaseContainer_x6och_1", "smBase": "_smBase_x6och_8", "mdBase": "_mdBase_x6och_13", "radioStyleOverride": "_radioStyleOverride_x6och_18", "smOverride": "_smOverride_x6och_23", "mdOverride": "_mdOverride_x6och_28", "background": "_background_x6och_33", "sm": "_sm_x6och_8", "md": "_md_x6och_13", "neutralBorder": "_neutralBorder_x6och_50", "smCheckedBorder": "_smCheckedBorder_x6och_54", "mdCheckedBorder": "_mdCheckedBorder_x6och_58", "errorBorderColor": "_errorBorderColor_x6och_62", "borderColor": "_borderColor_x6och_66", "focusedRadioButton": "_focusedRadioButton_x6och_70" };
+
+// src/useFocusVisible.tsx
+var import_react6 = require("react");
+var hasSetupGlobalListeners = false;
+var currentModality = null;
+var changeHandlers = /* @__PURE__ */ new Set();
+var hasEventBeforeFocus = false;
+var isMac = typeof window !== "undefined" && window.navigator != null ? /^Mac/.test(window.navigator.platform) : false;
+function isValidKey(e) {
+  return !(e.metaKey || !isMac && e.altKey || e.ctrlKey);
+}
+function triggerChangeHandlers(modality, e) {
+  changeHandlers.forEach((handler) => {
+    handler(modality, e);
+  });
+}
+function handleKeyboardEvent(e) {
+  hasEventBeforeFocus = true;
+  if (isValidKey(e)) {
+    currentModality = "keyboard";
+    triggerChangeHandlers("keyboard", e);
+  }
+}
+function handlePointerEvent(e) {
+  currentModality = "pointer";
+  if (e.type === "mousedown" || e.type === "pointerdown") {
+    hasEventBeforeFocus = true;
+    triggerChangeHandlers("pointer", e);
+  }
+}
+function handleFocusEvent(e) {
+  if (e.target === window || e.target === document) {
+    return;
+  }
+  if (!hasEventBeforeFocus) {
+    currentModality = "keyboard";
+    triggerChangeHandlers("keyboard", e);
+  }
+  hasEventBeforeFocus = false;
+}
+function handleWindowBlur() {
+  hasEventBeforeFocus = false;
+}
+function isFocusVisible() {
+  return currentModality !== "pointer";
+}
+function setupGlobalFocusEvents() {
+  if (typeof window === "undefined" || hasSetupGlobalListeners) {
+    return;
+  }
+  const { focus } = HTMLElement.prototype;
+  HTMLElement.prototype.focus = function focusElement(...args) {
+    hasEventBeforeFocus = true;
+    focus.apply(this, args);
+  };
+  document.addEventListener("keydown", handleKeyboardEvent, true);
+  document.addEventListener("keyup", handleKeyboardEvent, true);
+  window.addEventListener("focus", handleFocusEvent, true);
+  window.addEventListener("blur", handleWindowBlur, false);
+  if (typeof PointerEvent !== "undefined") {
+    document.addEventListener("pointerdown", handlePointerEvent, true);
+    document.addEventListener("pointermove", handlePointerEvent, true);
+    document.addEventListener("pointerup", handlePointerEvent, true);
+  } else {
+    document.addEventListener("mousedown", handlePointerEvent, true);
+    document.addEventListener("mousemove", handlePointerEvent, true);
+    document.addEventListener("mouseup", handlePointerEvent, true);
+  }
+  hasSetupGlobalListeners = true;
+}
+function useFocusVisible() {
+  setupGlobalFocusEvents();
+  const [isFocusVisibleState, setFocusVisible] = (0, import_react6.useState)(isFocusVisible());
+  (0, import_react6.useEffect)(() => {
+    const handler = () => {
+      setFocusVisible(isFocusVisible());
+    };
+    changeHandlers.add(handler);
+    return () => {
+      changeHandlers.delete(handler);
+    };
+  }, []);
+  return { isFocusVisible: isFocusVisibleState };
+}
 
 // src/RadioButton/RadioButton.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
@@ -766,15 +850,22 @@ var RadioButton = ({
   disabled = false,
   error = false,
   label,
+  name,
   onChange,
   size = "md",
-  value = ""
+  value
 }) => {
-  const [isFocused, setIsFocused] = (0, import_react6.useState)(false);
+  const [isFocused, setIsFocused] = (0, import_react7.useState)(false);
+  const { isFocusVisible: isFocusVisible2 } = useFocusVisible();
+  const sharedStyles = (0, import_classnames8.default)(RadioButton_module_default.background, RadioButton_module_default[size], {
+    [RadioButton_module_default.errorBorderColor]: error,
+    [RadioButton_module_default.borderColor]: !error,
+    [RadioButton_module_default.focusedRadioButton]: isFocused && isFocusVisible2
+  });
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
     "label",
     {
-      className: (0, import_classnames8.default)(RadioButton_module_default.radioButton, {
+      className: (0, import_classnames8.default)(RadioButton_module_default.radioBaseContainer, {
         [RadioButton_module_default.smBase]: size === "sm",
         [RadioButton_module_default.mdBase]: size === "md"
       }),
@@ -783,6 +874,7 @@ var RadioButton = ({
           "input",
           {
             type: "radio",
+            name,
             className: (0, import_classnames8.default)(RadioButton_module_default.radioStyleOverride, {
               [RadioButton_module_default.smOverride]: size === "sm",
               [RadioButton_module_default.mdOverride]: size === "md"
@@ -790,7 +882,7 @@ var RadioButton = ({
             checked,
             onChange,
             disabled,
-            value: value != null ? value : label,
+            value,
             onFocus: () => {
               setIsFocused(true);
             },
@@ -802,31 +894,12 @@ var RadioButton = ({
         checked ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           "div",
           {
-            className: (0, import_classnames8.default)(RadioButton_module_default.outer, RadioButton_module_default[size], {
-              [RadioButton_module_default.errorOuterBackgroundColor]: error,
-              [RadioButton_module_default.outerBackgroundColor]: !error,
-              [RadioButton_module_default.focusedRadioButton]: isFocused
-            }),
-            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-              "div",
-              {
-                className: (0, import_classnames8.default)(RadioButton_module_default.circle, {
-                  [RadioButton_module_default.smInner]: size === "sm",
-                  [RadioButton_module_default.mdInner]: size === "md"
-                })
-              }
-            )
-          }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-          "div",
-          {
-            className: (0, import_classnames8.default)(RadioButton_module_default.background, RadioButton_module_default[size], {
-              [RadioButton_module_default.errorBorderColor]: error,
-              [RadioButton_module_default.borderColor]: !error,
-              [RadioButton_module_default.focusedRadioButton]: isFocused
+            className: (0, import_classnames8.default)(sharedStyles, {
+              [RadioButton_module_default.mdCheckedBorder]: size === "md",
+              [RadioButton_module_default.smCheckedBorder]: size === "sm"
             })
           }
-        ),
+        ) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: (0, import_classnames8.default)(sharedStyles, RadioButton_module_default.neutralBorder) }),
         /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           Typography_default,
           {
@@ -842,7 +915,7 @@ var RadioButton = ({
 var RadioButton_default = RadioButton;
 
 // src/SelectList/SelectList.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_classnames9 = __toESM(require_classnames());
 
 // ../syntax-design-tokens/dist/js/index.js
@@ -887,7 +960,7 @@ var SelectList = ({
   selectedValue = "",
   size = "md"
 }) => {
-  const id = (0, import_react7.useId)();
+  const id = (0, import_react8.useId)();
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
     "div",
     {