basefn 1.0.0

package/src/components/Basefn__Label.res

@@ -0,0 +1,18 @@
+%%raw(`import './Basefn__Label.css'`)
+
+open Xote
+
+@jsx.component
+let make = (~text: string, ~required: bool=false) => {
+  let getClassName = () => {
+    let base = "basefn-label"
+    if required {
+      base ++ " basefn-label--required"
+    } else {
+      base
+    }
+  }
+
+  // TODO: Add htmlFor support to Xote JSX props
+  <label class={getClassName()}> {Component.text(text)} </label>
+}

package/src/components/Basefn__Label.res.mjs

@@ -0,0 +1,24 @@
+// 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__Label.css'
+;
+
+function Basefn__Label(props) {
+  let __required = props.required;
+  let required = __required !== undefined ? __required : false;
+  let base = "basefn-label";
+  return Xote__JSX.Elements.jsx("label", {
+    class: required ? base + " basefn-label--required" : base,
+    children: Xote.Component.text(props.text)
+  });
+}
+
+let make = Basefn__Label;
+
+export {
+  make,
+}
+/*  Not a pure module */

package/src/components/Basefn__Modal.css

@@ -0,0 +1,100 @@
+.basefn-modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background-color: var(--basefn-surface-overlay);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  animation: basefn-modal-fade-in 0.2s ease-out;
+}
+
+.basefn-modal {
+  background: var(--basefn-bg-primary);
+  border-radius: 0.5rem;
+  box-shadow: var(--basefn-shadow-lg);
+  max-width: 90vw;
+  max-height: 90vh;
+  overflow: auto;
+  animation: basefn-modal-slide-in 0.3s ease-out;
+}
+
+.basefn-modal--sm {
+  width: 400px;
+}
+
+.basefn-modal--md {
+  width: 600px;
+}
+
+.basefn-modal--lg {
+  width: 800px;
+}
+
+.basefn-modal--xl {
+  width: 1000px;
+}
+
+.basefn-modal__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1.5rem;
+  border-bottom: 1px solid var(--basefn-border-primary);
+}
+
+.basefn-modal__title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--basefn-text-primary);
+  margin: 0;
+}
+
+.basefn-modal__close {
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  color: var(--basefn-text-tertiary);
+  cursor: pointer;
+  padding: 0.25rem;
+  line-height: 1;
+  transition: color 0.2s;
+}
+
+.basefn-modal__close:hover {
+  color: var(--basefn-text-primary);
+}
+
+.basefn-modal__body {
+  padding: 1.5rem;
+  color: var(--basefn-text-secondary);
+}
+
+.basefn-modal__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.75rem;
+  padding: 1.5rem;
+  border-top: 1px solid var(--basefn-border-primary);
+}
+
+@keyframes basefn-modal-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes basefn-modal-slide-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}

package/src/components/Basefn__Modal.res

@@ -0,0 +1,74 @@
+%%raw(`import './Basefn__Modal.css'`)
+
+open Xote
+
+type size = Sm | Md | Lg | Xl
+
+let sizeToString = (size: size) => {
+  switch size {
+  | Sm => "sm"
+  | Md => "md"
+  | Lg => "lg"
+  | Xl => "xl"
+  }
+}
+
+@jsx.component
+let make = (
+  ~isOpen: Signal.t<bool>,
+  ~onClose: unit => unit,
+  ~title: option<string>=?,
+  ~size: size=Md,
+  ~closeOnBackdrop: bool=true,
+  ~showCloseButton: bool=true,
+  ~children: Component.node,
+  ~footer: option<Component.node>=?,
+) => {
+  let handleBackdropClick = evt => {
+    if closeOnBackdrop {
+      // Only close if clicking the backdrop itself, not the modal content
+      let target = Obj.magic(evt)["target"]
+      let currentTarget = Obj.magic(evt)["currentTarget"]
+      if target === currentTarget {
+        onClose()
+      }
+    }
+  }
+
+  let getModalClass = () => {
+    let sizeClass = "basefn-modal--" ++ sizeToString(size)
+    "basefn-modal " ++ sizeClass
+  }
+
+  let content = Computed.make(() => {
+    if Signal.get(isOpen) {
+      [
+        <div class="basefn-modal-backdrop" onClick={handleBackdropClick}>
+          <div class={getModalClass()}>
+            {switch title {
+            | Some(titleText) =>
+              <div class="basefn-modal__header">
+                <h2 class="basefn-modal__title"> {Component.text(titleText)} </h2>
+                {showCloseButton
+                  ? <button class="basefn-modal__close" onClick={_ => onClose()}>
+                      {Component.text("\u00d7")}
+                    </button>
+                  : <> </>}
+              </div>
+            | None => <> </>
+            }}
+            <div class="basefn-modal__body"> {children} </div>
+            {switch footer {
+            | Some(footerContent) => <div class="basefn-modal__footer"> {footerContent} </div>
+            | None => <> </>
+            }}
+          </div>
+        </div>,
+      ]
+    } else {
+      []
+    }
+  })
+
+  Component.signalFragment(content)
+}

