@tachui/forms 0.7.0-alpha1 → 0.8.0-alpha

package/README.md

@@ -0,0 +1,136 @@
+# @tachui/forms
+
+Comprehensive form components and validation system for tachUI - unified package combining all form functionality.
+
+## What's New in v2.0
+
+- **Unified Package**: All 27 form components in one optimized package
+- **20% Bundle Reduction**: From 488KB to ~390KB through build optimization
+- **Tree Shaking**: Import only the components you need
+- **Backwards Compatible**: Maintains all existing APIs
+
+## Installation
+
+```bash
+pnpm add @tachui/forms
+```
+
+## Quick Start
+
+```typescript
+import { Form, TextField, DatePicker, validation } from '@tachui/forms'
+
+// Or use granular imports for optimal bundle size
+import { TextField } from '@tachui/forms/text-input'
+import { DatePicker } from '@tachui/forms/date-picker'
+import { required, email } from '@tachui/forms/validation'
+```
+
+## Components (27 total)
+
+### Form Container (2 components)
+
+- `Form` - Form state management and submission
+- `FormSection` - Logical grouping of form fields
+
+### Text Input (14 components)
+
+- `TextField` - Basic text input
+- `TextArea` - Multi-line text input
+- `EmailField` - Email validation and formatting
+- `PasswordField` - Password input with visibility toggle
+- `SearchField` - Search input with clear button
+- `URLField` - URL validation and formatting
+- `PhoneField` - Phone number formatting and validation
+- `NumberField` - Numeric input with validation
+- `CreditCardField` - Credit card formatting and validation
+- `SSNField` - Social Security Number formatting
+- `PostalCodeField` - Postal/ZIP code validation
+- `DateField` - Simple date text input
+- `TimeField` - Time input and validation
+- `ColorField` - Color picker input
+
+### Selection (8 components)
+
+- `Checkbox` - Single checkbox input
+- `CheckboxGroup` - Multiple checkbox group
+- `Switch` - Toggle switch input
+- `Radio` - Single radio button
+- `RadioGroup` - Radio button group
+- `Select` - Single select dropdown
+- `MultiSelect` - Multiple selection dropdown
+- `Combobox` - Searchable select input
+
+### Advanced (3 components)
+
+- `DatePicker` - Rich calendar interface
+- `Stepper` - Numeric increment/decrement
+- `Slider` - Range input with marks
+
+## Tree-Shaking Examples
+
+```typescript
+// Import entire package (390KB)
+import { TextField, DatePicker, validation } from '@tachui/forms'
+
+// Import specific categories (~180KB for text inputs)
+import * as TextInputs from '@tachui/forms/text-input'
+import * as Validation from '@tachui/forms/validation'
+
+// Import individual components (~20-30KB each)
+import { TextField } from '@tachui/forms/text-input'
+import { required, email } from '@tachui/forms/validation'
+```
+
+## Migration from v1.x
+
+### From @tachui/forms + @tachui/advanced-forms
+
+```typescript
+// Old approach (488KB total)
+import { TextField, Form } from '@tachui/forms'
+import { DatePicker, Stepper } from '@tachui/advanced-forms'
+
+// New unified approach (390KB total)
+import { TextField, Form, DatePicker, Stepper } from '@tachui/forms'
+
+// Or with tree-shaking (as needed)
+import { TextField, Form } from '@tachui/forms/text-input'
+import { DatePicker } from '@tachui/forms/date-picker'
+import { Stepper } from '@tachui/forms/advanced'
+```
+
+### Backwards Compatibility
+
+All existing APIs remain unchanged. Migration is optional and can be done incrementally.
+
+## Validation System
+
+Comprehensive validation with 20+ built-in rules:
+
+```typescript
+import { validation } from '@tachui/forms'
+
+const schema = validation.object({
+  email: validation.string().email().required(),
+  password: validation.string().min(8).required(),
+  confirmPassword: validation.string().matches('password'),
+  age: validation.number().min(18).max(120),
+})
+```
+
+## Bundle Size Comparison
+
+| Package        | v1.x (Split)   | v2.0 (Unified) | Savings   |
+| -------------- | -------------- | -------------- | --------- |
+| Text Inputs    | 149KB          | 120KB          | 19%       |
+| Advanced Forms | 268KB          | 80KB           | 70%       |
+| Date Picker    | Included above | 60KB           | Optimized |
+| **Total**      | **488KB**      | **390KB**      | **20%**   |
+
+## Documentation
+
+- [Component API Reference](./docs/components.md)
+- [Validation Guide](./docs/validation.md)
+- [Migration Guide](./docs/migration.md)
+- [Bundle Optimization](./docs/optimization.md)

