@questpie/admin 1.1.0 → 2.0.0

package/dist/client/components/fields/field-types.d.mts

@@ -0,0 +1,571 @@
+import "../../i18n/types.mjs";
+import { SelectOption as SelectOption$1 } from "../primitives/types.mjs";
+import { RelationDisplayFields as RelationDisplayFields$1, RelationDisplayMode as RelationDisplayMode$1 } from "./relation/displays/types.mjs";
+import { BooleanFieldProps } from "./boolean-field.mjs";
+import "react";
+import { Control } from "react-hook-form";
+
+//#region src/client/components/fields/field-types.d.ts
+
+type SelectOption<TValue = string> = SelectOption$1<TValue>;
+/**
+ * Base props shared by all field components (runtime).
+ * These integrate with react-hook-form via Controller.
+ * I18nText values are resolved to plain strings before reaching components.
+ */
+type BaseFieldProps = {
+  /** Field name (path in form values) */
+  name: string;
+  /** Field label (resolved from I18nText) */
+  label?: string;
+  /** Helper text shown below the field (resolved from I18nText) */
+  description?: string;
+  /** Placeholder text (resolved from I18nText) */
+  placeholder?: string;
+  /** Mark field as required (visual indicator) */
+  required?: boolean;
+  /** Disable the field */
+  disabled?: boolean;
+  /** Show locale badge for localized fields */
+  localized?: boolean;
+  /** Current locale code for localized fields */
+  locale?: string;
+  /** Form control from react-hook-form (optional if using FormProvider) */
+  control?: Control<any>;
+  /** Additional className for the field wrapper */
+  className?: string;
+};
+/**
+ * Props for text-based fields
+ */
+type TextFieldProps = BaseFieldProps & {
+  type?: "text" | "email" | "password" | "url" | "tel" | "search";
+  minLength?: number;
+  maxLength?: number;
+  /** Regex pattern for validation (from server metadata) */
+  pattern?: string | RegExp;
+  autoComplete?: string;
+};
+/**
+ * Props for number field
+ */
+type NumberFieldProps = BaseFieldProps & {
+  min?: number;
+  max?: number;
+  step?: number;
+  showButtons?: boolean;
+};
+/**
+ * Props for textarea field
+ */
+type TextareaFieldProps = BaseFieldProps & {
+  rows?: number;
+  minLength?: number;
+  maxLength?: number;
+  autoResize?: boolean;
+};
+/**
+ * Props for select field
+ */
+type SelectFieldProps<TValue = string> = BaseFieldProps & {
+  options?: SelectOption<TValue>[];
+  loadOptions?: (search: string) => Promise<SelectOption<TValue>[]>;
+  multiple?: boolean;
+  clearable?: boolean;
+  maxSelections?: number;
+  emptyMessage?: string;
+};
+/**
+ * Props for date field
+ */
+type DateFieldProps = BaseFieldProps & {
+  minDate?: Date;
+  maxDate?: Date;
+  format?: string;
+};
+/**
+ * Props for datetime field
+ */
+type DateTimeFieldProps = DateFieldProps & {
+  precision?: "minute" | "second";
+};
+/**
+ * Props for time field (time-only, no date)
+ */
+type TimeFieldProps = BaseFieldProps & {
+  precision?: "minute" | "second";
+};
+/** Text field config */
+type TextFieldConfig = Omit<TextFieldProps, keyof BaseFieldProps>;
+/** Number field config */
+type NumberFieldConfig = Omit<NumberFieldProps, keyof BaseFieldProps>;
+/** Textarea field config */
+type TextareaFieldConfig = Omit<TextareaFieldProps, keyof BaseFieldProps>;
+/** Select field config */
+type SelectFieldConfig<TValue = string> = Omit<SelectFieldProps<TValue>, keyof BaseFieldProps>;
+/** Date field config */
+type DateFieldConfig = Omit<DateFieldProps, keyof BaseFieldProps>;
+/** DateTime field config */
+type DateTimeFieldConfig = Omit<DateTimeFieldProps, keyof BaseFieldProps>;
+/** Time field config */
+type TimeFieldConfig = Omit<TimeFieldProps, keyof BaseFieldProps>;
+/** Boolean (checkbox/switch) field config */
+type BooleanFieldConfig = {
+  /**
+   * Display mode for the boolean field.
+   * @default "checkbox"
+   */
+  displayAs?: "checkbox" | "switch";
+};
+type RelationDisplayMode = RelationDisplayMode$1;
+type RelationDisplayFields = RelationDisplayFields$1;
+/** Relation field config */
+type RelationFieldConfig = {
+  /** Target collection name */
+  targetCollection: string;
+  /** Relation type: single (one-to-one) or multiple (one-to-many) */
+  type: "single" | "multiple";
+  /**
+   * Backend relation name for auto-expand in list views.
+   * Use this when the admin field name differs from the backend relation name.
+   *
+   * @example
+   * // Admin field: customerId, Backend relation: customer
+   * customerId: r.relation({
+   *   targetCollection: "user",
+   *   type: "single",
+   *   relationName: "customer", // Will expand as { with: { customer: true } }
+   * })
+   */
+  relationName?: string;
+  /** Filter options based on form values */
+  filter?: (formValues: any) => any;
+  /** Enable drag-and-drop reordering (only for multiple) */
+  orderable?: boolean;
+  /** Maximum number of items (only for multiple) */
+  maxItems?: number;
+  /**
+   * Display mode for selected items (only for multiple type)
+   * @default "list"
+   */
+  display?: RelationDisplayMode;
+  /**
+   * Columns to show in table display mode (only for multiple type)
+   */
+  columns?: string[];
+  /**
+   * Field mapping for cards/grid display modes (only for multiple type)
+   */
+  fields?: RelationDisplayFields;
+  /**
+   * Number of columns for grid/cards layout (only for multiple type)
+   */
+  gridColumns?: 1 | 2 | 3 | 4;
+};
+/**
+ * Upload field config.
+ *
+ * Handles both single and multiple file uploads based on `multiple` option.
+ * Maps to server's `upload` field type.
+ *
+ * @example Single upload (default)
+ * ```ts
+ * featuredImage: r.upload({
+ *   accept: ["image/*"],
+ *   maxSize: 5_000_000,
+ * })
+ * ```
+ *
+ * @example Multiple uploads
+ * ```ts
+ * gallery: r.upload({
+ *   multiple: true,
+ *   accept: ["image/*"],
+ *   maxItems: 10,
+ *   orderable: true,
+ * })
+ * ```
+ */
+type UploadFieldConfig = {
+  /** Target collection for uploads */
+  to?: string;
+  /** Accepted file types (MIME types or extensions) */
+  accept?: string[];
+  /** Maximum file size in bytes */
+  maxSize?: number;
+  /** Show image preview for uploaded files (default: true) */
+  showPreview?: boolean;
+  /** Allow editing alt/caption */
+  editable?: boolean;
+  /** Preview variant */
+  previewVariant?: "card" | "compact" | "thumbnail";
+  /**
+   * Enable multiple file uploads.
+   * When true, field value is an array of asset IDs.
+   * @default false
+   */
+  multiple?: boolean;
+  /** Maximum number of files (only when multiple: true) */
+  maxItems?: number;
+  /** Enable drag-and-drop reordering (only when multiple: true) */
+  orderable?: boolean;
+  /** Layout for previews (only when multiple: true) */
+  layout?: "grid" | "list";
+};
+/**
+ * Nested field definition for object fields.
+ * Uses a callback pattern to allow access to the field registry.
+ */
+type NestedFieldsDefinition = Record<string, any>;
+/**
+ * Object field layout options - controls how nested fields are arranged inside the container.
+ *
+ * @example Visual comparison:
+ * ```
+ * ┌─────────────────────────────────────────────────────────────┐
+ * │ "stack" (default)           │ "inline"                      │
+ * │                             │                               │
+ * │ ┌─────────────────────────┐ │ ┌────────┐ ┌────────┐ ┌─────┐ │
+ * │ │ First Name              │ │ │ First  │ │ Last   │ │ Age │ │
+ * │ └─────────────────────────┘ │ └────────┘ └────────┘ └─────┘ │
+ * │ ┌─────────────────────────┐ │                               │
+ * │ │ Last Name               │ │ Fields wrap to next line     │
+ * │ └─────────────────────────┘ │ if space is limited          │
+ * │ ┌─────────────────────────┐ │                               │
+ * │ │ Age                     │ │                               │
+ * │ └─────────────────────────┘ │                               │
+ * └─────────────────────────────────────────────────────────────┘
+ *
+ * ┌─────────────────────────────────────────────────────────────┐
+ * │ "grid" (columns: 2)                                         │
+ * │                                                             │
+ * │ ┌─────────────────┐  ┌─────────────────┐                    │
+ * │ │ First Name      │  │ Last Name       │                    │
+ * │ └─────────────────┘  └─────────────────┘                    │
+ * │ ┌─────────────────┐  ┌─────────────────┐                    │
+ * │ │ Email           │  │ Phone           │                    │
+ * │ └─────────────────┘  └─────────────────┘                    │
+ * │                                                             │
+ * │ Responsive: collapses to 1 column on mobile                 │
+ * └─────────────────────────────────────────────────────────────┘
+ * ```
+ *
+ * - `"stack"` - Vertical layout, each field on its own line. Best for forms with
+ *   longer labels or when fields need full width (textareas, rich text).
+ *
+ * - `"inline"` - Horizontal layout using flexbox. Fields sit side-by-side and wrap
+ *   when space runs out. Best for compact groups of small fields (e.g., time range:
+ *   start + end, or address: city + zip).
+ *
+ * - `"grid"` - CSS Grid layout with configurable columns. Fields are evenly distributed.
+ *   Best for forms with many similar-sized fields. Use `columns` prop to control
+ *   column count (default: 2). Responsive breakpoints adjust columns automatically.
+ */
+type ObjectFieldLayout = "stack" | "inline" | "grid";
+/**
+ * Object field wrapper options - controls the container's visual appearance and behavior.
+ *
+ * @example Visual comparison:
+ * ```
+ * ┌─────────────────────────────────────────────────────────────┐
+ * │ "flat" (default)                                            │
+ * │                                                             │
+ * │ No visual container - fields render directly.               │
+ * │ Use when parent already provides structure (e.g., inside    │
+ * │ a card, section, or another collapsible).                   │
+ * │                                                             │
+ * │ ┌─────────────────────────┐                                 │
+ * │ │ Field 1                 │                                 │
+ * │ └─────────────────────────┘                                 │
+ * │ ┌─────────────────────────┐                                 │
+ * │ │ Field 2                 │                                 │
+ * │ └─────────────────────────┘                                 │
+ * └─────────────────────────────────────────────────────────────┘
+ *
+ * ┌─────────────────────────────────────────────────────────────┐
+ * │ "collapsible"                                               │
+ * │                                                             │
+ * │ ┌─────────────────────────────────────────────────────────┐ │
+ * │ │ ▶ Section Label                              [expand]   │ │
+ * │ └─────────────────────────────────────────────────────────┘ │
+ * │                                                             │
+ * │ When expanded:                                              │
+ * │ ┌─────────────────────────────────────────────────────────┐ │
+ * │ │ ▼ Section Label                            [collapse]   │ │
+ * │ ├─────────────────────────────────────────────────────────┤ │
+ * │ │ ┌─────────────────────────┐                             │ │
+ * │ │ │ Field 1                 │                             │ │
+ * │ │ └─────────────────────────┘                             │ │
+ * │ │ ┌─────────────────────────┐                             │ │
+ * │ │ │ Field 2                 │                             │ │
+ * │ │ └─────────────────────────┘                             │ │
+ * │ └─────────────────────────────────────────────────────────┘ │
+ * │                                                             │
+ * │ Accordion-style with subtle background. Use for optional    │
+ * │ or advanced sections to reduce visual clutter.              │
+ * └─────────────────────────────────────────────────────────────┘
+ * ```
+ *
+ * - `"flat"` - No visual container. Fields render directly without any wrapper styling.
+ *   Use when the parent element already provides visual structure.
+ *
+ * - `"collapsible"` - Accordion-style container with click-to-expand header.
+ *   Has subtle background styling. Use `defaultCollapsed` to control initial state.
+ *   Requires a `label` prop for the header text.
+ */
+type ObjectFieldWrapper = "flat" | "collapsible";
+/**
+ * Object field config - for nested JSON structures.
+ *
+ * Combines `wrapper` (container behavior) with `layout` (field arrangement)
+ * to create flexible nested field groups.
+ *
+ * @example Collapsible section with grid layout
+ * ```ts
+ * address: r.object({
+ *   label: "Shipping Address",
+ *   wrapper: "collapsible",    // Accordion-style expandable section
+ *   layout: "grid",            // Fields in 2-column grid
+ *   columns: 2,
+ *   defaultCollapsed: false,
+ *   fields: ({ r }) => ({
+ *     street: r.text({ label: "Street" }),
+ *     city: r.text({ label: "City" }),
+ *     zip: r.text({ label: "ZIP Code" }),
+ *     country: r.text({ label: "Country" }),
+ *   }),
+ * })
+ * ```
+ *
+ * @example Inline layout for compact field groups
+ * ```ts
+ * timeRange: r.object({
+ *   label: "Working Hours",
+ *   layout: "inline",          // Fields side-by-side
+ *   fields: ({ r }) => ({
+ *     start: r.text({ label: "From", placeholder: "09:00" }),
+ *     end: r.text({ label: "To", placeholder: "17:00" }),
+ *   }),
+ * })
+ * ```
+ *
+ * @example Flat wrapper (no container) - for use inside sections
+ * ```ts
+ * seoSettings: r.object({
+ *   // No label, no wrapper - parent section handles structure
+ *   wrapper: "flat",
+ *   layout: "stack",
+ *   fields: ({ r }) => ({
+ *     metaTitle: r.text({ label: "Meta Title" }),
+ *     metaDescription: r.textarea({ label: "Meta Description" }),
+ *   }),
+ * })
+ * ```
+ */
+type ObjectFieldConfig = {
+  /**
+   * Nested field definitions.
+   * Callback receives field registry for creating nested fields.
+   *
+   * The `r` parameter type is automatically inferred from your field registry
+   * when using the builder (e.g., `builder.collection(...).fields(({ r }) => ...)`).
+   * This provides full autocomplete for nested object/array fields.
+   */
+  fields?: (ctx: {
+    r: any;
+  }) => NestedFieldsDefinition;
+  /**
+   * Wrapper mode for the container.
+   * Controls visual appearance and expand/collapse behavior.
+   *
+   * @default "flat"
+   * @see ObjectFieldWrapper for detailed visual examples
+   */
+  wrapper?: ObjectFieldWrapper;
+  /**
+   * Layout mode for nested fields inside the container.
+   * Controls how fields are arranged spatially.
+   *
+   * @default "stack"
+   * @see ObjectFieldLayout for detailed visual examples
+   */
+  layout?: ObjectFieldLayout;
+  /**
+   * Number of columns for grid layout.
+   * Only applies when `layout: "grid"`.
+   * Responsive: automatically reduces columns on smaller screens.
+   *
+   * @default 2
+   */
+  columns?: number;
+  /**
+   * Default collapsed state for collapsible wrapper.
+   * Only applies when `wrapper: "collapsible"`.
+   *
+   * @default true
+   */
+  defaultCollapsed?: boolean;
+};
+/**
+ * Primitive item types supported by array field
+ */
+type ArrayItemType = "text" | "number" | "email" | "textarea" | "select";
+/**
+ * Array field config - for arrays of primitives or objects.
+ *
+ * @example Object array with inline layout
+ * ```ts
+ * socialLinks: r.array({
+ *   label: "Social Links",
+ *   mode: "inline",           // Edit fields directly in list
+ *   layout: "inline",         // Fields side-by-side within each item
+ *   orderable: true,
+ *   item: ({ r }) => ({
+ *     platform: r.select({ label: "Platform", options: [...] }),
+ *     url: r.text({ label: "URL" }),
+ *   }),
+ * })
+ * ```
+ *
+ * @example Object array with drawer editing and grid layout
+ * ```ts
+ * teamMembers: r.array({
+ *   label: "Team Members",
+ *   mode: "drawer",           // Edit in side panel
+ *   layout: "grid",           // Fields in grid inside drawer
+ *   columns: 2,
+ *   itemLabel: (item) => item.name || "New Member",
+ *   item: ({ r }) => ({
+ *     name: r.text({ label: "Name" }),
+ *     role: r.text({ label: "Role" }),
+ *     email: r.text({ label: "Email" }),
+ *     phone: r.text({ label: "Phone" }),
+ *     bio: r.textarea({ label: "Bio" }),
+ *   }),
+ * })
+ * ```
+ *
+ * @example Primitive array (simple tags)
+ * ```ts
+ * tags: r.array({
+ *   label: "Tags",
+ *   itemType: "text",
+ *   orderable: true,
+ *   maxItems: 10,
+ * })
+ * ```
+ */
+type ArrayFieldConfig = {
+  /**
+   * Item type for primitive arrays (without `item` callback).
+   * Each array element is a single value of this type.
+   */
+  itemType?: ArrayItemType;
+  /** Options for select-type items */
+  options?: SelectOption[];
+  /**
+   * Item field definitions for object arrays.
+   * When provided, each array element is an object with these fields.
+   * Mutually exclusive with `itemType`.
+   *
+   * The `r` parameter type is automatically inferred from your field registry
+   * when using the builder. This provides full autocomplete for array item fields.
+   */
+  item?: (ctx: {
+    r: any;
+  }) => NestedFieldsDefinition;
+  /**
+   * Display mode - controls WHERE fields are edited.
+   * Only applies to object arrays (when `item` is provided).
+   *
+   * @default "inline"
+   * @see ArrayFieldMode for detailed visual examples
+   */
+  mode?: "inline" | "modal" | "drawer";
+  /**
+   * Layout for fields inside each item - controls HOW fields are arranged.
+   * Only applies to object arrays (when `item` is provided).
+   *
+   * @default "stack"
+   * @see ObjectFieldLayout for detailed visual examples
+   */
+  layout?: ObjectFieldLayout;
+  /**
+   * Number of columns for grid layout.
+   * Only applies when `layout: "grid"`.
+   *
+   * @default 2
+   */
+  columns?: number;
+  /**
+   * Label displayed in the item header.
+   * - String: Static label for all items
+   * - Function: Dynamic label based on item data (e.g., `(item) => item.name`)
+   *
+   * Falls back to checking `item.name`, `item.title`, `item.label`,
+   * then "Item {index}".
+   */
+  itemLabel?: string | ((item: any, index: number) => string);
+  /** Enable drag-and-drop reordering */
+  orderable?: boolean;
+  /** Minimum number of items required */
+  minItems?: number;
+  /** Maximum number of items allowed */
+  maxItems?: number;
+};
+/**
+ * Rich text feature toggles
+ */
+type RichTextFeatures = {
+  toolbar?: boolean;
+  bubbleMenu?: boolean;
+  slashCommands?: boolean;
+  history?: boolean;
+  heading?: boolean;
+  bold?: boolean;
+  italic?: boolean;
+  underline?: boolean;
+  strike?: boolean;
+  code?: boolean;
+  codeBlock?: boolean;
+  blockquote?: boolean;
+  bulletList?: boolean;
+  orderedList?: boolean;
+  horizontalRule?: boolean;
+  align?: boolean;
+  link?: boolean;
+  image?: boolean;
+  table?: boolean;
+  tableControls?: boolean;
+  characterCount?: boolean;
+};
+/**
+ * Rich text field config
+ *
+ * @example
+ * ```ts
+ * content: r.richText({
+ *   features: {
+ *     image: true,
+ *     table: true,
+ *   },
+ * })
+ * ```
+ */
+type RichTextFieldConfig = {
+  /** Feature toggles */
+  features?: RichTextFeatures;
+  /** Show character count */
+  showCharacterCount?: boolean;
+  /** Max character limit */
+  maxCharacters?: number;
+  /** Enable image uploads */
+  enableImages?: boolean;
+  /** Target collection for image uploads */
+  imageCollection?: string;
+  /** Enable media library picker for images */
+  enableMediaLibrary?: boolean;
+};
+//#endregion
+export { ArrayFieldConfig, ArrayItemType, BaseFieldProps, BooleanFieldConfig, DateFieldConfig, DateFieldProps, DateTimeFieldConfig, DateTimeFieldProps, NumberFieldConfig, NumberFieldProps, ObjectFieldConfig, ObjectFieldLayout, RelationFieldConfig, RichTextFieldConfig, SelectFieldConfig, SelectFieldProps, SelectOption, TextFieldConfig, TextFieldProps, TextareaFieldConfig, TextareaFieldProps, TimeFieldConfig, TimeFieldProps, UploadFieldConfig };
+//# sourceMappingURL=field-types.d.mts.map

