basefn 1.0.0

package/src/components/Basefn__Slider.css

@@ -0,0 +1,97 @@
+.basefn-slider {
+  width: 100%;
+}
+
+.basefn-slider__wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.basefn-slider__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.basefn-slider__label {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #374151;
+}
+
+.basefn-slider__value {
+  font-size: 0.875rem;
+  color: #6b7280;
+  font-weight: 600;
+}
+
+.basefn-slider__input {
+  -webkit-appearance: none;
+  width: 100%;
+  height: 6px;
+  border-radius: 9999px;
+  background: #e5e7eb;
+  outline: none;
+  cursor: pointer;
+}
+
+.basefn-slider__input:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Webkit (Chrome, Safari, Edge) */
+.basefn-slider__input::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: #3b82f6;
+  cursor: pointer;
+  transition: transform 0.1s, box-shadow 0.1s;
+}
+
+.basefn-slider__input::-webkit-slider-thumb:hover {
+  transform: scale(1.1);
+  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
+}
+
+.basefn-slider__input::-webkit-slider-thumb:active {
+  transform: scale(1.05);
+  box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.15);
+}
+
+/* Firefox */
+.basefn-slider__input::-moz-range-thumb {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: #3b82f6;
+  cursor: pointer;
+  border: none;
+  transition: transform 0.1s, box-shadow 0.1s;
+}
+
+.basefn-slider__input::-moz-range-thumb:hover {
+  transform: scale(1.1);
+  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
+}
+
+.basefn-slider__input::-moz-range-thumb:active {
+  transform: scale(1.05);
+  box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.15);
+}
+
+.basefn-slider__markers {
+  display: flex;
+  justify-content: space-between;
+  padding: 0 0.25rem;
+  margin-top: 0.25rem;
+}
+
+.basefn-slider__marker {
+  font-size: 0.75rem;
+  color: #9ca3af;
+}

package/src/components/Basefn__Slider.res

@@ -0,0 +1,68 @@
+%%raw(`import './Basefn__Slider.css'`)
+
+open Xote
+
+@jsx.component
+let make = (
+  ~value: Signal.t<float>,
+  ~onChange: option<float => unit>=?,
+  ~min: float=0.0,
+  ~max: float=100.0,
+  ~step: float=1.0,
+  ~label: option<string>=?,
+  ~showValue: bool=true,
+  ~disabled: bool=false,
+  ~markers: option<array<string>>=?,
+) => {
+  let handleInput = evt => {
+    let target = Obj.magic(evt)["target"]
+    let newValue = Float.fromString(target["value"])->Option.getOr(0.0)
+    Signal.set(value, newValue)
+    switch onChange {
+    | Some(callback) => callback(newValue)
+    | None => ()
+    }
+  }
+
+  <div class="basefn-slider">
+    <div class="basefn-slider__wrapper">
+      {switch (label, showValue) {
+      | (Some(_), _) | (None, true) =>
+        <div class="basefn-slider__header">
+          {switch label {
+          | Some(labelText) =>
+            <span class="basefn-slider__label"> {Component.text(labelText)} </span>
+          | None => <> </>
+          }}
+          {showValue
+            ? <span class="basefn-slider__value">
+                {Component.textSignal(() => Float.toString(Signal.get(value)))}
+              </span>
+            : <> </>}
+        </div>
+      | _ => <> </>
+      }}
+      <input
+        type_="range"
+        class="basefn-slider__input"
+        min={Float.toString(min)}
+        max={Float.toString(max)}
+        step={Float.toString(step)}
+        value={value}
+        onInput={handleInput}
+        disabled
+      />
+      {switch markers {
+      | Some(markerLabels) =>
+        <div class="basefn-slider__markers">
+          {markerLabels
+          ->Array.map(marker => {
+            <span class="basefn-slider__marker"> {Component.text(marker)} </span>
+          })
+          ->Component.fragment}
+        </div>
+      | None => <> </>
+      }}
+    </div>
+  </div>
+}

