basefn 1.0.0

package/src/components/Basefn__Radio.res.mjs

@@ -0,0 +1,38 @@
+// 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__Radio.css'
+;
+
+function Basefn__Radio(props) {
+  let __disabled = props.disabled;
+  let disabled = __disabled !== undefined ? __disabled : false;
+  let base = "basefn-radio-wrapper";
+  return Xote__JSX.Elements.jsxs("label", {
+    class: disabled ? base + " basefn-radio-wrapper--disabled" : base,
+    children: Xote__JSX.array([
+      Xote__JSX.Elements.jsx("input", {
+        class: "basefn-radio-input",
+        type: "radio",
+        name: props.name,
+        value: props.value,
+        disabled: disabled,
+        checked: props.checked,
+        onChange: props.onChange
+      }),
+      Xote__JSX.Elements.jsx("span", {
+        class: "basefn-radio-label",
+        children: Xote.Component.text(props.label)
+      })
+    ])
+  });
+}
+
+let make = Basefn__Radio;
+
+export {
+  make,
+}
+/*  Not a pure module */

package/src/components/Basefn__Select.css

@@ -0,0 +1,44 @@
+@import '../styles/variables.css';
+
+.basefn-select {
+  display: block;
+  width: 100%;
+  font-family: var(--basefn-font-family);
+  font-size: var(--basefn-font-size-base);
+  font-weight: var(--basefn-font-weight-normal);
+  line-height: var(--basefn-line-height-normal);
+  height: var(--basefn-form-input-height);
+  padding: var(--basefn-form-input-padding-y) var(--basefn-form-input-padding-x);
+  padding-right: calc(var(--basefn-form-input-padding-x) * 2 + 1em);
+  background-color: var(--basefn-form-input-bg);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right var(--basefn-form-input-padding-x) center;
+  background-size: 12px;
+  color: var(--basefn-form-input-text);
+  border: var(--basefn-border-width) solid var(--basefn-form-input-border);
+  border-radius: var(--basefn-radius-md);
+  outline: none;
+  appearance: none;
+  cursor: pointer;
+  transition: border-color var(--basefn-transition-fast), box-shadow var(--basefn-transition-fast);
+}
+
+.basefn-select:focus {
+  border-color: var(--basefn-form-input-border-focus);
+  box-shadow: 0 0 0 var(--basefn-focus-ring-width) var(--basefn-focus-ring-color);
+}
+
+.basefn-select:disabled {
+  background-color: var(--basefn-form-input-disabled-bg);
+  border-color: var(--basefn-form-input-disabled-border);
+  color: var(--basefn-form-input-disabled-text);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.basefn-select option {
+  font-weight: var(--basefn-font-weight-normal);
+  color: var(--basefn-color-neutral-900);
+  background-color: white;
+}

package/src/components/Basefn__Select.res

@@ -0,0 +1,33 @@
+%%raw(`import './Basefn__Select.css'`)
+
+open Xote
+
+type selectOption = {
+  value: string,
+  label: string,
+}
+
+@jsx.component
+let make = (
+  ~value: Signal.t<string>,
+  ~onChange: option<Dom.event => unit>=?,
+  ~options: Signal.t<array<selectOption>>,
+  ~disabled: bool=false,
+) => {
+  let onChange = (e: Dom.event) => {
+    let t = Obj.magic(e)["target"]
+    let v = t["value"]
+
+    Signal.set(value, v)
+
+    switch onChange {
+    | Some(onChange) => onChange(v)
+    | None => ()
+    }
+  }
+  <select name="test" class="basefn-select" value={value} disabled onChange>
+    {Component.list(options, opt =>
+      <option value={opt.value}> {Component.text(opt.label)} </option>
+    )}
+  </select>
+}

package/src/components/Basefn__Select.res.mjs

@@ -0,0 +1,40 @@
+// 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__Select.css'
+;
+
+function Basefn__Select(props) {
+  let __disabled = props.disabled;
+  let onChange = props.onChange;
+  let value = props.value;
+  let disabled = __disabled !== undefined ? __disabled : false;
+  let onChange$1 = e => {
+    let t = e.target;
+    let v = t.value;
+    Xote.Signal.set(value, v);
+    if (onChange !== undefined) {
+      return onChange(v);
+    }
+  };
+  return Xote__JSX.Elements.jsx("select", {
+    class: "basefn-select",
+    name: "test",
+    value: value,
+    disabled: disabled,
+    onChange: onChange$1,
+    children: Xote.Component.list(props.options, opt => Xote__JSX.Elements.jsx("option", {
+      value: opt.value,
+      children: Xote.Component.text(opt.label)
+    }))
+  });
+}
+
+let make = Basefn__Select;
+
+export {
+  make,
+}
+/*  Not a pure module */

package/src/components/Basefn__Separator.css

@@ -0,0 +1,85 @@
+@import "../styles/variables.css";
+
+.basefn-separator {
+  border: 0;
+}
+
+/* Horizontal separator */
+.basefn-separator--horizontal {
+  width: 100%;
+  height: 1px;
+  margin: 2rem 0;
+}
+
+/* Vertical separator */
+.basefn-separator--vertical {
+  width: 1px;
+  height: 100%;
+  display: inline-block;
+}
+
+/* Variants */
+.basefn-separator--solid {
+  background-color: var(--basefn-border-primary);
+}
+
+.basefn-separator--dashed {
+  background-image: linear-gradient(to right, var(--basefn-border-primary) 50%, transparent 50%);
+  background-size: 8px 1px;
+  background-repeat: repeat-x;
+  background-color: transparent;
+}
+
+.basefn-separator--vertical.basefn-separator--dashed {
+  background-image: linear-gradient(to bottom, var(--basefn-border-primary) 50%, transparent 50%);
+  background-size: 1px 8px;
+  background-repeat: repeat-y;
+}
+
+.basefn-separator--dotted {
+  background-image: linear-gradient(to right, var(--basefn-border-primary) 25%, transparent 25%);
+  background-size: 4px 1px;
+  background-repeat: repeat-x;
+  background-color: transparent;
+}
+
+.basefn-separator--vertical.basefn-separator--dotted {
+  background-image: linear-gradient(to bottom, var(--basefn-border-primary) 25%, transparent 25%);
+  background-size: 1px 4px;
+  background-repeat: repeat-y;
+}
+
+/* Separator with label */
+.basefn-separator--with-label {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  width: 100%;
+  background: transparent;
+}
+
+.basefn-separator__line {
+  flex: 1;
+  height: 1px;
+  background-color: var(--basefn-border-primary);
+}
+
+.basefn-separator--dashed .basefn-separator__line {
+  background-image: linear-gradient(to right, var(--basefn-border-primary) 50%, transparent 50%);
+  background-size: 8px 1px;
+  background-repeat: repeat-x;
+  background-color: transparent;
+}
+
+.basefn-separator--dotted .basefn-separator__line {
+  background-image: linear-gradient(to right, var(--basefn-border-primary) 25%, transparent 25%);
+  background-size: 4px 1px;
+  background-repeat: repeat-x;
+  background-color: transparent;
+}
+
+.basefn-separator__label {
+  font-size: 0.875rem;
+  color: #6b7280;
+  white-space: nowrap;
+}

package/src/components/Basefn__Separator.res

@@ -0,0 +1,45 @@
+%%raw(`import './Basefn__Separator.css'`)
+
+open Xote
+
+type orientation = Horizontal | Vertical
+
+type variant = Solid | Dashed | Dotted
+
+let orientationToString = (orientation: orientation) => {
+  switch orientation {
+  | Horizontal => "horizontal"
+  | Vertical => "vertical"
+  }
+}
+
+let variantToString = (variant: variant) => {
+  switch variant {
+  | Solid => "solid"
+  | Dashed => "dashed"
+  | Dotted => "dotted"
+  }
+}
+
+@jsx.component
+let make = (
+  ~orientation: orientation=Horizontal,
+  ~variant: variant=Solid,
+  ~label: option<string>=?,
+) => {
+  let getClassName = () => {
+    let orientationClass = "basefn-separator--" ++ orientationToString(orientation)
+    let variantClass = "basefn-separator--" ++ variantToString(variant)
+    "basefn-separator " ++ orientationClass ++ " " ++ variantClass
+  }
+
+  switch label {
+  | Some(text) =>
+    <div class={getClassName() ++ " basefn-separator--with-label"}>
+      <div class="basefn-separator__line" />
+      <span class="basefn-separator__label"> {Component.text(text)} </span>
+      <div class="basefn-separator__line" />
+    </div>
+  | None => <div class={getClassName()} role="separator" />
+  }
+}

package/src/components/Basefn__Separator.res.mjs

@@ -0,0 +1,70 @@
+// 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__Separator.css'
+;
+
+function orientationToString(orientation) {
+  if (orientation === "Horizontal") {
+    return "horizontal";
+  } else {
+    return "vertical";
+  }
+}
+
+function variantToString(variant) {
+  switch (variant) {
+    case "Solid" :
+      return "solid";
+    case "Dashed" :
+      return "dashed";
+    case "Dotted" :
+      return "dotted";
+  }
+}
+
+function Basefn__Separator(props) {
+  let label = props.label;
+  let __variant = props.variant;
+  let __orientation = props.orientation;
+  let orientation = __orientation !== undefined ? __orientation : "Horizontal";
+  let variant = __variant !== undefined ? __variant : "Solid";
+  let getClassName = () => {
+    let orientationClass = "basefn-separator--" + orientationToString(orientation);
+    let variantClass = "basefn-separator--" + variantToString(variant);
+    return "basefn-separator " + orientationClass + " " + variantClass;
+  };
+  if (label !== undefined) {
+    return Xote__JSX.Elements.jsxs("div", {
+      class: getClassName() + " basefn-separator--with-label",
+      children: Xote__JSX.array([
+        Xote__JSX.Elements.jsx("div", {
+          class: "basefn-separator__line"
+        }),
+        Xote__JSX.Elements.jsx("span", {
+          class: "basefn-separator__label",
+          children: Xote.Component.text(label)
+        }),
+        Xote__JSX.Elements.jsx("div", {
+          class: "basefn-separator__line"
+        })
+      ])
+    });
+  } else {
+    return Xote__JSX.Elements.jsx("div", {
+      class: getClassName(),
+      role: "separator"
+    });
+  }
+}
+
+let make = Basefn__Separator;
+
+export {
+  orientationToString,
+  variantToString,
+  make,
+}
+/*  Not a pure module */

package/src/components/Basefn__Sidebar.css

@@ -0,0 +1,141 @@
+@import "../styles/variables.css";
+
+.basefn-sidebar {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--basefn-bg-primary);
+  color: var(--basefn-text-primary);
+  height: 100%;
+  overflow-y: auto;
+  border-right: 1px solid var(--basefn-border-primary);
+}
+
+.basefn-sidebar__header {
+  padding: 1rem 1.5rem;
+  flex-shrink: 0;
+  align-items: center;
+  height: 4rem;
+  display: flex;
+  border-bottom: 1px solid transparent;
+  border-bottom: 1px solid var(--basefn-border-primary);
+}
+
+.basefn-sidebar__logo {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: var(--basefn-text-primary);
+  font-family: var(--font-mono);
+  height: 100%;
+  display: flex;
+  align-items: center;
+  line-height: 2rem;
+}
+
+.basefn-sidebar__logo a {
+  text-decoration: none;
+  font-weight: 600;
+  height: 32px;
+}
+
+.basefn-sidebar__nav {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1rem;
+  scrollbar-color: var(--basefn-color-neutral-300) transparent; 
+}
+
+html[data-theme="dark"] .basefn-sidebar__nav {
+  scrollbar-color: var(--basefn-color-neutral-800) transparent;
+}
+
+.basefn-sidebar__section {
+  margin-bottom: 1.5rem;
+}
+
+.basefn-sidebar__section-title {
+  padding: 0.5rem 0.5rem;
+  font-size: var(--basefn-font-size-xs);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.0625rem;
+  color: var(--basefn-text-tertiary);
+}
+
+.basefn-sidebar__section-title:empty {
+  display: none;
+}
+
+.basefn-sidebar__item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.5rem 1.25rem;
+  margin: 0 -0.5rem;
+  color: var(--basefn-text-tertiary);
+  font-weight: 300;
+  text-decoration: none;
+  cursor: pointer;
+  transition: all 0.2s;
+  border-radius: var(--basefn-radius-xl);
+  font-weight: 500;
+  margin-bottom: 0.25rem;
+}
+
+.basefn-sidebar__item:hover {
+  background-color: var(--basefn-bg-secondary-aa);
+  color: var(--basefn-text-primary);
+}
+
+.basefn-sidebar__item--active,
+.basefn-sidebar__item--active:hover {
+  background-color: var(--basefn-bg-primary-aa);
+  color: var(--basefn-color-primary);
+  font-weight: 700;
+}
+
+.basefn-sidebar__item-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+  flex-shrink: 0;
+}
+
+.basefn-sidebar__item-text {
+  font-size: 0.875rem;
+}
+
+.basefn-sidebar__footer {
+  padding: 1rem 1.5rem;
+  border-top: 1px solid var(--basefn-border-primary);
+  flex-shrink: 0;
+}
+
+/* Width variants */
+.basefn-sidebar--sm {
+  width: 12rem;
+}
+
+.basefn-sidebar--md {
+  width: 16rem;
+}
+
+.basefn-sidebar--lg {
+  width: 20rem
+}
+
+/* Collapsible variant */
+.basefn-sidebar--collapsed {
+  width: 64px;
+  display: none;
+}
+
+.basefn-sidebar--collapsed .basefn-sidebar__item-text,
+.basefn-sidebar--collapsed .basefn-sidebar__section-title,
+.basefn-sidebar--collapsed .basefn-sidebar__logo {
+  display: none;
+}
+
+.basefn-sidebar--collapsed .basefn-sidebar__item {
+  justify-content: center;
+  padding-left: 0;
+  padding-right: 0;
+}