package/dist/DatePicker-D5nRFTUm.js

@@ -0,0 +1,475 @@
+import { withModifiers as x, isSignal as f, h as m, createEffect as S } from "@tachui/core";
+const M = {
+  colors: {
+    background: "#FFFFFF",
+    border: "#D1D1D6",
+    text: "#000000",
+    selectedBackground: "#007AFF",
+    selectedText: "#FFFFFF",
+    disabledText: "#8E8E93",
+    accent: "#007AFF"
+  },
+  spacing: {
+    padding: 12,
+    gap: 8,
+    itemHeight: 44
+  },
+  borderRadius: 8,
+  fontSize: 16,
+  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
+};
+class C {
+  type = "component";
+  id;
+  props;
+  theme = M;
+  containerElement = null;
+  constructor(e) {
+    this.props = e, this.id = `datepicker-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+  }
+  resolveValue(e) {
+    return f(e) ? e() : e;
+  }
+  getSelectedDate() {
+    return this.resolveValue(this.props.selection);
+  }
+  setSelectedDate(e) {
+    f(this.props.selection) && this.props.selection(e), this.props.onChange && this.props.onChange(e);
+  }
+  getDisplayedComponents() {
+    return this.resolveValue(this.props.displayedComponents || "date");
+  }
+  getStyle() {
+    return this.resolveValue(this.props.style || "compact");
+  }
+  isDisabled() {
+    return this.resolveValue(this.props.disabled || !1);
+  }
+  getMinimumDate() {
+    return this.props.minimumDate ? this.resolveValue(this.props.minimumDate) : null;
+  }
+  getMaximumDate() {
+    return this.props.maximumDate ? this.resolveValue(this.props.maximumDate) : null;
+  }
+  isDateInRange(e) {
+    const t = this.getMinimumDate(), o = this.getMaximumDate();
+    return !(t && e < t || o && e > o);
+  }
+  createCompactPicker() {
+    const e = this.getSelectedDate(), t = this.getDisplayedComponents(), o = m("div", {
+      style: {
+        position: "relative",
+        display: "inline-block"
+      }
+    }), s = m("input", {
+      type: t === "time" ? "time" : t === "date" ? "date" : "datetime-local",
+      value: this.getInputValue(e, t),
+      disabled: this.isDisabled(),
+      min: this.getMinimumDate()?.toISOString().split("T")[0],
+      max: this.getMaximumDate()?.toISOString().split("T")[0],
+      style: {
+        padding: `${this.theme.spacing.padding}px`,
+        border: `1px solid ${this.theme.colors.border}`,
+        borderRadius: `${this.theme.borderRadius}px`,
+        backgroundColor: this.theme.colors.background,
+        color: this.isDisabled() ? this.theme.colors.disabledText : this.theme.colors.text,
+        fontSize: `${this.theme.fontSize}px`,
+        fontFamily: this.theme.fontFamily,
+        cursor: this.isDisabled() ? "not-allowed" : "pointer",
+        outline: "none"
+      },
+      onchange: (n) => {
+        const l = n.target;
+        if (l.value) {
+          const g = new Date(l.value);
+          this.isDateInRange(g) && this.setSelectedDate(g);
+        }
+      },
+      onfocus: (n) => {
+        const l = n.target;
+        l.style.borderColor = this.theme.colors.accent;
+      },
+      onblur: (n) => {
+        const l = n.target;
+        l.style.borderColor = this.theme.colors.border;
+      }
+    }), a = o.element, r = s.element;
+    return a && r && a.appendChild(r), o;
+  }
+  getInputValue(e, t) {
+    if (Number.isNaN(e.getTime()))
+      switch (t) {
+        case "date":
+          return "";
+        case "time":
+          return "00:00";
+        case "dateAndTime":
+          return "";
+        default:
+          return "";
+      }
+    try {
+      switch (t) {
+        case "date":
+          return e.toISOString().split("T")[0];
+        case "time":
+          return e.toTimeString().split(" ")[0].substring(0, 5);
+        case "dateAndTime":
+          return e.toISOString().slice(0, 16);
+        default:
+          return e.toISOString().split("T")[0];
+      }
+    } catch {
+      return "";
+    }
+  }
+  createWheelPicker() {
+    const e = m("div", {
+      style: {
+        display: "flex",
+        justifyContent: "center",
+        gap: `${this.theme.spacing.gap}px`,
+        padding: `${this.theme.spacing.padding}px`,
+        border: `1px solid ${this.theme.colors.border}`,
+        borderRadius: `${this.theme.borderRadius}px`,
+        backgroundColor: this.theme.colors.background
+      }
+    }), t = this.getDisplayedComponents(), o = this.getSelectedDate();
+    return (t === "date" || t === "dateAndTime") && this.createDateWheels(e, o), (t === "time" || t === "dateAndTime") && this.createTimeWheels(e, o), e;
+  }
+  createDateWheels(e, t) {
+    const o = this.createWheel(
+      Array.from({ length: 12 }, (c, i) => ({
+        value: i,
+        label: new Date(2024, i, 1).toLocaleDateString(
+          this.resolveValue(this.props.locale || "en-US"),
+          { month: "short" }
+        )
+      })),
+      t.getMonth(),
+      (c) => {
+        const i = new Date(t);
+        i.setMonth(c), this.isDateInRange(i) && this.setSelectedDate(i);
+      }
+    ), s = new Date(
+      t.getFullYear(),
+      t.getMonth() + 1,
+      0
+    ).getDate(), a = this.createWheel(
+      Array.from({ length: s }, (c, i) => ({
+        value: i + 1,
+        label: (i + 1).toString()
+      })),
+      t.getDate(),
+      (c) => {
+        const i = new Date(t);
+        i.setDate(c), this.isDateInRange(i) && this.setSelectedDate(i);
+      }
+    ), r = t.getFullYear(), n = 50, l = this.createWheel(
+      Array.from({ length: n * 2 }, (c, i) => {
+        const u = r - n + i;
+        return { value: u, label: u.toString() };
+      }),
+      r,
+      (c) => {
+        const i = new Date(t);
+        i.setFullYear(c), this.isDateInRange(i) && this.setSelectedDate(i);
+      }
+    ), g = e.element;
+    if (g) {
+      const c = o.element, i = a.element, u = l.element;
+      c && g.appendChild(c), i && g.appendChild(i), u && g.appendChild(u);
+    }
+  }
+  createTimeWheels(e, t) {
+    const o = this.createWheel(
+      Array.from({ length: 24 }, (r, n) => ({
+        value: n,
+        label: n.toString().padStart(2, "0")
+      })),
+      t.getHours(),
+      (r) => {
+        const n = new Date(t);
+        n.setHours(r), this.isDateInRange(n) && this.setSelectedDate(n);
+      }
+    ), s = this.createWheel(
+      Array.from({ length: 60 }, (r, n) => ({
+        value: n,
+        label: n.toString().padStart(2, "0")
+      })),
+      t.getMinutes(),
+      (r) => {
+        const n = new Date(t);
+        n.setMinutes(r), this.isDateInRange(n) && this.setSelectedDate(n);
+      }
+    ), a = e.element;
+    if (a) {
+      const r = o.element, n = s.element;
+      r && a.appendChild(r), n && a.appendChild(n);
+    }
+  }
+  createWheel(e, t, o) {
+    const s = m("div", {
+      style: {
+        width: "80px",
+        height: "200px",
+        overflowY: "scroll",
+        border: `1px solid ${this.theme.colors.border}`,
+        borderRadius: `${this.theme.borderRadius}px`,
+        scrollSnapType: "y mandatory"
+      }
+    });
+    return e.forEach((a) => {
+      const n = m("div", {
+        style: {
+          height: `${this.theme.spacing.itemHeight}px`,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: a.value === t ? this.theme.colors.selectedBackground : "transparent",
+          color: a.value === t ? this.theme.colors.selectedText : this.theme.colors.text,
+          cursor: "pointer",
+          scrollSnapAlign: "center",
+          fontSize: `${this.theme.fontSize}px`,
+          fontFamily: this.theme.fontFamily
+        },
+        onclick: () => o(a.value)
+      }).element;
+      n && (n.textContent = a.label);
+      const l = s.element;
+      l && n && l.appendChild(n);
+    }), s;
+  }
+  createGraphicalPicker() {
+    const e = this.getSelectedDate(), t = e.getMonth(), o = e.getFullYear(), s = m("div", {
+      style: {
+        border: `1px solid ${this.theme.colors.border}`,
+        borderRadius: `${this.theme.borderRadius}px`,
+        backgroundColor: this.theme.colors.background,
+        padding: `${this.theme.spacing.padding}px`,
+        fontFamily: this.theme.fontFamily
+      }
+    }), a = m("div", {
+      style: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        marginBottom: `${this.theme.spacing.gap}px`,
+        padding: `${this.theme.spacing.gap}px`
+      }
+    }), r = m("div", {
+      style: {
+        fontSize: `${this.theme.fontSize + 2}px`,
+        fontWeight: "600",
+        color: this.theme.colors.text
+      }
+    }), n = r.element;
+    n && (n.textContent = new Date(
+      o,
+      t,
+      1
+    ).toLocaleDateString(this.resolveValue(this.props.locale || "en-US"), {
+      month: "long",
+      year: "numeric"
+    }));
+    const l = m("button", {
+      style: {
+        backgroundColor: "transparent",
+        border: "none",
+        color: this.theme.colors.accent,
+        cursor: "pointer",
+        fontSize: `${this.theme.fontSize + 4}px`,
+        padding: "4px 8px"
+      },
+      onclick: () => {
+        const h = new Date(e);
+        h.setMonth(t - 1), this.isDateInRange(h) && this.setSelectedDate(h);
+      }
+    }), g = l.element;
+    g && (g.textContent = "‹");
+    const c = m("button", {
+      style: {
+        backgroundColor: "transparent",
+        border: "none",
+        color: this.theme.colors.accent,
+        cursor: "pointer",
+        fontSize: `${this.theme.fontSize + 4}px`,
+        padding: "4px 8px"
+      },
+      onclick: () => {
+        const h = new Date(e);
+        h.setMonth(t + 1), this.isDateInRange(h) && this.setSelectedDate(h);
+      }
+    }), i = c.element;
+    i && (i.textContent = "›");
+    const u = this.createCalendarGrid(e), d = a.element, p = s.element;
+    if (d) {
+      const h = l.element, y = r.element, b = c.element;
+      h && d.appendChild(h), y && d.appendChild(y), b && d.appendChild(b);
+    }
+    if (p) {
+      d && p.appendChild(d);
+      const h = u.element;
+      h && p.appendChild(h);
+    }
+    return s;
+  }
+  createCalendarGrid(e) {
+    const t = e.getMonth(), o = e.getFullYear(), s = m("div", {
+      style: {
+        display: "grid",
+        gridTemplateColumns: "repeat(7, 1fr)",
+        gap: "2px",
+        fontSize: `${this.theme.fontSize}px`
+      }
+    });
+    ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"].forEach((i) => {
+      const d = m("div", {
+        style: {
+          padding: "8px 4px",
+          textAlign: "center",
+          fontWeight: "600",
+          color: this.theme.colors.disabledText,
+          fontSize: `${this.theme.fontSize - 2}px`
+        }
+      }).element;
+      d && (d.textContent = i);
+      const p = s.element;
+      p && d && p.appendChild(d);
+    });
+    const r = new Date(o, t, 1).getDay(), n = new Date(o, t + 1, 0).getDate(), l = new Date(o, t, 0).getDate();
+    for (let i = r - 1; i >= 0; i--) {
+      const u = l - i, d = this.createDayElement(
+        new Date(o, t - 1, u),
+        e,
+        !0
+        // isOtherMonth
+      ), p = s.element, h = d.element;
+      p && h && p.appendChild(h);
+    }
+    for (let i = 1; i <= n; i++) {
+      const u = new Date(o, t, i), d = this.createDayElement(u, e, !1), p = s.element, h = d.element;
+      p && h && p.appendChild(h);
+    }
+    const c = Math.ceil((r + n) / 7) * 7 - (r + n);
+    for (let i = 1; i <= c; i++) {
+      const u = this.createDayElement(
+        new Date(o, t + 1, i),
+        e,
+        !0
+        // isOtherMonth
+      ), d = s.element, p = u.element;
+      d && p && d.appendChild(p);
+    }
+    return s;
+  }
+  createDayElement(e, t, o) {
+    const s = e.toDateString() === t.toDateString(), a = e.toDateString() === (/* @__PURE__ */ new Date()).toDateString(), r = this.isDateInRange(e), n = this.isDisabled() || !r, l = m("button", {
+      disabled: n,
+      style: {
+        padding: "8px",
+        border: "none",
+        backgroundColor: s ? this.theme.colors.selectedBackground : a ? `${this.theme.colors.accent}20` : "transparent",
+        color: s ? this.theme.colors.selectedText : o || n ? this.theme.colors.disabledText : this.theme.colors.text,
+        borderRadius: "4px",
+        cursor: n ? "not-allowed" : "pointer",
+        fontSize: `${this.theme.fontSize}px`,
+        fontWeight: s || a ? "600" : "400",
+        textAlign: "center",
+        minHeight: "36px",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      onclick: () => {
+        n || this.setSelectedDate(e);
+      },
+      onmouseenter: (c) => {
+        if (!n && !s) {
+          const i = c.target;
+          i.style.backgroundColor = `${this.theme.colors.accent}10`;
+        }
+      },
+      onmouseleave: (c) => {
+        if (!n && !s && !a) {
+          const i = c.target;
+          i.style.backgroundColor = "transparent";
+        }
+      }
+    }), g = l.element;
+    return g && (g.textContent = e.getDate().toString()), l;
+  }
+  render() {
+    const e = m("div", {
+      id: this.id,
+      "data-component": "datepicker",
+      style: {
+        display: "inline-block"
+      }
+    });
+    if (this.props.title) {
+      const n = m("label", {
+        for: `${this.id}-input`,
+        style: {
+          display: "block",
+          marginBottom: `${this.theme.spacing.gap}px`,
+          fontSize: `${this.theme.fontSize}px`,
+          fontWeight: "500",
+          color: this.theme.colors.text,
+          fontFamily: this.theme.fontFamily
+        }
+      }).element;
+      n && (n.textContent = this.props.title);
+      const l = e.element;
+      l && n && l.appendChild(n);
+    }
+    const t = this.getStyle();
+    let o;
+    switch (t) {
+      case "wheel":
+        o = this.createWheelPicker();
+        break;
+      case "graphical":
+        o = this.createGraphicalPicker();
+        break;
+      default:
+        o = this.createCompactPicker();
+        break;
+    }
+    const s = e.element, a = o.element;
+    return s && a && s.appendChild(a), S(() => {
+      (f(this.props.selection) || f(this.props.style) || f(this.props.displayedComponents)) && this.updatePicker();
+    }), e;
+  }
+  updatePicker() {
+    if (this.containerElement) {
+      const e = this.getStyle();
+      let t;
+      switch (e) {
+        case "wheel":
+          t = this.createWheelPicker();
+          break;
+        case "graphical":
+          t = this.createGraphicalPicker();
+          break;
+        default:
+          t = this.createCompactPicker();
+          break;
+      }
+      const o = t.element;
+      if (o) {
+        const s = this.containerElement.querySelector(
+          '[data-component="datepicker"] > *:last-child'
+        );
+        s && this.containerElement && this.containerElement.replaceChild(o, s);
+      }
+    }
+  }
+}
+function w(D) {
+  return x(new C(D));
+}
+export {
+  w as D
+};
+//# sourceMappingURL=DatePicker-D5nRFTUm.js.map