basefn 1.0.0

package/src/components/Basefn__Icon.res

@@ -0,0 +1,196 @@
+%%raw(`import './Basefn__Icon.css'`)
+
+open Xote
+
+// Type for icon data from lucide
+type iconElement = array<(string, dict<string>)>
+
+// External bindings for lucide icons
+@module("lucide/dist/esm/icons/check.js") external check: iconElement = "default"
+@module("lucide/dist/esm/icons/x.js") external x: iconElement = "default"
+@module("lucide/dist/esm/icons/chevron-down.js") external chevronDown: iconElement = "default"
+@module("lucide/dist/esm/icons/chevron-up.js") external chevronUp: iconElement = "default"
+@module("lucide/dist/esm/icons/chevron-left.js") external chevronLeft: iconElement = "default"
+@module("lucide/dist/esm/icons/chevron-right.js") external chevronRight: iconElement = "default"
+@module("lucide/dist/esm/icons/search.js") external search: iconElement = "default"
+@module("lucide/dist/esm/icons/menu.js") external menu: iconElement = "default"
+@module("lucide/dist/esm/icons/house.js") external home: iconElement = "default"
+@module("lucide/dist/esm/icons/user.js") external user: iconElement = "default"
+@module("lucide/dist/esm/icons/settings.js") external settings: iconElement = "default"
+@module("lucide/dist/esm/icons/info.js") external info: iconElement = "default"
+@module("lucide/dist/esm/icons/circle-alert.js") external alertCircle: iconElement = "default"
+@module("lucide/dist/esm/icons/triangle-alert.js")
+external alertTriangle: iconElement = "default"
+@module("lucide/dist/esm/icons/loader.js") external loader: iconElement = "default"
+@module("lucide/dist/esm/icons/plus.js") external plus: iconElement = "default"
+@module("lucide/dist/esm/icons/minus.js") external minus: iconElement = "default"
+@module("lucide/dist/esm/icons/trash.js") external trash: iconElement = "default"
+@module("lucide/dist/esm/icons/pencil.js") external edit: iconElement = "default"
+@module("lucide/dist/esm/icons/copy.js") external copy: iconElement = "default"
+@module("lucide/dist/esm/icons/external-link.js")
+external externalLink: iconElement = "default"
+@module("lucide/dist/esm/icons/download.js") external download: iconElement = "default"
+@module("lucide/dist/esm/icons/upload.js") external upload: iconElement = "default"
+@module("lucide/dist/esm/icons/heart.js") external heart: iconElement = "default"
+@module("lucide/dist/esm/icons/star.js") external star: iconElement = "default"
+@module("lucide/dist/esm/icons/sun.js") external sun: iconElement = "default"
+@module("lucide/dist/esm/icons/moon.js") external moon: iconElement = "default"
+@module("lucide/dist/esm/icons/github.js") external github: iconElement = "default"
+
+// Icon name type
+type name =
+  | Check
+  | X
+  | ChevronDown
+  | ChevronUp
+  | ChevronLeft
+  | ChevronRight
+  | Search
+  | Menu
+  | Home
+  | User
+  | Settings
+  | Info
+  | AlertCircle
+  | AlertTriangle
+  | Loader
+  | Plus
+  | Minus
+  | Trash
+  | Edit
+  | Copy
+  | ExternalLink
+  | Download
+  | Upload
+  | Heart
+  | Star
+  | Sun
+  | Moon
+  | GitHub
+
+// Get icon data from name
+let getIconData = (name: name): iconElement => {
+  switch name {
+  | Check => check
+  | X => x
+  | ChevronDown => chevronDown
+  | ChevronUp => chevronUp
+  | ChevronLeft => chevronLeft
+  | ChevronRight => chevronRight
+  | Search => search
+  | Menu => menu
+  | Home => home
+  | User => user
+  | Settings => settings
+  | Info => info
+  | AlertCircle => alertCircle
+  | AlertTriangle => alertTriangle
+  | Loader => loader
+  | Plus => plus
+  | Minus => minus
+  | Trash => trash
+  | Edit => edit
+  | Copy => copy
+  | ExternalLink => externalLink
+  | Download => download
+  | Upload => upload
+  | Heart => heart
+  | Star => star
+  | Sun => sun
+  | Moon => moon
+  | GitHub => github
+  }
+}
+
+// Size variants
+type size = Sm | Md | Lg | Xl
+
+let sizeToPixels = (size: size): string => {
+  switch size {
+  | Sm => "16"
+  | Md => "24"
+  | Lg => "32"
+  | Xl => "48"
+  }
+}
+
+// Helper to render SVG element attributes as a string
+let renderAttrs = (attrs: dict<string>): string => {
+  Dict.toArray(attrs)
+  ->Array.map(((key, value)) => key ++ "=\"" ++ value ++ "\"")
+  ->Array.join(" ")
+}
+
+// Convert icon data to SVG string
+let iconToSvgInner = (elements: iconElement): string => {
+  elements
+  ->Array.map(((tag, attrs)) => {
+    let attrStr = renderAttrs(attrs)
+
+    switch tag {
+    | "path" | "circle" | "line" | "rect" | "polyline" | "polygon" | "ellipse" =>
+      "<" ++
+      tag ++
+      " " ++
+      attrStr ++ " fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />"
+    | _ => ""
+    }
+  })
+  ->Array.join("")
+}
+
+// Counter for unique IDs
+let iconIdCounter = ref(0)
+
+// Helper to inject SVG HTML into an element by ID
+%%raw(`
+function injectIconHTML(id, html) {
+  setTimeout(() => {
+    const el = document.getElementById(id);
+    if (el && !el.hasAttribute('data-svg-injected')) {
+      el.innerHTML = html;
+      el.setAttribute('data-svg-injected', 'true');
+    }
+  }, 0);
+}
+`)
+
+@val external injectIconHTML: (string, string) => unit = "injectIconHTML"
+
+@jsx.component
+let make = (
+  ~name: name,
+  ~size: size=Md,
+  ~class=ReactiveProp.static(""),
+  ~color=ReactiveProp.static("currentColor"),
+) => {
+  let iconData = getIconData(name)
+  let sizeStr = sizeToPixels(size)
+  let svgInner = iconToSvgInner(iconData)
+
+  let className = Computed.make(() => {
+    "basefn-icon " ++ class->ReactiveProp.get
+  })
+
+  let style = Computed.make(() => {
+    "color: " ++
+    color->ReactiveProp.get ++
+    "; width: " ++
+    sizeStr ++
+    "px; height: " ++
+    sizeStr ++ "px; display: inline-flex;"
+  })
+
+  // Create complete SVG HTML
+  let svgHtml = `<svg width="${sizeStr}" height="${sizeStr}" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="width: 100%; height: 100%;">${svgInner}</svg>`
+
+  // Generate unique ID
+  iconIdCounter := iconIdCounter.contents + 1
+  let iconId = "basefn-icon-" ++ Int.toString(iconIdCounter.contents)
+
+  // Inject the HTML after render
+  let _ = injectIconHTML(iconId, svgHtml)
+
+  // Return a span element with the unique ID
+  <span id={iconId} class={className} style />
+}