package/src/components/Basefn__Sidebar.res

@@ -0,0 +1,95 @@
+%%raw(`import './Basefn__Sidebar.css'`)
+
+open Xote
+
+type size = Sm | Md | Lg
+
+type navItem = {
+  label: string,
+  icon: option<string>,
+  active: bool,
+  url: string,
+}
+
+type navSection = {
+  title: option<string>,
+  items: array<navItem>,
+}
+
+let sizeToString = (size: size) => {
+  switch size {
+  | Sm => "sm"
+  | Md => "md"
+  | Lg => "lg"
+  }
+}
+
+@jsx.component
+let make = (
+  ~logo: option<Component.node>=?,
+  ~sections: array<navSection>,
+  ~footer: option<Component.node>=?,
+  ~size: size=Md,
+  ~collapsed: bool=false,
+) => {
+  let scrolling = Signal.make(false)
+  let getSidebarClass = () => {
+    let sizeClass = " basefn-sidebar--" ++ sizeToString(size)
+    let collapsedClass = collapsed ? " basefn-sidebar--collapsed" : ""
+    "basefn-sidebar" ++ sizeClass ++ collapsedClass
+  }
+
+  let _ = Effect.run(() => {
+    Basefn__Dom.addEventListener("scroll", () => {
+      let scrollY = %raw("window.scrollY")
+      Signal.set(scrolling, scrollY >= 64)
+    })
+  })
+
+  <div class={getSidebarClass()}>
+    {switch logo {
+    | Some(logoContent) => {
+        let class = Computed.make(() =>
+          "basefn-sidebar__header" ++ (
+            Signal.get(scrolling) ? " basefn-sidebar__header--scrolling" : ""
+          )
+        )
+        <div class>
+          <div class="basefn-sidebar__logo"> {logoContent} </div>
+        </div>
+      }
+    | None => <> </>
+    }}
+    <nav class="basefn-sidebar__nav">
+      {sections
+      ->Array.map(section => {
+        <div class="basefn-sidebar__section">
+          {switch section.title {
+          | Some(title) =>
+            <div class="basefn-sidebar__section-title"> {Component.text(title)} </div>
+          | None => <> </>
+          }}
+          {section.items
+          ->Array.mapWithIndex((item, index) => {
+            let itemClass =
+              "basefn-sidebar__item" ++ (item.active ? " basefn-sidebar__item--active" : "")
+
+            <Router.Link key={Int.toString(index)} class={itemClass} to={item.url}>
+              {switch item.icon {
+              | Some(icon) => <div class="basefn-sidebar__item-icon"> {Component.text(icon)} </div>
+              | None => <> </>
+              }}
+              <div class="basefn-sidebar__item-text"> {Component.text(item.label)} </div>
+            </Router.Link>
+          })
+          ->Component.fragment}
+        </div>
+      })
+      ->Component.fragment}
+    </nav>
+    {switch footer {
+    | Some(footerContent) => <div class="basefn-sidebar__footer"> {footerContent} </div>
+    | None => <> </>
+    }}
+  </div>
+}

