basefn 1.1.0 → 1.1.1

package/README.md

@@ -1,102 +1,98 @@
-# basefn-UI
+# basefn
 
-A simple, neutrally styled UI component library for [Xote](https://github.com/brnrdog/xote) applications, primarily used to battle-test the Xote framework against a real-world user interface system.
+[![npm version](https://img.shields.io/npm/v/basefn.svg)](https://www.npmjs.com/package/basefn)
+[![bundle size](https://img.shields.io/bundlephobia/minzip/basefn)](https://bundlephobia.com/package/basefn)
+
+A UI component library for [Xote](https://github.com/brnrdog/xote) applications. Built with ReScript, designed to be lightweight and customizable.
 
 ## Installation
 
+Ensure you have the dependencies installed:
+
 ```bash
-npm install basefn
+npm install xote @rescript/core
 ```
 
-Make sure you have installed [xote](https://github.com/brnrdog/xote) and [rescript-signals](https://github.com/brnrdog/rescript-signals).
+Install `basefn`:
 
-## Usage Patterns
+```bash
+npm install basefn 
+```
+
+**Required peer dependencies:**
+- `xote` - The reactive framework
+- `@rescript/core` - ReScript standard library
+
+**Add to your `rescript.json`:**
+```json
+{
+  "dependencies": [
+    // Standard ReScript library
+    "@rescript/core",
+    // Signals library
+    "rescript-signals", 
+    // UI library
+    "xote"
+  ],
+}
+```
 
-Components accept both regular values and signals. Use the `static()` for static values, or `reactive()` for reactive signals:
+## Quick Start
 
 ```rescript
-open basefnUI
-open ReactiveProp
+open Xote
+open Basefn
 
-// Using regular values (static)
+// Static values
 <Button
-  variant={Button.Primary}
+  variant={Primary}
   label={static("Click me")}
-  onClick={_ => Console.log("You clicked!")}
+  onClick={_ => Console.log("Clicked")}
 />
 
-// Using signals (reactive)
-let labelSignal = Signal.make("Click me")
+// Reactive values
+let count = Signal.make(0)
 <Button
-  variant={Button.Primary}
-  label={reactive(labelSignal)}
-  onClick={_ => Signal.set(labelSignal, "You clicked!")}
+  variant={Primary}
+  label={reactive(count->Signal.map(n => `Clicked ${n->Int.toString} times`))}
+  onClick={_ => count->Signal.update(n => n + 1)}
 />
 ```
 
 ## Components
 
-See the available components at [src/components](https://github.com/brnrdog/basefn-ui/tree/main/src/components). Contributions are welcome if features are missing.
+**Forms:** [Button](src/components/Basefn__Button.res) · [Input](src/components/Basefn__Input.res) · [Textarea](src/components/Basefn__Textarea.res) · [Checkbox](src/components/Basefn__Checkbox.res) · [Radio](src/components/Basefn__Radio.res) · [Select](src/components/Basefn__Select.res) · [Switch](src/components/Basefn__Switch.res) · [Slider](src/components/Basefn__Slider.res)
+
+**Layout:** [Card](src/components/Basefn__Card.res) · [Grid](src/components/Basefn__Grid.res) · [Separator](src/components/Basefn__Separator.res) · [AppLayout](src/components/Basefn__AppLayout.res) · [Sidebar](src/components/Basefn__Sidebar.res) · [Topbar](src/components/Basefn__Topbar.res)
+
+**Feedback:** [Alert](src/components/Basefn__Alert.res) · [Toast](src/components/Basefn__Toast.res) · [Modal](src/components/Basefn__Modal.res) · [Drawer](src/components/Basefn__Drawer.res) · [Spinner](src/components/Basefn__Spinner.res) · [Progress](src/components/Basefn__Progress.res) · [Tooltip](src/components/Basefn__Tooltip.res)
+
+**Navigation:** [Tabs](src/components/Basefn__Tabs.res) · [Breadcrumb](src/components/Basefn__Breadcrumb.res) · [Stepper](src/components/Basefn__Stepper.res) · [Dropdown](src/components/Basefn__Dropdown.res)
+
+**Data Display:** [Typography](src/components/Basefn__Typography.res) · [Badge](src/components/Basefn__Badge.res) · [Avatar](src/components/Basefn__Avatar.res) · [Timeline](src/components/Basefn__Timeline.res) · [Accordion](src/components/Basefn__Accordion.res) · [Kbd](src/components/Basefn__Kbd.res) · [Icon](src/components/Basefn__Icon.res)
+
+**Utilities:** [ThemeToggle](src/components/Basefn__ThemeToggle.res) · [Label](src/components/Basefn__Label.res)
 
 ## Theming
 
-All components use CSS variables for styling, making them easy to customize. Override the variables in your CSS:
+Customize via CSS variables:
 
 ```css
 :root {
-  --basefn-color-primary: #your-color;
-  --basefn-color-secondary: #your-color;
-  /* ... other variables */
+  --basefn-color-primary: #0066cc;
+  --basefn-color-secondary: #6c757d;
+  --basefn-radius: 0.375rem;
+  /* See src/styles/variables.css for all variables */
 }
 ```
 
-See `src/styles/variables.css` for all available CSS variables.
-
 ## Development
 
 ```bash
-# Install dependencies
-npm install
-
-# Start development server with Vite (hot reload)
-npm run dev
-
-# Build ReScript code
-npm run build
-
-# Watch mode for ReScript
-npm run watch
-
-# Build for production
-npm run build:vite
-
-# Preview production build
-npm run preview
-
-# Clean ReScript build
-npm run clean
-```
-
-### Running the Demo
-
-1. Install dependencies: `npm install`
-2. Build the ReScript code: `npm run build`
-3. Start the dev server: `npm run dev`
-4. Open your browser to `http://localhost:3000`
-
-The demo application showcases all components with live form state updates.
-
-## Project Structure
-
-```
-basefn-ui/
-├── src/
-│   ├── components/     # All UI components
-│   ├── styles/         # CSS variables and theming
-│   ├── Basefn__Dom.res # Simple dom bindings used in the lib
-│   └── Basefn.res       # Main export file
-├── package.json
-└── rescript.json
+npm install        # Install dependencies
+npm run build      # Build ReScript
+npm run watch      # Watch mode
+npm run dev        # Dev server with demo
 ```
 
 ## License

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "basefn",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/brnrdog/basefn.git"

package/src/Basefn.res

@@ -54,52 +54,122 @@ type gridItemColumnSpan = Basefn__Grid.Item.columnSpan
 type gridItemRowSpan = Basefn__Grid.Item.rowSpan
 
 // Form Components
-module Button = Basefn__Button
-module Input = Basefn__Input
-module Textarea = Basefn__Textarea
-module Select = Basefn__Select
-module Checkbox = Basefn__Checkbox
-module Radio = Basefn__Radio
-module Label = Basefn__Label
+module Button = {
+  include Basefn__Button
+}
+module Input = {
+  include Basefn__Input
+}
+module Textarea = {
+  include Basefn__Textarea
+}
+module Select = {
+  include Basefn__Select
+}
+module Checkbox = {
+  include Basefn__Checkbox
+}
+module Radio = {
+  include Basefn__Radio
+}
+module Label = {
+  include Basefn__Label
+}
 
 // Tier 1 Foundation Components
-module Badge = Basefn__Badge
-module Spinner = Basefn__Spinner
-module Separator = Basefn__Separator
-module Kbd = Basefn__Kbd
-module Typography = Basefn__Typography
+module Badge = {
+  include Basefn__Badge
+}
+module Spinner = {
+  include Basefn__Spinner
+}
+module Separator = {
+  include Basefn__Separator
+}
+module Kbd = {
+  include Basefn__Kbd
+}
+module Typography = {
+  include Basefn__Typography
+}
 
 // Tier 2
-module Card = Basefn__Card
-module Avatar = Basefn__Avatar
-module Grid = Basefn__Grid
-module Alert = Basefn__Alert
-module Progress = Basefn__Progress
-module Tabs = Basefn__Tabs
-module Accordion = Basefn__Accordion
-module Breadcrumb = Basefn__Breadcrumb
+module Card = {
+  include Basefn__Card
+}
+module Avatar = {
+  include Basefn__Avatar
+}
+module Grid = {
+  include Basefn__Grid
+}
+module Alert = {
+  include Basefn__Alert
+}
+module Progress = {
+  include Basefn__Progress
+}
+module Tabs = {
+  include Basefn__Tabs
+}
+module Accordion = {
+  include Basefn__Accordion
+}
+module Breadcrumb = {
+  include Basefn__Breadcrumb
+}
 
 // Tier 3
-module Modal = Basefn__Modal
-module Tooltip = Basefn__Tooltip
-module Switch = Basefn__Switch
-module Slider = Basefn__Slider
-module Dropdown = Basefn__Dropdown
-module Toast = Basefn__Toast
+module Modal = {
+  include Basefn__Modal
+}
+module Tooltip = {
+  include Basefn__Tooltip
+}
+module Switch = {
+  include Basefn__Switch
+}
+module Slider = {
+  include Basefn__Slider
+}
+module Dropdown = {
+  include Basefn__Dropdown
+}
+module Toast = {
+  include Basefn__Toast
+}
 
 // Tier 4 - Navigation & Layout
-module Stepper = Basefn__Stepper
-module Drawer = Basefn__Drawer
-module Timeline = Basefn__Timeline
+module Stepper = {
+  include Basefn__Stepper
+}
+module Drawer = {
+  include Basefn__Drawer
+}
+module Timeline = {
+  include Basefn__Timeline
+}
 
 // Application Layout
-module Sidebar = Basefn__Sidebar
-module Topbar = Basefn__Topbar
-module AppLayout = Basefn__AppLayout
+module Sidebar = {
+  include Basefn__Sidebar
+}
+module Topbar = {
+  include Basefn__Topbar
+}
+module AppLayout = {
+  include Basefn__AppLayout
+}
 
 // Theme
-module Theme = Basefn__Theme
-module ThemeToggle = Basefn__ThemeToggle
+module Theme = {
+  include Basefn__Theme
+}
+module ThemeToggle = {
+  include Basefn__ThemeToggle
+}
 
 // Icons
-module Icon = Basefn__Icon
+module Icon = {
+  include Basefn__Icon
+}

package/src/Basefn.res.mjs

@@ -1,78 +1,113 @@
 // Generated by ReScript, PLEASE EDIT WITH CARE
 
+import * as Basefn__Kbd from "./components/Basefn__Kbd.res.mjs";
+import * as Basefn__Card from "./components/Basefn__Card.res.mjs";
+import * as Basefn__Grid from "./components/Basefn__Grid.res.mjs";
+import * as Basefn__Icon from "./components/Basefn__Icon.res.mjs";
+import * as Basefn__Tabs from "./components/Basefn__Tabs.res.mjs";
+import * as Basefn__Alert from "./components/Basefn__Alert.res.mjs";
+import * as Basefn__Badge from "./components/Basefn__Badge.res.mjs";
+import * as Basefn__Input from "./components/Basefn__Input.res.mjs";
+import * as Basefn__Label from "./components/Basefn__Label.res.mjs";
+import * as Basefn__Modal from "./components/Basefn__Modal.res.mjs";
+import * as Basefn__Radio from "./components/Basefn__Radio.res.mjs";
+import * as Basefn__Theme from "./styles/Basefn__Theme.res.mjs";
+import * as Basefn__Toast from "./components/Basefn__Toast.res.mjs";
+import * as Basefn__Avatar from "./components/Basefn__Avatar.res.mjs";
+import * as Basefn__Button from "./components/Basefn__Button.res.mjs";
+import * as Basefn__Drawer from "./components/Basefn__Drawer.res.mjs";
+import * as Basefn__Select from "./components/Basefn__Select.res.mjs";
+import * as Basefn__Slider from "./components/Basefn__Slider.res.mjs";
+import * as Basefn__Switch from "./components/Basefn__Switch.res.mjs";
+import * as Basefn__Topbar from "./components/Basefn__Topbar.res.mjs";
+import * as Basefn__Sidebar from "./components/Basefn__Sidebar.res.mjs";
+import * as Basefn__Spinner from "./components/Basefn__Spinner.res.mjs";
+import * as Basefn__Stepper from "./components/Basefn__Stepper.res.mjs";
+import * as Basefn__Tooltip from "./components/Basefn__Tooltip.res.mjs";
+import * as Basefn__Checkbox from "./components/Basefn__Checkbox.res.mjs";
+import * as Basefn__Dropdown from "./components/Basefn__Dropdown.res.mjs";
+import * as Basefn__Progress from "./components/Basefn__Progress.res.mjs";
+import * as Basefn__Textarea from "./components/Basefn__Textarea.res.mjs";
+import * as Basefn__Timeline from "./components/Basefn__Timeline.res.mjs";
+import * as Basefn__Accordion from "./components/Basefn__Accordion.res.mjs";
+import * as Basefn__AppLayout from "./components/Basefn__AppLayout.res.mjs";
+import * as Basefn__Separator from "./components/Basefn__Separator.res.mjs";
+import * as Basefn__Breadcrumb from "./components/Basefn__Breadcrumb.res.mjs";
+import * as Basefn__Typography from "./components/Basefn__Typography.res.mjs";
+import * as Basefn__ThemeToggle from "./components/Basefn__ThemeToggle.res.mjs";
 
 import './basefn.css'
 ;
 
-let Button;
+let Button = Basefn__Button;
 
-let Input;
+let Input = Basefn__Input;
 
-let Textarea;
+let Textarea = Basefn__Textarea;
 
-let Select;
+let Select = Basefn__Select;
 
-let Checkbox;
+let Checkbox = Basefn__Checkbox;
 
-let Radio;
+let Radio = Basefn__Radio;
 
-let Label;
+let Label = Basefn__Label;
 
-let Badge;
+let Badge = Basefn__Badge;
 
-let Spinner;
+let Spinner = Basefn__Spinner;
 
-let Separator;
+let Separator = Basefn__Separator;
 
-let Kbd;
+let Kbd = Basefn__Kbd;
 
-let Typography;
+let Typography = Basefn__Typography;
 
-let Card;
+let Card = Basefn__Card;
 
-let Avatar;
+let Avatar = Basefn__Avatar;
 
-let Grid;
+let Grid = Basefn__Grid;
 
-let Alert;
+let Alert = Basefn__Alert;
 
-let Progress;
+let Progress = Basefn__Progress;
 
-let Tabs;
+let Tabs = Basefn__Tabs;
 
-let Accordion;
+let Accordion = Basefn__Accordion;
 
-let Breadcrumb;
+let Breadcrumb = Basefn__Breadcrumb;
 
-let Modal;
+let Modal = Basefn__Modal;
 
-let Tooltip;
+let Tooltip = Basefn__Tooltip;
 
-let Switch;
+let Switch = Basefn__Switch;
 
-let Slider;
+let Slider = Basefn__Slider;
 
-let Dropdown;
+let Dropdown = Basefn__Dropdown;
 
-let Toast;
+let Toast = Basefn__Toast;
 
-let Stepper;
+let Stepper = Basefn__Stepper;
 
-let Drawer;
+let Drawer = Basefn__Drawer;
 
-let Timeline;
+let Timeline = Basefn__Timeline;
 
-let Sidebar;
+let Sidebar = Basefn__Sidebar;
 
-let Topbar;
+let Topbar = Basefn__Topbar;
 
-let AppLayout;
+let AppLayout = Basefn__AppLayout;
 
-let Theme;
+let Theme = Basefn__Theme;
 
-let ThemeToggle;
+let ThemeToggle = Basefn__ThemeToggle;
 
-let Icon;
+let Icon = Basefn__Icon;
 
 export {
   Button,