@cambly/syntax-core 2.2.0 → 2.3.0

package/dist/index.mjs

@@ -60,7 +60,7 @@ var require_classnames = __commonJS({
       "use strict";
       var hasOwn = {}.hasOwnProperty;
       var nativeCodeString = "[native code]";
-      function classNames8() {
+      function classNames9() {
         var classes = [];
         for (var i = 0; i < arguments.length; i++) {
           var arg = arguments[i];
@@ -71,7 +71,7 @@ var require_classnames = __commonJS({
             classes.push(arg);
           } else if (Array.isArray(arg)) {
             if (arg.length) {
-              var inner = classNames8.apply(null, arg);
+              var inner = classNames9.apply(null, arg);
               if (inner) {
                 classes.push(inner);
               }
@@ -91,14 +91,14 @@ var require_classnames = __commonJS({
         return classes.join(" ");
       }
       if (typeof module !== "undefined" && module.exports) {
-        classNames8.default = classNames8;
-        module.exports = classNames8;
+        classNames9.default = classNames9;
+        module.exports = classNames9;
       } else if (typeof define === "function" && typeof define.amd === "object" && define.amd) {
         define("classnames", [], function() {
-          return classNames8;
+          return classNames9;
         });
       } else {
-        window.classNames = classNames8;
+        window.classNames = classNames9;
       }
     })();
   }
@@ -813,6 +813,119 @@ var RadioButton = ({
   );
 };
 var RadioButton_default = RadioButton;
+
+// src/SelectList/SelectList.tsx
+var import_classnames9 = __toESM(require_classnames());
+import { useId } from "react";
+import {
+  ColorBaseDestructive700,
+  ColorBaseGray800
+} from "@cambly/syntax-design-tokens/dist/js/index.js";
+
+// 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" };
+
+// src/SelectList/SelectOption.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
+var SelectOption = ({
+  value,
+  label,
+  disabled = false
+}) => /* @__PURE__ */ jsx13(
+  "option",
+  {
+    "data-testid": `syntax-select-${value}`,
+    value,
+    disabled,
+    children: label
+  }
+);
+var SelectOption_default = SelectOption;
+
+// src/SelectList/SelectList.tsx
+import { jsx as jsx14, jsxs as jsxs4 } from "react/jsx-runtime";
+var iconSize3 = {
+  sm: 20,
+  md: 24,
+  lg: 24
+};
+var SelectList = ({
+  children,
+  disabled = false,
+  errorText,
+  helperText,
+  label,
+  onChange,
+  placeholderText,
+  selectedValue = "",
+  size = "md"
+}) => {
+  const id = useId();
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      className: (0, import_classnames9.default)(SelectList_module_default.selectContainer, {
+        [SelectList_module_default.opacityOverlay]: disabled
+      }),
+      children: [
+        /* @__PURE__ */ jsx14("label", { htmlFor: id, className: SelectList_module_default.outerTextContainer, children: /* @__PURE__ */ jsx14(
+          Typography_default,
+          {
+            size: 100,
+            color: errorText ? "destructive-primary" : "gray700",
+            children: label
+          }
+        ) }),
+        /* @__PURE__ */ jsxs4("div", { className: SelectList_module_default.selectWrapper, children: [
+          /* @__PURE__ */ jsxs4(
+            "select",
+            {
+              id,
+              "data-testid": "syntax-select",
+              disabled,
+              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
+              }),
+              onChange,
+              children: [
+                placeholderText && /* @__PURE__ */ jsx14("option", { disabled: true, value: "", children: placeholderText }),
+                children
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx14("div", { className: SelectList_module_default.arrowIcon, children: /* @__PURE__ */ jsx14(
+            "svg",
+            {
+              focusable: "false",
+              "aria-hidden": "true",
+              viewBox: "0 0 24 24",
+              width: iconSize3[size],
+              children: /* @__PURE__ */ jsx14(
+                "path",
+                {
+                  fill: errorText ? ColorBaseDestructive700 : ColorBaseGray800,
+                  d: "M15.88 9.29 12 13.17 8.12 9.29a.9959.9959 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
+                }
+              )
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx14("div", { className: SelectList_module_default.outerTextContainer, children: /* @__PURE__ */ jsx14(
+          Typography_default,
+          {
+            size: 100,
+            color: errorText ? "destructive-primary" : "gray700",
+            children: errorText != null ? errorText : helperText
+          }
+        ) })
+      ]
+    }
+  );
+};
+var SelectList_default = SelectList;
+SelectList.Option = SelectOption_default;
 export {
   Avatar_default as Avatar,
   Box,
@@ -825,6 +938,7 @@ export {
   IconButton_default as IconButton,
   MiniActionCard_default as MiniActionCard,
   RadioButton_default as RadioButton,
+  SelectList_default as SelectList,
   Typography_default as Typography
 };
 /*! Bundled license information: