@cambly/syntax-core 4.0.0 → 4.2.0

package/dist/index.mjs

@@ -160,6 +160,7 @@ function Box(props) {
     display,
     smDisplay,
     lgDisplay,
+    flexShrink,
     flexWrap,
     gap: gap2,
     justifyContent,
@@ -211,6 +212,7 @@ function Box(props) {
     "display",
     "smDisplay",
     "lgDisplay",
+    "flexShrink",
     "flexWrap",
     "gap",
     "justifyContent",
@@ -312,6 +314,7 @@ function Box(props) {
       rounding && rounding !== "none" && Box_module_default[`rounding${rounding}`]
     ),
     style: __spreadValues({
+      flexShrink,
       height,
       maxHeight,
       maxWidth,
@@ -616,10 +619,97 @@ var IconButton_default = IconButton;
 
 // src/Checkbox/Checkbox.tsx
 var import_classnames7 = __toESM(require_classnames());
-import { useState } from "react";
+import { useState as useState2 } from "react";
+
+// src/useFocusVisible.tsx
+import { useState, useEffect } from "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] = useState(isFocusVisible());
+  useEffect(() => {
+    const handler = () => {
+      setFocusVisible(isFocusVisible());
+    };
+    changeHandlers.add(handler);
+    return () => {
+      changeHandlers.delete(handler);
+    };
+  }, []);
+  return { isFocusVisible: isFocusVisibleState };
+}
 
 // css-module:./Checkbox.module.css#css-module
-var Checkbox_module_default = { "mainContainer": "_mainContainer_p0un4_1", "checkboxContainer": "_checkboxContainer_p0un4_8", "inputOverlay": "_inputOverlay_p0un4_13", "focusedCheckbox": "_focusedCheckbox_p0un4_21", "checkbox": "_checkbox_p0un4_8", "uncheckedBox": "_uncheckedBox_p0un4_35", "uncheckedBorder": "_uncheckedBorder_p0un4_39", "uncheckedErrorBorder": "_uncheckedErrorBorder_p0un4_43", "checkedBox": "_checkedBox_p0un4_47", "checkedNonError": "_checkedNonError_p0un4_51", "checkedError": "_checkedError_p0un4_55", "sm": "_sm_p0un4_59", "md": "_md_p0un4_65" };
+var Checkbox_module_default = { "mainContainer": "_mainContainer_1jq7b_1", "checkboxContainer": "_checkboxContainer_1jq7b_8", "inputOverlay": "_inputOverlay_1jq7b_13", "checkbox": "_checkbox_1jq7b_8", "uncheckedBox": "_uncheckedBox_1jq7b_30", "uncheckedBorder": "_uncheckedBorder_1jq7b_34", "uncheckedErrorBorder": "_uncheckedErrorBorder_1jq7b_38", "checkedBox": "_checkedBox_1jq7b_42", "checkedNonError": "_checkedNonError_1jq7b_46", "checkedError": "_checkedError_1jq7b_50", "sm": "_sm_1jq7b_54", "md": "_md_1jq7b_60" };
+
+// css-module:../Focus.module.css#css-module
+var Focus_module_default = { "accessibilityOutlineFocus": "_accessibilityOutlineFocus_1h8bq_1" };
 
 // src/Checkbox/Checkbox.tsx
 import { jsx as jsx10, jsxs as jsxs2 } from "react/jsx-runtime";
@@ -639,17 +729,18 @@ var Checkbox = ({
   error = false,
   onChange
 }) => {
-  const [isFocused, setIsFocused] = useState(false);
+  const [isFocused, setIsFocused] = useState2(false);
+  const { isFocusVisible: isFocusVisible2 } = useFocusVisible();
   const checkboxStyling = (0, import_classnames7.default)(Checkbox_module_default.checkbox, Checkbox_module_default[size]);
   const uncheckedStyling = (0, import_classnames7.default)(checkboxStyling, Checkbox_module_default.uncheckedBox, {
     [Checkbox_module_default.uncheckedBorder]: !error,
     [Checkbox_module_default.uncheckedErrorBorder]: error,
-    [Checkbox_module_default.focusedCheckbox]: isFocused
+    [Focus_module_default.accessibilityOutlineFocus]: isFocused && isFocusVisible2
   });
   const checkedStyling = (0, import_classnames7.default)(checkboxStyling, Checkbox_module_default.checkedBox, {
     [Checkbox_module_default.checkedNonError]: !error,
     [Checkbox_module_default.checkedError]: error,
-    [Checkbox_module_default.focusedCheckbox]: isFocused
+    [Focus_module_default.accessibilityOutlineFocus]: isFocused && isFocusVisible2
   });
   return /* @__PURE__ */ jsxs2("label", { className: (0, import_classnames7.default)(Checkbox_module_default.mainContainer), children: [
     /* @__PURE__ */ jsxs2("div", { className: Checkbox_module_default.checkboxContainer, children: [
@@ -704,91 +795,7 @@ var import_classnames8 = __toESM(require_classnames());
 import { useState as useState3 } from "react";
 
 // css-module:./RadioButton.module.css#css-module
-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
-import { useState as useState2, useEffect } from "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] = useState2(isFocusVisible());
-  useEffect(() => {
-    const handler = () => {
-      setFocusVisible(isFocusVisible());
-    };
-    changeHandlers.add(handler);
-    return () => {
-      changeHandlers.delete(handler);
-    };
-  }, []);
-  return { isFocusVisible: isFocusVisibleState };
-}
+var RadioButton_module_default = { "radioBaseContainer": "_radioBaseContainer_144ms_1", "smBase": "_smBase_144ms_8", "mdBase": "_mdBase_144ms_13", "radioStyleOverride": "_radioStyleOverride_144ms_18", "smOverride": "_smOverride_144ms_23", "mdOverride": "_mdOverride_144ms_28", "background": "_background_144ms_33", "sm": "_sm_144ms_8", "md": "_md_144ms_13", "neutralBorder": "_neutralBorder_144ms_50", "smCheckedBorder": "_smCheckedBorder_144ms_54", "mdCheckedBorder": "_mdCheckedBorder_144ms_58", "errorBorderColor": "_errorBorderColor_144ms_62", "borderColor": "_borderColor_144ms_66" };
 
 // src/RadioButton/RadioButton.tsx
 import { jsx as jsx12, jsxs as jsxs3 } from "react/jsx-runtime";
@@ -807,7 +814,7 @@ var RadioButton = ({
   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
+    [Focus_module_default.accessibilityOutlineFocus]: isFocused && isFocusVisible2
   });
   return /* @__PURE__ */ jsxs3(
     "label",
@@ -863,14 +870,14 @@ var RadioButton_default = RadioButton;
 
 // src/SelectList/SelectList.tsx
 var import_classnames9 = __toESM(require_classnames());
-import { useId } from "react";
+import { useId, useState as useState4 } from "react";
 
 // ../syntax-design-tokens/dist/js/index.js
 var ColorBaseDestructive700 = "#d32a4b";
 var ColorBaseGray800 = "#353535";
 
 // css-module:./SelectList.module.css#css-module
-var SelectList_module_default = { "selectContainer": "_selectContainer_1y5p4_1", "opacityOverlay": "_opacityOverlay_1y5p4_7", "outerTextContainer": "_outerTextContainer_1y5p4_11", "selectWrapper": "_selectWrapper_1y5p4_16", "selectBox": "_selectBox_1y5p4_21", "unselected": "_unselected_1y5p4_40", "selected": "_selected_1y5p4_44", "arrowIcon": "_arrowIcon_1y5p4_48", "sm": "_sm_1y5p4_62", "md": "_md_1y5p4_67", "lg": "_lg_1y5p4_72", "selectError": "_selectError_1y5p4_77" };
+var SelectList_module_default = { "selectContainer": "_selectContainer_1e7f9_1", "opacityOverlay": "_opacityOverlay_1e7f9_7", "outerTextContainer": "_outerTextContainer_1e7f9_11", "selectWrapper": "_selectWrapper_1e7f9_16", "selectBox": "_selectBox_1e7f9_21", "seletBoxMouseFocusStyling": "_seletBoxMouseFocusStyling_1e7f9_35", "unselected": "_unselected_1e7f9_40", "selected": "_selected_1e7f9_44", "arrowIcon": "_arrowIcon_1e7f9_48", "sm": "_sm_1e7f9_62", "md": "_md_1e7f9_67", "lg": "_lg_1e7f9_72", "selectError": "_selectError_1e7f9_77" };
 
 // src/SelectList/SelectOption.tsx
 import { jsx as jsx13 } from "react/jsx-runtime";
@@ -908,6 +915,8 @@ var SelectList = ({
   size = "md"
 }) => {
   const id = useId();
+  const { isFocusVisible: isFocusVisible2 } = useFocusVisible();
+  const [isFocused, setIsFocused] = useState4(false);
   return /* @__PURE__ */ jsxs4(
     "div",
     {
@@ -926,10 +935,16 @@ var SelectList = ({
               className: (0, import_classnames9.default)(SelectList_module_default.selectBox, SelectList_module_default[size], {
                 [SelectList_module_default.unselected]: !selectedValue && !errorText,
                 [SelectList_module_default.selected]: selectedValue && !errorText,
-                [SelectList_module_default.selectError]: errorText
+                [SelectList_module_default.selectError]: errorText,
+                [Focus_module_default.accessibilityOutlineFocus]: isFocused && isFocusVisible2,
+                // for focus keyboard
+                [SelectList_module_default.seletBoxMouseFocusStyling]: isFocused && !isFocusVisible2
+                // for focus mouse
               }),
               onChange,
               value: placeholderText && !selectedValue ? placeholderText : selectedValue,
+              onFocus: () => setIsFocused(true),
+              onBlur: () => setIsFocused(false),
               children: [
                 placeholderText && /* @__PURE__ */ jsx14("option", { disabled: true, value: placeholderText, children: placeholderText }),
                 children