@mdxui/terminal 2.0.0

package/dist/forms/index.js

@@ -0,0 +1,464 @@
+import "../chunk-3RG5ZIWI.js";
+
+// src/forms/schemas.ts
+import { z } from "zod";
+var FieldValueSchema = z.union([
+  z.string(),
+  z.number(),
+  z.boolean(),
+  z.null(),
+  z.undefined(),
+  z.array(z.string())
+]);
+var SelectOptionSchema = z.object({
+  label: z.string(),
+  value: z.string(),
+  disabled: z.boolean().optional(),
+  description: z.string().optional()
+});
+var SearchSuggestionSchema = z.object({
+  label: z.string(),
+  value: z.string(),
+  description: z.string().optional(),
+  icon: z.string().optional()
+});
+var FieldTypeSchema = z.enum([
+  "text",
+  "email",
+  "password",
+  "number",
+  "checkbox",
+  "textarea",
+  "select"
+]);
+var FieldConfigSchema = z.object({
+  name: z.string().min(1, "Field name is required"),
+  label: z.string().optional(),
+  type: FieldTypeSchema.optional(),
+  value: FieldValueSchema.optional(),
+  placeholder: z.string().optional(),
+  required: z.boolean().optional(),
+  error: z.string().optional(),
+  valid: z.boolean().optional(),
+  disabled: z.boolean().optional(),
+  readonly: z.boolean().optional(),
+  helperText: z.string().optional(),
+  focused: z.boolean().optional(),
+  cursorPosition: z.number().int().nonnegative().optional(),
+  selectionStart: z.number().int().nonnegative().optional(),
+  selectionEnd: z.number().int().nonnegative().optional(),
+  options: z.array(SelectOptionSchema).optional()
+});
+var FieldGroupSchema = z.object({
+  title: z.string(),
+  fields: z.array(FieldConfigSchema),
+  collapsible: z.boolean().optional(),
+  collapsed: z.boolean().optional()
+});
+var FormStateSchema = z.object({
+  title: z.string().optional(),
+  description: z.string().optional(),
+  fields: z.array(FieldConfigSchema).optional(),
+  groups: z.array(FieldGroupSchema).optional(),
+  error: z.string().optional(),
+  success: z.string().optional(),
+  loading: z.boolean().optional(),
+  submitLabel: z.string().optional(),
+  cancelLabel: z.string().optional(),
+  submitDisabled: z.boolean().optional(),
+  submitHotkey: z.string().optional(),
+  border: z.boolean().optional()
+});
+var SelectStateSchema = z.object({
+  options: z.array(SelectOptionSchema),
+  value: z.union([z.string(), z.array(z.string())]).optional(),
+  label: z.string().optional(),
+  placeholder: z.string().optional(),
+  required: z.boolean().optional(),
+  error: z.string().optional(),
+  valid: z.boolean().optional(),
+  disabled: z.boolean().optional(),
+  open: z.boolean().optional(),
+  multiple: z.boolean().optional(),
+  highlightedIndex: z.number().int().optional(),
+  searchable: z.boolean().optional(),
+  searchValue: z.string().optional(),
+  filteredOptions: z.array(SelectOptionSchema).optional(),
+  loading: z.boolean().optional()
+});
+var SearchStateSchema = z.object({
+  value: z.string(),
+  placeholder: z.string().optional(),
+  label: z.string().optional(),
+  disabled: z.boolean().optional(),
+  loading: z.boolean().optional(),
+  error: z.string().optional(),
+  focused: z.boolean().optional(),
+  cursorPosition: z.number().int().nonnegative().optional(),
+  suggestions: z.array(SearchSuggestionSchema).nullable().optional(),
+  showSuggestions: z.boolean().optional(),
+  highlightedIndex: z.number().int().optional(),
+  maxSuggestions: z.number().int().positive().optional(),
+  highlightMatches: z.boolean().optional(),
+  isTyping: z.boolean().optional()
+});
+var EmailSchema = z.string().email("Please enter a valid email address");
+var PasswordSchema = z.string().min(8, "Password must be at least 8 characters").regex(/[A-Z]/, "Password must contain at least one uppercase letter").regex(/[a-z]/, "Password must contain at least one lowercase letter").regex(/[0-9]/, "Password must contain at least one number");
+var SimplePasswordSchema = z.string().min(8, "Password must be at least 8 characters");
+var UsernameSchema = z.string().min(3, "Username must be at least 3 characters").max(20, "Username must be at most 20 characters").regex(/^[a-zA-Z0-9_-]+$/, "Username can only contain letters, numbers, underscores, and hyphens");
+var UrlSchema = z.string().url("Please enter a valid URL");
+var PhoneSchema = z.string().regex(/^\+?[1-9]\d{1,14}$/, "Please enter a valid phone number");
+function createLoginSchema(options) {
+  const base = z.object({
+    email: EmailSchema,
+    password: options?.strictPassword ? PasswordSchema : SimplePasswordSchema
+  });
+  if (options?.rememberMe) {
+    return base.extend({
+      rememberMe: z.boolean().optional().default(false)
+    });
+  }
+  return base;
+}
+function createRegistrationSchema(options) {
+  let schema = z.object({
+    email: EmailSchema,
+    password: PasswordSchema
+  });
+  if (options?.usernameRequired) {
+    schema = schema.extend({
+      username: UsernameSchema
+    });
+  }
+  if (options?.confirmPassword) {
+    schema = schema.extend({
+      confirmPassword: z.string()
+    });
+    return schema.refine(
+      (data) => {
+        const d = data;
+        return d.password === d.confirmPassword;
+      },
+      {
+        message: "Passwords do not match",
+        path: ["confirmPassword"]
+      }
+    ).and(
+      options?.termsRequired ? z.object({ acceptTerms: z.literal(true, { errorMap: () => ({ message: "You must accept the terms" }) }) }) : z.object({})
+    );
+  }
+  if (options?.termsRequired) {
+    return schema.extend({
+      acceptTerms: z.literal(true, {
+        errorMap: () => ({ message: "You must accept the terms" })
+      })
+    });
+  }
+  return schema;
+}
+function createContactSchema(options) {
+  let schema = z.object({
+    name: z.string().min(1, "Name is required"),
+    email: EmailSchema,
+    message: z.string().min(10, "Message must be at least 10 characters")
+  });
+  if (options?.phoneRequired) {
+    schema = schema.extend({
+      phone: PhoneSchema
+    });
+  }
+  if (options?.subjectRequired) {
+    schema = schema.extend({
+      subject: z.string().min(1, "Subject is required")
+    });
+  }
+  return schema;
+}
+function createProfileSchema() {
+  return z.object({
+    firstName: z.string().min(1, "First name is required"),
+    lastName: z.string().min(1, "Last name is required"),
+    email: EmailSchema,
+    bio: z.string().max(500, "Bio must be at most 500 characters").optional(),
+    website: UrlSchema.optional().or(z.literal("")),
+    location: z.string().optional(),
+    timezone: z.string().optional()
+  });
+}
+function createSettingsSchema() {
+  return z.object({
+    emailNotifications: z.boolean().default(true),
+    pushNotifications: z.boolean().default(true),
+    marketingEmails: z.boolean().default(false),
+    theme: z.enum(["light", "dark", "system"]).default("system"),
+    language: z.string().default("en")
+  });
+}
+
+// src/forms/converters.ts
+function convertRHFToFormState(rhfState, fields, options) {
+  const enhancedFields = fields.map((field) => {
+    const error = rhfState.errors[field.name];
+    const isTouched = rhfState.touchedFields[field.name];
+    const isDirty = rhfState.dirtyFields[field.name];
+    const value = options?.values?.[field.name];
+    return {
+      ...field,
+      value: value ?? field.value,
+      error: error?.message ?? field.error,
+      valid: isTouched && !error && field.required ? true : field.valid
+      // Mark as valid if touched without error and was required
+    };
+  });
+  const enhancedGroups = options?.groups?.map((group) => ({
+    ...group,
+    fields: group.fields.map((field) => {
+      const error = rhfState.errors[field.name];
+      const isTouched = rhfState.touchedFields[field.name];
+      const value = options?.values?.[field.name];
+      return {
+        ...field,
+        value: value ?? field.value,
+        error: error?.message ?? field.error,
+        valid: isTouched && !error && field.required ? true : field.valid
+      };
+    })
+  }));
+  return {
+    title: options?.title,
+    description: options?.description,
+    fields: enhancedFields,
+    groups: enhancedGroups,
+    loading: rhfState.isSubmitting,
+    submitLabel: options?.submitLabel,
+    cancelLabel: options?.cancelLabel,
+    submitDisabled: !rhfState.isValid || rhfState.isSubmitting,
+    submitHotkey: options?.submitHotkey,
+    border: options?.border,
+    values: options?.values
+  };
+}
+function formStateToUINode(formState) {
+  return {
+    type: "form",
+    props: {
+      title: formState.title,
+      description: formState.description,
+      fields: formState.fields,
+      groups: formState.groups,
+      error: formState.error,
+      success: formState.success,
+      loading: formState.loading,
+      submitLabel: formState.submitLabel,
+      cancelLabel: formState.cancelLabel,
+      submitDisabled: formState.submitDisabled,
+      submitHotkey: formState.submitHotkey,
+      border: formState.border
+    }
+  };
+}
+function fieldConfigToUINode(field) {
+  return {
+    type: "field",
+    props: {
+      name: field.name,
+      label: field.label,
+      type: field.type,
+      value: field.value,
+      placeholder: field.placeholder,
+      required: field.required,
+      error: field.error,
+      valid: field.valid,
+      disabled: field.disabled,
+      readonly: field.readonly,
+      helperText: field.helperText,
+      focused: field.focused,
+      cursorPosition: field.cursorPosition,
+      selectionStart: field.selectionStart,
+      selectionEnd: field.selectionEnd
+    }
+  };
+}
+function createFieldFromRegister(name, registerResult, options) {
+  return {
+    name: registerResult.name,
+    label: options?.label ?? name.charAt(0).toUpperCase() + name.slice(1),
+    type: options?.type ?? "text",
+    placeholder: options?.placeholder,
+    required: options?.required,
+    helperText: options?.helperText,
+    disabled: options?.disabled,
+    readonly: options?.readonly
+  };
+}
+function selectStateToUINode(selectState) {
+  return {
+    type: "select",
+    props: {
+      options: selectState.options,
+      value: selectState.value,
+      label: selectState.label,
+      placeholder: selectState.placeholder,
+      required: selectState.required,
+      error: selectState.error,
+      valid: selectState.valid,
+      disabled: selectState.disabled,
+      open: selectState.open ?? true,
+      multiple: selectState.multiple,
+      highlightedIndex: selectState.highlightedIndex ?? -1,
+      searchable: selectState.searchable,
+      searchValue: selectState.searchValue,
+      filteredOptions: selectState.filteredOptions,
+      loading: selectState.loading
+    }
+  };
+}
+function createSelectForController(name, options, fieldOptions) {
+  return {
+    options,
+    value: fieldOptions?.value,
+    label: fieldOptions?.label ?? name.charAt(0).toUpperCase() + name.slice(1),
+    placeholder: fieldOptions?.placeholder ?? `Select ${name}...`,
+    required: fieldOptions?.required,
+    error: fieldOptions?.error,
+    disabled: fieldOptions?.disabled,
+    multiple: fieldOptions?.multiple,
+    searchable: fieldOptions?.searchable,
+    open: true,
+    highlightedIndex: -1
+  };
+}
+function searchStateToUINode(searchState) {
+  return {
+    type: "search",
+    props: {
+      value: searchState.value,
+      placeholder: searchState.placeholder,
+      label: searchState.label,
+      disabled: searchState.disabled,
+      loading: searchState.loading,
+      error: searchState.error,
+      focused: searchState.focused,
+      cursorPosition: searchState.cursorPosition,
+      suggestions: searchState.suggestions,
+      showSuggestions: searchState.showSuggestions,
+      highlightedIndex: searchState.highlightedIndex ?? -1,
+      maxSuggestions: searchState.maxSuggestions ?? 10,
+      highlightMatches: searchState.highlightMatches,
+      isTyping: searchState.isTyping
+    }
+  };
+}
+function createDebouncedSearch(onSearch, delay = 300) {
+  let timeoutId = null;
+  let currentState = {
+    suggestions: null,
+    showSuggestions: false,
+    loading: false,
+    isTyping: false
+  };
+  const handleChange = (value) => {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+    currentState = {
+      ...currentState,
+      isTyping: true,
+      showSuggestions: true
+    };
+    timeoutId = setTimeout(async () => {
+      currentState = {
+        ...currentState,
+        isTyping: false,
+        loading: true
+      };
+      try {
+        const results = await onSearch(value);
+        currentState = {
+          ...currentState,
+          suggestions: results,
+          loading: false
+        };
+      } catch {
+        currentState = {
+          ...currentState,
+          suggestions: [],
+          loading: false
+        };
+      }
+    }, delay);
+  };
+  const handleFocus = () => {
+    currentState = {
+      ...currentState,
+      showSuggestions: true
+    };
+  };
+  const handleBlur = () => {
+    setTimeout(() => {
+      currentState = {
+        ...currentState,
+        showSuggestions: false
+      };
+    }, 200);
+  };
+  const getState = () => ({ ...currentState });
+  return { handleChange, handleFocus, handleBlur, getState };
+}
+function extractFieldErrors(errors, fieldNames) {
+  const result = {};
+  const names = fieldNames ?? Object.keys(errors);
+  for (const name of names) {
+    const error = errors[name];
+    if (error?.message) {
+      result[name] = error.message;
+    }
+  }
+  return result;
+}
+function hasFormErrors(errors) {
+  return Object.keys(errors).length > 0;
+}
+function getFirstErrorField(errors, fieldOrder) {
+  if (fieldOrder) {
+    for (const name of fieldOrder) {
+      if (errors[name]) {
+        return name;
+      }
+    }
+  }
+  return Object.keys(errors)[0];
+}
+export {
+  EmailSchema,
+  FieldConfigSchema,
+  FieldGroupSchema,
+  FieldTypeSchema,
+  FieldValueSchema,
+  FormStateSchema,
+  PasswordSchema,
+  PhoneSchema,
+  SearchStateSchema,
+  SearchSuggestionSchema,
+  SelectOptionSchema,
+  SelectStateSchema,
+  SimplePasswordSchema,
+  UrlSchema,
+  UsernameSchema,
+  convertRHFToFormState,
+  createContactSchema,
+  createDebouncedSearch,
+  createFieldFromRegister,
+  createLoginSchema,
+  createProfileSchema,
+  createRegistrationSchema,
+  createSelectForController,
+  createSettingsSchema,
+  extractFieldErrors,
+  fieldConfigToUINode,
+  formStateToUINode,
+  getFirstErrorField,
+  hasFormErrors,
+  searchStateToUINode,
+  selectStateToUINode
+};