basefn 1.0.0

package/src/components/Basefn__Stepper.res.mjs

@@ -0,0 +1,114 @@
+// 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 Core__Option from "@rescript/core/src/Core__Option.res.mjs";
+
+import './Basefn__Stepper.css'
+;
+
+function statusToString(status) {
+  switch (status) {
+    case "Inactive" :
+      return "inactive";
+    case "Active" :
+      return "active";
+    case "Completed" :
+      return "completed";
+    case "Error" :
+      return "error";
+  }
+}
+
+function Basefn__Stepper(props) {
+  let onStepClick = props.onStepClick;
+  let __orientation = props.orientation;
+  let orientation = __orientation !== undefined ? __orientation : "Horizontal";
+  let getStepperClass = () => {
+    let orientationClass;
+    orientationClass = orientation === "Horizontal" ? "basefn-stepper--horizontal" : "basefn-stepper--vertical";
+    return "basefn-stepper " + orientationClass;
+  };
+  let getStepClass = (status, clickable) => {
+    let statusClass = "basefn-stepper__step--" + statusToString(status);
+    let clickableClass = clickable ? " basefn-stepper__step--clickable" : "";
+    return "basefn-stepper__step " + statusClass + clickableClass;
+  };
+  return Xote__JSX.Elements.jsx("div", {
+    class: getStepperClass(),
+    children: Xote.Component.fragment(props.steps.map((step, index) => {
+      let isClickable = Core__Option.isSome(onStepClick) && (step.status === "Completed" || step.status === "Active");
+      let match = step.status;
+      let tmp;
+      let exit = 0;
+      switch (match) {
+        case "Inactive" :
+        case "Active" :
+          exit = 1;
+          break;
+        case "Completed" :
+          tmp = Xote.Component.text("\u2713");
+          break;
+        case "Error" :
+          tmp = Xote.Component.text("\u00d7");
+          break;
+      }
+      if (exit === 1) {
+        tmp = Xote.Component.text((index + 1 | 0).toString());
+      }
+      let desc = step.description;
+      return Xote__JSX.Elements.jsxsKeyed("div", {
+        class: getStepClass(step.status, isClickable),
+        children: Xote__JSX.array([
+          Xote__JSX.Elements.jsxs("div", {
+            class: "basefn-stepper__step-header",
+            onClick: param => {
+              let status = step.status;
+              if (onStepClick === undefined) {
+                return;
+              }
+              switch (status) {
+                case "Active" :
+                case "Completed" :
+                  return onStepClick(index);
+                case "Inactive" :
+                case "Error" :
+                  return;
+              }
+            },
+            children: Xote__JSX.array([
+              Xote__JSX.Elements.jsx("div", {
+                class: "basefn-stepper__step-indicator",
+                children: tmp
+              }),
+              Xote__JSX.Elements.jsxs("div", {
+                class: "basefn-stepper__step-content",
+                children: Xote__JSX.array([
+                  Xote__JSX.Elements.jsx("div", {
+                    class: "basefn-stepper__step-title",
+                    children: Xote.Component.text(step.title)
+                  }),
+                  desc !== undefined ? Xote__JSX.Elements.jsx("div", {
+                      class: "basefn-stepper__step-description",
+                      children: Xote.Component.text(desc)
+                    }) : Xote__JSX.jsx(Xote__JSX.jsxFragment, {})
+                ])
+              })
+            ])
+          }),
+          Xote__JSX.Elements.jsx("div", {
+            class: "basefn-stepper__connector"
+          })
+        ])
+      }, index.toString(), undefined);
+    }))
+  });
+}
+
+let make = Basefn__Stepper;
+
+export {
+  statusToString,
+  make,
+}
+/*  Not a pure module */

package/src/components/Basefn__Switch.css

