basefn 1.0.0

package/src/components/Basefn__Button.css

@@ -0,0 +1,83 @@
+@import '../styles/variables.css';
+
+.basefn-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--basefn-font-family);
+  font-size: var(--basefn-font-size-sm);
+  font-weight: var(--basefn-font-weight-medium);
+  line-height: var(--basefn-line-height-tight);
+  height: var(--basefn-button-height);
+  padding: 0 var(--basefn-button-padding-x);
+  border: var(--basefn-border-width) solid transparent;
+  border-radius: var(--basefn-radius-lg);
+  cursor: pointer;
+  transition: all var(--basefn-transition-fast);
+  outline: none;
+  text-decoration: none;
+  white-space: nowrap;
+  user-select: none;
+}
+
+.basefn-button:focus-visible {
+  outline: var(--basefn-focus-ring-width) solid var(--basefn-focus-ring-color);
+  outline-offset: var(--basefn-focus-ring-offset);
+}
+
+/* Primary Variant */
+.basefn-button--primary {
+  background-color: var(--basefn-color-primary);
+  color: white;
+  border-color: var(--basefn-color-primary);
+}
+
+.basefn-button--primary:hover:not(:disabled) {
+  background-color: var(--basefn-color-primary-hover);
+  border-color: var(--basefn-color-primary-hover);
+}
+
+.basefn-button--primary:active:not(:disabled) {
+  background-color: var(--basefn-color-primary-active);
+  border-color: var(--basefn-color-primary-active);
+}
+
+/* Secondary Variant */
+.basefn-button--secondary {
+  background-color: var(--basefn-color-secondary);
+  color: white;
+  border-color: var(--basefn-color-secondary);
+}
+
+.basefn-button--secondary:hover:not(:disabled) {
+  background-color: var(--basefn-color-secondary-hover);
+  border-color: var(--basefn-color-secondary-hover);
+}
+
+.basefn-button--secondary:active:not(:disabled) {
+  background-color: var(--basefn-color-secondary-active);
+  border-color: var(--basefn-color-secondary-active);
+}
+
+/* Ghost Variant */
+.basefn-button--ghost {
+  background-color: transparent;
+  border-color: transparent;
+  border: 0;
+  padding: 0;
+  color: var(--basefn-text-tertiary);
+}
+
+.basefn-button--ghost:hover:not(:disabled) {
+}
+
+.basefn-button--ghost:active:not(:disabled) {
+  background-color: var(--basefn-color-neutral-100);
+  border-color: var(--basefn-color-neutral-500);
+}
+
+/* Disabled State */
+.basefn-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}

package/src/components/Basefn__Button.res

@@ -0,0 +1,32 @@
+open Xote
+
+%%raw(`import './Basefn__Button.css'`)
+
+type variant = Primary | Secondary | Ghost
+
+let variantToString = (variant: variant) => {
+  switch variant {
+  | Primary => "primary"
+  | Secondary => "secondary"
+  | Ghost => "ghost"
+  }
+}
+
+@jsx.component
+let make = (
+  ~children=Xote__JSX.null(),
+  ~class=ReactiveProp.static(""),
+  ~disabled=ReactiveProp.static(false),
+  ~label=ReactiveProp.static(""),
+  ~onClick=evt => {
+    Basefn__Dom.preventDefault(evt)
+  },
+  ~variant: variant=Primary,
+) => {
+  let class = Computed.make(() => {
+    let variantClass = "basefn-button--" ++ variantToString(variant)
+    "basefn-button " ++ variantClass ++ " " ++ class->ReactiveProp.get
+  })
+
+  <button class disabled onClick> {children} </button>
+}

package/src/components/Basefn__Button.res.mjs

