@cambly/syntax-core 2.2.0 → 2.3.0

package/dist/index.js

@@ -66,7 +66,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];
@@ -77,7 +77,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);
               }
@@ -97,14 +97,14 @@ var require_classnames = __commonJS({
         return classes.join(" ");
       }
       if (typeof module2 !== "undefined" && module2.exports) {
-        classNames8.default = classNames8;
-        module2.exports = classNames8;
+        classNames9.default = classNames9;
+        module2.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;
       }
     })();
   }
@@ -124,6 +124,7 @@ __export(src_exports, {
   IconButton: () => IconButton_default,
   MiniActionCard: () => MiniActionCard_default,
   RadioButton: () => RadioButton_default,
+  SelectList: () => SelectList_default,
   Typography: () => Typography_default
 });
 module.exports = __toCommonJS(src_exports);
@@ -837,6 +838,116 @@ var RadioButton = ({
   );
 };
 var RadioButton_default = RadioButton;
+
+// src/SelectList/SelectList.tsx
+var import_react7 = require("react");
+var import_classnames9 = __toESM(require_classnames());
+var import_js = require("@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
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var SelectOption = ({
+  value,
+  label,
+  disabled = false
+}) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  "option",
+  {
+    "data-testid": `syntax-select-${value}`,
+    value,
+    disabled,
+    children: label
+  }
+);
+var SelectOption_default = SelectOption;
+
+// src/SelectList/SelectList.tsx
+var import_jsx_runtime14 = require("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 = (0, import_react7.useId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    "div",
+    {
+      className: (0, import_classnames9.default)(SelectList_module_default.selectContainer, {
+        [SelectList_module_default.opacityOverlay]: disabled
+      }),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("label", { htmlFor: id, className: SelectList_module_default.outerTextContainer, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          Typography_default,
+          {
+            size: 100,
+            color: errorText ? "destructive-primary" : "gray700",
+            children: label
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: SelectList_module_default.selectWrapper, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+            "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__ */ (0, import_jsx_runtime14.jsx)("option", { disabled: true, value: "", children: placeholderText }),
+                children
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: SelectList_module_default.arrowIcon, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            "svg",
+            {
+              focusable: "false",
+              "aria-hidden": "true",
+              viewBox: "0 0 24 24",
+              width: iconSize3[size],
+              children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                "path",
+                {
+                  fill: errorText ? import_js.ColorBaseDestructive700 : import_js.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__ */ (0, import_jsx_runtime14.jsx)("div", { className: SelectList_module_default.outerTextContainer, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          Typography_default,
+          {
+            size: 100,
+            color: errorText ? "destructive-primary" : "gray700",
+            children: errorText != null ? errorText : helperText
+          }
+        ) })
+      ]
+    }
+  );
+};
+var SelectList_default = SelectList;
+SelectList.Option = SelectOption_default;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Avatar,
@@ -850,6 +961,7 @@ var RadioButton_default = RadioButton;
   IconButton,
   MiniActionCard,
   RadioButton,
+  SelectList,
   Typography
 });
 /*! Bundled license information: