@alpic-ai/ui 1.170.0 → 1.172.0

package/dist/components/editable.mjs

@@ -0,0 +1,509 @@
+"use client";
+import { cn } from "../lib/cn.mjs";
+import { useIsomorphicLayoutEffect } from "../hooks/use-isomorphic-layout-effect.mjs";
+import { useAsRef } from "../hooks/use-as-ref.mjs";
+import { useLazyRef } from "../hooks/use-lazy-ref.mjs";
+import { useComposedRefs } from "../lib/compose-refs.mjs";
+import { VisuallyHiddenInput } from "./visually-hidden-input.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React$1 from "react";
+import { Slot } from "@radix-ui/react-slot";
+//#region src/components/editable.tsx
+const ROOT_NAME = "Editable";
+const LABEL_NAME = "EditableLabel";
+const AREA_NAME = "EditableArea";
+const PREVIEW_NAME = "EditablePreview";
+const INPUT_NAME = "EditableInput";
+const TRIGGER_NAME = "EditableTrigger";
+const TOOLBAR_NAME = "EditableToolbar";
+const CANCEL_NAME = "EditableCancel";
+const SUBMIT_NAME = "EditableSubmit";
+const StoreContext = React$1.createContext(null);
+function useStoreContext(consumerName) {
+	const context = React$1.useContext(StoreContext);
+	if (!context) throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``);
+	return context;
+}
+function useStore(selector, ogStore) {
+	const contextStore = React$1.useContext(StoreContext);
+	const store = ogStore ?? contextStore;
+	if (!store) throw new Error(`\`useStore\` must be used within \`${ROOT_NAME}\``);
+	const getSnapshot = React$1.useCallback(() => selector(store.getState()), [store, selector]);
+	return React$1.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
+}
+const EditableContext = React$1.createContext(null);
+function useEditableContext(consumerName) {
+	const context = React$1.useContext(EditableContext);
+	if (!context) throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``);
+	return context;
+}
+function Editable(props) {
+	const { value: valueProp, defaultValue = "", defaultEditing, editing: editingProp, onValueChange, onEditingChange, onCancel: onCancelProp, onEdit: onEditProp, onSubmit: onSubmitProp, onEscapeKeyDown, onEnterKeyDown, dir: dirProp, maxLength, name, placeholder, triggerMode = "click", asChild, autosize = false, multiline = false, disabled, required, readOnly, invalid, className, id, ref, ...rootProps } = props;
+	const instanceId = React$1.useId();
+	const rootId = id ?? instanceId;
+	const inputId = React$1.useId();
+	const labelId = React$1.useId();
+	const dir = dirProp ?? "ltr";
+	const previousValueRef = React$1.useRef(defaultValue);
+	const [formTrigger, setFormTrigger] = React$1.useState(null);
+	const composedRef = useComposedRefs(ref, (node) => setFormTrigger(node));
+	const isFormControl = formTrigger ? !!formTrigger.closest("form") : true;
+	const listenersRef = useLazyRef(() => /* @__PURE__ */ new Set());
+	const stateRef = useLazyRef(() => ({
+		value: valueProp ?? defaultValue,
+		editing: editingProp ?? defaultEditing ?? false
+	}));
+	const propsRef = useAsRef({
+		onValueChange,
+		onEditingChange,
+		onCancel: onCancelProp,
+		onEdit: onEditProp,
+		onSubmit: onSubmitProp,
+		onEscapeKeyDown,
+		onEnterKeyDown
+	});
+	const store = React$1.useMemo(() => {
+		return {
+			subscribe: (cb) => {
+				listenersRef.current.add(cb);
+				return () => listenersRef.current.delete(cb);
+			},
+			getState: () => stateRef.current,
+			setState: (key, value) => {
+				if (Object.is(stateRef.current[key], value)) return;
+				if (key === "value" && typeof value === "string") {
+					stateRef.current.value = value;
+					propsRef.current.onValueChange?.(value);
+				} else if (key === "editing" && typeof value === "boolean") {
+					stateRef.current.editing = value;
+					propsRef.current.onEditingChange?.(value);
+				} else stateRef.current[key] = value;
+				store.notify();
+			},
+			notify: () => {
+				for (const cb of listenersRef.current) cb();
+			}
+		};
+	}, [
+		listenersRef,
+		stateRef,
+		propsRef
+	]);
+	const value = useStore((state) => state.value, store);
+	useIsomorphicLayoutEffect(() => {
+		if (valueProp !== void 0) store.setState("value", valueProp);
+	}, [valueProp]);
+	useIsomorphicLayoutEffect(() => {
+		if (editingProp !== void 0) store.setState("editing", editingProp);
+	}, [editingProp]);
+	const onCancel = React$1.useCallback(() => {
+		const prevValue = previousValueRef.current;
+		store.setState("value", prevValue);
+		store.setState("editing", false);
+		propsRef.current.onCancel?.();
+	}, [store, propsRef]);
+	const onEdit = React$1.useCallback(() => {
+		const currentValue = store.getState().value;
+		previousValueRef.current = currentValue;
+		store.setState("editing", true);
+		propsRef.current.onEdit?.();
+	}, [store, propsRef]);
+	const onSubmit = React$1.useCallback((newValue) => {
+		store.setState("value", newValue);
+		store.setState("editing", false);
+		propsRef.current.onSubmit?.(newValue);
+	}, [store, propsRef]);
+	const contextValue = React$1.useMemo(() => ({
+		rootId,
+		inputId,
+		labelId,
+		defaultValue,
+		onSubmit,
+		onEdit,
+		onCancel,
+		onEscapeKeyDown,
+		onEnterKeyDown,
+		dir,
+		maxLength,
+		placeholder,
+		triggerMode,
+		autosize,
+		multiline,
+		disabled,
+		readOnly,
+		required,
+		invalid
+	}), [
+		rootId,
+		inputId,
+		labelId,
+		defaultValue,
+		onSubmit,
+		onCancel,
+		onEdit,
+		onEscapeKeyDown,
+		onEnterKeyDown,
+		dir,
+		maxLength,
+		placeholder,
+		triggerMode,
+		autosize,
+		multiline,
+		disabled,
+		required,
+		readOnly,
+		invalid
+	]);
+	const RootPrimitive = asChild ? Slot : "div";
+	return /* @__PURE__ */ jsx(StoreContext.Provider, {
+		value: store,
+		children: /* @__PURE__ */ jsxs(EditableContext.Provider, {
+			value: contextValue,
+			children: [/* @__PURE__ */ jsx(RootPrimitive, {
+				"data-slot": "editable",
+				...rootProps,
+				id,
+				ref: composedRef,
+				className: cn("flex min-w-0 flex-col gap-2", className)
+			}), isFormControl && /* @__PURE__ */ jsx(VisuallyHiddenInput, {
+				type: "hidden",
+				control: formTrigger,
+				name,
+				value,
+				disabled,
+				readOnly,
+				required
+			})]
+		})
+	});
+}
+function EditableLabel(props) {
+	const { asChild, className, children, ref, ...labelProps } = props;
+	const context = useEditableContext(LABEL_NAME);
+	return /* @__PURE__ */ jsx(asChild ? Slot : "label", {
+		"data-disabled": context.disabled ? "" : void 0,
+		"data-invalid": context.invalid ? "" : void 0,
+		"data-required": context.required ? "" : void 0,
+		"data-slot": "editable-label",
+		...labelProps,
+		ref,
+		id: context.labelId,
+		htmlFor: context.inputId,
+		className: cn("text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70 data-required:after:ml-0.5 data-required:after:text-destructive data-required:after:content-['*']", className),
+		children
+	});
+}
+function EditableArea(props) {
+	const { asChild, className, ref, ...areaProps } = props;
+	const context = useEditableContext(AREA_NAME);
+	const editing = useStore((state) => state.editing);
+	return /* @__PURE__ */ jsx(asChild ? Slot : "div", {
+		role: "group",
+		"data-disabled": context.disabled ? "" : void 0,
+		"data-editing": editing ? "" : void 0,
+		"data-slot": "editable-area",
+		dir: context.dir,
+		...areaProps,
+		ref,
+		className: cn("relative inline-block min-w-0 data-disabled:cursor-not-allowed data-disabled:opacity-50", className)
+	});
+}
+function EditablePreview(props) {
+	const { onClick: onClickProp, onDoubleClick: onDoubleClickProp, onFocus: onFocusProp, onKeyDown: onKeyDownProp, asChild, className, ref, ...previewProps } = props;
+	const context = useEditableContext(PREVIEW_NAME);
+	const value = useStore((state) => state.value);
+	const editing = useStore((state) => state.editing);
+	const propsRef = useAsRef({
+		onClick: onClickProp,
+		onDoubleClick: onDoubleClickProp,
+		onFocus: onFocusProp,
+		onKeyDown: onKeyDownProp
+	});
+	const onTrigger = React$1.useCallback(() => {
+		if (context.disabled || context.readOnly) return;
+		context.onEdit();
+	}, [
+		context.onEdit,
+		context.disabled,
+		context.readOnly
+	]);
+	const onClick = React$1.useCallback((event) => {
+		propsRef.current.onClick?.(event);
+		if (event.defaultPrevented || context.triggerMode !== "click") return;
+		onTrigger();
+	}, [
+		propsRef,
+		onTrigger,
+		context.triggerMode
+	]);
+	const onDoubleClick = React$1.useCallback((event) => {
+		propsRef.current.onDoubleClick?.(event);
+		if (event.defaultPrevented || context.triggerMode !== "dblclick") return;
+		onTrigger();
+	}, [
+		propsRef,
+		onTrigger,
+		context.triggerMode
+	]);
+	const onFocus = React$1.useCallback((event) => {
+		propsRef.current.onFocus?.(event);
+		if (event.defaultPrevented || context.triggerMode !== "focus") return;
+		onTrigger();
+	}, [
+		propsRef,
+		onTrigger,
+		context.triggerMode
+	]);
+	const onKeyDown = React$1.useCallback((event) => {
+		propsRef.current.onKeyDown?.(event);
+		if (event.defaultPrevented) return;
+		if (event.key === "Enter") {
+			const nativeEvent = event.nativeEvent;
+			if (context.onEnterKeyDown) {
+				context.onEnterKeyDown(nativeEvent);
+				if (nativeEvent.defaultPrevented) return;
+			}
+			onTrigger();
+		}
+	}, [
+		propsRef,
+		onTrigger,
+		context.onEnterKeyDown
+	]);
+	const PreviewPrimitive = asChild ? Slot : "div";
+	if (editing || context.readOnly) return null;
+	return /* @__PURE__ */ jsx(PreviewPrimitive, {
+		role: "button",
+		"aria-disabled": context.disabled || context.readOnly,
+		"data-empty": !value ? "" : void 0,
+		"data-disabled": context.disabled ? "" : void 0,
+		"data-readonly": context.readOnly ? "" : void 0,
+		"data-slot": "editable-preview",
+		tabIndex: context.disabled || context.readOnly ? void 0 : 0,
+		...previewProps,
+		ref,
+		onClick,
+		onDoubleClick,
+		onFocus,
+		onKeyDown,
+		className: cn("cursor-text whitespace-pre-wrap rounded-sm border border-transparent px-1.5 py-1 transition-colors hover:bg-muted focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-50 data-empty:text-muted-foreground/60 data-empty:italic data-readonly:cursor-default data-readonly:hover:bg-transparent", className),
+		children: value || context.placeholder
+	});
+}
+function EditableInput(props) {
+	const { onBlur: onBlurProp, onChange: onChangeProp, onKeyDown: onKeyDownProp, asChild, className, disabled, readOnly, required, maxLength, ref, ...inputProps } = props;
+	const context = useEditableContext(INPUT_NAME);
+	const store = useStoreContext(INPUT_NAME);
+	const value = useStore((state) => state.value);
+	const editing = useStore((state) => state.editing);
+	const inputRef = React$1.useRef(null);
+	const composedRef = useComposedRefs(ref, inputRef);
+	const propsRef = useAsRef({
+		onBlur: onBlurProp,
+		onChange: onChangeProp,
+		onKeyDown: onKeyDownProp
+	});
+	const isDisabled = disabled || context.disabled;
+	const isReadOnly = readOnly || context.readOnly;
+	const isRequired = required || context.required;
+	const onAutosize = React$1.useCallback((target) => {
+		if (!context.autosize) return;
+		const { borderTopWidth, borderBottomWidth, borderLeftWidth, borderRightWidth } = getComputedStyle(target);
+		if (target instanceof HTMLTextAreaElement) {
+			target.style.height = "0";
+			target.style.height = `${target.scrollHeight + Number.parseFloat(borderTopWidth) + Number.parseFloat(borderBottomWidth)}px`;
+		} else {
+			target.style.width = "0";
+			target.style.width = `${target.scrollWidth + Number.parseFloat(borderLeftWidth) + Number.parseFloat(borderRightWidth)}px`;
+		}
+	}, [context.autosize]);
+	const onBlur = React$1.useCallback((event) => {
+		if (isDisabled || isReadOnly) return;
+		propsRef.current.onBlur?.(event);
+		if (event.defaultPrevented) return;
+		const relatedTarget = event.relatedTarget;
+		if (!(relatedTarget instanceof HTMLElement && (relatedTarget.closest(`[data-slot="editable-trigger"]`) || relatedTarget.closest(`[data-slot="editable-cancel"]`)))) context.onSubmit(value);
+	}, [
+		value,
+		context.onSubmit,
+		propsRef,
+		isDisabled,
+		isReadOnly
+	]);
+	const onChange = React$1.useCallback((event) => {
+		if (isDisabled || isReadOnly) return;
+		propsRef.current.onChange?.(event);
+		if (event.defaultPrevented) return;
+		store.setState("value", event.target.value);
+		onAutosize(event.target);
+	}, [
+		store,
+		propsRef,
+		onAutosize,
+		isDisabled,
+		isReadOnly
+	]);
+	const onKeyDown = React$1.useCallback((event) => {
+		if (isDisabled || isReadOnly) return;
+		propsRef.current.onKeyDown?.(event);
+		if (event.defaultPrevented) return;
+		if (event.key === "Escape") {
+			const nativeEvent = event.nativeEvent;
+			if (context.onEscapeKeyDown) {
+				context.onEscapeKeyDown(nativeEvent);
+				if (nativeEvent.defaultPrevented) return;
+			}
+			context.onCancel();
+		} else if (event.key === "Enter" && !context.multiline) {
+			event.preventDefault();
+			context.onSubmit(value);
+		}
+	}, [
+		value,
+		context.onSubmit,
+		context.onCancel,
+		context.onEscapeKeyDown,
+		context.multiline,
+		propsRef,
+		isDisabled,
+		isReadOnly
+	]);
+	useIsomorphicLayoutEffect(() => {
+		if (!editing || isDisabled || isReadOnly || !inputRef.current) return;
+		const frameId = window.requestAnimationFrame(() => {
+			if (!inputRef.current) return;
+			inputRef.current.focus();
+			inputRef.current.select();
+			onAutosize(inputRef.current);
+		});
+		return () => {
+			window.cancelAnimationFrame(frameId);
+		};
+	}, [
+		editing,
+		onAutosize,
+		isDisabled,
+		isReadOnly
+	]);
+	const InputPrimitive = asChild ? Slot : "input";
+	if (!editing && !isReadOnly) return null;
+	return /* @__PURE__ */ jsx(InputPrimitive, {
+		"aria-required": isRequired,
+		"aria-invalid": context.invalid,
+		"data-slot": "editable-input",
+		dir: context.dir,
+		disabled: isDisabled,
+		readOnly: isReadOnly,
+		required: isRequired,
+		...inputProps,
+		id: context.inputId,
+		"aria-labelledby": context.labelId,
+		ref: composedRef,
+		maxLength: maxLength ?? context.maxLength,
+		placeholder: context.placeholder,
+		value,
+		onBlur,
+		onChange,
+		onKeyDown,
+		className: cn("flex rounded-sm border border-input bg-transparent px-1.5 py-1 shadow-xs transition-colors placeholder:text-muted-foreground/60 placeholder:italic focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50", context.autosize && !context.multiline ? "w-auto" : "w-full", className)
+	});
+}
+function EditableTrigger(props) {
+	const { asChild, forceMount = false, ref, ...triggerProps } = props;
+	const context = useEditableContext(TRIGGER_NAME);
+	const editing = useStore((state) => state.editing);
+	const onTrigger = React$1.useCallback(() => {
+		if (context.disabled || context.readOnly) return;
+		context.onEdit();
+	}, [
+		context.disabled,
+		context.readOnly,
+		context.onEdit
+	]);
+	const TriggerPrimitive = asChild ? Slot : "button";
+	if (!forceMount && (editing || context.readOnly)) return null;
+	return /* @__PURE__ */ jsx(TriggerPrimitive, {
+		type: "button",
+		"aria-controls": context.rootId,
+		"aria-disabled": context.disabled || context.readOnly,
+		"data-disabled": context.disabled ? "" : void 0,
+		"data-readonly": context.readOnly ? "" : void 0,
+		"data-slot": "editable-trigger",
+		...triggerProps,
+		ref,
+		onClick: context.triggerMode === "click" ? onTrigger : void 0,
+		onDoubleClick: context.triggerMode === "dblclick" ? onTrigger : void 0
+	});
+}
+function EditableToolbar(props) {
+	const { asChild, className, orientation = "horizontal", ref, ...toolbarProps } = props;
+	const context = useEditableContext(TOOLBAR_NAME);
+	return /* @__PURE__ */ jsx(asChild ? Slot : "div", {
+		role: "toolbar",
+		"aria-controls": context.rootId,
+		"aria-orientation": orientation,
+		"data-slot": "editable-toolbar",
+		dir: context.dir,
+		...toolbarProps,
+		ref,
+		className: cn("flex items-center gap-2", orientation === "vertical" && "flex-col", className)
+	});
+}
+function EditableCancel(props) {
+	const { onClick: onClickProp, asChild, ref, ...cancelProps } = props;
+	const context = useEditableContext(CANCEL_NAME);
+	const editing = useStore((state) => state.editing);
+	const propsRef = useAsRef({ onClick: onClickProp });
+	const onClick = React$1.useCallback((event) => {
+		if (context.disabled || context.readOnly) return;
+		propsRef.current.onClick?.(event);
+		if (event.defaultPrevented) return;
+		context.onCancel();
+	}, [
+		propsRef,
+		context.onCancel,
+		context.disabled,
+		context.readOnly
+	]);
+	const CancelPrimitive = asChild ? Slot : "button";
+	if (!editing && !context.readOnly) return null;
+	return /* @__PURE__ */ jsx(CancelPrimitive, {
+		type: "button",
+		"aria-controls": context.rootId,
+		"data-slot": "editable-cancel",
+		...cancelProps,
+		onClick,
+		ref
+	});
+}
+function EditableSubmit(props) {
+	const { onClick: onClickProp, asChild, ref, ...submitProps } = props;
+	const context = useEditableContext(SUBMIT_NAME);
+	const value = useStore((state) => state.value);
+	const editing = useStore((state) => state.editing);
+	const propsRef = useAsRef({ onClick: onClickProp });
+	const onClick = React$1.useCallback((event) => {
+		if (context.disabled || context.readOnly) return;
+		propsRef.current.onClick?.(event);
+		if (event.defaultPrevented) return;
+		context.onSubmit(value);
+	}, [
+		propsRef,
+		context.onSubmit,
+		value,
+		context.disabled,
+		context.readOnly
+	]);
+	const SubmitPrimitive = asChild ? Slot : "button";
+	if (!editing && !context.readOnly) return null;
+	return /* @__PURE__ */ jsx(SubmitPrimitive, {
+		type: "button",
+		"aria-controls": context.rootId,
+		"data-slot": "editable-submit",
+		...submitProps,
+		ref,
+		onClick
+	});
+}
+//#endregion
+export { Editable, EditableArea, EditableCancel, EditableInput, EditableLabel, EditablePreview, EditableSubmit, EditableToolbar, EditableTrigger, useStore as useEditable };