package/src/components/Basefn__Modal.res.mjs

@@ -0,0 +1,93 @@
+// 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__Modal.css'
+;
+
+function sizeToString(size) {
+  switch (size) {
+    case "Sm" :
+      return "sm";
+    case "Md" :
+      return "md";
+    case "Lg" :
+      return "lg";
+    case "Xl" :
+      return "xl";
+  }
+}
+
+function Basefn__Modal(props) {
+  let footer = props.footer;
+  let children = props.children;
+  let __showCloseButton = props.showCloseButton;
+  let __closeOnBackdrop = props.closeOnBackdrop;
+  let __size = props.size;
+  let title = props.title;
+  let onClose = props.onClose;
+  let isOpen = props.isOpen;
+  let size = __size !== undefined ? __size : "Md";
+  let closeOnBackdrop = __closeOnBackdrop !== undefined ? __closeOnBackdrop : true;
+  let showCloseButton = __showCloseButton !== undefined ? __showCloseButton : true;
+  let handleBackdropClick = evt => {
+    if (!closeOnBackdrop) {
+      return;
+    }
+    let target = evt.target;
+    let currentTarget = evt.currentTarget;
+    if (target === currentTarget) {
+      return onClose();
+    }
+  };
+  let getModalClass = () => {
+    let sizeClass = "basefn-modal--" + sizeToString(size);
+    return "basefn-modal " + sizeClass;
+  };
+  return Xote.Component.signalFragment(Xote.Computed.make(() => {
+    if (Xote.Signal.get(isOpen)) {
+      return [Xote__JSX.Elements.jsx("div", {
+          class: "basefn-modal-backdrop",
+          onClick: handleBackdropClick,
+          children: Xote__JSX.Elements.jsxs("div", {
+            class: getModalClass(),
+            children: Xote__JSX.array([
+              title !== undefined ? Xote__JSX.Elements.jsxs("div", {
+                  class: "basefn-modal__header",
+                  children: Xote__JSX.array([
+                    Xote__JSX.Elements.jsx("h2", {
+                      class: "basefn-modal__title",
+                      children: Xote.Component.text(title)
+                    }),
+                    showCloseButton ? Xote__JSX.Elements.jsx("button", {
+                        class: "basefn-modal__close",
+                        onClick: param => onClose(),
+                        children: Xote.Component.text("\u00d7")
+                      }) : Xote__JSX.jsx(Xote__JSX.jsxFragment, {})
+                  ])
+                }) : Xote__JSX.jsx(Xote__JSX.jsxFragment, {}),
+              Xote__JSX.Elements.jsx("div", {
+                class: "basefn-modal__body",
+                children: children
+              }),
+              footer !== undefined ? Xote__JSX.Elements.jsx("div", {
+                  class: "basefn-modal__footer",
+                  children: footer
+                }) : Xote__JSX.jsx(Xote__JSX.jsxFragment, {})
+            ])
+          })
+        })];
+    } else {
+      return [];
+    }
+  }, undefined));
+}
+
+let make = Basefn__Modal;
+
+export {
+  sizeToString,
+  make,
+}
+/*  Not a pure module */

package/src/components/Basefn__Progress.css

@@ -0,0 +1,69 @@
+.basefn-progress {
+  position: relative;
+  width: 100%;
+  height: 0.75rem;
+  background-color: #e5e7eb;
+  border-radius: 9999px;
+  overflow: hidden;
+}
+
+.basefn-progress--sm {
+  height: 0.5rem;
+}
+
+.basefn-progress--md {
+  height: 0.75rem;
+}
+
+.basefn-progress--lg {
+  height: 1rem;
+}
+
+.basefn-progress__bar {
+  height: 100%;
+  background-color: #3b82f6;
+  border-radius: 9999px;
+  transition: width 0.3s ease-in-out;
+}
+
+.basefn-progress__bar--default {
+  background-color: #6b7280;
+}
+
+.basefn-progress__bar--primary {
+  background-color: #3b82f6;
+}
+
+.basefn-progress__bar--success {
+  background-color: #10b981;
+}
+
+.basefn-progress__bar--warning {
+  background-color: #f59e0b;
+}
+
+.basefn-progress__bar--error {
+  background-color: #ef4444;
+}
+
+.basefn-progress__bar--animated {
+  animation: basefn-progress-indeterminate 1.5s ease-in-out infinite;
+}
+
+.basefn-progress__label {
+  margin-top: 0.5rem;
+  font-size: 0.875rem;
+  color: #6b7280;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+@keyframes basefn-progress-indeterminate {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(400%);
+  }
+}