package/src/components/Basefn__Icon.res.mjs

@@ -0,0 +1,183 @@
+// 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 XJs from "lucide/dist/esm/icons/x.js";
+import SunJs from "lucide/dist/esm/icons/sun.js";
+import CopyJs from "lucide/dist/esm/icons/copy.js";
+import InfoJs from "lucide/dist/esm/icons/info.js";
+import MenuJs from "lucide/dist/esm/icons/menu.js";
+import MoonJs from "lucide/dist/esm/icons/moon.js";
+import PlusJs from "lucide/dist/esm/icons/plus.js";
+import StarJs from "lucide/dist/esm/icons/star.js";
+import UserJs from "lucide/dist/esm/icons/user.js";
+import CheckJs from "lucide/dist/esm/icons/check.js";
+import HeartJs from "lucide/dist/esm/icons/heart.js";
+import HouseJs from "lucide/dist/esm/icons/house.js";
+import MinusJs from "lucide/dist/esm/icons/minus.js";
+import TrashJs from "lucide/dist/esm/icons/trash.js";
+import GithubJs from "lucide/dist/esm/icons/github.js";
+import LoaderJs from "lucide/dist/esm/icons/loader.js";
+import PencilJs from "lucide/dist/esm/icons/pencil.js";
+import SearchJs from "lucide/dist/esm/icons/search.js";
+import UploadJs from "lucide/dist/esm/icons/upload.js";
+import DownloadJs from "lucide/dist/esm/icons/download.js";
+import SettingsJs from "lucide/dist/esm/icons/settings.js";
+import ChevronUpJs from "lucide/dist/esm/icons/chevron-up.js";
+import ChevronDownJs from "lucide/dist/esm/icons/chevron-down.js";
+import ChevronLeftJs from "lucide/dist/esm/icons/chevron-left.js";
+import CircleAlertJs from "lucide/dist/esm/icons/circle-alert.js";
+import ChevronRightJs from "lucide/dist/esm/icons/chevron-right.js";
+import ExternalLinkJs from "lucide/dist/esm/icons/external-link.js";
+import TriangleAlertJs from "lucide/dist/esm/icons/triangle-alert.js";
+
+import './Basefn__Icon.css'
+;
+
+function getIconData(name) {
+  switch (name) {
+    case "Check" :
+      return CheckJs;
+    case "X" :
+      return XJs;
+    case "ChevronDown" :
+      return ChevronDownJs;
+    case "ChevronUp" :
+      return ChevronUpJs;
+    case "ChevronLeft" :
+      return ChevronLeftJs;
+    case "ChevronRight" :
+      return ChevronRightJs;
+    case "Search" :
+      return SearchJs;
+    case "Menu" :
+      return MenuJs;
+    case "Home" :
+      return HouseJs;
+    case "User" :
+      return UserJs;
+    case "Settings" :
+      return SettingsJs;
+    case "Info" :
+      return InfoJs;
+    case "AlertCircle" :
+      return CircleAlertJs;
+    case "AlertTriangle" :
+      return TriangleAlertJs;
+    case "Loader" :
+      return LoaderJs;
+    case "Plus" :
+      return PlusJs;
+    case "Minus" :
+      return MinusJs;
+    case "Trash" :
+      return TrashJs;
+    case "Edit" :
+      return PencilJs;
+    case "Copy" :
+      return CopyJs;
+    case "ExternalLink" :
+      return ExternalLinkJs;
+    case "Download" :
+      return DownloadJs;
+    case "Upload" :
+      return UploadJs;
+    case "Heart" :
+      return HeartJs;
+    case "Star" :
+      return StarJs;
+    case "Sun" :
+      return SunJs;
+    case "Moon" :
+      return MoonJs;
+    case "GitHub" :
+      return GithubJs;
+  }
+}
+
+function sizeToPixels(size) {
+  switch (size) {
+    case "Sm" :
+      return "16";
+    case "Md" :
+      return "24";
+    case "Lg" :
+      return "32";
+    case "Xl" :
+      return "48";
+  }
+}
+
+function renderAttrs(attrs) {
+  return Object.entries(attrs).map(param => param[0] + "=\"" + param[1] + "\"").join(" ");
+}
+
+function iconToSvgInner(elements) {
+  return elements.map(param => {
+    let tag = param[0];
+    let attrStr = renderAttrs(param[1]);
+    switch (tag) {
+      case "circle" :
+      case "ellipse" :
+      case "line" :
+      case "path" :
+      case "polygon" :
+      case "polyline" :
+      case "rect" :
+        break;
+      default:
+        return "";
+    }
+    return "<" + tag + " " + attrStr + " fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />";
+  }).join("");
+}
+
+let iconIdCounter = {
+  contents: 0
+};
+
+function injectIconHTML(id, html) {
+  setTimeout(() => {
+    const el = document.getElementById(id);
+    if (el && !el.hasAttribute('data-svg-injected')) {
+      el.innerHTML = html;
+      el.setAttribute('data-svg-injected', 'true');
+    }
+  }, 0);
+}
+;
+
+function Basefn__Icon(props) {
+  let __color = props.color;
+  let __class = props.class;
+  let __size = props.size;
+  let size = __size !== undefined ? __size : "Md";
+  let $$class = __class !== undefined ? __class : Xote.ReactiveProp.$$static("");
+  let color = __color !== undefined ? __color : Xote.ReactiveProp.$$static("currentColor");
+  let iconData = getIconData(props.name);
+  let sizeStr = sizeToPixels(size);
+  let svgInner = iconToSvgInner(iconData);
+  let className = Xote.Computed.make(() => "basefn-icon " + Xote.ReactiveProp.get($$class), undefined);
+  let style = Xote.Computed.make(() => "color: " + Xote.ReactiveProp.get(color) + "; width: " + sizeStr + "px; height: " + sizeStr + "px; display: inline-flex;", undefined);
+  let svgHtml = `<svg width="` + sizeStr + `" height="` + sizeStr + `" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="width: 100%; height: 100%;">` + svgInner + `</svg>`;
+  iconIdCounter.contents = iconIdCounter.contents + 1 | 0;
+  let iconId = "basefn-icon-" + iconIdCounter.contents.toString();
+  injectIconHTML(iconId, svgHtml);
+  return Xote__JSX.Elements.jsx("span", {
+    id: iconId,
+    class: className,
+    style: style
+  });
+}
+
+let make = Basefn__Icon;
+
+export {
+  getIconData,
+  sizeToPixels,
+  renderAttrs,
+  iconToSvgInner,
+  iconIdCounter,
+  make,
+}
+/*  Not a pure module */