package/dist/components/form.d.mts

@@ -5,7 +5,7 @@ import * as React$1 from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { ControllerProps, FieldPath, FieldValues } from "react-hook-form";
 //#region src/components/form.d.ts
-declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>({ children, watch, getValues, getFieldState, setError, clearErrors, setValue, setValues, trigger, formState, resetField, reset, resetDefaultValues, handleSubmit, unregister, control, register, setFocus, subscribe }: import("react-hook-form").FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React$1.JSX.Element;
+declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>({ children, watch, getValues, getErrors, getFieldState, setError, clearErrors, setValue, setValues, trigger, formState, resetField, reset, resetDefaultValues, handleSubmit, unregister, control, register, setFocus, subscribe }: import("react-hook-form").FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React$1.JSX.Element;
 declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => React$1.JSX.Element;
 declare const useFormField: () => {
   invalid: boolean;
@@ -23,8 +23,9 @@ declare function FormItem({ className, ...props }: React$1.ComponentProps<"div">
 interface FormLabelProps extends React$1.ComponentProps<typeof Label> {
   required?: boolean;
   tooltip?: string;
+  marker?: React$1.ReactNode;
 }
-declare function FormLabel({ className, required, tooltip, children, ...props }: FormLabelProps): React$1.JSX.Element;
+declare function FormLabel({ className, required, tooltip, marker, children, ...props }: FormLabelProps): React$1.JSX.Element;
 declare function FormControl({ ...props }: React$1.ComponentProps<typeof Slot>): React$1.JSX.Element;
 declare function FormDescription({ className, ...props }: React$1.ComponentProps<"p">): React$1.JSX.Element;
 declare function FormMessage({ className, ...props }: React$1.ComponentProps<"p">): React$1.JSX.Element | null;
@@ -42,11 +43,12 @@ interface FormFieldBaseProps<TFieldValues extends FieldValues, TName extends Fie
   label?: string;
   description?: string;
   tooltip?: string;
+  marker?: React$1.ReactNode;
 }
 interface InputFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> extends FormFieldBaseProps<TFieldValues, TName>, Omit<InputProps, "name" | "label"> {}
-declare function InputField<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>({ control, name, rules, required, label, description, tooltip, ...inputProps }: InputFieldProps<TFieldValues, TName>): React$1.JSX.Element;
+declare function InputField<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>({ control, name, rules, required, label, description, tooltip, marker, ...inputProps }: InputFieldProps<TFieldValues, TName>): React$1.JSX.Element;
 interface TextareaFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> extends FormFieldBaseProps<TFieldValues, TName>, Omit<TextareaProps, "name" | "label"> {}
-declare function TextareaField<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>({ control, name, rules, required, label, description, tooltip, ...textareaProps }: TextareaFieldProps<TFieldValues, TName>): React$1.JSX.Element;
+declare function TextareaField<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>({ control, name, rules, required, label, description, tooltip, marker, ...textareaProps }: TextareaFieldProps<TFieldValues, TName>): React$1.JSX.Element;
 interface SelectFieldOption {
   value: string;
   label: string;
@@ -56,16 +58,16 @@ interface SelectFieldProps<TFieldValues extends FieldValues, TName extends Field
   options: SelectFieldOption[];
   placeholder?: string;
 }
-declare function SelectField<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>({ control, name, rules, required, label, description, tooltip, options, placeholder }: SelectFieldProps<TFieldValues, TName>): React$1.JSX.Element;
+declare function SelectField<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>({ control, name, rules, required, label, description, tooltip, marker, options, placeholder }: SelectFieldProps<TFieldValues, TName>): React$1.JSX.Element;
 interface RadioFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> extends FormFieldBaseProps<TFieldValues, TName> {
   options: SelectFieldOption[];
 }
-declare function RadioField<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>({ control, name, rules, required, label, description, tooltip, options }: RadioFieldProps<TFieldValues, TName>): React$1.JSX.Element;
+declare function RadioField<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>({ control, name, rules, required, label, description, tooltip, marker, options }: RadioFieldProps<TFieldValues, TName>): React$1.JSX.Element;
 interface ChecklistFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> extends FormFieldBaseProps<TFieldValues, TName> {
   options: SelectFieldOption[];
 }
-declare function ChecklistField<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>({ control, name, rules, required, label, description, tooltip, options }: ChecklistFieldProps<TFieldValues, TName>): React$1.JSX.Element;
+declare function ChecklistField<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>({ control, name, rules, required, label, description, tooltip, marker, options }: ChecklistFieldProps<TFieldValues, TName>): React$1.JSX.Element;
 interface CheckboxFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> extends Omit<FormFieldBaseProps<TFieldValues, TName>, "required"> {}
-declare function CheckboxField<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>({ control, name, rules, label, description, tooltip }: CheckboxFieldProps<TFieldValues, TName>): React$1.JSX.Element;
+declare function CheckboxField<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>({ control, name, rules, label, description, tooltip, marker }: CheckboxFieldProps<TFieldValues, TName>): React$1.JSX.Element;
 //#endregion
 export { CheckboxField, ChecklistField, Form, FormControl, FormDescription, FormField, FormFields, FormHeader, FormItem, FormLabel, FormMessage, InputField, RadioField, SelectField, type SelectFieldOption, TextareaField, useFormField };

package/dist/components/form.mjs

@@ -52,7 +52,7 @@ function FormItem({ className, ...props }) {
 		})
 	});
 }
