basefn 1.0.0

package/src/components/Basefn__Typography.res.mjs

@@ -0,0 +1,175 @@
+// 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__Typography.css'
+;
+
+function variantToTag(variant) {
+  switch (variant) {
+    case "H1" :
+      return "h1";
+    case "H2" :
+      return "h2";
+    case "H3" :
+      return "h3";
+    case "H4" :
+      return "h4";
+    case "H5" :
+      return "h5";
+    case "H6" :
+      return "h6";
+    case "Small" :
+      return "small";
+    case "P" :
+    case "Lead" :
+    case "Muted" :
+      return "p";
+    case "Code" :
+      return "code";
+    case "Unstyled" :
+      return "div";
+  }
+}
+
+function variantToClass(variant) {
+  switch (variant) {
+    case "H1" :
+      return "basefn-typography--h1";
+    case "H2" :
+      return "basefn-typography--h2";
+    case "H3" :
+      return "basefn-typography--h3";
+    case "H4" :
+      return "basefn-typography--h4";
+    case "H5" :
+      return "basefn-typography--h5";
+    case "H6" :
+      return "basefn-typography--h6";
+    case "P" :
+      return "basefn-typography--p";
+    case "Small" :
+      return "basefn-typography--small";
+    case "Lead" :
+      return "basefn-typography--lead";
+    case "Muted" :
+      return "basefn-typography--muted";
+    case "Code" :
+      return "basefn-typography--code";
+    case "Unstyled" :
+      return "basefn-typography--unstyled";
+  }
+}
+
+function alignToString(align) {
+  switch (align) {
+    case "Left" :
+      return "left";
+    case "Center" :
+      return "center";
+    case "Right" :
+      return "right";
+    case "Justify" :
+      return "justify";
+  }
+}
+
+function Basefn__Typography(props) {
+  let style = props.style;
+  let __class = props.class;
+  let align = props.align;
+  let __variant = props.variant;
+  let text = props.text;
+  let variant = __variant !== undefined ? __variant : "P";
+  let $$class = __class !== undefined ? __class : "";
+  let variantClass = variantToClass(variant);
+  let baseClass = "basefn-typography " + variantClass;
+  let alignClass = align !== undefined ? " basefn-typography--" + alignToString(align) : "";
+  let customClass = $$class !== "" ? " " + $$class : "";
+  let $$class$1 = baseClass + alignClass + customClass;
+  let renderText = text => {
+    if (text.TAG === "Reactive") {
+      return {
+        TAG: "SignalText",
+        _0: text._0
+      };
+    } else {
+      return Xote.Component.text(text._0);
+    }
+  };
+  switch (variant) {
+    case "H1" :
+      return Xote__JSX.Elements.jsx("h1", {
+        class: $$class$1,
+        style: style,
+        children: renderText(text)
+      });
+    case "H2" :
+      return Xote__JSX.Elements.jsx("h2", {
+        class: $$class$1,
+        style: style,
+        children: renderText(text)
+      });
+    case "H3" :
+      return Xote__JSX.Elements.jsx("h3", {
+        class: $$class$1,
+        style: style,
+        children: renderText(text)
+      });
+    case "H4" :
+      return Xote__JSX.Elements.jsx("h4", {
+        class: $$class$1,
+        style: style,
+        children: renderText(text)
+      });
+    case "H5" :
+      return Xote__JSX.Elements.jsx("h5", {
+        class: $$class$1,
+        style: style,
+        children: renderText(text)
+      });
+    case "H6" :
+      return Xote__JSX.Elements.jsx("h6", {
+        class: $$class$1,
+        style: style,
+        children: renderText(text)
+      });
+    case "Small" :
+      return Xote__JSX.Elements.jsx("small", {
+        class: $$class$1,
+        style: style,
+        children: renderText(text)
+      });
+    case "P" :
+    case "Lead" :
+    case "Muted" :
+      return Xote__JSX.Elements.jsx("p", {
+        class: $$class$1,
+        style: style,
+        children: renderText(text)
+      });
+    case "Code" :
+      return Xote__JSX.Elements.jsx("code", {
+        class: $$class$1,
+        style: style,
+        children: renderText(text)
+      });
+    case "Unstyled" :
+      return Xote__JSX.Elements.jsx("div", {
+        class: $$class$1,
+        style: style,
+        children: renderText(text)
+      });
+  }
+}
+
+let make = Basefn__Typography;
+
+export {
+  variantToTag,
+  variantToClass,
+  alignToString,
+  make,
+}
+/*  Not a pure module */