package/src/components/Basefn__Input.css

@@ -0,0 +1,44 @@
+@import '../styles/variables.css';
+
+.basefn-input {
+  display: block;
+  width: 100%;
+  font-family: var(--basefn-font-family);
+  font-size: var(--basefn-font-size-sm);
+  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);
+  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-lg);
+  outline: none;
+  transition: border-color var(--basefn-transition-fast), box-shadow var(--basefn-transition-fast);
+}
+
+.basefn-input::placeholder {
+  color: var(--basefn-form-input-placeholder);
+  opacity: 1;
+}
+
+.basefn-input: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-input: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;
+}
+
+.basefn-input:disabled::placeholder {
+  color: var(--basefn-form-input-disabled-text);
+}
+
+.basefn-input--radius-full {
+  border-radius: 10rem;
+  padding: .5rem 1.25rem;
+}

package/src/components/Basefn__Input.res

@@ -0,0 +1,48 @@
+open Xote
+
+%%raw(`import './Basefn__Input.css'`)
+
+type inputType = Text | Email | Password | Number | Tel | Url | Search | Date | Time
+
+type inputSize = Sm | Md
+
+type radius = Full | Md
+
+let inputTypeToString = (type_: inputType) => {
+  switch type_ {
+  | Text => "text"
+  | Email => "email"
+  | Password => "password"
+  | Number => "number"
+  | Tel => "tel"
+  | Url => "url"
+  | Search => "search"
+  | Date => "date"
+  | Time => "time"
+  }
+}
+
+@jsx.component
+let make = (
+  ~value: ReactiveProp.t<string>,
+  ~onInput: option<Dom.event => unit>=?,
+  ~type_: inputType=Text,
+  ~placeholder: string="",
+  ~disabled=ReactiveProp.static(false),
+  ~size=Md,
+  ~radius=Md,
+  ~name=?,
+  ~style=?,
+) => {
+  let class = {
+    let radiusClass = switch radius {
+    | Full => "basefn-input--radius-full"
+    | _ => ""
+    }
+
+    "basefn-input " ++ radiusClass
+  }
+  <input
+    class ?style type_={inputTypeToString(type_)} placeholder value={value} disabled name ?onInput
+  />
+}