@@ -0,0 +1,80 @@
+.basefn-switch-wrapper {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.75rem;
+  cursor: pointer;
+  user-select: none;
+}
+
+.basefn-switch-wrapper--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.basefn-switch {
+  position: relative;
+  width: 44px;
+  height: 24px;
+  background-color: #d1d5db;
+  border-radius: 9999px;
+  transition: background-color 0.2s;
+  cursor: pointer;
+}
+
+.basefn-switch--checked {
+  background-color: #3b82f6;
+}
+
+.basefn-switch--disabled {
+  cursor: not-allowed;
+}
+
+.basefn-switch__slider {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 20px;
+  height: 20px;
+  background-color: white;
+  border-radius: 9999px;
+  transition: transform 0.2s;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+}
+
+.basefn-switch--checked .basefn-switch__slider {
+  transform: translateX(20px);
+}
+
+.basefn-switch-label {
+  font-size: 0.875rem;
+  color: #374151;
+}
+
+/* Sizes */
+.basefn-switch--sm {
+  width: 36px;
+  height: 20px;
+}
+
+.basefn-switch--sm .basefn-switch__slider {
+  width: 16px;
+  height: 16px;
+}
+
+.basefn-switch--sm.basefn-switch--checked .basefn-switch__slider {
+  transform: translateX(16px);
+}
+
+.basefn-switch--lg {
+  width: 52px;
+  height: 28px;
+}
+
+.basefn-switch--lg .basefn-switch__slider {
+  width: 24px;
+  height: 24px;
+}
+
+.basefn-switch--lg.basefn-switch--checked .basefn-switch__slider {
+  transform: translateX(24px);
+}

package/src/components/Basefn__Switch.res

@@ -0,0 +1,62 @@
+%%raw(`import './Basefn__Switch.css'`)
+
+open Xote
+
+type size = Sm | Md | Lg
+
+let sizeToString = (size: size) => {
+  switch size {
+  | Sm => "sm"
+  | Md => "md"
+  | Lg => "lg"
+  }
+}
+
+@jsx.component
+let make = (
+  ~checked: Signal.t<bool>,
+  ~onChange: option<unit => unit>=?,
+  ~label: option<string>=?,
+  ~disabled: bool=false,
+  ~size: size=Md,
+) => {
+  let handleClick = _ => {
+    if !disabled {
+      Signal.update(checked, prev => !prev)
+      switch onChange {
+      | Some(callback) => callback()
+      | None => ()
+      }
+    }
+  }
+
+  let getWrapperClass = () => {
+    let baseClass = "basefn-switch-wrapper"
+    let disabledClass = disabled ? " basefn-switch-wrapper--disabled" : ""
+    baseClass ++ disabledClass
+  }
+
+  let getSwitchClass = () => {
+    let baseClass = "basefn-switch"
+    let sizeClass = size != Md ? " basefn-switch--" ++ sizeToString(size) : ""
+    let checkedClass = Computed.make(() => Signal.get(checked) ? " basefn-switch--checked" : "")
+    let disabledClass = disabled ? " basefn-switch--disabled" : ""
+    baseClass ++ sizeClass ++ disabledClass
+  }
+
+  <label class={getWrapperClass()}>
+    <div
+      class={Computed.make(() =>
+        getSwitchClass() ++
+        Signal.get(Computed.make(() => Signal.get(checked) ? " basefn-switch--checked" : ""))
+      )}
+      onClick={handleClick}
+    >
+      <div class="basefn-switch__slider" />
+    </div>
+    {switch label {
+    | Some(labelText) => <span class="basefn-switch-label"> {Component.text(labelText)} </span>
+    | None => <> </>
+    }}
+  </label>
+}

package/src/components/Basefn__Switch.res.mjs