@@ -0,0 +1,54 @@
+// 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__Button.css'
+;
+
+function variantToString(variant) {
+  switch (variant) {
+    case "Primary" :
+      return "primary";
+    case "Secondary" :
+      return "secondary";
+    case "Ghost" :
+      return "ghost";
+  }
+}
+
+function Basefn__Button(props) {
+  let __variant = props.variant;
+  let __onClick = props.onClick;
+  let __label = props.label;
+  let __disabled = props.disabled;
+  let __class = props.class;
+  let __children = props.children;
+  let children = __children !== undefined ? __children : Xote__JSX.$$null();
+  let $$class = __class !== undefined ? __class : Xote.ReactiveProp.$$static("");
+  let disabled = __disabled !== undefined ? __disabled : Xote.ReactiveProp.$$static(false);
+  if (__label === undefined) {
+    Xote.ReactiveProp.$$static("");
+  }
+  let onClick = __onClick !== undefined ? __onClick : Basefn__Dom.preventDefault;
+  let variant = __variant !== undefined ? __variant : "Primary";
+  let $$class$1 = Xote.Computed.make(() => {
+    let variantClass = "basefn-button--" + variantToString(variant);
+    return "basefn-button " + variantClass + " " + Xote.ReactiveProp.get($$class);
+  }, undefined);
+  return Xote__JSX.Elements.jsx("button", {
+    class: $$class$1,
+    disabled: disabled,
+    onClick: onClick,
+    children: children
+  });
+}
+
+let make = Basefn__Button;
+
+export {
+  variantToString,
+  make,
+}
+/*  Not a pure module */

package/src/components/Basefn__Card.css

@@ -0,0 +1,50 @@
+@import '../styles/variables.css';
+
+.basefn-card {
+  border-radius: var(--basefn-radius-xl);
+  overflow: hidden;
+  transition: all 0.2s;
+}
+
+.basefn-card__header {
+  padding: 1rem 1.5rem;
+  border-bottom: 1px solid var(--basefn-border-primary);
+  font-weight: 600;
+  font-size: 1.125rem;
+  color: var(--basefn-text-primary);
+  background-color: var(--basefn-bg-secondary);
+}
+
+.basefn-card__body {
+  padding: 1.5rem;
+}
+
+.basefn-card__footer {
+  padding: 1rem 1.5rem;
+  border-top: 1px solid var(--basefn-border-primary);
+  font-size: 0.875rem;
+  color: var(--basefn-text-tertiary);
+  background-color: var(--basefn-bg-secondary);
+}
+
+/* Variants */
+.basefn-card--default {
+  background-color: var(--basefn-bg-primary);
+  border: 1px solid var(--basefn-border-primary);
+}
+
+.basefn-card--outlined {
+  background-color: var(--basefn-bg-primary);
+  border: 2px solid var(--basefn-border-secondary);
+}
+
+.basefn-card--elevated {
+  background-color: var(--basefn-surface-elevated);
+  border: 1px solid var(--basefn-border-primary);
+  box-shadow: var(--basefn-shadow-md);
+}
+
+.basefn-card--elevated:hover {
+  box-shadow: var(--basefn-shadow-lg);
+  transform: translateY(-2px);
+}

package/src/components/Basefn__Card.res

@@ -0,0 +1,45 @@
+%%raw(`import './Basefn__Card.css'`)
+
+open Xote
+
+type variant = Default | Outlined | Elevated
+
+let variantToString = (variant: variant) => {
+  switch variant {
+  | Default => "default"
+  | Outlined => "outlined"
+  | Elevated => "elevated"
+  }
+}
+
+@jsx.component
+let make = (
+  ~children: Xote__JSX.element,
+  ~variant: variant=Default,
+  ~header: option<string>=?,
+  ~footer: option<string>=?,
+  ~style: string="",
+  ~className: string="",
+) => {
+  let getClassName = () => {
+    let variantClass = "basefn-card--" ++ variantToString(variant)
+    let customClass = if className !== "" {
+      " " ++ className
+    } else {
+      ""
+    }
+    "basefn-card " ++ variantClass ++ customClass
+  }
+
+  <div class={getClassName()} style>
+    {switch header {
+    | Some(text) => <div class="basefn-card__header"> {Component.text(text)} </div>
+    | None => <empty />
+    }}
+    <div class="basefn-card__body"> {children} </div>
+    {switch footer {
+    | Some(text) => <div class="basefn-card__footer"> {Component.text(text)} </div>
+    | None => <empty />
+    }}
+  </div>
+}