package/dist/client/components/fields/field-types.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-types.d.mts","names":[],"sources":["../../../../src/client/components/fields/field-types.ts"],"sourcesContent":[],"mappings":";;;;;;;;;AA6BY,KARA,YAQc,CAAA,SAkBf,MAAA,CAAA,GA1BiC,cA0B1B,CA1BgD,MA0BhD,CAAA;AAkElB;AAUA;AAUA;;;AACW,KAzGC,cAAA,GAyGD;EAC6C;EAAb,IAAA,EAAA,MAAA;EAAR;EAAO,KAAA,CAAA,EAAA,MAAA;EAU9B;EAAiB,WAAA,CAAA,EAAA,MAAA;EAClB;EACA,WAAA,CAAA,EAAA,MAAA;EAAI;EAOH,QAAA,CAAA,EAAA,OAAA;EAOA;EA8CA,QAAA,CAAA,EAAA,OAAe;EAAQ;EAAsB,SAAA,CAAA,EAAA,OAAA;EAA3B;EAAI,MAAA,CAAA,EAAA,MAAA;EAGtB;EAAyB,OAAA,CAAA,EAnK1B,OAmK0B,CAAA,GAAA,CAAA;EAAwB;EAA7B,SAAA,CAAA,EAAA,MAAA;CAAI;AA2BpC;AAYA;AACA;AAGY,KAxJA,cAAA,GAAiB,cAoLlB,GAAA;EAuCC,IAAA,CAAA,EAAA,MAAA,GAAA,OAAiB,GAAA,UAAA,GAAA,KAAA,GAAA,KAAA,GAAA,QAAA;EAqCjB,SAAA,CAAA,EAAA,MAAA;EA8CA,SAAA,CAAA,EAAA,MAAA;EAqDA;EAkDA,OAAA,CAAA,EAAA,MAAA,GAhZQ,MAgZS;EASE,YAAA,CAAA,EAAA,MAAA;CAQpB;;;AAiCX;AA0MY,KAroBA,gBAAA,GAAmB,cAqoBH,GAAA;EAMhB,GAAA,CAAA,EAAA,MAAA;EAED,GAAA,CAAA,EAAA,MAAA;EAWkB,IAAA,CAAA,EAAA,MAAA;EAgBnB,WAAA,CAAA,EAAA,OAAA;CAAiB;AAkC3B;AAqCA;;KAruBY,kBAAA,GAAqB;;;;;;;;;KAUrB,oCAAoC;YACrC,aAAa;oCACW,QAAQ,aAAa;;;;;;;;;KAU5C,cAAA,GAAiB;YAClB;YACA;;;;;;KAOC,kBAAA,GAAqB;;;;;;KAOrB,cAAA,GAAiB;;;;KA8CjB,eAAA,GAAkB,KAAK,sBAAsB;;KAG7C,iBAAA,GAAoB,KAAK,wBAAwB;;KAGjD,mBAAA,GAAsB,KACjC,0BACM;;KAIK,qCAAqC,KAChD,iBAAiB,eACX;;KAIK,eAAA,GAAkB,KAAK,sBAAsB;;KAG7C,mBAAA,GAAsB,KACjC,0BACM;;KAIK,eAAA,GAAkB,KAAK,sBAAsB;;KAG7C,kBAAA;;;;;;;KAYA,mBAAA,GAAsB;KACtB,qBAAA,GAAwB;;KAGxB,mBAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;YA4BD;;;;;;;;WAQD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+BE,iBAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqCA,sBAAA,GAAyB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8CzB,iBAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqDA,kBAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkDA,iBAAA;;;;;;;;;;;QASmB;;;;;;;;YAQpB;;;;;;;;WAQD;;;;;;;;;;;;;;;;;;;;KAyBE,aAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0MA,gBAAA;;;;;aAMA;;YAED;;;;;;;;;;;QAWkB;;;;;;;;;;;;;;;;WAgBnB;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkCE,gBAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqCA,mBAAA;;aAEA"}