package/src/components/Basefn__Slider.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 * as Core__Float from "@rescript/core/src/Core__Float.res.mjs";
+import * as Core__Option from "@rescript/core/src/Core__Option.res.mjs";
+
+import './Basefn__Slider.css'
+;
+
+function Basefn__Slider(props) {
+  let markers = props.markers;
+  let __disabled = props.disabled;
+  let __showValue = props.showValue;
+  let label = props.label;
+  let __step = props.step;
+  let __max = props.max;
+  let __min = props.min;
+  let onChange = props.onChange;
+  let value = props.value;
+  let min = __min !== undefined ? __min : 0.0;
+  let max = __max !== undefined ? __max : 100.0;
+  let step = __step !== undefined ? __step : 1.0;
+  let showValue = __showValue !== undefined ? __showValue : true;
+  let disabled = __disabled !== undefined ? __disabled : false;
+  let handleInput = evt => {
+    let target = evt.target;
+    let newValue = Core__Option.getOr(Core__Float.fromString(target.value), 0.0);
+    Xote.Signal.set(value, newValue);
+    if (onChange !== undefined) {
+      return onChange(newValue);
+    }
+  };
+  let tmp;
+  let exit = 0;
+  if (label !== undefined || showValue) {
+    exit = 1;
+  } else {
+    tmp = Xote__JSX.jsx(Xote__JSX.jsxFragment, {});
+  }
+  if (exit === 1) {
+    tmp = Xote__JSX.Elements.jsxs("div", {
+      class: "basefn-slider__header",
+      children: Xote__JSX.array([
+        label !== undefined ? Xote__JSX.Elements.jsx("span", {
+            class: "basefn-slider__label",
+            children: Xote.Component.text(label)
+          }) : Xote__JSX.jsx(Xote__JSX.jsxFragment, {}),
+        showValue ? Xote__JSX.Elements.jsx("span", {
+            class: "basefn-slider__value",
+            children: Xote.Component.textSignal(() => Xote.Signal.get(value).toString())
+          }) : Xote__JSX.jsx(Xote__JSX.jsxFragment, {})
+      ])
+    });
+  }
+  return Xote__JSX.Elements.jsx("div", {
+    class: "basefn-slider",
+    children: Xote__JSX.Elements.jsxs("div", {
+      class: "basefn-slider__wrapper",
+      children: Xote__JSX.array([
+        tmp,
+        Xote__JSX.Elements.jsx("input", {
+          class: "basefn-slider__input",
+          type: "range",
+          value: value,
+          disabled: disabled,
+          min: min.toString(),
+          max: max.toString(),
+          step: step.toString(),
+          onInput: handleInput
+        }),
+        markers !== undefined ? Xote__JSX.Elements.jsx("div", {
+            class: "basefn-slider__markers",
+            children: Xote.Component.fragment(markers.map(marker => Xote__JSX.Elements.jsx("span", {
+              class: "basefn-slider__marker",
+              children: Xote.Component.text(marker)
+            })))
+          }) : Xote__JSX.jsx(Xote__JSX.jsxFragment, {})
+      ])
+    })
+  });
+}
+
+let make = Basefn__Slider;
+
+export {
+  make,
+}
+/*  Not a pure module */

package/src/components/Basefn__Spinner.css