package/src/styles/Basefn__Theme.res

@@ -0,0 +1,63 @@
+open Xote
+
+type theme = Light | Dark
+
+// Global theme state
+let currentTheme = Signal.make(Light)
+
+// Convert theme to string
+let themeToString = (theme: theme) => {
+  switch theme {
+  | Light => "light"
+  | Dark => "dark"
+  }
+}
+
+// Convert string to theme
+let stringToTheme = (str: string) => {
+  switch str {
+  | "dark" => Dark
+  | _ => Light
+  }
+}
+
+// Apply theme to document
+let applyTheme = (theme: theme) => {
+  let themeValue = themeToString(theme)
+
+  (
+    %raw(`function(val) { document.documentElement.setAttribute('data-theme', val) }`): string => unit
+  )(themeValue)
+}
+
+// LocalStorage persistence
+let saveThemePreference = (theme: theme) => {
+  let themeValue = themeToString(theme)
+  (%raw(`function(val) { localStorage.setItem('basefn-theme', val) }`): string => unit)(themeValue)
+}
+
+let loadThemePreference = () => {
+  let stored: option<string> = %raw(`localStorage.getItem('basefn-theme')`)
+  switch stored {
+  | Some(value) => stringToTheme(value)
+  | None => Light
+  }
+}
+
+// Toggle between Light and Dark
+let toggleTheme = () => {
+  let newTheme = switch Signal.get(currentTheme) {
+  | Light => Dark
+  | Dark => Light
+  }
+  Signal.set(currentTheme, newTheme)
+  applyTheme(newTheme)
+  saveThemePreference(newTheme)
+}
+
+// Initialize theme system
+let init = () => {
+  let stored = loadThemePreference()
+  Signal.set(currentTheme, stored)
+  applyTheme(stored)
+}

package/src/styles/Basefn__Theme.res.mjs

@@ -0,0 +1,65 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as Xote from "xote/src/Xote.res.mjs";
+
+let currentTheme = Xote.Signal.make("Light", undefined, undefined);
+
+function themeToString(theme) {
+  if (theme === "Light") {
+    return "light";
+  } else {
+    return "dark";
+  }
+}
+
+function stringToTheme(str) {
+  if (str === "dark") {
+    return "Dark";
+  } else {
+    return "Light";
+  }
+}
+
+function applyTheme(theme) {
+  ((function(val) { document.documentElement.setAttribute('data-theme', val) })(themeToString(theme)));
+}
+
+function saveThemePreference(theme) {
+  ((function(val) { localStorage.setItem('basefn-theme', val) })(themeToString(theme)));
+}
+
+function loadThemePreference() {
+  let stored = (localStorage.getItem('basefn-theme'));
+  if (stored !== undefined) {
+    return stringToTheme(stored);
+  } else {
+    return "Light";
+  }
+}
+
+function toggleTheme() {
+  let match = Xote.Signal.get(currentTheme);
+  let newTheme;
+  newTheme = match === "Light" ? "Dark" : "Light";
+  Xote.Signal.set(currentTheme, newTheme);
+  applyTheme(newTheme);
+  saveThemePreference(newTheme);
+}
+
+function init() {
+  let stored = loadThemePreference();
+  Xote.Signal.set(currentTheme, stored);
+  applyTheme(stored);
+}
+
+export {
+  currentTheme,
+  themeToString,
+  stringToTheme,
+  applyTheme,
+  saveThemePreference,
+  loadThemePreference,
+  toggleTheme,
+  init,
+}
+/* currentTheme Not a pure module */

package/src/styles/variables.css

