sera-components 1.4.7 → 1.6.0

package/dist/data/display/DateTimeDisplay.d.ts

@@ -1,4 +1,6 @@
 import { DisplayInterface } from '.';
+export declare function formatDate(locale: Intl.Locale, value: Date): string;
+export declare function formatDateTime(locale: Intl.Locale, value: Date, withSeconds?: boolean): string;
 export declare const DateTimeDisplay: ({ value }: DisplayInterface<Date>) => import("react/jsx-runtime").JSX.Element;
 export declare const DateDisplay: ({ value }: DisplayInterface<Date>) => import("react/jsx-runtime").JSX.Element;
 export declare const DateTimeHideTimeDisplay: ({ value }: DisplayInterface<Date>) => import("react/jsx-runtime").JSX.Element;

package/dist/data/display/EnumDisplay.d.ts

@@ -1,2 +1,2 @@
 import { DisplayInterface } from '.';
-export declare const EnumDisplay: ({ nestedProperty, property, value, }: DisplayInterface<any>) => import("react/jsx-runtime").JSX.Element;
+export declare const EnumDisplay: ({ property, value }: DisplayInterface<any>) => import("react/jsx-runtime").JSX.Element;

package/dist/data/display/index.d.ts

@@ -1,10 +1,9 @@
-import { DataProperty, DataType, DB, ObjectProperty } from 'sera-db';
+import { DataProperty, DataType, DB, ObjectProperty, NestedProperty } from 'sera-db';
 import { DateDisplay, DateTimeDisplay, DateTimeHideTimeDisplay } from './DateTimeDisplay';
 export { SingleForeignKeyDisplay, MultiForeignKeyDisplay } from './ForeignKeyDisplay';
 export type DisplayInterface<T> = {
     db: DB;
-    property: DataProperty | ObjectProperty;
-    nestedProperty?: DataProperty | ObjectProperty;
+    property: DataProperty | ObjectProperty | NestedProperty;
     value: T;
 };
 export declare const DataType2DisplayComponent: Partial<Record<DataType, React.ComponentType<DisplayInterface<any>>>>;

package/dist/data/inputs/ConfirmationInput.d.ts

