@timeax/form-palette 0.0.1

package/src/variants/core/number.tsx

@@ -0,0 +1,115 @@
+// src/variants/core/text.tsx
+
+import * as React from "react";
+
+import type { Dict } from "@/schema/core";
+import type { VariantModule } from "@/schema/variant";
+import type { ValidateResult } from "@/schema/input-field";
+import { ShadcnTextVariant } from "@/presets/shadcn-variants/text";
+import type { ShadcnTextUiProps } from "@/presets/shadcn-variants/text";
+import { ShadcnNumberVariant, ShadcnNumberVariantProps } from "@/presets/shadcn-variants/number";
+
+/**
+ * Text variant props (core layer).
+ *
+ * - Extends Dict so it can cleanly participate in the Variants registry.
+ * - Extends the Shadcn UI props so the core variant can pass everything
+ *   straight through to the underlying visual component.
+ *
+ * This is where we hang *semantic* flags that drive validation.
+ */
+export interface TextVariantProps extends Dict, ShadcnTextUiProps {
+   /**
+    * If true, the value will be trimmed before validation.
+    * (Visual value is still whatever the user types; this is just for
+    * validation semantics.)
+    */
+   trim?: boolean;
+
+   /**
+    * Minimum allowed string length (after optional trimming).
+    */
+   minLength?: number;
+
+   /**
+    * Maximum allowed string length (after optional trimming).
+    */
+   maxLength?: number;
+}
+
+/**
+ * Simple validation helper for the text variant.
+ */
+function validateText(
+   value: number | undefined,
+   ctx: {
+      required?: boolean;
+      props: ShadcnNumberVariantProps;
+   }
+): ValidateResult {
+   const { required, props } = ctx;
+   const { minLength, maxLength } = props;
+
+   const raw = (value ?? "") + "";
+   const v = raw.trim();
+
+   // required
+   if (required && v.length === 0) {
+      return "This field is required.";
+   }
+
+   // minLength
+   if (typeof minLength === "number" && v.length > 0 && v.length < minLength) {
+      return `Please enter at least ${minLength} characters.`;
+   }
+
+   // maxLength
+   if (typeof maxLength === "number" && v.length > maxLength) {
+      return `Please enter no more than ${maxLength} characters.`;
+   }
+
+   return true;
+}
+
+/**
+ * Core text variant module.
+ *
+ * - Uses ShadcnTextVariant as the visual component.
+ * - Adds simple length-based validation.
+ * - Provides layout defaults for InputField to use.
+ */
+export const numberVariant: VariantModule<"number"> = {
+   variant: "number",
+
+   // Visual component: Shadcn-based text input
+   Variant: ShadcnNumberVariant as any,
+
+   // Validation logic (runs before/alongside per-field onValidate)
+   validate(value, { required, props, field, form }) {
+      // field + form are available if you need them later.
+      return validateText(value, { required, props });
+   },
+
+   // Layout defaults for this variant
+   defaults: {
+      layout: {
+         labelPlacement: "top",
+         sublabelPlacement: "right",
+         descriptionPlacement: "below",
+         helpTextPlacement: "below",
+         errorTextPlacement: "below",
+         inline: false,
+         fullWidth: true,
+         defaultSize: "md",
+         defaultDensity: "comfortable",
+      },
+   },
+
+   meta: {
+      label: "Number",
+      description: "Single-line number input",
+      tags: ["number", "input", "integer", "float"],
+   },
+};
+
+export default numberVariant;

package/src/variants/core/password.tsx

@@ -0,0 +1,35 @@
+// src/variants/core/password.tsx
+
+import type { VariantModuleFor } from "@/schema/variant";
+import { ShadcnPasswordVariant } from "@/presets/shadcn-variants/password";
+
+/**
+ * Core module for the "password" variant.
+ *
+ * - Uses the ShadcnPasswordVariant UI (Input + reveal toggle + strength meter).
+ * - Value type is string | undefined (from Variants["password"].value).
+ * - Props are ShadcnPasswordVariantProps (from Variants["password"].props).
+ */
+export const passwordVariant: VariantModuleFor<"password"> = {
+   variant: "password",
+   Variant: ShadcnPasswordVariant,
+
+   // Optional layout defaults – tweak as you like
+   defaults: {
+      layout: {
+         fullWidth: true,
+         // You can set defaultSize/defaultDensity here if you want:
+         // defaultSize: "md",
+         // defaultDensity: "normal",
+      },
+   },
+
+   meta: {
+      label: "Password",
+      description:
+         "Password input with reveal toggle and optional strength meter.",
+      tags: ["auth", "security", "password"],
+   },
+};
+
+export default passwordVariant;

package/src/variants/core/phone.tsx

@@ -0,0 +1,16 @@
+// ———————————————————————————————
+// VariantModule wiring
+
+import { ShadcnPhoneVariant } from "@/presets/shadcn-variants/phone";
+import { VariantModule } from "@/schema/variant";
+
+// ———————————————————————————————
+export const PhoneVariantModule: VariantModule<"phone"> = {
+   variant: "phone",
+   Variant: ShadcnPhoneVariant,
+   meta: {
+      label: "Phone",
+      description: "Phone number input with country code and masking.",
+      tags: ["phone", "tel", "contact"],
+   },
+};