package/src/components/Basefn__Input.res.mjs

@@ -0,0 +1,63 @@
+// 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 Primitive_option from "@rescript/runtime/lib/es6/Primitive_option.js";
+
+import './Basefn__Input.css'
+;
+
+function inputTypeToString(type_) {
+  switch (type_) {
+    case "Text" :
+      return "text";
+    case "Email" :
+      return "email";
+    case "Password" :
+      return "password";
+    case "Number" :
+      return "number";
+    case "Tel" :
+      return "tel";
+    case "Url" :
+      return "url";
+    case "Search" :
+      return "search";
+    case "Date" :
+      return "date";
+    case "Time" :
+      return "time";
+  }
+}
+
+function Basefn__Input(props) {
+  let __radius = props.radius;
+  let __disabled = props.disabled;
+  let __placeholder = props.placeholder;
+  let __type_ = props.type_;
+  let type_ = __type_ !== undefined ? __type_ : "Text";
+  let placeholder = __placeholder !== undefined ? __placeholder : "";
+  let disabled = __disabled !== undefined ? __disabled : Xote.ReactiveProp.$$static(false);
+  let radius = __radius !== undefined ? __radius : "Md";
+  let radiusClass;
+  radiusClass = radius === "Full" ? "basefn-input--radius-full" : "";
+  let $$class = "basefn-input " + radiusClass;
+  return Xote__JSX.Elements.jsx("input", {
+    class: $$class,
+    style: props.style,
+    type: inputTypeToString(type_),
+    name: Primitive_option.some(props.name),
+    value: props.value,
+    placeholder: placeholder,
+    disabled: disabled,
+    onInput: props.onInput
+  });
+}
+
+let make = Basefn__Input;
+
+export {
+  inputTypeToString,
+  make,
+}
+/*  Not a pure module */

