basefn 1.3.0 → 1.4.0

package/src/components/Basefn__ToggleGroup.res.mjs

@@ -0,0 +1,89 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as Xote from "xote/src/Xote.res.mjs";
+import * as Xote__JSX from "xote/src/Xote__JSX.res.mjs";
+
+import './Basefn__ToggleGroup.css'
+;
+
+function variantToString(variant) {
+  if (variant === "Default") {
+    return "default";
+  } else {
+    return "outline";
+  }
+}
+
+function sizeToString(size) {
+  switch (size) {
+    case "Sm" :
+      return "sm";
+    case "Md" :
+      return "md";
+    case "Lg" :
+      return "lg";
+  }
+}
+
+function Basefn__ToggleGroup(props) {
+  let className = props.className;
+  let __size = props.size;
+  let __variant = props.variant;
+  let onValueChange = props.onValueChange;
+  let value = props.value;
+  let __type_ = props.type_;
+  let type_ = __type_ !== undefined ? __type_ : "Single";
+  let variant = __variant !== undefined ? __variant : "Default";
+  let size = __size !== undefined ? __size : "Md";
+  let getGroupClassName = () => {
+    let customClass = className !== undefined ? " " + className : "";
+    return "basefn-toggle-group" + customClass;
+  };
+  let getItemClassName = (itemValue, itemDisabled) => Xote.Computed.make(() => {
+    let variantClass = " basefn-toggle-group__item--" + variantToString(variant);
+    let sizeClass = " basefn-toggle-group__item--" + sizeToString(size);
+    let currentValues = Xote.Signal.get(value);
+    let pressedClass = currentValues.includes(itemValue) ? " basefn-toggle-group__item--pressed" : "";
+    let disabledClass = itemDisabled ? " basefn-toggle-group__item--disabled" : "";
+    return "basefn-toggle-group__item" + variantClass + sizeClass + pressedClass + disabledClass;
+  }, undefined);
+  return Xote__JSX.Elements.jsx("div", {
+    class: getGroupClassName(),
+    role: "group",
+    children: Xote.Component.fragment(props.items.map(item => {
+      let d = item.disabled;
+      let isDisabled = d !== undefined ? d : false;
+      return Xote__JSX.Elements.jsxKeyed("button", {
+        class: getItemClassName(item.value, isDisabled),
+        disabled: isDisabled,
+        onClick: param => {
+          let itemValue = item.value;
+          if (isDisabled) {
+            return;
+          }
+          let currentValues = Xote.Signal.get(value);
+          let newValues;
+          newValues = type_ === "Single" ? (
+              currentValues.includes(itemValue) ? [] : [itemValue]
+            ) : (
+              currentValues.includes(itemValue) ? currentValues.filter(v => v !== itemValue) : currentValues.concat([itemValue])
+            );
+          Xote.Signal.set(value, newValues);
+          if (onValueChange !== undefined) {
+            return onValueChange(newValues);
+          }
+        },
+        children: Xote.Component.text(item.label)
+      }, item.value, undefined);
+    }))
+  });
+}
+
+let make = Basefn__ToggleGroup;
+
+export {
+  variantToString,
+  sizeToString,
+  make,
+}
+/*  Not a pure module */

package/src/components/Basefn__Topbar.css

@@ -125,3 +125,47 @@
   height: 72px;
   padding: 1rem 2rem;
 }
+
+/* Mobile responsiveness */
+@media (max-width: 768px) {
+  .basefn-topbar {
+    padding: 0.5rem 1rem;
+  }
+
+  .basefn-topbar--sm {
+    padding: 0.5rem 0.75rem;
+  }
+
+  .basefn-topbar--md {
+    padding: 0.5rem 1rem;
+  }
+
+  .basefn-topbar--lg {
+    padding: 0.5rem 1rem;
+  }
+
+  .basefn-topbar__logo {
+    font-size: 1.1rem;
+  }
+
+  .basefn-topbar__nav {
+    gap: 0.125rem;
+  }
+
+  .basefn-topbar__nav-item {
+    font-size: 0.8125rem;
+    padding: 0.375rem 0.625rem;
+  }
+
+  .basefn-topbar__center {
+    gap: 0.5rem;
+  }
+
+  .basefn-topbar__right {
+    gap: 0.5rem;
+  }
+
+  .basefn-topbar__actions {
+    gap: 0.5rem;
+  }
+}