@@ -0,0 +1,84 @@
+// 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__Switch.css'
+;
+
+function sizeToString(size) {
+  switch (size) {
+    case "Sm" :
+      return "sm";
+    case "Md" :
+      return "md";
+    case "Lg" :
+      return "lg";
+  }
+}
+
+function Basefn__Switch(props) {
+  let __size = props.size;
+  let __disabled = props.disabled;
+  let label = props.label;
+  let onChange = props.onChange;
+  let checked = props.checked;
+  let disabled = __disabled !== undefined ? __disabled : false;
+  let size = __size !== undefined ? __size : "Md";
+  let handleClick = param => {
+    if (!disabled) {
+      Xote.Signal.update(checked, prev => !prev);
+      if (onChange !== undefined) {
+        return onChange();
+      } else {
+        return;
+      }
+    }
+  };
+  let getWrapperClass = () => {
+    let disabledClass = disabled ? " basefn-switch-wrapper--disabled" : "";
+    return "basefn-switch-wrapper" + disabledClass;
+  };
+  let getSwitchClass = () => {
+    let sizeClass = size !== "Md" ? " basefn-switch--" + sizeToString(size) : "";
+    Xote.Computed.make(() => {
+      if (Xote.Signal.get(checked)) {
+        return " basefn-switch--checked";
+      } else {
+        return "";
+      }
+    }, undefined);
+    let disabledClass = disabled ? " basefn-switch--disabled" : "";
+    return "basefn-switch" + sizeClass + disabledClass;
+  };
+  return Xote__JSX.Elements.jsxs("label", {
+    class: getWrapperClass(),
+    children: Xote__JSX.array([
+      Xote__JSX.Elements.jsx("div", {
+        class: Xote.Computed.make(() => getSwitchClass() + Xote.Signal.get(Xote.Computed.make(() => {
+          if (Xote.Signal.get(checked)) {
+            return " basefn-switch--checked";
+          } else {
+            return "";
+          }
+        }, undefined)), undefined),
+        onClick: handleClick,
+        children: Xote__JSX.Elements.jsx("div", {
+          class: "basefn-switch__slider"
+        })
+      }),
+      label !== undefined ? Xote__JSX.Elements.jsx("span", {
+          class: "basefn-switch-label",
+          children: Xote.Component.text(label)
+        }) : Xote__JSX.jsx(Xote__JSX.jsxFragment, {})
+    ])
+  });
+}
+
+let make = Basefn__Switch;
+
+export {
+  sizeToString,
+  make,
+}
+/*  Not a pure module */

package/src/components/Basefn__Tabs.css

@@ -0,0 +1,54 @@
+.basefn-tabs {
+  width: 100%;
+}
+
+.basefn-tabs__list {
+  display: flex;
+  border-bottom: 2px solid #e5e7eb;
+  gap: 0.5rem;
+  margin-bottom: 1.5rem;
+}
+
+.basefn-tabs__trigger {
+  padding: 0.75rem 1.25rem;
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -2px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #6b7280;
+  cursor: pointer;
+  transition: all 0.2s;
+  white-space: nowrap;
+}
+
+.basefn-tabs__trigger:hover {
+  color: #374151;
+  background-color: #f9fafb;
+}
+
+.basefn-tabs__trigger--active {
+  color: #3b82f6;
+  border-bottom-color: #3b82f6;
+}
+
+.basefn-tabs__trigger:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.basefn-tabs__content {
+  animation: basefn-tabs-fade-in 0.2s ease-in;
+}
+
+@keyframes basefn-tabs-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/src/components/Basefn__Tabs.res

