@oniratec/onira-react-ui 1.1.1 → 1.1.2

package/dist/index.d.ts

@@ -17,40 +17,51 @@ import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { UseFormReturn } from 'react-hook-form';
 import { z } from 'zod';
 
-declare type BaseField<T extends FieldValues> = {
+/** =========================
+ * Async select field
+ * ========================= */
+declare type AsyncSelectField<T extends FieldValues, TItem = unknown> = BaseFieldCommon<T> & {
+    kind: 'asyncSelect';
+    /** UI */
+    searchPlaceholder?: string;
+    minChars?: number;
+    debounceMs?: number;
+    emptyLabel?: string;
+    loadingLabel?: string;
+    /** Optional CTA when no results */
+    emptyActionLabel?: string;
+    onEmptyActionClick?: () => void;
+    /** Data */
+    fetcher: (query: string) => Promise<TItem[]>;
+    getOptionValue: (item: TItem) => string;
+    getOptionLabel: (item: TItem) => string;
+};
+
+declare type BaseField<T extends FieldValues> = InputField<T> | TextareaField<T> | SelectField<T> | AsyncSelectField<T, any> | ToggleField<T> | CheckboxField<T> | CustomField<T>;
+
+/** =========================
+ * Common props for all fields
+ * ========================= */
+declare type BaseFieldCommon<T extends FieldValues> = {
     name: FieldPath<T>;
     label: string;
-    kind: FieldKind;
     placeholder?: string;
     className?: string;
-    options?: Option_2[];
     /**
      * Zod schema for this field.
      * If not provided, it will default to optional.
      */
     schema?: z.ZodTypeAny;
-    /**
-     * Default value for this field.
-     */
+    /** Default value for this field. */
     defaultValue?: unknown;
-    /**
-     * Normalize value before storing it in form state.
-     */
+    /** Normalize value before storing it in form state. */
     normalize?: (value: unknown) => unknown;
-    /**
-     * Cross-field dependencies.
-     */
+    /** Cross-field dependencies. */
     deps?: FieldDependency<T>;
-    /**
-     * Conditional visibility.
-     */
+    /** Conditional visibility. */
     hidden?: (values: Partial<T>) => boolean;
     /** Grid layout helpers */
     colSpan?: 1 | 2 | 3 | 4;
-    /** Personalized render for custom elements **/
-    render?: (props: {
-        form: UseFormReturn<T>;
-    }) => ReactNode;
 };
 
 declare type BaseProps = {
@@ -83,6 +94,10 @@ export declare const CardHeader: ({ children, className }: BaseProps) => JSX.Ele
 
 export declare const CardTitle: ({ children, className }: BaseProps) => JSX.Element;
 
+declare type CheckboxField<T extends FieldValues> = BaseFieldCommon<T> & {
+    kind: 'checkbox';
+};
+
 export declare type ColorMode = 'light' | 'dark';
 
 export declare type Column<T> = {
@@ -94,6 +109,13 @@ export declare type Column<T> = {
 
 declare type CrossRule<T extends FieldValues> = (values: T, ctx: z.RefinementCtx) => void;
 
+declare type CustomField<T extends FieldValues> = BaseFieldCommon<T> & {
+    kind: 'custom';
+    render: (props: {
+        form: UseFormReturn<T>;
+    }) => ReactNode;
+};
+
 export declare const darkTheme: Theme;
 
 export declare function DataTable<T>({ columns, data }: Props<T>): JSX.Element;
@@ -146,15 +168,9 @@ declare interface FieldContextValue {
 export declare const FieldControl: ForwardRefExoticComponent<Omit<SlotProps & RefAttributes<HTMLElement>, "ref"> & RefAttributes<HTMLElement>>;
 
 declare type FieldDependency<T extends FieldValues> = {
-    /**
-     * Fields to revalidate when this field changes.
-     * Required for cross-field validation (superRefine).
-     */
     onChangeTrigger?: FieldPath<T>[];
 };
 
-declare type FieldKind = 'input' | 'password' | 'textarea' | 'select' | 'toggle' | 'checkbox' | 'custom';
-
 export declare const FieldLabel: React_2.ForwardRefExoticComponent<React_2.LabelHTMLAttributes<HTMLLabelElement> & React_2.RefAttributes<HTMLLabelElement>>;
 
 export declare const FieldMessage: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLParagraphElement> & React_2.RefAttributes<HTMLParagraphElement>>;
@@ -174,6 +190,13 @@ export declare function FormFactoryRenderer<TFormModel extends FieldValues, TEnt
 
 export declare const Input: React_2.ForwardRefExoticComponent<InputProps & React_2.RefAttributes<HTMLInputElement>>;
 
+/** =========================
+ * Field specific types
+ * ========================= */
+declare type InputField<T extends FieldValues> = BaseFieldCommon<T> & {
+    kind: 'input' | 'password';
+};
+
 declare interface InputProps extends Omit<React_2.InputHTMLAttributes<HTMLInputElement>, 'crossOrigin' | 'dangerouslySetInnerHTML'> {
     crossOrigin?: '' | 'anonymous' | 'use-credentials';
     dangerouslySetInnerHTML?: {
@@ -283,6 +306,11 @@ export declare const Select: React_2.FC<SelectPrimitive.SelectProps>;
 
 export declare const SelectContent: React_2.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
 
+declare type SelectField<T extends FieldValues> = BaseFieldCommon<T> & {
+    kind: 'select';
+    options: Option_2[];
+};
+
 export declare const SelectItem: React_2.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
 
 export declare const SelectTrigger: React_2.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React_2.RefAttributes<HTMLButtonElement>, "ref"> & {
@@ -297,6 +325,10 @@ declare type SkeletonProps = {
     className?: string;
 };
 
+declare type TextareaField<T extends FieldValues> = BaseFieldCommon<T> & {
+    kind: 'textarea';
+};
+
 export declare interface Theme {
     mode: ColorMode;
     colors: ThemeColors;
@@ -348,6 +380,10 @@ export declare interface ThemeShadows {
 
 export declare const Toggle: ({ checked, defaultChecked, onChange, size, disabled, label, className, ariaLabel, }: ToggleProps) => JSX.Element;
 
+declare type ToggleField<T extends FieldValues> = BaseFieldCommon<T> & {
+    kind: 'toggle';
+};
+
 export declare interface ToggleProps {
     /** Controlled */
     checked?: boolean;