package/src/components/Basefn__Progress.res

@@ -0,0 +1,88 @@
+%%raw(`import './Basefn__Progress.css'`)
+
+open Xote
+
+type size = Sm | Md | Lg
+
+type variant = Default | Primary | Success | Warning | Error
+
+let sizeToString = (size: size) => {
+  switch size {
+  | Sm => "sm"
+  | Md => "md"
+  | Lg => "lg"
+  }
+}
+
+let variantToString = (variant: variant) => {
+  switch variant {
+  | Default => "default"
+  | Primary => "primary"
+  | Success => "success"
+  | Warning => "warning"
+  | Error => "error"
+  }
+}
+
+@jsx.component
+let make = (
+  ~value: Signal.t<float>,
+  ~max: float=100.0,
+  ~size: size=Md,
+  ~variant: variant=Primary,
+  ~showLabel: bool=false,
+  ~label: option<string>=?,
+  ~indeterminate: bool=false,
+) => {
+  let getProgressClass = () => {
+    let sizeClass = "basefn-progress--" ++ sizeToString(size)
+    "basefn-progress " ++ sizeClass
+  }
+
+  let getBarClass = () => {
+    let variantClass = "basefn-progress__bar--" ++ variantToString(variant)
+    let animatedClass = indeterminate ? " basefn-progress__bar--animated" : ""
+    "basefn-progress__bar " ++ variantClass ++ animatedClass
+  }
+
+  let getPercentage = () => {
+    let currentValue = Signal.get(value)
+    let percent = currentValue /. max *. 100.0
+    let clamped = if percent > 100.0 {
+      100.0
+    } else if percent < 0.0 {
+      0.0
+    } else {
+      percent
+    }
+    Float.toString(clamped)
+  }
+
+  <>
+    <div class={getProgressClass()}>
+      <div
+        class={getBarClass()}
+        style={Computed.make(() => {
+          if indeterminate {
+            "width: 30%"
+          } else {
+            "width: " ++ getPercentage() ++ "%"
+          }
+        })}
+      />
+    </div>
+    {showLabel || label->Option.isSome
+      ? <div class="basefn-progress__label">
+          <span>
+            {Component.text(
+              switch label {
+              | Some(labelText) => labelText
+              | None => "Progress"
+              },
+            )}
+          </span>
+          {!indeterminate ? {Component.textSignal(() => getPercentage() ++ "%")} : <> </>}
+        </div>
+      : <> </>}
+  </>
+}

package/src/components/Basefn__Progress.res.mjs

@@ -0,0 +1,101 @@
+// 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__Progress.css'
+;
+
+function sizeToString(size) {
+  switch (size) {
+    case "Sm" :
+      return "sm";
+    case "Md" :
+      return "md";
+    case "Lg" :
+      return "lg";
+  }
+}
+
+function variantToString(variant) {
+  switch (variant) {
+    case "Default" :
+      return "default";
+    case "Primary" :
+      return "primary";
+    case "Success" :
+      return "success";
+    case "Warning" :
+      return "warning";
+    case "Error" :
+      return "error";
+  }
+}
+
+function Basefn__Progress(props) {
+  let __indeterminate = props.indeterminate;
+  let label = props.label;
+  let __showLabel = props.showLabel;
+  let __variant = props.variant;
+  let __size = props.size;
+  let __max = props.max;
+  let value = props.value;
+  let max = __max !== undefined ? __max : 100.0;
+  let size = __size !== undefined ? __size : "Md";
+  let variant = __variant !== undefined ? __variant : "Primary";
+  let showLabel = __showLabel !== undefined ? __showLabel : false;
+  let indeterminate = __indeterminate !== undefined ? __indeterminate : false;
+  let getProgressClass = () => {
+    let sizeClass = "basefn-progress--" + sizeToString(size);
+    return "basefn-progress " + sizeClass;
+  };
+  let getBarClass = () => {
+    let variantClass = "basefn-progress__bar--" + variantToString(variant);
+    let animatedClass = indeterminate ? " basefn-progress__bar--animated" : "";
+    return "basefn-progress__bar " + variantClass + animatedClass;
+  };
+  let getPercentage = () => {
+    let currentValue = Xote.Signal.get(value);
+    let percent = currentValue / max * 100.0;
+    let clamped = percent > 100.0 ? 100.0 : (
+        percent < 0.0 ? 0.0 : percent
+      );
+    return clamped.toString();
+  };
+  return Xote__JSX.jsxs(Xote__JSX.jsxFragment, {
+    children: Xote__JSX.array([
+      Xote__JSX.Elements.jsx("div", {
+        class: getProgressClass(),
+        children: Xote__JSX.Elements.jsx("div", {
+          class: getBarClass(),
+          style: Xote.Computed.make(() => {
+            if (indeterminate) {
+              return "width: 30%";
+            } else {
+              return "width: " + getPercentage() + "%";
+            }
+          }, undefined)
+        })
+      }),
+      showLabel || Core__Option.isSome(label) ? Xote__JSX.Elements.jsxs("div", {
+          class: "basefn-progress__label",
+          children: Xote__JSX.array([
+            Xote__JSX.Elements.jsx("span", {
+              children: Xote.Component.text(label !== undefined ? label : "Progress")
+            }),
+            indeterminate ? Xote__JSX.jsx(Xote__JSX.jsxFragment, {}) : Xote.Component.textSignal(() => getPercentage() + "%")
+          ])
+        }) : Xote__JSX.jsx(Xote__JSX.jsxFragment, {})
+    ])
+  });
+}
+
+let make = Basefn__Progress;
+
+export {
+  sizeToString,
+  variantToString,
+  make,
+}
+/*  Not a pure module */