package/dist/client/components/fields/field-utils.d.mts

@@ -0,0 +1 @@
+import { Control } from "react-hook-form";

package/dist/client/components/fields/field-utils.mjs

@@ -0,0 +1,65 @@
+import { useFormContext } from "react-hook-form";
+
+//#region src/client/components/fields/field-utils.ts
+function useResolvedControl(control) {
+	const form = useFormContext();
+	return control ?? form.control;
+}
+/**
+* Sanitize filename for safe storage.
+* Removes special characters, replaces spaces with hyphens.
+*/
+function sanitizeFilename(filename) {
+	const lastDot = filename.lastIndexOf(".");
+	const ext = lastDot > 0 ? filename.slice(lastDot) : "";
+	return ((lastDot > 0 ? filename.slice(0, lastDot) : filename).normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/\s+/g, "-").replace(/[^a-zA-Z0-9._-]/g, "").replace(/-+/g, "-").replace(/^-|-$/g, "").toLowerCase() || "file") + ext.toLowerCase();
+}
+/**
+* Extract columns from collection list config.
+* Used by relation fields to auto-detect display columns.
+*/
+function getAutoColumns(collectionConfig) {
+	if (!collectionConfig?.list?.columns) return ["_title"];
+	const columns = collectionConfig.list.columns;
+	if (Array.isArray(columns)) return columns.map((col) => {
+		if (col && typeof col === "object" && col["~fieldName"]) return col["~fieldName"];
+		if (typeof col === "string") return col;
+		return null;
+	}).filter(Boolean).slice(0, 4);
+	return ["_title"];
+}
+/**
+* Grid column classes for responsive layouts.
+* Uses standard responsive breakpoints (sm:, lg:, etc.)
+*/
+const gridColumnClasses = {
+	1: "grid-cols-1",
+	2: "grid-cols-1 sm:grid-cols-2",
+	3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+	4: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4"
+};
+/**
+* Grid column classes using container queries.
+* Parent must have @container class for these to work.
+*/
+const containerGridColumnClasses = {
+	1: "grid-cols-1",
+	2: "grid-cols-1 @sm:grid-cols-2",
+	3: "grid-cols-1 @sm:grid-cols-2 @lg:grid-cols-3",
+	4: "grid-cols-1 @sm:grid-cols-2 @md:grid-cols-3 @xl:grid-cols-4",
+	5: "grid-cols-1 @xs:grid-cols-2 @sm:grid-cols-3 @lg:grid-cols-4 @xl:grid-cols-5",
+	6: "grid-cols-1 @xs:grid-cols-2 @sm:grid-cols-3 @md:grid-cols-4 @lg:grid-cols-5 @xl:grid-cols-6"
+};
+/**
+* Get grid columns class for a given column count.
+* @param columns Number of columns
+* @param useContainerQueries Use container query classes instead of viewport breakpoints
+*/
+function getGridColumnsClass(columns, useContainerQueries = false) {
+	if (!columns) return "";
+	return (useContainerQueries ? containerGridColumnClasses : gridColumnClasses)[columns] || "";
+}
+
+//#endregion
+export { getAutoColumns, getGridColumnsClass, gridColumnClasses, sanitizeFilename, useResolvedControl };
+//# sourceMappingURL=field-utils.mjs.map