@@ -0,0 +1,73 @@
+%%raw(`import './Basefn__Tabs.css'`)
+
+open Xote
+
+type tab = {
+  value: string,
+  label: string,
+  content: Component.node,
+  disabled?: bool,
+}
+
+@jsx.component
+let make = (~tabs: array<tab>, ~defaultValue: option<string>=?) => {
+  // Use provided signal or create internal one
+  let activeTabSignal = Signal.make(
+    switch defaultValue {
+    | Some(value) => value
+    | None =>
+      tabs
+      ->Array.get(0)
+      ->Option.map(tab => tab.value)
+      ->Option.getOr("")
+    },
+  )
+
+  let handleTabClick = (value: string, disabled: option<bool>) => {
+    switch disabled {
+    | Some(true) => ()
+    | _ => Signal.set(activeTabSignal, value)
+    }
+  }
+
+  let computed = Computed.make(() => {
+    [
+      <div class="basefn-tabs">
+        <div class="basefn-tabs__list">
+          {tabs
+          ->Array.map(tab => {
+            let isActive = Computed.make(() => Signal.get(activeTabSignal) == tab.value)
+            let className = Computed.make(
+              () => {
+                let baseClass = "basefn-tabs__trigger"
+                let activeClass = Signal.get(isActive) ? " basefn-tabs__trigger--active" : ""
+                baseClass ++ activeClass
+              },
+            )
+
+            <button
+              key={tab.value}
+              class={className}
+              onClick={_ => handleTabClick(tab.value, tab.disabled)}
+              disabled={tab.disabled->Option.getOr(false)}
+            >
+              {Component.text(tab.label)}
+            </button>
+          })
+          ->Component.fragment}
+        </div>
+        <div class="basefn-tabs__content">
+          {
+            let activeValue = Signal.get(activeTabSignal)
+            tabs
+            ->Array.find(tab => tab.value == activeValue)
+            ->Option.map(tab => tab.content)
+            ->Option.getOr(<> </>)
+          }
+        </div>
+      </div>,
+    ]
+  })
+
+  Component.signalFragment(computed)
+}

package/src/components/Basefn__Tabs.res.mjs

@@ -0,0 +1,57 @@
+// 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 Core__Option from "@rescript/core/src/Core__Option.res.mjs";
+
+import './Basefn__Tabs.css'
+;
+
+function Basefn__Tabs(props) {
+  let defaultValue = props.defaultValue;
+  let tabs = props.tabs;
+  let activeTabSignal = Xote.Signal.make(defaultValue !== undefined ? defaultValue : Core__Option.getOr(Core__Option.map(tabs[0], tab => tab.value), ""), undefined, undefined);
+  return Xote.Component.signalFragment(Xote.Computed.make(() => {
+    let activeValue = Xote.Signal.get(activeTabSignal);
+    return [Xote__JSX.Elements.jsxs("div", {
+        class: "basefn-tabs",
+        children: Xote__JSX.array([
+          Xote__JSX.Elements.jsx("div", {
+            class: "basefn-tabs__list",
+            children: Xote.Component.fragment(tabs.map(tab => {
+              let isActive = Xote.Computed.make(() => Xote.Signal.get(activeTabSignal) === tab.value, undefined);
+              let className = Xote.Computed.make(() => {
+                let activeClass = Xote.Signal.get(isActive) ? " basefn-tabs__trigger--active" : "";
+                return "basefn-tabs__trigger" + activeClass;
+              }, undefined);
+              return Xote__JSX.Elements.jsxKeyed("button", {
+                class: className,
+                disabled: Core__Option.getOr(tab.disabled, false),
+                onClick: param => {
+                  let value = tab.value;
+                  let disabled = tab.disabled;
+                  if (disabled !== undefined && disabled) {
+                    return;
+                  } else {
+                    return Xote.Signal.set(activeTabSignal, value);
+                  }
+                },
+                children: Xote.Component.text(tab.label)
+              }, tab.value, undefined);
+            }))
+          }),
+          Xote__JSX.Elements.jsx("div", {
+            class: "basefn-tabs__content",
+            children: Core__Option.getOr(Core__Option.map(tabs.find(tab => tab.value === activeValue), tab => tab.content), Xote__JSX.jsx(Xote__JSX.jsxFragment, {}))
+          })
+        ])
+      })];
+  }, undefined));
+}
+
+let make = Basefn__Tabs;
+
+export {
+  make,
+}
+/*  Not a pure module */

package/src/components/Basefn__Textarea.css