-function FormLabel({ className, required, tooltip, children, ...props }) {
+function FormLabel({ className, required, tooltip, marker, children, ...props }) {
 	const { error, formItemId } = useFormField();
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex items-center gap-0.5",
@@ -73,7 +73,11 @@ function FormLabel({ className, required, tooltip, children, ...props }) {
 			tooltip && /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
 				asChild: true,
 				children: /* @__PURE__ */ jsx(Info, { className: "size-4 text-quaternary-foreground" })
-			}), /* @__PURE__ */ jsx(TooltipContent, { children: tooltip })] })
+			}), /* @__PURE__ */ jsx(TooltipContent, { children: tooltip })] }),
+			marker && /* @__PURE__ */ jsx("span", {
+				className: "ml-1 flex items-center",
+				children: marker
+			})
 		]
 	});
 }
@@ -127,7 +131,7 @@ function FormFields({ className, ...props }) {
 		...props
 	});
 }
-function InputField({ control, name, rules, required, label, description, tooltip, ...inputProps }) {
+function InputField({ control, name, rules, required, label, description, tooltip, marker, ...inputProps }) {
 	return /* @__PURE__ */ jsx(FormField, {
 		control,
 		name,
@@ -136,6 +140,7 @@ function InputField({ control, name, rules, required, label, description, toolti
 			label && /* @__PURE__ */ jsx(FormLabel, {
 				required,
 				tooltip,
+				marker,
 				children: label
 			}),
 			description && /* @__PURE__ */ jsx(FormDescription, { children: description }),
@@ -147,7 +152,7 @@ function InputField({ control, name, rules, required, label, description, toolti
 		] })
 	});
 }
-function TextareaField({ control, name, rules, required, label, description, tooltip, ...textareaProps }) {
+function TextareaField({ control, name, rules, required, label, description, tooltip, marker, ...textareaProps }) {
 	return /* @__PURE__ */ jsx(FormField, {
 		control,
 		name,
@@ -156,6 +161,7 @@ function TextareaField({ control, name, rules, required, label, description, too
 			label && /* @__PURE__ */ jsx(FormLabel, {
 				required,
 				tooltip,
+				marker,
 				children: label
 			}),
 			description && /* @__PURE__ */ jsx(FormDescription, { children: description }),
@@ -167,7 +173,7 @@ function TextareaField({ control, name, rules, required, label, description, too
 		] })
 	});
 }
-function SelectField({ control, name, rules, required, label, description, tooltip, options, placeholder }) {
+function SelectField({ control, name, rules, required, label, description, tooltip, marker, options, placeholder }) {
 	return /* @__PURE__ */ jsx(FormField, {
 		control,
 		name,
@@ -176,6 +182,7 @@ function SelectField({ control, name, rules, required, label, description, toolt
 			label && /* @__PURE__ */ jsx(FormLabel, {
 				required,
 				tooltip,
+				marker,
 				children: label
 			}),
 			description && /* @__PURE__ */ jsx(FormDescription, { children: description }),
@@ -192,7 +199,7 @@ function SelectField({ control, name, rules, required, label, description, toolt
 		] })
 	});
 }
-function RadioField({ control, name, rules, required, label, description, tooltip, options }) {
+function RadioField({ control, name, rules, required, label, description, tooltip, marker, options }) {
 	return /* @__PURE__ */ jsx(FormField, {
 		control,
 		name,
@@ -201,6 +208,7 @@ function RadioField({ control, name, rules, required, label, description, toolti
 			label && /* @__PURE__ */ jsx(FormLabel, {
 				required,
 				tooltip,
+				marker,
 				children: label
 			}),
 			description && /* @__PURE__ */ jsx(FormDescription, { children: description }),
@@ -228,7 +236,7 @@ function RadioField({ control, name, rules, required, label, description, toolti
 		] })
 	});
 }
-function ChecklistField({ control, name, rules, required, label, description, tooltip, options }) {
+function ChecklistField({ control, name, rules, required, label, description, tooltip, marker, options }) {
 	return /* @__PURE__ */ jsx(FormField, {
 		control,
 		name,
@@ -243,6 +251,7 @@ function ChecklistField({ control, name, rules, required, label, description, to
 				label && /* @__PURE__ */ jsx(FormLabel, {
 					required,
 					tooltip,
+					marker,
 					children: label
 				}),
 				description && /* @__PURE__ */ jsx(FormDescription, { children: description }),
@@ -272,7 +281,7 @@ function ChecklistField({ control, name, rules, required, label, description, to
 		}
 	});
 }
-function CheckboxField({ control, name, rules, label, description, tooltip }) {
+function CheckboxField({ control, name, rules, label, description, tooltip, marker }) {
 	return /* @__PURE__ */ jsx(FormField, {
 		control,
 		name,
@@ -288,6 +297,7 @@ function CheckboxField({ control, name, rules, label, description, tooltip }) {
 						onBlur: field.onBlur
 					}) }), label && /* @__PURE__ */ jsx(FormLabel, {
 						tooltip,
+						marker,
 						className: "font-normal max-md:-ml-2 max-md:min-h-11 max-md:flex-1 max-md:items-start max-md:pl-2",
 						children: label
 					})]