package/dist/client/components/fields/field-utils.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-utils.mjs","names":["gridColumnClasses: Record<number, string>","containerGridColumnClasses: Record<number, string>"],"sources":["../../../../src/client/components/fields/field-utils.ts"],"sourcesContent":["import { type Control, useFormContext } from \"react-hook-form\";\n\nexport function useResolvedControl(control?: Control<any>) {\n  const form = useFormContext();\n  return control ?? form.control;\n}\n\n/**\n * Sanitize filename for safe storage.\n * Removes special characters, replaces spaces with hyphens.\n */\nexport function sanitizeFilename(filename: string): string {\n  // Get extension\n  const lastDot = filename.lastIndexOf(\".\");\n  const ext = lastDot > 0 ? filename.slice(lastDot) : \"\";\n  const name = lastDot > 0 ? filename.slice(0, lastDot) : filename;\n\n  // Normalize unicode, remove diacritics, replace spaces, remove invalid chars\n  const sanitized = name\n    .normalize(\"NFD\")\n    .replace(/[\\u0300-\\u036f]/g, \"\") // Remove diacritics\n    .replace(/\\s+/g, \"-\") // Replace spaces with hyphens\n    .replace(/[^a-zA-Z0-9._-]/g, \"\") // Remove invalid chars\n    .replace(/-+/g, \"-\") // Collapse multiple hyphens\n    .replace(/^-|-$/g, \"\") // Remove leading/trailing hyphens\n    .toLowerCase();\n\n  return (sanitized || \"file\") + ext.toLowerCase();\n}\n\n/**\n * Extract columns from collection list config.\n * Used by relation fields to auto-detect display columns.\n */\nexport function getAutoColumns(collectionConfig: any): string[] {\n  if (!collectionConfig?.list?.columns) return [\"_title\"];\n\n  // List columns can be field references (f.fieldName) or strings\n  const columns = collectionConfig.list.columns;\n  if (Array.isArray(columns)) {\n    return columns\n      .map((col: any) => {\n        // Handle field proxy objects\n        if (col && typeof col === \"object\" && col[\"~fieldName\"]) {\n          return col[\"~fieldName\"];\n        }\n        // Handle string field names\n        if (typeof col === \"string\") {\n          return col;\n        }\n        return null;\n      })\n      .filter(Boolean)\n      .slice(0, 4); // Limit to 4 columns for relation display\n  }\n\n  return [\"_title\"];\n}\n\n/**\n * Grid column classes for responsive layouts.\n * Uses standard responsive breakpoints (sm:, lg:, etc.)\n */\nexport const gridColumnClasses: Record<number, string> = {\n  1: \"grid-cols-1\",\n  2: \"grid-cols-1 sm:grid-cols-2\",\n  3: \"grid-cols-1 sm:grid-cols-2 lg:grid-cols-3\",\n  4: \"grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4\",\n};\n\n/**\n * Grid column classes using container queries.\n * Parent must have @container class for these to work.\n */\nexport const containerGridColumnClasses: Record<number, string> = {\n  1: \"grid-cols-1\",\n  2: \"grid-cols-1 @sm:grid-cols-2\",\n  3: \"grid-cols-1 @sm:grid-cols-2 @lg:grid-cols-3\",\n  4: \"grid-cols-1 @sm:grid-cols-2 @md:grid-cols-3 @xl:grid-cols-4\",\n  5: \"grid-cols-1 @xs:grid-cols-2 @sm:grid-cols-3 @lg:grid-cols-4 @xl:grid-cols-5\",\n  6: \"grid-cols-1 @xs:grid-cols-2 @sm:grid-cols-3 @md:grid-cols-4 @lg:grid-cols-5 @xl:grid-cols-6\",\n};\n\n/**\n * Get grid columns class for a given column count.\n * @param columns Number of columns\n * @param useContainerQueries Use container query classes instead of viewport breakpoints\n */\nexport function getGridColumnsClass(\n  columns?: number,\n  useContainerQueries = false,\n): string {\n  if (!columns) return \"\";\n  const classes = useContainerQueries\n    ? containerGridColumnClasses\n    : gridColumnClasses;\n  return classes[columns] || \"\";\n}\n"],"mappings":";;;AAEA,SAAgB,mBAAmB,SAAwB;CACzD,MAAM,OAAO,gBAAgB;AAC7B,QAAO,WAAW,KAAK;;;;;;AAOzB,SAAgB,iBAAiB,UAA0B;CAEzD,MAAM,UAAU,SAAS,YAAY,IAAI;CACzC,MAAM,MAAM,UAAU,IAAI,SAAS,MAAM,QAAQ,GAAG;AAapD,UAZa,UAAU,IAAI,SAAS,MAAM,GAAG,QAAQ,GAAG,UAIrD,UAAU,MAAM,CAChB,QAAQ,oBAAoB,GAAG,CAC/B,QAAQ,QAAQ,IAAI,CACpB,QAAQ,oBAAoB,GAAG,CAC/B,QAAQ,OAAO,IAAI,CACnB,QAAQ,UAAU,GAAG,CACrB,aAAa,IAEK,UAAU,IAAI,aAAa;;;;;;AAOlD,SAAgB,eAAe,kBAAiC;AAC9D,KAAI,CAAC,kBAAkB,MAAM,QAAS,QAAO,CAAC,SAAS;CAGvD,MAAM,UAAU,iBAAiB,KAAK;AACtC,KAAI,MAAM,QAAQ,QAAQ,CACxB,QAAO,QACJ,KAAK,QAAa;AAEjB,MAAI,OAAO,OAAO,QAAQ,YAAY,IAAI,cACxC,QAAO,IAAI;AAGb,MAAI,OAAO,QAAQ,SACjB,QAAO;AAET,SAAO;GACP,CACD,OAAO,QAAQ,CACf,MAAM,GAAG,EAAE;AAGhB,QAAO,CAAC,SAAS;;;;;;AAOnB,MAAaA,oBAA4C;CACvD,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACJ;;;;;AAMD,MAAaC,6BAAqD;CAChE,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACH,GAAG;CACJ;;;;;;AAOD,SAAgB,oBACd,SACA,sBAAsB,OACd;AACR,KAAI,CAAC,QAAS,QAAO;AAIrB,SAHgB,sBACZ,6BACA,mBACW,YAAY"}

package/dist/client/components/fields/field-wrapper.d.mts

@@ -0,0 +1,3 @@
+import "../../i18n/types.mjs";
+import "react";
+import "react/jsx-runtime";