@@ -0,0 +1,72 @@
+import { InputInterface } from '.';
+import { DataProperty, ObjectProperty } from 'sera-db';
+export interface ConfirmationLabelProps {
+    property: DataProperty | ObjectProperty;
+}
+/**
+ * A component that renders a confirmation label with "Confirm" prefix before the property label.
+ *
+ * This component displays a localized "Confirm" text followed by the property's multilingual label.
+ * Commonly used in forms where users need to confirm a value (e.g., "Confirm Password").
+ *
+ * @param props - The component props
+ * @param props.property - The data property or object property containing the label to display
+ *
+ * @returns A Text component showing "Confirm {property.label}" in the current locale
+ *
+ * @example
+ * ```tsx
+ * const passwordProperty = {
+ *   name: "password",
+ *   label: {
+ *     lang: "en",
+ *     lang2value: {
+ *       en: "Password",
+ *       vi: "Mật Khẩu"
+ *     }
+ *   }
+ * };
+ *
+ * <ConfirmationLabel property={passwordProperty} />
+ * // Renders: "Confirm Password" (in English)
+ * // Or: "Xác Nhận Mật Khẩu" (in Vietnamese)
+ * ```
+ */
+export declare const ConfirmationLabel: ({ property }: ConfirmationLabelProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A confirmation input component that validates matching values against a target field.
+ *
+ * @example
+ * ```tsx
+ * // In a form field group with custom onChange to track validation state:
+ * const [passwordConfirmed, setPasswordConfirmed] = useState(false);
+ *
+ * {
+ *   name: "Security Information",
+ *   fields: [
+ *     ["password"],
+ *     [{
+ *       prop: "password",
+ *       args: {
+ *         input: ConfirmationInput,
+ *         onChange: (value) => {
+ *           // Track validation state - onChange is called on every change
+ *           // so you can lift the error state to the parent component
+ *           setPasswordConfirmed(value === targetPassword);
+ *         }
+ *       }
+ *     }]
+ *   ]
+ * }
+ * ```
+ *
+ * The component:
+ * - Uses the `value` prop as the target value to match against
+ * - Maintains local state for the confirmation input value
+ * - Only shows "Values do not match" error after the field is touched
+ * - Calls `onChange` on every keystroke, allowing parent to lift validation errors
+ * - The parent can compare the confirmation value with the target to track validation state
+ * - Resets when the target value changes (e.g., when switching between records)
+ * - Delegates to the appropriate input component based on property constraints
+ */
+export declare const ConfirmationInput: React.FC<InputInterface<string>>;

package/dist/data/inputs/DateRangeInput.d.ts

@@ -3,3 +3,7 @@ export declare const DateRangeInput: React.FC<InputInterface<{
     start?: Date;
     end?: Date;
 } | undefined>>;
+export declare const DateTimeRangeInput: React.FC<InputInterface<{
+    start?: Date;
+    end?: Date;
+} | undefined>>;

package/dist/data/inputs/EnumInput.d.ts

@@ -0,0 +1,4 @@
+import { InputInterface } from '.';
+type EnumValue = string | number;
+export declare const EnumInput: React.FC<InputInterface<EnumValue | undefined>>;
+export {};

package/dist/data/inputs/ForeignKeyInput.d.ts

@@ -3,10 +3,10 @@ import { Record } from 'sera-db';
 export declare const SingleForeignKeyInput: (<T>(_props: InputInterface<T>) => import("react/jsx-runtime").JSX.Element) & {
     displayName: string;
 };
-export declare const MultiForeignKeyInput: (<ID extends string | number>({ db, property, value: recordIds, onChange, }: InputInterface<ID[]>) => import("react/jsx-runtime").JSX.Element) & {
+export declare const MultiForeignKeyInput: (<ID extends string | number>({ db, property, value: recordIds, onChange, freeze, }: InputInterface<ID[]>) => import("react/jsx-runtime").JSX.Element) & {
     displayName: string;
 };
-export declare const SearchInput: <ID extends string | number, R extends Record<ID>>({ name, data, onSelect, renderOption, isIdInteger, query, setQuery, }: {
+export declare const SearchInput: <ID extends string | number, R extends Record<ID>>({ name, data, onSelect, renderOption, isIdInteger, query, setQuery, freeze, }: {
     name?: string;
     query: string;
     setQuery: (query: string) => void;
@@ -14,9 +14,11 @@ export declare const SearchInput: <ID extends string | number, R extends Record<
     data: R[];
     renderOption: (record: R) => React.ReactNode;
     isIdInteger?: boolean;
+    freeze?: boolean;
 }) => import("react/jsx-runtime").JSX.Element;
-export declare const CardList: <R>({ items, onDelete, render, }: {
+export declare const CardList: <R>({ items, onDelete, render, freeze, }: {
     items: R[];
     onDelete: (value: R) => void;
     render: (value: R) => React.ReactNode;
+    freeze?: boolean;
 }) => import("react/jsx-runtime").JSX.Element | undefined;

package/dist/data/inputs/PhoneNumberInput.d.ts

@@ -9,5 +9,6 @@ export interface PhoneNumberInputProps {
         };
     }) => void;
     error?: boolean | React.ReactNode;
+    disabled?: boolean;
 }
 export declare const PhoneNumberInput: React.FC<PhoneNumberInputProps>;

package/dist/data/inputs/index.d.ts

@@ -1,28 +1,32 @@
-import { DataProperty, DataType, DB, ObjectProperty } from 'sera-db';
+import { DataProperty, DataType, DB, ObjectProperty, NestedProperty } from 'sera-db';
 import { BooleanInput } from './BooleanInput';
 import { NumberInput } from './NumberInput';
 import { TextInput } from './TextInput';
 import { DateInput } from './DateInput';
+import { EnumInput } from './EnumInput';
+import { ConfirmationInput, ConfirmationLabel } from './ConfirmationInput';
 export { SingleForeignKeyInput, MultiForeignKeyInput } from './ForeignKeyInput';
-export { DateRangeInput } from './DateRangeInput';
+export { DateRangeInput, DateTimeRangeInput } from './DateRangeInput';
 /**
  * Interface for input components in forms
  * @interface InputInterface
  * @template T - The type of the input value
- * @property {DataProperty | ObjectProperty} property - The property being edited
+ * @property {DataProperty | ObjectProperty | NestedProperty} property - The property being edited
  * @property {any} value - The current value of the input
  * @property {function} onChange - Callback function triggered when input value changes
  * @property {boolean | string} [error] - If the type is boolean it will be error, if there is a string message it should display that message
+ * @property {boolean} [freeze = false] - Whether the input is available for editing
  */
 export type InputInterface<T> = {
     db: DB;
-    property: DataProperty | ObjectProperty;
+    property: DataProperty | ObjectProperty | NestedProperty;
     value: T;
     onChange: (value: T) => void;
     error?: boolean | string;
+    freeze?: boolean;
 };
 /**
  * Mapping of data types to their corresponding input components
  */
 export declare const DataType2InputComponent: Partial<Record<DataType, React.FC<InputInterface<any>>>>;
-export { NumberInput, BooleanInput, TextInput, DateInput };
+export { NumberInput, BooleanInput, TextInput, DateInput, EnumInput, ConfirmationInput, ConfirmationLabel };

package/dist/form/Form.d.ts

@@ -1,17 +1,26 @@
-import { DraftRecord, GenericRecord, MultiLingualString, Schema, SchemaType, Table } from 'sera-db';
+import { PropertyNames, DraftRecord, GenericRecord, Schema, SchemaType, Table, NestedProperty } from 'sera-db';
+import { InputInterface } from '../data/inputs';
 import { FormItemLayout } from './FormItem';
-export interface CustomField {
-    name: string;
-    label: MultiLingualString;
-    description?: MultiLingualString;
+interface FieldArgs<R, DR> {
+    label?: React.ReactNode;
+    input?: React.ComponentType<InputInterface<any>>;
+    freeze?: boolean;
+    visible?: (record: R | DR) => boolean;
+    onChange?: (value: any) => void;
 }
-export interface FieldGroup<ID extends string | number, R extends GenericRecord<ID, DR>, DR extends DraftRecord<ID>, PF extends keyof R, F extends keyof DR, ST extends SchemaType<ID, R, DR, PF, F>> {
+export interface FieldGroup<ID extends string | number, R extends GenericRecord<ID, DR>, DR extends DraftRecord<ID>, PF extends PropertyNames<R>, F extends PropertyNames<DR>, ST extends SchemaType<ID, R, DR, PF, F>> {
     name?: string;
-    fields: ST["allProperties"][][];
+    fields: (ST["allProperties"] | {
+        prop: ST["allProperties"];
+        args?: FieldArgs<R, DR>;
+    } | NestedProperty | {
+        prop: NestedProperty;
+        args?: FieldArgs<R, DR>;
+    } | ((store: Table<ID, R, DR>, record: R | DR) => React.ReactNode))[][];
 }
-export interface SeraFormProps<ID extends string | number, R extends GenericRecord<ID, DR>, DR extends DraftRecord<ID>, PF extends keyof R, F extends keyof DR, ST extends SchemaType<ID, R, DR, PF, F>> {
+export interface SeraFormProps<ID extends string | number, R extends GenericRecord<ID, DR>, DR extends DraftRecord<ID>, PF extends PropertyNames<R>, F extends PropertyNames<DR>, ST extends SchemaType<ID, R, DR, PF, F>> {
     schema: Schema<ID, R, DR, PF, F, ST>;
-    store: Table<ST["id"], ST["cls"], ST["draftCls"]>;
+    store: Table<ID, R, DR>;
     fieldGroups: FieldGroup<ID, R, DR, PF, F, ST>[];
     layout?: FormItemLayout;
     actions: {
@@ -58,4 +67,5 @@ export interface SeraFormProps<ID extends string | number, R extends GenericReco
  * />
  * ```
  */
-export declare const SeraForm: <ID extends string | number, R extends GenericRecord<ID, DR>, DR extends DraftRecord<ID>, PF extends keyof R, F extends keyof DR, ST extends SchemaType<ID, R, DR, PF, F>>(props: SeraFormProps<ID, R, DR, PF, F, ST>) => import("react/jsx-runtime").JSX.Element;
+export declare const SeraForm: <ID extends string | number, R extends GenericRecord<ID, DR>, DR extends DraftRecord<ID>, PF extends PropertyNames<R>, F extends PropertyNames<DR>, ST extends SchemaType<ID, R, DR, PF, F>>(props: SeraFormProps<ID, R, DR, PF, F, ST>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/form/FormItem.d.ts

@@ -1,4 +1,4 @@
-import { DataProperty, DraftRecord, GenericRecord, ObjectProperty, Table, validators } from 'sera-db';
+import { DataProperty, DB, DraftRecord, GenericRecord, ObjectProperty, Table, NestedProperty } from 'sera-db';
 import { InputInterface } from '../data/inputs';
 export interface FormItemHorizontalLayout {
     type: "horizontal";
@@ -14,17 +14,33 @@ export type FormItemLayout = FormItemHorizontalLayout | FormItemVerticalLayout;
 export interface FormItemProps<ID extends string | number, R extends GenericRecord<ID, DR>, DR extends DraftRecord<ID>> {
     store: Table<ID, R, DR>;
     record: R | DR;
-    property: DataProperty | ObjectProperty;
+    property: DataProperty | ObjectProperty | NestedProperty;
     InputComponent: React.FC<InputInterface<any>> | React.ComponentType<InputInterface<any>>;
-    validator: validators.ValueValidator;
     layout?: FormItemLayout;
+    freeze?: boolean;
+    label?: React.ReactNode;
+    onChange?: (value: any) => void;
+    visible?: (record: R | DR) => boolean;
 }
+export declare const DEFAULT_LAYOUT: FormItemVerticalLayout;
 /**
  * FormItem component for creating form elements with labels, tooltips and layout options.
  *
  * Supports both horizontal and vertical layouts. In horizontal layout, the label and input are placed side by side in a grid.
  * In vertical layout, the label is positioned above the input using Mantine's Input.Wrapper.
  */
-export declare const FormItem: (<ID extends string | number, R extends GenericRecord<ID, DR>, DR extends DraftRecord<ID>>({ store, record, property, layout, InputComponent, validator, }: FormItemProps<ID, R, DR>) => import("react/jsx-runtime").JSX.Element) & {
+export declare const FormItem: (<ID extends string | number, R extends GenericRecord<ID, DR>, DR extends DraftRecord<ID>>({ store, record, property, layout, InputComponent, freeze, label, onChange, visible, }: FormItemProps<ID, R, DR>) => import("react/jsx-runtime").JSX.Element) & {
     displayName: string;
 };
+export declare function FormItemInner({ db, layout, property, InputComponent, freeze, value, error, label, onChange, }: {
+    db: DB;
+    layout: FormItemLayout;
+    property: DataProperty | ObjectProperty | NestedProperty;
+    InputComponent: React.FC<InputInterface<any>> | React.ComponentType<InputInterface<any>>;
+    freeze: boolean;
+    value: any;
+    error: string | undefined;
+    label?: React.ReactNode;
+    onChange: (value: any) => void;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function isHorizontalLayout(layout: FormItemLayout): layout is FormItemHorizontalLayout;