package/src/components/Basefn__Card.res.mjs

@@ -0,0 +1,60 @@
+// 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__Card.css'
+;
+
+function variantToString(variant) {
+  switch (variant) {
+    case "Default" :
+      return "default";
+    case "Outlined" :
+      return "outlined";
+    case "Elevated" :
+      return "elevated";
+  }
+}
+
+function Basefn__Card(props) {
+  let __className = props.className;
+  let __style = props.style;
+  let footer = props.footer;
+  let header = props.header;
+  let __variant = props.variant;
+  let variant = __variant !== undefined ? __variant : "Default";
+  let style = __style !== undefined ? __style : "";
+  let className = __className !== undefined ? __className : "";
+  let getClassName = () => {
+    let variantClass = "basefn-card--" + variantToString(variant);
+    let customClass = className !== "" ? " " + className : "";
+    return "basefn-card " + variantClass + customClass;
+  };
+  return Xote__JSX.Elements.jsxs("div", {
+    class: getClassName(),
+    style: style,
+    children: Xote__JSX.array([
+      header !== undefined ? Xote__JSX.Elements.jsx("div", {
+          class: "basefn-card__header",
+          children: Xote.Component.text(header)
+        }) : Xote__JSX.Elements.jsx("empty", {}),
+      Xote__JSX.Elements.jsx("div", {
+        class: "basefn-card__body",
+        children: props.children
+      }),
+      footer !== undefined ? Xote__JSX.Elements.jsx("div", {
+          class: "basefn-card__footer",
+          children: Xote.Component.text(footer)
+        }) : Xote__JSX.Elements.jsx("empty", {})
+    ])
+  });
+}
+
+let make = Basefn__Card;
+
+export {
+  variantToString,
+  make,
+}
+/*  Not a pure module */

package/src/components/Basefn__Checkbox.css

@@ -0,0 +1,72 @@
+@import '../styles/variables.css';
+
+.basefn-checkbox-wrapper {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--basefn-spacing-sm);
+  cursor: pointer;
+  user-select: none;
+}
+
+.basefn-checkbox-wrapper--disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.basefn-checkbox-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-sm);
+  background-color: var(--basefn-form-input-bg);
+  cursor: pointer;
+  position: relative;
+  transition: all var(--basefn-transition-fast);
+  flex-shrink: 0;
+}
+
+.basefn-checkbox-input:focus-visible {
+  outline: var(--basefn-focus-ring-width) solid var(--basefn-focus-ring-color);
+  outline-offset: var(--basefn-focus-ring-offset);
+}
+
+.basefn-checkbox-input:checked {
+  background-color: var(--basefn-color-primary);
+  border-color: var(--basefn-color-primary);
+}
+
+.basefn-checkbox-input:checked::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%) rotate(45deg);
+  width: 0.25rem;
+  height: 0.5rem;
+  border: solid white;
+  border-width: 0 2px 2px 0;
+}
+
+.basefn-checkbox-input:disabled {
+  background-color: var(--basefn-form-input-disabled-bg);
+  border-color: var(--basefn-form-input-disabled-border);
+  cursor: not-allowed;
+}
+
+.basefn-checkbox-input:disabled:checked {
+  background-color: var(--basefn-color-neutral-400);
+  border-color: var(--basefn-color-neutral-400);
+}
+
+.basefn-checkbox-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-checkbox-wrapper--disabled .basefn-checkbox-label {
+  color: var(--basefn-form-input-disabled-text);
+}

package/src/components/Basefn__Checkbox.res

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

package/src/components/Basefn__Checkbox.res.mjs