package/src/variants/core/radio.tsx

@@ -0,0 +1,38 @@
+// src/variants/core/radio.ts
+
+import type { VariantModuleFor } from "@/schema/variant";
+import { ShadcnRadioVariant } from "@/presets/shadcn-variants/radio";
+
+/**
+ * Built-in "radio" variant module.
+ *
+ * Uses the Shadcn-based implementation in presets/shadcn-variants/radio.tsx
+ */
+export const radioVariantModule: VariantModuleFor<"radio"> = {
+   variant: "radio",
+   // Note: registry-level typing uses unknown, but the component itself is generic.
+   Variant: ShadcnRadioVariant as any,
+   defaults: {
+      layout: {
+         // Standard stacked field layout; the smart renderer still
+         // handles ordering/relative roots for helpers.
+         labelPlacement: "top",
+         sublabelPlacement: "right",
+         descriptionPlacement: "below",
+         helpTextPlacement: "below",
+         errorTextPlacement: "below",
+         inline: false,
+         fullWidth: true,
+
+         // Explicit layout hints
+         defaultSize: "md",
+         defaultDensity: "comfortable", // ← uses your FieldDensity union
+      },
+   },
+   meta: {
+      label: "Radio group",
+      description:
+         "Choose one option from a list of mutually exclusive choices.",
+      tags: ["choice", "select", "exclusive", "radio"],
+   },
+};

package/src/variants/core/select.tsx

@@ -0,0 +1,15 @@
+import ShadcnSelectVariant, { ShadcnSelectVariantProps } from "@/presets/shadcn-variants/select";
+import { VariantModuleFor } from "@/schema/variant";
+
+export type SelectVariantProps = ShadcnSelectVariantProps;
+
+export const selectModule: VariantModuleFor<"select"> = {
+   variant: "select",
+   Variant: ShadcnSelectVariant,
+
+   meta: {
+      label: "Select",
+      description: "Single-value dropdown based on Shadcn Select.",
+      tags: ["select", "dropdown", "single-value"],
+   },
+};

package/src/variants/core/slider.tsx

@@ -0,0 +1,55 @@
+// src/variants/core/slider.ts
+
+import type { ValidateResult } from "@/schema/input-field";
+import type { ShadcnSliderVariantProps } from "@/presets/shadcn-variants/slider";
+import { ShadcnSliderVariant } from "@/presets/shadcn-variants/slider";
+import { VariantModule } from "@/schema/variant";
+
+/**
+ * Slider value type:
+ * - `number | undefined` for now (single-value slider).
+ *   If/when you add range support, this can be widened to [number, number].
+ */
+export type SliderValue = number | undefined;
+
+
+/**
+ * Basic validation:
+ * - if required → must have a numeric value
+ * - otherwise always OK
+ */
+function validateSlider(
+   value: SliderValue,
+   ctx: { required?: boolean }
+): ValidateResult {
+   if (ctx.required) {
+      if (value === undefined || value === null) {
+         return "Required.";
+      }
+      if (typeof value !== "number" || Number.isNaN(value)) {
+         return "Invalid number.";
+      }
+   }
+
+   // You could optionally enforce min/max here using ctx.props
+   return true;
+}
+
+/**
+ * Register the slider variant with the global registry.
+ *
+ * No layout defaults are provided here:
+ * - layout (inline vs stacked, label placement, etc.) is controlled by
+ *   the host via FieldLayoutConfig / InputField overrides instead.
+ */
+export default {
+   variant: "slider",
+   Variant: ShadcnSliderVariant,
+   validate(value, ctx): ValidateResult {
+      return validateSlider(value as SliderValue, {
+         required: ctx.required,
+      });
+   },
+} as VariantModule<'slider'>;
+
+export type SliderVariantProps = ShadcnSliderVariantProps;

package/src/variants/core/text.tsx