package/src/components/Basefn__Radio.css

@@ -0,0 +1,72 @@
+@import '../styles/variables.css';
+
+.basefn-radio-wrapper {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--basefn-spacing-sm);
+  cursor: pointer;
+  user-select: none;
+}
+
+.basefn-radio-wrapper--disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.basefn-radio-input {
+  appearance: none;
+  width: 1.125rem;
+  height: 1.125rem;
+  border: var(--basefn-border-width-thick) solid var(--basefn-form-input-border);
+  border-radius: var(--basefn-radius-full);
+  background-color: var(--basefn-form-input-bg);
+  cursor: pointer;
+  position: relative;
+  transition: all var(--basefn-transition-fast);
+  flex-shrink: 0;
+}
+
+.basefn-radio-input:focus-visible {
+  outline: var(--basefn-focus-ring-width) solid var(--basefn-focus-ring-color);
+  outline-offset: var(--basefn-focus-ring-offset);
+}
+
+.basefn-radio-input:checked {
+  background-color: var(--basefn-color-primary);
+  border-color: var(--basefn-color-primary);
+}
+
+.basefn-radio-input:checked::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 0.375rem;
+  height: 0.375rem;
+  border-radius: var(--basefn-radius-full);
+  background-color: white;
+}
+
+.basefn-radio-input:disabled {
+  background-color: var(--basefn-form-input-disabled-bg);
+  border-color: var(--basefn-form-input-disabled-border);
+  cursor: not-allowed;
+}
+
+.basefn-radio-input:disabled:checked {
+  background-color: var(--basefn-color-neutral-400);
+  border-color: var(--basefn-color-neutral-400);
+}
+
+.basefn-radio-label {
+  font-family: var(--basefn-font-family);
+  font-size: var(--basefn-font-size-base);
+  font-weight: var(--basefn-font-weight-normal);
+  color: var(--basefn-color-neutral-700);
+  line-height: var(--basefn-line-height-normal);
+}
+
+.basefn-radio-wrapper--disabled .basefn-radio-label {
+  color: var(--basefn-form-input-disabled-text);
+}

package/src/components/Basefn__Radio.res

@@ -0,0 +1,35 @@
+%%raw(`import './Basefn__Radio.css'`)
+
+open Xote
+
+@jsx.component
+let make = (
+  ~checked: Signal.t<bool>,
+  ~onChange: option<Dom.event => unit>=?,
+  ~value: string,
+  ~label: string,
+  ~disabled: bool=false,
+  ~name: string,
+) => {
+  let getWrapperClassName = () => {
+    let base = "basefn-radio-wrapper"
+    if disabled {
+      base ++ " basefn-radio-wrapper--disabled"
+    } else {
+      base
+    }
+  }
+
+  <label class={getWrapperClassName()}>
+    <input
+      type_="radio"
+      class="basefn-radio-input"
+      name
+      value
+      checked={checked}
+      disabled={disabled}
+      ?onChange
+    />
+    <span class="basefn-radio-label"> {Component.text(label)} </span>
+  </label>
+}