@tachui/forms 0.8.0-alpha → 0.8.5-alpha

package/dist/DatePicker-D5nRFTUm.js

@@ -472,4 +472,3 @@ function w(D) {
 export {
   w as D
 };
-//# sourceMappingURL=DatePicker-D5nRFTUm.js.map

package/dist/Select-yZyKooXk.js

@@ -942,4 +942,3 @@ export {
   ue as c,
   U as d
 };
-//# sourceMappingURL=Select-yZyKooXk.js.map

package/dist/Slider-0-oal5YR.js

@@ -641,4 +641,3 @@ export {
   k as S,
   w as a
 };
-//# sourceMappingURL=Slider-0-oal5YR.js.map

package/dist/TextField-hX15dY3U.js

@@ -506,4 +506,3 @@ export {
   Be as e,
   Ie as f
 };
-//# sourceMappingURL=TextField-hX15dY3U.js.map

package/dist/components/advanced/index.js

@@ -3,4 +3,3 @@ export {
   a as Slider,
   p as Stepper
 };
-//# sourceMappingURL=index.js.map

package/dist/components/date-picker/index.js

@@ -2,4 +2,3 @@ import { D as a } from "../../DatePicker-D5nRFTUm.js";
 export {
   a as DatePicker
 };
-//# sourceMappingURL=index.js.map

package/dist/components/selection/index.js

@@ -9,4 +9,3 @@ export {
   r as Select,
   x as Switch
 };
-//# sourceMappingURL=index.js.map

package/dist/components/text-input/index.js

@@ -15,4 +15,3 @@ export {
   T as TimeField,
   x as URLField
 };
-//# sourceMappingURL=index.js.map

package/dist/index-D3WfkqVv.js

@@ -246,4 +246,3 @@ export {
   D as b,
   $ as c
 };
-//# sourceMappingURL=index-D3WfkqVv.js.map

package/dist/index.d.ts

@@ -12,5 +12,6 @@ export * from './components/date-picker';
 export * from './state';
 export * from './validation';
 export * from './utils';
+export { placeholder, required, validation, registerFormsModifiers, } from './modifiers';
 export type { ValidationRule, ValidationResult, FieldValidation, FieldState, TextFieldProps, NumberFieldProps, TextFieldFormatter, TextFieldParser, AutoCapitalization, KeyboardType, ReturnKeyType, } from './types';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,cAAc,6BAA6B,CAAA;AAG3C,cAAc,yBAAyB,CAAA;AAGvC,cAAc,wBAAwB,CAAA;AAGtC,cAAc,uBAAuB,CAAA;AAGrC,cAAc,0BAA0B,CAAA;AAGxC,cAAc,SAAS,CAAA;AAGvB,cAAc,cAAc,CAAA;AAG5B,cAAc,SAAS,CAAA;AAGvB,YAAY,EAEV,cAAc,EACd,gBAAgB,EAChB,eAAe,EACf,UAAU,EAGV,cAAc,EACd,gBAAgB,EAChB,kBAAkB,EAClB,eAAe,EACf,kBAAkB,EAClB,YAAY,EACZ,aAAa,GACd,MAAM,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,cAAc,6BAA6B,CAAA;AAG3C,cAAc,yBAAyB,CAAA;AAGvC,cAAc,wBAAwB,CAAA;AAGtC,cAAc,uBAAuB,CAAA;AAGrC,cAAc,0BAA0B,CAAA;AAGxC,cAAc,SAAS,CAAA;AAGvB,cAAc,cAAc,CAAA;AAG5B,cAAc,SAAS,CAAA;AAGvB,OAAO,EACL,WAAW,EACX,QAAQ,EACR,UAAU,EACV,sBAAsB,GACvB,MAAM,aAAa,CAAA;AAGpB,YAAY,EAEV,cAAc,EACd,gBAAgB,EAChB,eAAe,EACf,UAAU,EAGV,cAAc,EACd,gBAAgB,EAChB,kBAAkB,EAClB,eAAe,EACf,kBAAkB,EAClB,YAAY,EACZ,aAAa,GACd,MAAM,SAAS,CAAA"}

package/dist/index.js

@@ -1,14 +1,15 @@
-import { createSignal as n, createComputed as a } from "@tachui/core";
-import { c as o } from "./index-D3WfkqVv.js";
+import { createSignal as o, createComputed as a } from "@tachui/core";
+import { c as n } from "./index-D3WfkqVv.js";
 import { a as N, b as T } from "./index-D3WfkqVv.js";
 import { f as D, C as M, D as w, E as A, N as L, P, a as R, c as $, b as k, S as O, d as U, T as H, e as I, U as z } from "./TextField-hX15dY3U.js";
-import { C as _, a as j, c as Z, M as q, R as B, b as J, d as K, S as Q } from "./Select-yZyKooXk.js";
+import { C as _, a as j, c as q, M as Z, R as B, b as J, d as K, S as Q } from "./Select-yZyKooXk.js";
 import { a as X, S as Y } from "./Slider-0-oal5YR.js";
 import { D as te } from "./DatePicker-D5nRFTUm.js";
-import { CrossFieldValidators as ie, FormsComponentValidation as se, FormsValidationError as ae, VALIDATION_RULES as ne, ValidationMessageFormatter as oe, ValidationPresets as de, ValidationUtils as pe, createDebouncedValidator as le, createFormsValidators as ce, defaultMessageFormatter as fe, getValidationRules as me, registerFormsValidators as he, registerValidationRule as ue, unregisterValidationRule as Se, validateField as xe, validateValue as ge, validateValueAsync as Ce } from "./validation/index.js";
+import { CrossFieldValidators as ie, FormsComponentValidation as se, FormsValidationError as ae, VALIDATION_RULES as oe, ValidationMessageFormatter as ne, ValidationPresets as de, ValidationUtils as pe, createDebouncedValidator as le, createFormsValidators as ce, defaultMessageFormatter as fe, getValidationRules as me, registerFormsValidators as he, registerValidationRule as ue, unregisterValidationRule as Se, validateField as xe, validateValue as ge, validateValueAsync as Fe } from "./validation/index.js";
+import { placeholder as Ee, registerFormsModifiers as ye, required as Ve, validation as be } from "./modifiers/index.js";
 class d {
   constructor(e) {
-    this.properties = e, this.formState = o(e.initialValues || {}), e.validation && Object.entries(e.validation).forEach(
+    this.properties = e, this.formState = n(e.initialValues || {}), e.validation && Object.entries(e.validation).forEach(
       ([t, r]) => {
         this.formState.register(t, r);
       }
@@ -58,7 +59,7 @@ class d {
 class p {
   constructor(e) {
     this.properties = e;
-    const [t, r] = n(
+    const [t, r] = o(
       e.defaultExpanded ?? !0
     );
     this.expanded = t, this.setExpanded = r;
@@ -128,10 +129,10 @@ function x(i) {
 function g(i) {
   return i.replace(/\D/g, "").replace(/(\d{3})(\d{2})(\d{4})/, "$1-$2-$3");
 }
-function C(i) {
+function F(i) {
   return i.toUpperCase().replace(/[^A-Z0-9]/g, "");
 }
-function F(i, e = "yyyy-MM-dd") {
+function C(i, e = "yyyy-MM-dd") {
   return i.toISOString().split("T")[0];
 }
 function E(i) {
@@ -144,7 +145,7 @@ export {
   _ as Checkbox,
   j as CheckboxGroup,
   D as ColorField,
-  Z as Combobox,
+  q as Combobox,
   M as CreditCardField,
   ie as CrossFieldValidators,
   w as DateField,
@@ -154,7 +155,7 @@ export {
   p as FormSection,
   se as FormsComponentValidation,
   ae as FormsValidationError,
-  q as MultiSelect,
+  Z as MultiSelect,
   L as NumberField,
   P as PasswordField,
   R as PhoneField,
@@ -171,33 +172,36 @@ export {
   H as TextField,
   I as TimeField,
   z as URLField,
-  ne as VALIDATION_RULES,
-  oe as ValidationMessageFormatter,
+  oe as VALIDATION_RULES,
+  ne as ValidationMessageFormatter,
   de as ValidationPresets,
   pe as ValidationUtils,
   le as createDebouncedValidator,
   N as createField,
-  o as createFormState,
+  n as createFormState,
   ce as createFormsValidators,
   T as createMultiStepFormState,
   fe as defaultMessageFormatter,
   f as form,
   m as formSection,
   S as formatCreditCard,
-  F as formatDate,
+  C as formatDate,
   x as formatPhoneNumber,
-  C as formatPostalCode,
+  F as formatPostalCode,
   g as formatSSN,
   me as getValidationRules,
   y as isValidDate,
   E as parseDate,
+  Ee as placeholder,
+  ye as registerFormsModifiers,
   he as registerFormsValidators,
   ue as registerValidationRule,
+  Ve as required,
   Se as unregisterValidationRule,
   h as useFormState,
   u as useFormValidation,
   xe as validateField,
   ge as validateValue,
-  Ce as validateValueAsync
+  Fe as validateValueAsync,
+  be as validation
 };
-//# sourceMappingURL=index.js.map

package/dist/modifiers/index.d.ts

@@ -0,0 +1,11 @@
+import type { ModifierRegistry, PluginInfo } from '@tachui/registry';
+export interface RegisterFormsModifiersOptions {
+    registry?: ModifierRegistry;
+    plugin?: PluginInfo;
+    force?: boolean;
+}
+export declare function registerFormsModifiers(options?: RegisterFormsModifiersOptions): void;
+export { validation, } from './validation';
+export { placeholder, } from './placeholder';
+export { required, } from './required';
+//# sourceMappingURL=index.d.ts.map

package/dist/modifiers/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/modifiers/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AA0BpE,MAAM,WAAW,6BAA6B;IAC5C,QAAQ,CAAC,EAAE,gBAAgB,CAAA;IAC3B,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB;AAED,wBAAgB,sBAAsB,CACpC,OAAO,CAAC,EAAE,6BAA6B,GACtC,IAAI,CAiBN;AAID,OAAO,EACL,UAAU,GACX,MAAM,cAAc,CAAA;AACrB,OAAO,EACL,WAAW,GACZ,MAAM,eAAe,CAAA;AACtB,OAAO,EACL,QAAQ,GACT,MAAM,YAAY,CAAA"}

package/dist/modifiers/index.js

@@ -0,0 +1,162 @@
+import { registerModifierWithMetadata as s } from "@tachui/core/modifiers";
+import { validateValue as h } from "../validation/index.js";
+import { isSignal as T } from "@tachui/core";
+const l = 74, c = /* @__PURE__ */ new WeakMap();
+function p(t) {
+  const e = [];
+  return t.forEach((r) => {
+    Array.isArray(r) ? e.push(...r) : e.push(r);
+  }), e;
+}
+function m(t, e) {
+  t instanceof HTMLElement && ((t instanceof HTMLInputElement || t instanceof HTMLTextAreaElement || t instanceof HTMLSelectElement) && t.setCustomValidity(e.valid ? "" : e.message ?? "Invalid value"), e.valid ? (t.removeAttribute("aria-invalid"), t.classList.remove("tachui-invalid"), t.removeAttribute("data-validation-message")) : (t.setAttribute("aria-invalid", "true"), t.classList.add("tachui-invalid"), e.message && t.setAttribute("data-validation-message", e.message)));
+}
+function L(t, e) {
+  return () => {
+    const r = t instanceof HTMLInputElement || t instanceof HTMLTextAreaElement || t instanceof HTMLSelectElement ? t.value : t.textContent ?? "", i = h(r, e);
+    m(t, i);
+  };
+}
+function g(t) {
+  const e = t.length ? t : ["required"];
+  return {
+    type: "forms:validation",
+    priority: l,
+    properties: { rules: e },
+    apply(r, i) {
+      const n = i.element ?? r;
+      if (!n) return r;
+      const a = L(n, e), o = c.get(n);
+      return o && (n.removeEventListener("blur", o), n.removeEventListener("input", o)), n.addEventListener("blur", a), n.addEventListener("input", a), c.set(n, a), a(), r;
+    }
+  };
+}
+const v = {
+  category: "interaction",
+  priority: l,
+  signature: "(...rules: ValidationRule[]) => Modifier",
+  description: "Attaches validation rules to form inputs, wiring blur/input handlers and ARIA state."
+};
+function F(...t) {
+  const e = p(t);
+  return g(e);
+}
+function b(t, e) {
+  s(
+    "validation",
+    (...i) => g(p(i)),
+    v,
+    t,
+    e
+  );
+}
+const A = 70;
+function H(t) {
+  return typeof t == "function" && T(t) || typeof t == "function" ? t() : t ?? "";
+}
+const u = /* @__PURE__ */ new WeakMap();
+function d(t, e) {
+  const r = H(e);
+  t instanceof HTMLInputElement || t instanceof HTMLTextAreaElement ? t.placeholder = r : t instanceof HTMLElement && t.setAttribute("placeholder", r), r ? t.setAttribute("data-placeholder", r) : t.removeAttribute("data-placeholder");
+}
+function y(t) {
+  return {
+    type: "forms:placeholder",
+    priority: A,
+    properties: { value: t },
+    apply(e, r) {
+      const i = r.element ?? e;
+      if (!i)
+        return e;
+      d(i, t);
+      const a = u.get(i);
+      a && i.removeEventListener("input", a);
+      const o = () => d(i, t);
+      return i.addEventListener("input", o), u.set(i, o), e;
+    }
+  };
+}
+const q = {
+  category: "accessibility",
+  priority: A,
+  signature: "(text: string) => Modifier",
+  description: "Sets placeholder text on form inputs and keeps a data attribute in sync."
+};
+function N(t) {
+  return y(t);
+}
+function I(t, e) {
+  s(
+    "placeholder",
+    (i) => y(i),
+    q,
+    t,
+    e
+  );
+}
+const M = 72;
+function R(t) {
+  if (typeof t == "boolean")
+    return { enabled: t };
+  if (typeof t == "string")
+    return { message: t, enabled: !0 };
+  const e = { enabled: !0 };
+  return t && Object.assign(e, t), e;
+}
+function P(t, { enabled: e, message: r }) {
+  t instanceof HTMLElement && (e !== !1 ? (t.setAttribute("aria-required", "true"), t.classList.add("tachui-required"), t instanceof HTMLInputElement || t instanceof HTMLTextAreaElement || t instanceof HTMLSelectElement ? t.required = !0 : t.setAttribute("data-required", "true"), r && t.setAttribute("data-required-message", r)) : (t.removeAttribute("aria-required"), t.classList.remove("tachui-required"), t instanceof HTMLInputElement || t instanceof HTMLTextAreaElement || t instanceof HTMLSelectElement ? t.required = !1 : t.removeAttribute("data-required"), t.removeAttribute("data-required-message")));
+}
+function E(t) {
+  const e = R(t);
+  return {
+    type: "forms:required",
+    priority: M,
+    properties: e,
+    apply(r, i) {
+      const n = i.element ?? r;
+      return n && P(n, e), r;
+    }
+  };
+}
+const x = {
+  category: "accessibility",
+  priority: M,
+  signature: "(options?: boolean | string | { message?: string }) => Modifier",
+  description: "Marks form inputs as required, wiring ARIA attributes and optional custom messaging."
+};
+function U(t) {
+  return E(t);
+}
+function V(t, e) {
+  s(
+    "required",
+    (i) => E(i),
+    x,
+    t,
+    e
+  );
+}
+const S = "0.8.0-alpha", O = S, _ = {
+  name: "@tachui/forms",
+  version: O,
+  author: "TachUI Team",
+  verified: !0
+}, z = [
+  b,
+  I,
+  V
+];
+let f = !1;
+function C(t) {
+  const e = t?.registry, r = t?.plugin ?? _, i = t?.force === !0, n = !!(e || t?.plugin);
+  !n && f && !i || (z.forEach(
+    (a) => a(e, r)
+  ), n || (f = !0));
+}
+C();
+export {
+  N as placeholder,
+  C as registerFormsModifiers,
+  U as required,
+  F as validation
+};

package/dist/modifiers/placeholder.d.ts

@@ -0,0 +1,8 @@
+import type { Signal } from '@tachui/core';
+import type { Modifier } from '@tachui/core/modifiers/types';
+import type { ModifierRegistry, PluginInfo } from '@tachui/registry';
+type PlaceholderValue = string | Signal<string>;
+export declare function placeholder(value: PlaceholderValue): Modifier;
+export declare function registerPlaceholderModifier(registry?: ModifierRegistry, plugin?: PluginInfo): void;
+export {};
+//# sourceMappingURL=placeholder.d.ts.map

package/dist/modifiers/placeholder.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"placeholder.d.ts","sourceRoot":"","sources":["../../src/modifiers/placeholder.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AAC1C,OAAO,KAAK,EACV,QAAQ,EAET,MAAM,8BAA8B,CAAA;AACrC,OAAO,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAKpE,KAAK,gBAAgB,GAAG,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,CAAA;AAmE/C,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,QAAQ,CAE7D;AAED,wBAAgB,2BAA2B,CACzC,QAAQ,CAAC,EAAE,gBAAgB,EAC3B,MAAM,CAAC,EAAE,UAAU,GAClB,IAAI,CASN"}

package/dist/modifiers/required.d.ts

@@ -0,0 +1,10 @@
+import type { Modifier } from '@tachui/core/modifiers/types';
+import type { ModifierRegistry, PluginInfo } from '@tachui/registry';
+interface RequiredModifierOptions {
+    message?: string;
+    enabled?: boolean;
+}
+export declare function required(options?: boolean | string | RequiredModifierOptions): Modifier;
+export declare function registerRequiredModifier(registry?: ModifierRegistry, plugin?: PluginInfo): void;
+export {};
+//# sourceMappingURL=required.d.ts.map

package/dist/modifiers/required.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"required.d.ts","sourceRoot":"","sources":["../../src/modifiers/required.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAmB,MAAM,8BAA8B,CAAA;AAC7E,OAAO,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAKpE,UAAU,uBAAuB;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AA2ED,wBAAgB,QAAQ,CACtB,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,uBAAuB,GACnD,QAAQ,CAEV;AAED,wBAAgB,wBAAwB,CACtC,QAAQ,CAAC,EAAE,gBAAgB,EAC3B,MAAM,CAAC,EAAE,UAAU,GAClB,IAAI,CAWN"}

package/dist/modifiers/validation.d.ts

@@ -0,0 +1,8 @@
+import type { Modifier } from '@tachui/core/modifiers/types';
+import type { ModifierRegistry, PluginInfo } from '@tachui/registry';
+import type { ValidationRule } from '../types';
+type ValidationArgs = ValidationRule[] | ValidationRule;
+export declare function validation(...rules: ValidationArgs[]): Modifier;
+export declare function registerValidationModifier(registry?: ModifierRegistry, plugin?: PluginInfo): void;
+export {};
+//# sourceMappingURL=validation.d.ts.map

package/dist/modifiers/validation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"validation.d.ts","sourceRoot":"","sources":["../../src/modifiers/validation.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAmB,MAAM,8BAA8B,CAAA;AAC7E,OAAO,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAGpE,OAAO,KAAK,EAAoB,cAAc,EAAE,MAAM,UAAU,CAAA;AAIhE,KAAK,cAAc,GACf,cAAc,EAAE,GAChB,cAAc,CAAA;AA0GlB,wBAAgB,UAAU,CACxB,GAAG,KAAK,EAAE,cAAc,EAAE,GACzB,QAAQ,CAGV;AAED,wBAAgB,0BAA0B,CACxC,QAAQ,CAAC,EAAE,gBAAgB,EAC3B,MAAM,CAAC,EAAE,UAAU,GAClB,IAAI,CAWN"}

package/dist/validation/index.js

@@ -688,4 +688,3 @@ export {
   u as validateValue,
   f as validateValueAsync
 };
-//# sourceMappingURL=index.js.map

package/dist/version.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Package Information
+ *
+ * Provides consistent package name and version exports for @tachui/forms.
+ */
+export declare const TACHUI_PACKAGE: any;
+export declare const TACHUI_PACKAGE_VERSION: any;
+//# sourceMappingURL=version.d.ts.map

package/dist/version.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../src/version.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,eAAO,MAAM,cAAc,KAA4B,CAAA;AACvD,eAAO,MAAM,sBAAsB,KAA+B,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tachui/forms",
-  "version": "0.8.0-alpha",
+  "version": "0.8.5-alpha",
   "description": "Unified form components and validation system for tachUI (formerly @tachui/forms + @tachui/advanced-forms)",
   "type": "module",
   "main": "./dist/index.js",
@@ -35,10 +35,14 @@
     "./validation": {
       "types": "./dist/validation/index.d.ts",
       "import": "./dist/validation/index.js"
+    },
+    "./modifiers": {
+      "types": "./dist/modifiers/index.d.ts",
+      "import": "./dist/modifiers/index.js"
     }
   },
   "peerDependencies": {
-    "@tachui/core": "0.8.0-alpha"
+    "@tachui/core": "0.8.5-alpha"
   },
   "devDependencies": {
     "@types/node": "^20.10.0",
@@ -62,11 +66,16 @@
     "directory": "packages/forms"
   },
   "dependencies": {
-    "@tachui/primitives": "0.8.0-alpha"
+    "@tachui/core": "0.8.5-alpha",
+    "@tachui/primitives": "0.8.5-alpha",
+    "@tachui/modifiers": "0.8.5-alpha",
+    "@tachui/registry": "0.8.5-alpha"
   },
   "scripts": {
     "dev": "vite build --watch --mode development",
     "build": "vite build && pnpm build:types",
+    "build:dev": "vite build --mode development && pnpm build:types",
+    "build:prod": "vite build --mode production && pnpm build:types",
     "build:types": "tsc --project tsconfig.build.json",
     "valid": "clear && vitest run && pnpm type-check && pnpm lint && pnpm build",
     "test": "vitest --run",

package/src/index.ts

@@ -29,6 +29,14 @@ export * from './validation'
 // Utilities and Helpers
 export * from './utils'
 
+// Modifiers
+export {
+  placeholder,
+  required,
+  validation,
+  registerFormsModifiers,
+} from './modifiers'
+
 // Export specific types to avoid conflicts
 export type {
   // Core form types

package/src/modifiers/index.ts

@@ -0,0 +1,70 @@
+import type { ModifierRegistry, PluginInfo } from '@tachui/registry'
+import { registerValidationModifier } from './validation'
+import { registerPlaceholderModifier } from './placeholder'
+import { registerRequiredModifier } from './required'
+import { TACHUI_PACKAGE_VERSION } from '../version'
+
+type FormsModifierRegistration = (
+  registry?: ModifierRegistry,
+  plugin?: PluginInfo,
+) => void
+
+const FORMS_PLUGIN_INFO: PluginInfo = {
+  name: '@tachui/forms',
+  version: TACHUI_PACKAGE_VERSION,
+  author: 'TachUI Team',
+  verified: true,
+}
+
+const registrations: FormsModifierRegistration[] = [
+  registerValidationModifier,
+  registerPlaceholderModifier,
+  registerRequiredModifier,
+]
+
+let registered = false
+
+export interface RegisterFormsModifiersOptions {
+  registry?: ModifierRegistry
+  plugin?: PluginInfo
+  force?: boolean
+}
+
+export function registerFormsModifiers(
+  options?: RegisterFormsModifiersOptions,
+): void {
+  const targetRegistry = options?.registry
+  const targetPlugin = options?.plugin ?? FORMS_PLUGIN_INFO
+  const shouldForce = options?.force === true
+  const isCustomTarget = Boolean(targetRegistry || options?.plugin)
+
+  if (!isCustomTarget && registered && !shouldForce) {
+    return
+  }
+
+  registrations.forEach(register =>
+    register(targetRegistry, targetPlugin),
+  )
+
+  if (!isCustomTarget) {
+    registered = true
+  }
+}
+
+registerFormsModifiers()
+
+export {
+  validation,
+} from './validation'
+export {
+  placeholder,
+} from './placeholder'
+export {
+  required,
+} from './required'
+
+if (typeof import.meta !== 'undefined' && (import.meta as any).hot) {
+  ;(import.meta as any).hot.accept(() => {
+    registerFormsModifiers({ force: true })
+  })
+}

package/src/modifiers/placeholder.ts

@@ -0,0 +1,95 @@
+import { isSignal } from '@tachui/core'
+import type { Signal } from '@tachui/core'
+import type {
+  Modifier,
+  ModifierContext,
+} from '@tachui/core/modifiers/types'
+import type { ModifierRegistry, PluginInfo } from '@tachui/registry'
+import { registerModifierWithMetadata } from '@tachui/core/modifiers'
+
+const placeholderPriority = 70
+
+type PlaceholderValue = string | Signal<string>
+
+function resolvePlaceholder(value: PlaceholderValue): string {
+  if (typeof value === 'function' && isSignal(value)) {
+    return value()
+  }
+  if (typeof value === 'function') {
+    return (value as () => string)()
+  }
+  return value ?? ''
+}
+
+const placeholderHandlers = new WeakMap<Element, () => void>()
+
+function applyPlaceholder(
+  element: Element,
+  value: PlaceholderValue,
+): void {
+  const resolved = resolvePlaceholder(value)
+  if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement) {
+    element.placeholder = resolved
+  } else if (element instanceof HTMLElement) {
+    element.setAttribute('placeholder', resolved)
+  }
+  if (resolved) {
+    element.setAttribute('data-placeholder', resolved)
+  } else {
+    element.removeAttribute('data-placeholder')
+  }
+}
+
+function createPlaceholderModifier(value: PlaceholderValue): Modifier {
+  return {
+    type: 'forms:placeholder',
+    priority: placeholderPriority,
+    properties: { value },
+    apply(node: any, context: ModifierContext) {
+      const element = (context.element ?? node) as Element | undefined
+      if (!element) {
+        return node
+      }
+
+      const update = () => applyPlaceholder(element, value)
+      update()
+
+      const previous = placeholderHandlers.get(element)
+      if (previous) {
+        element.removeEventListener('input', previous)
+      }
+
+      const handler = () => applyPlaceholder(element, value)
+      element.addEventListener('input', handler)
+      placeholderHandlers.set(element, handler)
+
+      return node
+    },
+  }
+}
+
+const PLACEHOLDER_METADATA = {
+  category: 'accessibility' as const,
+  priority: placeholderPriority,
+  signature: '(text: string) => Modifier',
+  description:
+    'Sets placeholder text on form inputs and keeps a data attribute in sync.',
+}
+
+export function placeholder(value: PlaceholderValue): Modifier {
+  return createPlaceholderModifier(value)
+}
+
+export function registerPlaceholderModifier(
+  registry?: ModifierRegistry,
+  plugin?: PluginInfo,
+): void {
+  const factory = (value: PlaceholderValue) => createPlaceholderModifier(value)
+  registerModifierWithMetadata(
+    'placeholder',
+    factory,
+    PLACEHOLDER_METADATA,
+    registry,
+    plugin,
+  )
+}