@@ -0,0 +1,114 @@
+// src/variants/core/text.tsx
+
+import * as React from "react";
+
+import type { Dict } from "@/schema/core";
+import type { VariantModule } from "@/schema/variant";
+import type { ValidateResult } from "@/schema/input-field";
+import { ShadcnTextVariant } from "@/presets/shadcn-variants/text";
+import type { ShadcnTextUiProps, ShadcnTextVariantProps } from "@/presets/shadcn-variants/text";
+
+/**
+ * Text variant props (core layer).
+ *
+ * - Extends Dict so it can cleanly participate in the Variants registry.
+ * - Extends the Shadcn UI props so the core variant can pass everything
+ *   straight through to the underlying visual component.
+ *
+ * This is where we hang *semantic* flags that drive validation.
+ */
+export interface TextVariantProps extends Dict, ShadcnTextUiProps {
+    /**
+     * If true, the value will be trimmed before validation.
+     * (Visual value is still whatever the user types; this is just for
+     * validation semantics.)
+     */
+    trim?: boolean;
+
+    /**
+     * Minimum allowed string length (after optional trimming).
+     */
+    minLength?: number;
+
+    /**
+     * Maximum allowed string length (after optional trimming).
+     */
+    maxLength?: number;
+}
+
+/**
+ * Simple validation helper for the text variant.
+ */
+function validateText(
+    value: string | undefined,
+    ctx: {
+        required?: boolean;
+        props: ShadcnTextVariantProps & TextVariantProps;
+    }
+): ValidateResult {
+    const { required, props } = ctx;
+    const { trim, minLength, maxLength } = props;
+
+    const raw = value ?? "";
+    const v = trim ? raw.trim() : raw;
+
+    // required
+    if (required && v.length === 0) {
+        return "This field is required.";
+    }
+
+    // minLength
+    if (typeof minLength === "number" && v.length > 0 && v.length < minLength) {
+        return `Please enter at least ${minLength} characters.`;
+    }
+
+    // maxLength
+    if (typeof maxLength === "number" && v.length > maxLength) {
+        return `Please enter no more than ${maxLength} characters.`;
+    }
+
+    return true;
+}
+
+/**
+ * Core text variant module.
+ *
+ * - Uses ShadcnTextVariant as the visual component.
+ * - Adds simple length-based validation.
+ * - Provides layout defaults for InputField to use.
+ */
+export const textVariant: VariantModule<"text"> = {
+    variant: "text",
+
+    // Visual component: Shadcn-based text input
+    Variant: ShadcnTextVariant,
+
+    // Validation logic (runs before/alongside per-field onValidate)
+    validate(value, { required, props, field, form }) {
+        //@ts-ignore field + form are available if you need them later.
+        return validateText(value, { required, props });
+    },
+
+    // Layout defaults for this variant
+    defaults: {
+        layout: {
+            labelPlacement: "top",
+            sublabelPlacement: "right",
+            descriptionPlacement: "below",
+            helpTextPlacement: "below",
+            errorTextPlacement: "below",
+            inline: false,
+            fullWidth: true,
+            defaultSize: "md",
+            defaultDensity: "comfortable",
+        },
+    },
+
+    meta: {
+        label: "Text",
+        description: "Single-line text input",
+        tags: ["text", "input", "string"],
+    },
+};
+
+export default textVariant;

package/src/variants/core/textarea.tsx

@@ -0,0 +1,22 @@
+import ShadcnTextareaVariant from "@/presets/shadcn-variants/textarea";
+import { VariantModuleFor } from "@/schema/variant";
+
+
+export const textareaVariant: VariantModuleFor<"textarea"> = {
+   variant: "textarea",
+   Variant: ShadcnTextareaVariant as any,
+   // Optional layout defaults – tweak as you like
+   defaults: {
+      layout: {
+         fullWidth: true,
+         // You can set defaultSize/defaultDensity here if you want:
+         // defaultSize: "md",
+         // defaultDensity: "normal",
+      },
+   },
+   meta: {
+      label: "Textarea",
+      description: "Multi-line text input area.",
+      tags: ["text", "multiline", "comments", "notes"],
+   },
+}

package/src/variants/core/toggle.tsx

@@ -0,0 +1,50 @@
+// src/variants/core/toggle.ts
+
+import type { VariantModuleFor } from "@/schema/variant";
+import type { FieldLayoutConfig } from "@/schema/input-field";
+import ShadcnToggleVariant from "@/presets/shadcn-variants/toggle";
+
+export const toggleLayoutDefaults: FieldLayoutConfig = {
+   // Render label + control in a single row
+   inline: true,
+
+   // Semantically: label is to the "right" of the control for this variant.
+   // (Your InputField can use this to decide macro-level positioning.)
+   labelPlacement: "right",
+
+   // Attach all helpers to the label root by default.
+   // Sublabel will still use its own placement (default: "right"),
+   // but it's logically anchored to the label block.
+   relativeRoots: {
+      sublabel: "label",
+      description: "label",
+      helpText: "label",
+      errorText: "label",
+   },
+
+   fullWidth: false,
+
+   // Within the label root, show error first, then description, then help,
+   // then sublabel (all still respecting their individual placements).
+   ordering: {
+      label: ["errorText", "description", "helpText", "sublabel"],
+      // For this variant we don't really use input-root helpers,
+      // but we keep the key for completeness.
+      input: [],
+   },
+};
+
+export const ToggleVariantModule: VariantModuleFor<"toggle"> = {
+   variant: "toggle",
+   Variant: ShadcnToggleVariant as any,
+   defaults: {
+      layout: toggleLayoutDefaults,
+   },
+   meta: {
+      label: "Toggle",
+      description: "Boolean on/off switch",
+      tags: ["boolean", "toggle", "switch"],
+   },
+};
+
+export default ToggleVariantModule;

package/src/variants/core/treeselect.tsx

@@ -0,0 +1,11 @@
+import ShadcnTreeSelectVariant from "@/presets/shadcn-variants/treeselect";
+import { VariantModule } from "@/schema/variant";
+
+
+
+const treeselectModule: VariantModule<'treeselect'> = {
+   variant: 'treeselect',
+   Variant: ShadcnTreeSelectVariant as any
+}
+
+export default treeselectModule