basefn 1.0.0

package/src/components/Basefn__AppLayout.css

@@ -0,0 +1,100 @@
+.basefn-app-layout {
+  display: flex;
+  min-height: 100vh;
+  width: 100%;
+}
+
+.basefn-app-layout__sidebar {
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 200;
+}
+
+.basefn-app-layout__main-wrapper {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+/* When sidebar is present, push main content */
+.basefn-app-layout--has-sidebar .basefn-app-layout__main-wrapper {
+  margin-left: 256px; /* Default sidebar width (md) */
+}
+
+.basefn-app-layout--sidebar-sm .basefn-app-layout__main-wrapper {
+  margin-left: 200px;
+}
+
+.basefn-app-layout--sidebar-lg .basefn-app-layout__main-wrapper {
+  margin-left: 320px;
+}
+
+.basefn-app-layout--sidebar-collapsed .basefn-app-layout__main-wrapper {
+  margin-left: 64px;
+  margin-left: 0;
+}
+
+.basefn-app-layout__topbar {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.basefn-app-layout__content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.basefn-app-layout__content-inner {
+  flex: 1;
+  padding: 1rem 2rem;
+  background-color: var(--basefn-bg-secondary);
+}
+
+.basefn-app-layout__content-inner--no-padding {
+  padding: 0;
+}
+
+/* Full width variant */
+.basefn-app-layout--full-width .basefn-app-layout__content-inner {
+  max-width: none;
+}
+
+/* Contained variant */
+.basefn-app-layout--contained .basefn-app-layout__content-inner {
+  max-width: 1280px;
+  margin: 0 auto;
+  width: 100%;
+}
+
+/* Mobile responsiveness */
+@media (max-width: 768px) {
+  .basefn-app-layout__sidebar {
+    transform: translateX(-100%);
+    transition: transform 0.3s ease-out;
+  }
+
+  .basefn-app-layout--sidebar-open .basefn-app-layout__sidebar {
+    transform: translateX(0);
+  }
+
+  .basefn-app-layout--has-sidebar .basefn-app-layout__main-wrapper {
+    margin-left: 0;
+  }
+
+  .basefn-app-layout__sidebar-backdrop {
+    display: none;
+    position: fixed;
+    inset: 0;
+    background-color: var(--basefn-surface-overlay);
+    z-index: 199;
+  }
+
+  .basefn-app-layout--sidebar-open .basefn-app-layout__sidebar-backdrop {
+    display: block;
+  }
+}

package/src/components/Basefn__AppLayout.res

@@ -0,0 +1,74 @@
+%%raw(`import './Basefn__AppLayout.css'`)
+
+open Xote
+
+type contentWidth = FullWidth | Contained
+
+@jsx.component
+let make = (
+  ~sidebar: option<Component.node>=?,
+  ~topbar: option<Component.node>=?,
+  ~children: Component.node,
+  ~contentWidth: contentWidth=FullWidth,
+  ~noPadding: bool=false,
+  ~sidebarSize: option<string>=?, // "sm" | "md" | "lg"
+  ~sidebarCollapsed: bool=false,
+) => {
+  let sidebarOpen = Signal.make(false)
+
+  let getLayoutClass = () => {
+    let hasSidebar = sidebar->Option.isSome ? " basefn-app-layout--has-sidebar" : ""
+    let sidebarSizeClass = switch sidebarSize {
+    | Some("sm") => " basefn-app-layout--sidebar-sm"
+    | Some("lg") => " basefn-app-layout--sidebar-lg"
+    | _ => ""
+    }
+    let collapsedClass = sidebarCollapsed ? " basefn-app-layout--sidebar-collapsed" : ""
+    let sidebarOpenClass = Computed.make(() =>
+      Signal.get(sidebarOpen) ? " basefn-app-layout--sidebar-open" : ""
+    )
+    "basefn-app-layout" ++ hasSidebar ++ sidebarSizeClass ++ collapsedClass
+  }
+
+  let getContentClass = () => {
+    let widthClass = switch contentWidth {
+    | FullWidth => " basefn-app-layout--full-width"
+    | Contained => " basefn-app-layout--contained"
+    }
+    let paddingClass = noPadding ? " basefn-app-layout__content-inner--no-padding" : ""
+    "basefn-app-layout__content-inner" ++ widthClass ++ paddingClass
+  }
+
+  let handleSidebarToggle = () => {
+    Signal.update(sidebarOpen, prev => !prev)
+  }
+
+  <div
+    class={Computed.make(() => {
+      getLayoutClass() ++
+      Signal.get(
+        Computed.make(() => Signal.get(sidebarOpen) ? " basefn-app-layout--sidebar-open" : ""),
+      )
+    })}
+  >
+    {switch sidebar {
+    | Some(sidebarContent) =>
+      <>
+        <div class="basefn-app-layout__sidebar"> {sidebarContent} </div>
+        <div
+          class="basefn-app-layout__sidebar-backdrop" onClick={_ => Signal.set(sidebarOpen, false)}
+        />
+      </>
+    | None => <> </>
+    }}
+    <div class="basefn-app-layout__main-wrapper">
+      {switch topbar {
+      | Some(topbarContent) => <div class="basefn-app-layout__topbar"> {topbarContent} </div>
+      | None => <> </>
+      }}
+      <main class="basefn-app-layout__content">
+        <div class={getContentClass()}> {children} </div>
+      </main>
+    </div>
+  </div>
+}

package/src/components/Basefn__AppLayout.res.mjs

@@ -0,0 +1,100 @@
+// 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__AppLayout.css'
+;
+
+function Basefn__AppLayout(props) {
+  let __sidebarCollapsed = props.sidebarCollapsed;
+  let sidebarSize = props.sidebarSize;
+  let __noPadding = props.noPadding;
+  let __contentWidth = props.contentWidth;
+  let topbar = props.topbar;
+  let sidebar = props.sidebar;
+  let contentWidth = __contentWidth !== undefined ? __contentWidth : "FullWidth";
+  let noPadding = __noPadding !== undefined ? __noPadding : false;
+  let sidebarCollapsed = __sidebarCollapsed !== undefined ? __sidebarCollapsed : false;
+  let sidebarOpen = Xote.Signal.make(false, undefined, undefined);
+  let getLayoutClass = () => {
+    let hasSidebar = Core__Option.isSome(sidebar) ? " basefn-app-layout--has-sidebar" : "";
+    let sidebarSizeClass;
+    if (sidebarSize !== undefined) {
+      switch (sidebarSize) {
+        case "lg" :
+          sidebarSizeClass = " basefn-app-layout--sidebar-lg";
+          break;
+        case "sm" :
+          sidebarSizeClass = " basefn-app-layout--sidebar-sm";
+          break;
+        default:
+          sidebarSizeClass = "";
+      }
+    } else {
+      sidebarSizeClass = "";
+    }
+    let collapsedClass = sidebarCollapsed ? " basefn-app-layout--sidebar-collapsed" : "";
+    Xote.Computed.make(() => {
+      if (Xote.Signal.get(sidebarOpen)) {
+        return " basefn-app-layout--sidebar-open";
+      } else {
+        return "";
+      }
+    }, undefined);
+    return "basefn-app-layout" + hasSidebar + sidebarSizeClass + collapsedClass;
+  };
+  let getContentClass = () => {
+    let widthClass;
+    widthClass = contentWidth === "FullWidth" ? " basefn-app-layout--full-width" : " basefn-app-layout--contained";
+    let paddingClass = noPadding ? " basefn-app-layout__content-inner--no-padding" : "";
+    return "basefn-app-layout__content-inner" + widthClass + paddingClass;
+  };
+  return Xote__JSX.Elements.jsxs("div", {
+    class: Xote.Computed.make(() => getLayoutClass() + Xote.Signal.get(Xote.Computed.make(() => {
+      if (Xote.Signal.get(sidebarOpen)) {
+        return " basefn-app-layout--sidebar-open";
+      } else {
+        return "";
+      }
+    }, undefined)), undefined),
+    children: Xote__JSX.array([
+      sidebar !== undefined ? Xote__JSX.jsxs(Xote__JSX.jsxFragment, {
+          children: Xote__JSX.array([
+            Xote__JSX.Elements.jsx("div", {
+              class: "basefn-app-layout__sidebar",
+              children: sidebar
+            }),
+            Xote__JSX.Elements.jsx("div", {
+              class: "basefn-app-layout__sidebar-backdrop",
+              onClick: param => Xote.Signal.set(sidebarOpen, false)
+            })
+          ])
+        }) : Xote__JSX.jsx(Xote__JSX.jsxFragment, {}),
+      Xote__JSX.Elements.jsxs("div", {
+        class: "basefn-app-layout__main-wrapper",
+        children: Xote__JSX.array([
+          topbar !== undefined ? Xote__JSX.Elements.jsx("div", {
+              class: "basefn-app-layout__topbar",
+              children: topbar
+            }) : Xote__JSX.jsx(Xote__JSX.jsxFragment, {}),
+          Xote__JSX.Elements.jsx("main", {
+            class: "basefn-app-layout__content",
+            children: Xote__JSX.Elements.jsx("div", {
+              class: getContentClass(),
+              children: props.children
+            })
+          })
+        ])
+      })
+    ])
+  });
+}
+
+let make = Basefn__AppLayout;
+
+export {
+  make,
+}
+/*  Not a pure module */

package/src/components/Basefn__Avatar.css

@@ -0,0 +1,25 @@
+@import '../styles/variables.css';
+
+.basefn-avatar {
+  border-radius: 50%;
+	margin: 0;
+	padding: 0;
+	overflow: hidden;
+	width: 2.5rem;
+	height: 2.5rem;
+}
+
+.basefn-avatar--sm {
+	width: 1.5rem;
+	height: 1.5rem;
+}
+
+.basefn-avatar--lg {
+	width: 4rem;
+	height: 4rem;
+}
+
+.basefn-avatar img {
+	width: 100%;
+	height: 100%;
+}

package/src/components/Basefn__Avatar.res

@@ -0,0 +1,23 @@
+%%raw(`import './Basefn__Avatar.css'`)
+
+type size = Sm | Md | Lg
+
+let sizeToString = (size: size) => {
+  switch size {
+  | Sm => "sm"
+  | Md => "md"
+  | Lg => "lg"
+  }
+}
+
+@jsx.component
+let make = (~src=?, ~name=?, ~size=Md) => {
+  let class = {
+    let sizeClass = "basefn-avatar--" ++ sizeToString(size)
+    "basefn-avatar " ++ sizeClass
+  }
+
+  <div class>
+    <img src={src} alt={name} />
+  </div>
+}

package/src/components/Basefn__Avatar.res.mjs

@@ -0,0 +1,40 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+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__Avatar.css'
+;
+
+function sizeToString(size) {
+  switch (size) {
+    case "Sm" :
+      return "sm";
+    case "Md" :
+      return "md";
+    case "Lg" :
+      return "lg";
+  }
+}
+
+function Basefn__Avatar(props) {
+  let __size = props.size;
+  let size = __size !== undefined ? __size : "Md";
+  let sizeClass = "basefn-avatar--" + sizeToString(size);
+  let $$class = "basefn-avatar " + sizeClass;
+  return Xote__JSX.Elements.jsx("div", {
+    class: $$class,
+    children: Xote__JSX.Elements.jsx("img", {
+      src: Primitive_option.some(props.src),
+      alt: Primitive_option.some(props.name)
+    })
+  });
+}
+
+let make = Basefn__Avatar;
+
+export {
+  sizeToString,
+  make,
+}
+/*  Not a pure module */

package/src/components/Basefn__Badge.css

@@ -0,0 +1,71 @@
+.basefn-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 500;
+  border-radius: 9999px;
+  transition: all 0.2s;
+  white-space: nowrap;
+}
+
+/* Sizes */
+.basefn-badge--sm {
+  padding: 0.125rem 0.5rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+.basefn-badge--md {
+  padding: 0.25rem 0.75rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.basefn-badge--lg {
+  padding: 0.375rem 1rem;
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+/* Variants */
+.basefn-badge--default {
+  background-color: var(--basefn-bg-tertiary);
+  color: var(--basefn-text-primary);
+}
+
+.basefn-badge--primary {
+  background-color: var(--basefn-color-primary);
+  color: #ffffff;
+}
+
+.basefn-badge--secondary {
+  background-color: var(--basefn-color-secondary);
+  color: #ffffff;
+}
+
+.basefn-badge--success {
+  background-color: var(--basefn-color-success);
+  color: #ffffff;
+}
+
+.basefn-badge--warning {
+  background-color: var(--basefn-color-warning);
+  color: #ffffff;
+}
+
+.basefn-badge--error {
+  background-color: var(--basefn-color-error);
+  color: #ffffff;
+}
+
+/* Dot indicator */
+.basefn-badge--dot::before {
+  content: '';
+  display: inline-block;
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+  margin-right: 0.5rem;
+  background-color: currentColor;
+  opacity: 0.7;
+}

package/src/components/Basefn__Badge.res

@@ -0,0 +1,43 @@
+%%raw(`import './Basefn__Badge.css'`)
+
+open Xote
+
+type variant = Default | Primary | Secondary | Success | Warning | Error
+
+type size = Sm | Md | Lg
+
+let variantToString = (variant: variant) => {
+  switch variant {
+  | Default => "default"
+  | Primary => "primary"
+  | Secondary => "secondary"
+  | Success => "success"
+  | Warning => "warning"
+  | Error => "error"
+  }
+}
+
+let sizeToString = (size: size) => {
+  switch size {
+  | Sm => "sm"
+  | Md => "md"
+  | Lg => "lg"
+  }
+}
+
+@jsx.component
+let make = (
+  ~label: Signal.t<string>,
+  ~variant: variant=Default,
+  ~size: size=Md,
+  ~dot: bool=false,
+) => {
+  let getClassName = () => {
+    let variantClass = "basefn-badge--" ++ variantToString(variant)
+    let sizeClass = "basefn-badge--" ++ sizeToString(size)
+    let dotClass = dot ? " basefn-badge--dot" : ""
+    "basefn-badge " ++ variantClass ++ " " ++ sizeClass ++ dotClass
+  }
+
+  <span class={getClassName()}> {Component.SignalText(label)} </span>
+}

package/src/components/Basefn__Badge.res.mjs

@@ -0,0 +1,65 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as Xote__JSX from "xote/src/Xote__JSX.res.mjs";
+
+import './Basefn__Badge.css'
+;
+
+function variantToString(variant) {
+  switch (variant) {
+    case "Default" :
+      return "default";
+    case "Primary" :
+      return "primary";
+    case "Secondary" :
+      return "secondary";
+    case "Success" :
+      return "success";
+    case "Warning" :
+      return "warning";
+    case "Error" :
+      return "error";
+  }
+}
+
+function sizeToString(size) {
+  switch (size) {
+    case "Sm" :
+      return "sm";
+    case "Md" :
+      return "md";
+    case "Lg" :
+      return "lg";
+  }
+}
+
+function Basefn__Badge(props) {
+  let __dot = props.dot;
+  let __size = props.size;
+  let __variant = props.variant;
+  let variant = __variant !== undefined ? __variant : "Default";
+  let size = __size !== undefined ? __size : "Md";
+  let dot = __dot !== undefined ? __dot : false;
+  let getClassName = () => {
+    let variantClass = "basefn-badge--" + variantToString(variant);
+    let sizeClass = "basefn-badge--" + sizeToString(size);
+    let dotClass = dot ? " basefn-badge--dot" : "";
+    return "basefn-badge " + variantClass + " " + sizeClass + dotClass;
+  };
+  return Xote__JSX.Elements.jsx("span", {
+    class: getClassName(),
+    children: {
+      TAG: "SignalText",
+      _0: props.label
+    }
+  });
+}
+
+let make = Basefn__Badge;
+
+export {
+  variantToString,
+  sizeToString,
+  make,
+}
+/*  Not a pure module */

package/src/components/Basefn__Breadcrumb.css

@@ -0,0 +1,36 @@
+.basefn-breadcrumb {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+}
+
+.basefn-breadcrumb__item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.basefn-breadcrumb__link {
+  color: #6b7280;
+  text-decoration: none;
+  transition: color 0.2s;
+  cursor: pointer;
+}
+
+.basefn-breadcrumb__link:hover {
+  color: #3b82f6;
+}
+
+.basefn-breadcrumb__link--active {
+  color: #1f2937;
+  font-weight: 500;
+  cursor: default;
+  pointer-events: none;
+}
+
+.basefn-breadcrumb__separator {
+  color: #d1d5db;
+  user-select: none;
+}

package/src/components/Basefn__Breadcrumb.res

@@ -0,0 +1,45 @@
+%%raw(`import './Basefn__Breadcrumb.css'`)
+
+open Xote
+
+type breadcrumbItem = {
+  label: string,
+  href: option<string>,
+  onClick: option<unit => unit>,
+}
+
+@jsx.component
+let make = (~items: array<breadcrumbItem>, ~separator: string="/") => {
+  <nav class="basefn-breadcrumb">
+    {items
+    ->Array.mapWithIndex((item, index) => {
+      let isLast = index == Array.length(items) - 1
+      let className = isLast ? "basefn-breadcrumb__link--active" : ""
+
+      <div key={Int.toString(index)} class="basefn-breadcrumb__item">
+        {switch (item.href, item.onClick) {
+        | (Some(href), _) =>
+          <a href={href} class={"basefn-breadcrumb__link " ++ className}>
+            {Component.text(item.label)}
+          </a>
+        | (None, Some(onClick)) =>
+          <button
+            class={"basefn-breadcrumb__link " ++ className}
+            onClick={_ => onClick()}
+            style="background: none; border: none; padding: 0; font: inherit;"
+          >
+            {Component.text(item.label)}
+          </button>
+        | (None, None) =>
+          <span class={"basefn-breadcrumb__link " ++ className}>
+            {Component.text(item.label)}
+          </span>
+        }}
+        {!isLast
+          ? <span class="basefn-breadcrumb__separator"> {Component.text(separator)} </span>
+          : <> </>}
+      </div>
+    })
+    ->Component.fragment}
+  </nav>
+}

package/src/components/Basefn__Breadcrumb.res.mjs

@@ -0,0 +1,53 @@
+// 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__Breadcrumb.css'
+;
+
+function Basefn__Breadcrumb(props) {
+  let __separator = props.separator;
+  let items = props.items;
+  let separator = __separator !== undefined ? __separator : "/";
+  return Xote__JSX.Elements.jsx("nav", {
+    class: "basefn-breadcrumb",
+    children: Xote.Component.fragment(items.map((item, index) => {
+      let isLast = index === (items.length - 1 | 0);
+      let className = isLast ? "basefn-breadcrumb__link--active" : "";
+      let match = item.href;
+      let match$1 = item.onClick;
+      return Xote__JSX.Elements.jsxsKeyed("div", {
+        class: "basefn-breadcrumb__item",
+        children: Xote__JSX.array([
+          match !== undefined ? Xote__JSX.Elements.jsx("a", {
+              class: "basefn-breadcrumb__link " + className,
+              href: match,
+              children: Xote.Component.text(item.label)
+            }) : (
+              match$1 !== undefined ? Xote__JSX.Elements.jsx("button", {
+                  class: "basefn-breadcrumb__link " + className,
+                  style: "background: none; border: none; padding: 0; font: inherit;",
+                  onClick: param => match$1(),
+                  children: Xote.Component.text(item.label)
+                }) : Xote__JSX.Elements.jsx("span", {
+                  class: "basefn-breadcrumb__link " + className,
+                  children: Xote.Component.text(item.label)
+                })
+            ),
+          isLast ? Xote__JSX.jsx(Xote__JSX.jsxFragment, {}) : Xote__JSX.Elements.jsx("span", {
+              class: "basefn-breadcrumb__separator",
+              children: Xote.Component.text(separator)
+            })
+        ])
+      }, index.toString(), undefined);
+    }))
+  });
+}
+
+let make = Basefn__Breadcrumb;
+
+export {
+  make,
+}
+/*  Not a pure module */