package/src/components/Basefn__Sidebar.res.mjs

@@ -0,0 +1,107 @@
+// 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 * as Basefn__Dom from "../Basefn__Dom.res.mjs";
+import * as Xote__Router from "xote/src/Xote__Router.res.mjs";
+
+import './Basefn__Sidebar.css'
+;
+
+function sizeToString(size) {
+  switch (size) {
+    case "Sm" :
+      return "sm";
+    case "Md" :
+      return "md";
+    case "Lg" :
+      return "lg";
+  }
+}
+
+function Basefn__Sidebar(props) {
+  let __collapsed = props.collapsed;
+  let __size = props.size;
+  let footer = props.footer;
+  let logo = props.logo;
+  let size = __size !== undefined ? __size : "Md";
+  let collapsed = __collapsed !== undefined ? __collapsed : false;
+  let scrolling = Xote.Signal.make(false, undefined, undefined);
+  let getSidebarClass = () => {
+    let sizeClass = " basefn-sidebar--" + sizeToString(size);
+    let collapsedClass = collapsed ? " basefn-sidebar--collapsed" : "";
+    return "basefn-sidebar" + sizeClass + collapsedClass;
+  };
+  Xote.Effect.run(() => Basefn__Dom.addEventListener("scroll", () => {
+    let scrollY = window.scrollY;
+    Xote.Signal.set(scrolling, scrollY >= 64);
+  }), undefined);
+  let tmp;
+  if (logo !== undefined) {
+    let $$class = Xote.Computed.make(() => "basefn-sidebar__header" + (
+      Xote.Signal.get(scrolling) ? " basefn-sidebar__header--scrolling" : ""
+    ), undefined);
+    tmp = Xote__JSX.Elements.jsx("div", {
+      class: $$class,
+      children: Xote__JSX.Elements.jsx("div", {
+        class: "basefn-sidebar__logo",
+        children: logo
+      })
+    });
+  } else {
+    tmp = Xote__JSX.jsx(Xote__JSX.jsxFragment, {});
+  }
+  return Xote__JSX.Elements.jsxs("div", {
+    class: getSidebarClass(),
+    children: Xote__JSX.array([
+      tmp,
+      Xote__JSX.Elements.jsx("nav", {
+        class: "basefn-sidebar__nav",
+        children: Xote.Component.fragment(props.sections.map(section => {
+          let title = section.title;
+          return Xote__JSX.Elements.jsxs("div", {
+            class: "basefn-sidebar__section",
+            children: Xote__JSX.array([
+              title !== undefined ? Xote__JSX.Elements.jsx("div", {
+                  class: "basefn-sidebar__section-title",
+                  children: Xote.Component.text(title)
+                }) : Xote__JSX.jsx(Xote__JSX.jsxFragment, {}),
+              Xote.Component.fragment(section.items.map((item, index) => {
+                let itemClass = "basefn-sidebar__item" + (
+                  item.active ? " basefn-sidebar__item--active" : ""
+                );
+                let icon = item.icon;
+                return Xote__JSX.jsxsKeyed(Xote__Router.Link.make, {
+                  to: item.url,
+                  class: itemClass,
+                  children: Xote__JSX.array([
+                    icon !== undefined ? Xote__JSX.Elements.jsx("div", {
+                        class: "basefn-sidebar__item-icon",
+                        children: Xote.Component.text(icon)
+                      }) : Xote__JSX.jsx(Xote__JSX.jsxFragment, {}),
+                    Xote__JSX.Elements.jsx("div", {
+                      class: "basefn-sidebar__item-text",
+                      children: Xote.Component.text(item.label)
+                    })
+                  ])
+                }, index.toString(), undefined);
+              }))
+            ])
+          });
+        }))
+      }),
+      footer !== undefined ? Xote__JSX.Elements.jsx("div", {
+          class: "basefn-sidebar__footer",
+          children: footer
+        }) : Xote__JSX.jsx(Xote__JSX.jsxFragment, {})
+    ])
+  });
+}
+
+let make = Basefn__Sidebar;
+
+export {
+  sizeToString,
+  make,
+}
+/*  Not a pure module */