package/src/components/Basefn__Kbd.css

@@ -0,0 +1,65 @@
+.basefn-kbd {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-weight: 500;
+}
+
+.basefn-kbd__key {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid #d1d5db;
+  border-bottom-width: 2px;
+  border-radius: 0.375rem;
+  background-color: #f9fafb;
+  color: #374151;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+}
+
+.basefn-kbd__separator {
+  color: #9ca3af;
+  font-weight: 400;
+  margin: 0 0.125rem;
+}
+
+/* Sizes */
+.basefn-kbd--sm .basefn-kbd__key {
+  padding: 0.125rem 0.375rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  min-width: 1.25rem;
+}
+
+.basefn-kbd--sm .basefn-kbd__separator {
+  font-size: 0.75rem;
+}
+
+.basefn-kbd--md .basefn-kbd__key {
+  padding: 0.25rem 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  min-width: 1.5rem;
+}
+
+.basefn-kbd--md .basefn-kbd__separator {
+  font-size: 0.875rem;
+}
+
+.basefn-kbd--lg .basefn-kbd__key {
+  padding: 0.375rem 0.75rem;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  min-width: 2rem;
+}
+
+.basefn-kbd--lg .basefn-kbd__separator {
+  font-size: 1rem;
+}
+
+/* Hover effect */
+.basefn-kbd__key:hover {
+  background-color: #f3f4f6;
+  border-color: #9ca3af;
+}

package/src/components/Basefn__Kbd.res

@@ -0,0 +1,27 @@
+%%raw(`import './Basefn__Kbd.css'`)
+
+open Xote
+
+type size = Sm | Md | Lg
+
+let sizeToString = (size: size) => {
+  switch size {
+  | Sm => "sm"
+  | Md => "md"
+  | Lg => "lg"
+  }
+}
+
+@jsx.component
+let make = (~keys: Signal.t<array<string>>, ~size: size=Md) => {
+  let getClassName = () => {
+    let sizeClass = "basefn-kbd--" ++ sizeToString(size)
+    "basefn-kbd " ++ sizeClass
+  }
+
+  <kbd class={getClassName()}>
+    {Component.list(keys, key => {
+      <span class="basefn-kbd__key"> {Component.text(key)} </span>
+    })}
+  </kbd>
+}

package/src/components/Basefn__Kbd.res.mjs

@@ -0,0 +1,42 @@
+// 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__Kbd.css'
+;
+
+function sizeToString(size) {
+  switch (size) {
+    case "Sm" :
+      return "sm";
+    case "Md" :
+      return "md";
+    case "Lg" :
+      return "lg";
+  }
+}
+
+function Basefn__Kbd(props) {
+  let __size = props.size;
+  let size = __size !== undefined ? __size : "Md";
+  let getClassName = () => {
+    let sizeClass = "basefn-kbd--" + sizeToString(size);
+    return "basefn-kbd " + sizeClass;
+  };
+  return Xote__JSX.Elements.jsx("kbd", {
+    class: getClassName(),
+    children: Xote.Component.list(props.keys, key => Xote__JSX.Elements.jsx("span", {
+      class: "basefn-kbd__key",
+      children: Xote.Component.text(key)
+    }))
+  });
+}
+
+let make = Basefn__Kbd;
+
+export {
+  sizeToString,
+  make,
+}
+/*  Not a pure module */

package/src/components/Basefn__Label.css

@@ -0,0 +1,22 @@
+@import '../styles/variables.css';
+
+.basefn-label {
+  display: inline-block;
+  font-family: var(--basefn-font-family);
+  font-size: var(--basefn-font-size-sm);
+  font-weight: var(--basefn-font-weight-medium);
+  color: var(--basefn-text-secondary);
+  line-height: var(--basefn-line-height-normal);
+  margin-bottom: var(--basefn-spacing-xs);
+  cursor: pointer;
+}
+
+.basefn-label--required::after {
+  content: ' *';
+  color: var(--basefn-color-error);
+  font-weight: var(--basefn-font-weight-bold);
+}
+
+.basefn-label:empty {
+  display: none;
+}