@@ -0,0 +1,63 @@
+.basefn-spinner-container {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.basefn-spinner {
+  display: inline-block;
+  border: 3px solid rgba(0, 0, 0, 0.1);
+  border-top-color: currentColor;
+  border-radius: 50%;
+  animation: basefn-spinner-rotate 0.8s linear infinite;
+}
+
+.basefn-spinner__label {
+  font-size: 0.875rem;
+  color: #6b7280;
+}
+
+/* Sizes */
+.basefn-spinner--sm {
+  width: 1rem;
+  height: 1rem;
+}
+
+.basefn-spinner--md {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.basefn-spinner--lg {
+  width: 2rem;
+  height: 2rem;
+}
+
+.basefn-spinner--xl {
+  width: 3rem;
+  height: 3rem;
+}
+
+/* Variants */
+.basefn-spinner--default {
+  color: #6b7280;
+}
+
+.basefn-spinner--primary {
+  color: #3b82f6;
+}
+
+.basefn-spinner--secondary {
+  color: #1f2937;
+}
+
+/* Animations */
+@keyframes basefn-spinner-rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/src/components/Basefn__Spinner.res

@@ -0,0 +1,44 @@
+%%raw(`import './Basefn__Spinner.css'`)
+
+open Xote
+
+type size = Sm | Md | Lg | Xl
+
+type variant = Default | Primary | Secondary
+
+let sizeToString = (size: size) => {
+  switch size {
+  | Sm => "sm"
+  | Md => "md"
+  | Lg => "lg"
+  | Xl => "xl"
+  }
+}
+
+let variantToString = (variant: variant) => {
+  switch variant {
+  | Default => "default"
+  | Primary => "primary"
+  | Secondary => "secondary"
+  }
+}
+
+@jsx.component
+let make = (~size: size=Md, ~variant: variant=Default, ~label: string="") => {
+  let getClassName = () => {
+    let sizeClass = "basefn-spinner--" ++ sizeToString(size)
+    let variantClass = "basefn-spinner--" ++ variantToString(variant)
+    "basefn-spinner " ++ sizeClass ++ " " ++ variantClass
+  }
+
+  let showLabel = label !== ""
+
+  <div class="basefn-spinner-container">
+    <div class={getClassName()} role="status" ariaLabel="Loading" />
+    {if showLabel {
+      <span class="basefn-spinner__label"> {Component.text(label)} </span>
+    } else {
+      <empty />
+    }}
+  </div>
+}

package/src/components/Basefn__Spinner.res.mjs

@@ -0,0 +1,69 @@
+// 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__Spinner.css'
+;
+
+function sizeToString(size) {
+  switch (size) {
+    case "Sm" :
+      return "sm";
+    case "Md" :
+      return "md";
+    case "Lg" :
+      return "lg";
+    case "Xl" :
+      return "xl";
+  }
+}
+
+function variantToString(variant) {
+  switch (variant) {
+    case "Default" :
+      return "default";
+    case "Primary" :
+      return "primary";
+    case "Secondary" :
+      return "secondary";
+  }
+}
+
+function Basefn__Spinner(props) {
+  let __label = props.label;
+  let __variant = props.variant;
+  let __size = props.size;
+  let size = __size !== undefined ? __size : "Md";
+  let variant = __variant !== undefined ? __variant : "Default";
+  let label = __label !== undefined ? __label : "";
+  let getClassName = () => {
+    let sizeClass = "basefn-spinner--" + sizeToString(size);
+    let variantClass = "basefn-spinner--" + variantToString(variant);
+    return "basefn-spinner " + sizeClass + " " + variantClass;
+  };
+  let showLabel = label !== "";
+  return Xote__JSX.Elements.jsxs("div", {
+    class: "basefn-spinner-container",
+    children: Xote__JSX.array([
+      Xote__JSX.Elements.jsx("div", {
+        class: getClassName(),
+        role: "status",
+        "aria-label": "Loading"
+      }),
+      showLabel ? Xote__JSX.Elements.jsx("span", {
+          class: "basefn-spinner__label",
+          children: Xote.Component.text(label)
+        }) : Xote__JSX.Elements.jsx("empty", {})
+    ])
+  });
+}
+
+let make = Basefn__Spinner;
+
+export {
+  sizeToString,
+  variantToString,
+  make,
+}
+/*  Not a pure module */

package/src/components/Basefn__Stepper.css

@@ -0,0 +1,141 @@
+.basefn-stepper {
+  width: 100%;
+}
+
+.basefn-stepper--horizontal {
+  display: flex;
+  align-items: flex-start;
+}
+
+.basefn-stepper--vertical {
+  display: flex;
+  flex-direction: column;
+}
+
+.basefn-stepper__step {
+  position: relative;
+  flex: 1;
+  display: flex;
+  align-items: flex-start;
+}
+
+.basefn-stepper--vertical .basefn-stepper__step {
+  flex-direction: column;
+  margin-bottom: 2rem;
+}
+
+.basefn-stepper--vertical .basefn-stepper__step:last-child {
+  margin-bottom: 0;
+}
+
+.basefn-stepper__step-header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.basefn-stepper--horizontal .basefn-stepper__step-header {
+  flex-direction: column;
+  text-align: center;
+}
+
+.basefn-stepper__step-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 50%;
+  background-color: #e5e7eb;
+  color: #6b7280;
+  font-weight: 600;
+  font-size: 0.875rem;
+  flex-shrink: 0;
+  transition: all 0.2s;
+  position: relative;
+  z-index: 2;
+}
+
+.basefn-stepper__step--active .basefn-stepper__step-indicator {
+  background-color: #3b82f6;
+  color: white;
+}
+
+.basefn-stepper__step--completed .basefn-stepper__step-indicator {
+  background-color: #10b981;
+  color: white;
+}
+
+.basefn-stepper__step--error .basefn-stepper__step-indicator {
+  background-color: #ef4444;
+  color: white;
+}
+
+.basefn-stepper__step-content {
+  flex: 1;
+}
+
+.basefn-stepper__step-title {
+  font-weight: 600;
+  font-size: 0.875rem;
+  color: #1f2937;
+  margin-bottom: 0.25rem;
+}
+
+.basefn-stepper__step--inactive .basefn-stepper__step-title {
+  color: #9ca3af;
+}
+
+.basefn-stepper__step-description {
+  font-size: 0.75rem;
+  color: #6b7280;
+  line-height: 1.4;
+}
+
+.basefn-stepper__step--inactive .basefn-stepper__step-description {
+  color: #d1d5db;
+}
+
+/* Connector lines */
+.basefn-stepper__connector {
+  position: absolute;
+  background-color: #e5e7eb;
+  transition: background-color 0.2s;
+  z-index: 1;
+}
+
+.basefn-stepper--horizontal .basefn-stepper__connector {
+  height: 2px;
+  top: 1.25rem;
+  left: 50%;
+  width: 100%;
+  transform: translateX(1.25rem);
+}
+
+.basefn-stepper--horizontal .basefn-stepper__step:last-child .basefn-stepper__connector {
+  display: none;
+}
+
+.basefn-stepper--vertical .basefn-stepper__connector {
+  width: 2px;
+  left: 1.25rem;
+  top: 2.5rem;
+  bottom: -2rem;
+}
+
+.basefn-stepper--vertical .basefn-stepper__step:last-child .basefn-stepper__connector {
+  display: none;
+}
+
+.basefn-stepper__step--completed .basefn-stepper__connector {
+  background-color: #10b981;
+}
+
+/* Optional clickable steps */
+.basefn-stepper__step--clickable .basefn-stepper__step-header {
+  cursor: pointer;
+}
+
+.basefn-stepper__step--clickable .basefn-stepper__step-indicator:hover {
+  transform: scale(1.05);
+}

package/src/components/Basefn__Stepper.res

@@ -0,0 +1,86 @@
+%%raw(`import './Basefn__Stepper.css'`)
+
+open Xote
+
+type orientation = Horizontal | Vertical
+
+type stepStatus = Inactive | Active | Completed | Error
+
+type step = {
+  title: string,
+  description: option<string>,
+  status: stepStatus,
+}
+
+let statusToString = (status: stepStatus) => {
+  switch status {
+  | Inactive => "inactive"
+  | Active => "active"
+  | Completed => "completed"
+  | Error => "error"
+  }
+}
+
+@jsx.component
+let make = (
+  ~steps: array<step>,
+  ~currentStep: Signal.t<int>,
+  ~orientation: orientation=Horizontal,
+  ~onStepClick: option<int => unit>=?,
+) => {
+  let handleStepClick = (index: int, status: stepStatus) => {
+    switch onStepClick {
+    | Some(callback) =>
+      // Only allow clicking on completed steps or current step in non-linear mode
+      switch status {
+      | Completed | Active => callback(index)
+      | _ => ()
+      }
+    | None => ()
+    }
+  }
+
+  let getStepperClass = () => {
+    let orientationClass = switch orientation {
+    | Horizontal => "basefn-stepper--horizontal"
+    | Vertical => "basefn-stepper--vertical"
+    }
+    "basefn-stepper " ++ orientationClass
+  }
+
+  let getStepClass = (status: stepStatus, clickable: bool) => {
+    let statusClass = "basefn-stepper__step--" ++ statusToString(status)
+    let clickableClass = clickable ? " basefn-stepper__step--clickable" : ""
+    "basefn-stepper__step " ++ statusClass ++ clickableClass
+  }
+
+  <div class={getStepperClass()}>
+    {steps
+    ->Array.mapWithIndex((step, index) => {
+      let isClickable =
+        onStepClick->Option.isSome && (step.status == Completed || step.status == Active)
+
+      <div key={Int.toString(index)} class={getStepClass(step.status, isClickable)}>
+        <div class="basefn-stepper__step-header" onClick={_ => handleStepClick(index, step.status)}>
+          <div class="basefn-stepper__step-indicator">
+            {switch step.status {
+            | Completed => Component.text("\u2713")
+            | Error => Component.text("\u00d7")
+            | _ => Component.text(Int.toString(index + 1))
+            }}
+          </div>
+          <div class="basefn-stepper__step-content">
+            <div class="basefn-stepper__step-title"> {Component.text(step.title)} </div>
+            {switch step.description {
+            | Some(desc) =>
+              <div class="basefn-stepper__step-description"> {Component.text(desc)} </div>
+            | None => <> </>
+            }}
+          </div>
+        </div>
+        <div class="basefn-stepper__connector" />
+      </div>
+    })
+    ->Component.fragment}
+  </div>
+}