@@ -0,0 +1,41 @@
+@import '../styles/variables.css';
+
+.basefn-textarea {
+  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);
+  min-height: calc(var(--basefn-form-input-height) * 2);
+  padding: var(--basefn-form-input-padding-y) var(--basefn-form-input-padding-x);
+  background-color: var(--basefn-form-input-bg);
+  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;
+  resize: vertical;
+  transition: border-color var(--basefn-transition-fast), box-shadow var(--basefn-transition-fast);
+}
+
+.basefn-textarea::placeholder {
+  color: var(--basefn-form-input-placeholder);
+  opacity: 1;
+}
+
+.basefn-textarea: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-textarea: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;
+  resize: none;
+}
+
+.basefn-textarea:disabled::placeholder {
+  color: var(--basefn-form-input-disabled-text);
+}

package/src/components/Basefn__Textarea.res

@@ -0,0 +1,28 @@
+%%raw(`import './Basefn__Textarea.css'`)
+
+open Xote
+
+@jsx.component
+let make = (
+  ~value: ReactiveProp.t<string>,
+  ~onInput=?,
+  ~placeholder: string="",
+  ~disabled: bool=false,
+) => {
+  let onInput = (e: Dom.event) => {
+    let t = Basefn__Dom.target(e)
+    let v = t["value"]
+
+    switch value {
+    | Reactive(signal) => Signal.set(signal, v)
+    | _ => ()
+    }
+
+    switch onInput {
+    | Some(onInput) => onInput(v)
+    | None => ()
+    }
+  }
+
+  <textarea class="basefn-textarea" placeholder value disabled onInput />
+}

package/src/components/Basefn__Textarea.res.mjs

@@ -0,0 +1,41 @@
+// 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 './Basefn__Textarea.css'
+;
+
+function Basefn__Textarea(props) {
+  let __disabled = props.disabled;
+  let __placeholder = props.placeholder;
+  let onInput = props.onInput;
+  let value = props.value;
+  let placeholder = __placeholder !== undefined ? __placeholder : "";
+  let disabled = __disabled !== undefined ? __disabled : false;
+  let onInput$1 = e => {
+    let t = Basefn__Dom.target(e);
+    let v = t.value;
+    if (value.TAG === "Reactive") {
+      Xote.Signal.set(value._0, v);
+    }
+    if (onInput !== undefined) {
+      return onInput(v);
+    }
+  };
+  return Xote__JSX.Elements.jsx("textarea", {
+    class: "basefn-textarea",
+    value: value,
+    placeholder: placeholder,
+    disabled: disabled,
+    onInput: onInput$1
+  });
+}
+
+let make = Basefn__Textarea;
+
+export {
+  make,
+}
+/*  Not a pure module */

package/src/components/Basefn__ThemeToggle.css

@@ -0,0 +1,5 @@
+@import "../styles/variables.css";
+
+.basefn-theme-toggle svg {
+  color: var(--basefn-text-tertiary);
+}

package/src/components/Basefn__ThemeToggle.res

@@ -0,0 +1,29 @@
+%%raw(`import './Basefn__ThemeToggle.css'`)
+
+open Xote
+
+@jsx.component
+let make = (~size: [#Sm | #Md | #Lg]=#Md) => {
+  let theme = Basefn__Theme.currentTheme
+
+  let handleClick = e => {
+    Basefn__Dom.preventDefault(e)->ignore
+    Basefn__Dom.stopPropagation(e)->ignore
+    Basefn__Theme.toggleTheme()
+  }
+
+  let icon = Computed.make(() => {
+    switch Signal.get(theme) {
+    | Light => [<Basefn__Icon name={Sun} />]
+    | Dark => [<Basefn__Icon name={Moon} />]
+    }
+  })
+
+  <Basefn__Tooltip content="Toggle theme" position={Bottom}>
+    <Basefn__Button
+      variant=Ghost onClick={handleClick} class={"basefn-theme-toggle"->ReactiveProp.static}
+    >
+      {Component.signalFragment(icon)}
+    </Basefn__Button>
+  </Basefn__Tooltip>
+}