@@ -0,0 +1,199 @@
+@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');
+
+
+:root {
+  /* Color Palette - Neutral Theme */
+  --basefn-color-primary: #3b82f6;
+  --basefn-color-primary-background: #eff6ff;
+  --basefn-color-primary-hover: #2563eb;
+  --basefn-color-primary-active: #1d4ed8;
+
+  --basefn-color-secondary: #111827;
+  --basefn-color-secondary-hover: #4b5563;
+  --basefn-color-secondary-active: #374151;
+
+  --basefn-color-neutral-50: #f9fafb;
+  --basefn-color-neutral-100: #f3f4f6;
+  --basefn-color-neutral-200: #e5e7eb;
+  --basefn-color-neutral-300: #d1d5db;
+  --basefn-color-neutral-400: #9ca3af;
+  --basefn-color-neutral-500: #6b7280;
+  --basefn-color-neutral-600: #4b5563;
+  --basefn-color-neutral-700: #374151;
+  --basefn-color-neutral-800: #1f2937;
+  --basefn-color-neutral-900: #111827;
+
+  --basefn-color-success: #10b981;
+  --basefn-color-error: #ef4444;
+  --basefn-color-warning: #f59e0b;
+  --basefn-color-info: #3b82f6;
+
+  --font-mono: "Source Code", monospace;
+
+  /* Typography */
+  --basefn-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  --basefn-font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+
+  --basefn-font-size-xs: 0.75rem;    /* 12px */
+  --basefn-font-size-sm: 0.875rem;   /* 14px */
+  --basefn-font-size-base: 1rem;     /* 16px */
+  --basefn-font-size-lg: 1.125rem;   /* 18px */
+  --basefn-font-size-xl: 1.25rem;    /* 20px */
+
+  --basefn-font-weight-normal: 400;
+  --basefn-font-weight-medium: 500;
+  --basefn-font-weight-semibold: 600;
+  --basefn-font-weight-bold: 700;
+
+  --basefn-line-height-tight: 1.25;
+  --basefn-line-height-normal: 1.5;
+  --basefn-line-height-relaxed: 1.75;
+
+  /* Spacing */
+  --basefn-spacing-xs: 0.25rem;   /* 4px */
+  --basefn-spacing-sm: 0.5rem;    /* 8px */
+  --basefn-spacing-md: 0.75rem;   /* 12px */
+  --basefn-spacing-lg: 1rem;      /* 16px */
+  --basefn-spacing-xl: 1.5rem;    /* 24px */
+  --basefn-spacing-2xl: 2rem;     /* 32px */
+
+  /* Border Radius */
+  --basefn-radius-sm: 0.25rem;    /* 4px */
+  --basefn-radius-md: 0.375rem;   /* 6px */
+  --basefn-radius-lg: 0.5rem;     /* 8px */
+  --basefn-radius-xl: 0.75rem;    /* 12px */
+  --basefn-radius-full: 9999px;
+
+  /* Border Width */
+  --basefn-border-width: 1px;
+  --basefn-border-width-thick: 2px;
+
+  /* Shadows */
+  --basefn-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --basefn-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --basefn-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+
+  /* Focus Ring */
+  --basefn-focus-ring-color: rgba(59, 130, 246, 0.5);
+  --basefn-focus-ring-width: 3px;
+  --basefn-focus-ring-offset: 2px;
+
+  /* Transitions */
+  --basefn-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  --basefn-transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
+  --basefn-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* Form-specific Variables */
+  --basefn-form-input-height: 2.5rem;        /* 40px */
+  --basefn-form-input-height-sm: 2rem;       /* 32px */
+  --basefn-form-input-height-lg: 3rem;       /* 48px */
+
+  --basefn-form-input-padding-x: 0.75rem;    /* 12px */
+  --basefn-form-input-padding-y: 0.5rem;     /* 8px */
+
+  --basefn-form-input-bg: #ffffff;
+  --basefn-form-input-border: var(--basefn-color-neutral-300);
+  --basefn-form-input-border-focus: var(--basefn-color-primary);
+  --basefn-form-input-text: var(--basefn-color-neutral-900);
+  --basefn-form-input-placeholder: var(--basefn-color-neutral-400);
+
+  --basefn-form-input-disabled-bg: var(--basefn-color-neutral-100);
+  --basefn-form-input-disabled-border: var(--basefn-color-neutral-200);
+  --basefn-form-input-disabled-text: var(--basefn-color-neutral-500);
+
+  /* Button Variables */
+  --basefn-button-height: 2.5rem;            /* 40px */
+  --basefn-button-height-sm: 2rem;           /* 32px */
+  --basefn-button-height-lg: 3rem;           /* 48px */
+
+  --basefn-button-padding-x: 1rem;           /* 16px */
+  --basefn-button-padding-x-sm: 0.75rem;     /* 12px */
+  --basefn-button-padding-x-lg: 1.5rem;      /* 24px */
+
+  /* Semantic Color Tokens - Light Theme */
+  /* Backgrounds */
+  --basefn-bg-primary: #ffffff;
+  --basefn-bg-secondary: #f9fafb;
+  --basefn-bg-tertiary: #f3f4f6;
+  --basefn-bg-primary-aa: #eff6ff;
+
+
+  /* Text colors */
+  --basefn-text-primary: #111827;
+  --basefn-text-secondary: #4b5563;
+  --basefn-text-tertiary: #6b7280;
+  --basefn-text-muted: #9ca3af;
+
+  /* Borders */
+  --basefn-border-primary: #e5e7eb;
+  --basefn-border-secondary: #d1d5db;
+
+  /* Surfaces */
+  --basefn-surface-elevated: #ffffff;
+  --basefn-surface-overlay: rgba(0, 0, 0, 0.5);
+
+  /* Alert semantic colors - Light theme */
+  --basefn-alert-info-bg: #dbeafe;
+  --basefn-alert-info-text: #1e40af;
+  --basefn-alert-success-bg: #d1fae5;
+  --basefn-alert-success-text: #065f46;
+  --basefn-alert-error-bg: #fee2e2;
+  --basefn-alert-error-text: #991b1b;
+  --basefn-alert-warning-bg: #fef3c7;
+  --basefn-alert-warning-text: #92400e;
+}
+
+/* Dark Theme */
+[data-theme="dark"] {
+  
+  /* Backgrounds - Slate palette */
+  --basefn-bg-primary: #0f172a;
+  --basefn-bg-secondary: #131c2f;
+  --basefn-bg-tertiary: #334155;
+  --basefn-bg-primary-aa: #172443;
+  --basefn-bg-secondary-aa: #121e3b;
+
+  /* Text */
+  --basefn-text-primary: #f1f5f9;
+  --basefn-text-secondary: #cbd5e1;
+  --basefn-text-tertiary: #94a3b8;
+  --basefn-text-muted: #64748b;
+
+  /* Borders */
+  --basefn-border-primary: #334155;
+  --basefn-border-secondary: #475569;
+
+  /* Surfaces */
+  --basefn-surface-elevated: #1e293b;
+  --basefn-surface-overlay: rgba(0, 0, 0, 0.7);
+
+  /* Form inputs */
+  --basefn-form-input-bg: #1e293b;
+  --basefn-form-input-border: #475569;
+  --basefn-form-input-text: #f1f5f9;
+  --basefn-form-input-placeholder: #64748b;
+  --basefn-form-input-disabled-bg: #0f172a;
+  --basefn-form-input-disabled-border: #334155;
+  --basefn-form-input-disabled-text: #475569;
+
+  /* Shadows - darker for dark mode */
+  --basefn-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
+  --basefn-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4);
+  --basefn-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.5);
+
+  /* Alert semantic colors - Dark theme */
+  --basefn-alert-info-bg: #1e3a5f;
+  --basefn-alert-info-text: #93c5fd;
+  --basefn-alert-success-bg: #064e3b;
+  --basefn-alert-success-text: #6ee7b7;
+  --basefn-alert-error-bg: #7f1d1d;
+  --basefn-alert-error-text: #fca5a5;
+  --basefn-alert-warning-bg: #78350f;
+  --basefn-alert-warning-text: #fcd34d;
+}
+
+/* Base reset for form elements */
+* {
+  box-sizing: border-box;
+  font-family: 'Source Sans', sans-serif;
+}