@@ -0,0 +1,36 @@
+// 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__Checkbox.css'
+;
+
+function Basefn__Checkbox(props) {
+  let __disabled = props.disabled;
+  let disabled = __disabled !== undefined ? __disabled : false;
+  let base = "basefn-checkbox-wrapper";
+  return Xote__JSX.Elements.jsxs("label", {
+    class: disabled ? base + " basefn-checkbox-wrapper--disabled" : base,
+    children: Xote__JSX.array([
+      Xote__JSX.Elements.jsx("input", {
+        class: "basefn-checkbox-input",
+        type: "checkbox",
+        disabled: disabled,
+        checked: props.checked,
+        onChange: props.onChange
+      }),
+      Xote__JSX.Elements.jsx("span", {
+        class: "basefn-checkbox-label",
+        children: Xote.Component.text(props.label)
+      })
+    ])
+  });
+}
+
+let make = Basefn__Checkbox;
+
+export {
+  make,
+}
+/*  Not a pure module */

package/src/components/Basefn__Drawer.css

@@ -0,0 +1,168 @@
+.basefn-drawer-backdrop {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 1000;
+  animation: basefn-drawer-fade-in 0.3s ease-out;
+}
+
+.basefn-drawer {
+  position: fixed;
+  background: white;
+  z-index: 1001;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+}
+
+.basefn-drawer--left {
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 320px;
+  animation: basefn-drawer-slide-in-left 0.3s ease-out;
+}
+
+.basefn-drawer--right {
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 320px;
+  animation: basefn-drawer-slide-in-right 0.3s ease-out;
+}
+
+.basefn-drawer--top {
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 320px;
+  animation: basefn-drawer-slide-in-top 0.3s ease-out;
+}
+
+.basefn-drawer--bottom {
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 320px;
+  animation: basefn-drawer-slide-in-bottom 0.3s ease-out;
+}
+
+/* Size variants */
+.basefn-drawer--sm.basefn-drawer--left,
+.basefn-drawer--sm.basefn-drawer--right {
+  width: 240px;
+}
+
+.basefn-drawer--md.basefn-drawer--left,
+.basefn-drawer--md.basefn-drawer--right {
+  width: 320px;
+}
+
+.basefn-drawer--lg.basefn-drawer--left,
+.basefn-drawer--lg.basefn-drawer--right {
+  width: 480px;
+}
+
+.basefn-drawer--sm.basefn-drawer--top,
+.basefn-drawer--sm.basefn-drawer--bottom {
+  height: 240px;
+}
+
+.basefn-drawer--md.basefn-drawer--top,
+.basefn-drawer--md.basefn-drawer--bottom {
+  height: 320px;
+}
+
+.basefn-drawer--lg.basefn-drawer--top,
+.basefn-drawer--lg.basefn-drawer--bottom {
+  height: 480px;
+}
+
+.basefn-drawer__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1.5rem;
+  border-bottom: 1px solid #e5e7eb;
+  flex-shrink: 0;
+}
+
+.basefn-drawer__title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: #1f2937;
+  margin: 0;
+}
+
+.basefn-drawer__close {
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  color: #6b7280;
+  cursor: pointer;
+  padding: 0.25rem;
+  line-height: 1;
+  transition: color 0.2s;
+}
+
+.basefn-drawer__close:hover {
+  color: #1f2937;
+}
+
+.basefn-drawer__body {
+  flex: 1;
+  padding: 1.5rem;
+  overflow-y: auto;
+}
+
+.basefn-drawer__footer {
+  padding: 1.5rem;
+  border-top: 1px solid #e5e7eb;
+  flex-shrink: 0;
+}
+
+/* Animations */
+@keyframes basefn-drawer-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes basefn-drawer-slide-in-left {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes basefn-drawer-slide-in-right {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes basefn-drawer-slide-in-top {
+  from {
+    transform: translateY(-100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes basefn-drawer-slide-in-bottom {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}