@alepha/ui 0.10.4

package/dist/index.js

@@ -0,0 +1,317 @@
+import { $module, TypeBoxError } from "@alepha/core";
+import { AlephaReact, NestedView, useActive, useAlepha, useRouter, useRouterEvents } from "@alepha/react";
+import "@mantine/core/styles.css";
+import "@mantine/nprogress/styles.css";
+import "@mantine/spotlight/styles.css";
+import "@mantine/notifications/styles.css";
+import { useFormState } from "@alepha/react-form";
+import { Autocomplete, Button, ColorSchemeScript, Flex, Input, MantineProvider, PasswordInput, SegmentedControl, Select, Switch, TextInput, Textarea } from "@mantine/core";
+import { useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ModalsProvider } from "@mantine/modals";
+import { Notifications } from "@mantine/notifications";
+import { NavigationProgress, nprogress } from "@mantine/nprogress";
+
+//#region src/components/Action.tsx
+const Action = (_props) => {
+	const props = {
+		variant: "subtle",
+		..._props
+	};
+	if (props.leftSection && !props.children) {
+		props.className ??= "mantine-Action-iconOnly";
+		props.p ??= "xs";
+	}
+	if (props.textVisibleFrom) {
+		const { children, textVisibleFrom, leftSection,...rest } = props;
+		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Flex, {
+			w: "100%",
+			visibleFrom: textVisibleFrom,
+			children: /* @__PURE__ */ jsx(Action, {
+				flex: 1,
+				...rest,
+				leftSection,
+				children
+			})
+		}), /* @__PURE__ */ jsx(Flex, {
+			w: "100%",
+			hiddenFrom: textVisibleFrom,
+			children: /* @__PURE__ */ jsx(Action, {
+				px: "xs",
+				...rest,
+				children: leftSection
+			})
+		})] });
+	}
+	const renderAction = () => {
+		if ("href" in props && props.href) return /* @__PURE__ */ jsx(ActionHref, {
+			...props,
+			href: props.href,
+			children: props.children
+		});
+		if ("onClick" in props && props.onClick) return /* @__PURE__ */ jsx(ActionClick, {
+			...props,
+			onClick: props.onClick,
+			children: props.children
+		});
+		if ("form" in props && props.form) return /* @__PURE__ */ jsx(ActionSubmit, {
+			...props,
+			form: props.form,
+			children: props.children
+		});
+		return /* @__PURE__ */ jsx(Button, {
+			...props,
+			children: props.children
+		});
+	};
+	return renderAction();
+};
+/**
+* Action button that submits a form with loading and disabled state handling.
+*/
+const ActionSubmit = (props) => {
+	const { form,...buttonProps } = props;
+	const state = useFormState(form);
+	return /* @__PURE__ */ jsx(Button, {
+		...buttonProps,
+		loading: state.loading,
+		disabled: state.loading || !state.dirty,
+		type: "submit",
+		children: props.children
+	});
+};
+/**
+* Basic action button that handles click events with loading and error handling.
+*/
+const ActionClick = (props) => {
+	const [pending, setPending] = useState(false);
+	const alepha = useAlepha();
+	const onClick = async (e) => {
+		setPending(true);
+		try {
+			await props.onClick(e);
+		} catch (e$1) {
+			console.error(e$1);
+			await alepha.events.emit("form:submit:error", {
+				id: "action",
+				error: e$1
+			});
+		} finally {
+			setPending(false);
+		}
+	};
+	return /* @__PURE__ */ jsx(Button, {
+		...props,
+		disabled: pending || props.disabled,
+		loading: pending,
+		onClick,
+		children: props.children
+	});
+};
+/**
+* Action for navigation with active state support.
+*/
+const ActionHref = (props) => {
+	const { active: options, routerGoOptions,...buttonProps } = props;
+	const router = useRouter();
+	const { isPending, isActive } = useActive(options ? {
+		href: props.href,
+		...options
+	} : { href: props.href });
+	const anchorProps = router.anchor(props.href, routerGoOptions);
+	return /* @__PURE__ */ jsx(Button, {
+		component: "a",
+		loading: isPending,
+		...anchorProps,
+		...buttonProps,
+		variant: isActive && options !== false ? "filled" : "subtle",
+		children: props.children
+	});
+};
+
+//#endregion
+//#region src/components/AlephaMantineProvider.tsx
+const AlephaMantineProvider = (props) => {
+	useRouterEvents({
+		onBegin: () => {
+			nprogress.start();
+		},
+		onEnd: () => {
+			nprogress.complete();
+		}
+	});
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ColorSchemeScript, {
+		defaultColorScheme: props.mantine?.defaultColorScheme,
+		...props.colorSchemeScript
+	}), /* @__PURE__ */ jsxs(MantineProvider, {
+		...props.mantine,
+		children: [
+			/* @__PURE__ */ jsx(Notifications, { ...props.notifications }),
+			/* @__PURE__ */ jsx(NavigationProgress, { ...props.navigationProgress }),
+			/* @__PURE__ */ jsx(ModalsProvider, {
+				...props.modals,
+				children: props.children ?? /* @__PURE__ */ jsx(NestedView, {})
+			})
+		]
+	})] });
+};
+
+//#endregion
+//#region src/components/Control.tsx
+/**
+* Generic form control that renders the appropriate input based on the schema and props.
+*
+* Supports:
+* - TextInput
+* - Textarea
+* - Select (for enum types)
+* - Autocomplete
+* - PasswordInput
+* - Switch (for boolean types)
+* - SegmentedControl (for enum types)
+* - Custom component
+*
+* Automatically handles labels, descriptions, error messages, and required state.
+*/
+const Control = (props) => {
+	const form = useFormState(props.input);
+	if (!props.input?.props) return null;
+	const disabled = false;
+	const id = props.input.props.id;
+	const label = props.title ?? ("title" in props.input.schema && typeof props.input.schema.title === "string" ? props.input.schema.title : void 0) ?? prettyName(props.input.path);
+	const description = props.description ?? ("description" in props.input.schema && typeof props.input.schema.description === "string" ? props.input.schema.description : void 0);
+	const error = form.error && form.error instanceof TypeBoxError ? form.error.value.message : void 0;
+	const icon = props.icon;
+	const required = props.input.required;
+	const inputProps = {
+		label,
+		description,
+		error,
+		required,
+		disabled
+	};
+	if (props.custom) {
+		const Custom = props.custom;
+		return /* @__PURE__ */ jsx(Input.Wrapper, {
+			...inputProps,
+			children: /* @__PURE__ */ jsx(Flex, {
+				flex: 1,
+				mt: "calc(var(--mantine-spacing-xs) / 2)",
+				children: /* @__PURE__ */ jsx(Custom, {
+					defaultValue: props.input.props.defaultValue,
+					onChange: (value) => {
+						props.input.set(value);
+					}
+				})
+			})
+		});
+	}
+	if (props.segmented) {
+		const segmentedControlProps = typeof props.segmented === "object" ? props.segmented : {};
+		const data = segmentedControlProps.data ?? (props.input.schema && "enum" in props.input.schema && Array.isArray(props.input.schema.enum) ? props.input.schema.enum?.map((value) => ({
+			value,
+			label: value
+		})) : []);
+		return /* @__PURE__ */ jsx(Input.Wrapper, {
+			...inputProps,
+			children: /* @__PURE__ */ jsx(Flex, {
+				mt: "calc(var(--mantine-spacing-xs) / 2)",
+				children: /* @__PURE__ */ jsx(SegmentedControl, {
+					disabled,
+					defaultValue: String(props.input.props.defaultValue),
+					...segmentedControlProps,
+					onChange: (value) => {
+						props.input.set(value);
+					},
+					data
+				})
+			})
+		});
+	}
+	if (props.autocomplete) {
+		const autocompleteProps = typeof props.autocomplete === "object" ? props.autocomplete : {};
+		return /* @__PURE__ */ jsx(Autocomplete, {
+			...inputProps,
+			id,
+			leftSection: icon,
+			...props.input.props,
+			...autocompleteProps
+		});
+	}
+	if (props.input.schema && "enum" in props.input.schema && props.input.schema.enum || props.select) {
+		const data = props.input.schema && "enum" in props.input.schema && Array.isArray(props.input.schema.enum) ? props.input.schema.enum?.map((value) => ({
+			value,
+			label: value
+		})) : [];
+		const selectProps = typeof props.select === "object" ? props.select : {};
+		return /* @__PURE__ */ jsx(Select, {
+			...inputProps,
+			id,
+			leftSection: icon,
+			data,
+			...props.input.props,
+			...selectProps
+		});
+	}
+	if (props.input.schema && "type" in props.input.schema && props.input.schema.type === "boolean" || props.switch) {
+		const switchProps = typeof props.switch === "object" ? props.switch : {};
+		return /* @__PURE__ */ jsx(Switch, {
+			...inputProps,
+			id,
+			color: "blue",
+			defaultChecked: props.input.props.defaultValue,
+			...props.input.props,
+			...switchProps
+		});
+	}
+	if (props.password) {
+		const passwordInputProps = typeof props.password === "object" ? props.password : {};
+		return /* @__PURE__ */ jsx(PasswordInput, {
+			...inputProps,
+			id,
+			leftSection: icon,
+			...props.input.props,
+			...passwordInputProps
+		});
+	}
+	if (props.area) {
+		const textAreaProps = typeof props.area === "object" ? props.area : {};
+		return /* @__PURE__ */ jsx(Textarea, {
+			...inputProps,
+			id,
+			leftSection: icon,
+			...props.input.props,
+			...textAreaProps
+		});
+	}
+	const textInputProps = typeof props.text === "object" ? props.text : {};
+	return /* @__PURE__ */ jsx(TextInput, {
+		...inputProps,
+		id,
+		leftSection: icon,
+		...props.input.props,
+		...textInputProps
+	});
+};
+const prettyName = (name) => {
+	return capitalize(name.replaceAll("/", ""));
+};
+const capitalize = (str) => {
+	return str.charAt(0).toUpperCase() + str.slice(1);
+};
+
+//#endregion
+//#region src/index.ts
+/**
+*
+*
+* @module alepha.ui
+*/
+const AlephaUI = $module({
+	name: "alepha.ui",
+	services: [AlephaReact]
+});
+
+//#endregion
+export { Action, AlephaMantineProvider, AlephaUI, Control };
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["e","segmentedControlProps: Partial<SegmentedControlProps>"],"sources":["../src/components/Action.tsx","../src/components/AlephaMantineProvider.tsx","../src/components/Control.tsx","../src/index.ts"],"sourcesContent":["import {\n\ttype RouterGoOptions,\n\ttype UseActiveOptions,\n\tuseActive,\n\tuseAlepha,\n\tuseRouter,\n} from \"@alepha/react\";\nimport { type FormModel, useFormState } from \"@alepha/react-form\";\nimport { Button, type ButtonProps, Flex } from \"@mantine/core\";\nimport { type ReactNode, useState } from \"react\";\n\nexport interface ActionCommonProps extends ButtonProps {\n\tchildren?: ReactNode;\n\ttextVisibleFrom?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n\t// TODO\n\n\t/**\n\t * If set, a confirmation dialog will be shown before performing the action.\n\t * If `true`, a default title and message will be used.\n\t * If a string, it will be used as the message with a default title.\n\t * If an object, it can contain `title` and `message` properties to customize the dialog.\n\t */\n\tconfirm?: boolean | string | { title?: string; message: string };\n}\n\nexport type ActionProps = ActionCommonProps &\n\t(ActiveHrefProps | ActionClickProps | ActionSubmitProps | {});\n\n// ---------------------------------------------------------------------------------------------------------------------\n\nconst Action = (_props: ActionProps) => {\n\tconst props = { variant: \"subtle\", ..._props };\n\n\tif (props.leftSection && !props.children) {\n\t\tprops.className ??= \"mantine-Action-iconOnly\";\n\t\tprops.p ??= \"xs\";\n\t}\n\n\tif (props.textVisibleFrom) {\n\t\tconst { children, textVisibleFrom, leftSection, ...rest } = props;\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<Flex w={\"100%\"} visibleFrom={textVisibleFrom}>\n\t\t\t\t\t<Action flex={1} {...rest} leftSection={leftSection}>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</Action>\n\t\t\t\t</Flex>\n\t\t\t\t<Flex w={\"100%\"} hiddenFrom={textVisibleFrom}>\n\t\t\t\t\t<Action px={\"xs\"} {...rest}>\n\t\t\t\t\t\t{leftSection}\n\t\t\t\t\t</Action>\n\t\t\t\t</Flex>\n\t\t\t</>\n\t\t);\n\t}\n\n\tconst renderAction = () => {\n\t\tif (\"href\" in props && props.href) {\n\t\t\treturn (\n\t\t\t\t<ActionHref {...props} href={props.href}>\n\t\t\t\t\t{props.children}\n\t\t\t\t</ActionHref>\n\t\t\t);\n\t\t}\n\n\t\tif (\"onClick\" in props && props.onClick) {\n\t\t\treturn (\n\t\t\t\t<ActionClick {...props} onClick={props.onClick}>\n\t\t\t\t\t{props.children}\n\t\t\t\t</ActionClick>\n\t\t\t);\n\t\t}\n\n\t\tif (\"form\" in props && props.form) {\n\t\t\treturn (\n\t\t\t\t<ActionSubmit {...props} form={props.form}>\n\t\t\t\t\t{props.children}\n\t\t\t\t</ActionSubmit>\n\t\t\t);\n\t\t}\n\n\t\treturn <Button {...(props as any)}>{props.children}</Button>;\n\t};\n\n\treturn renderAction();\n};\n\nexport default Action;\n\n// ---------------------------------------------------------------------------------------------------------------------\n\nexport interface ActionSubmitProps extends ButtonProps {\n\tform: FormModel<any>;\n}\n\n/**\n * Action button that submits a form with loading and disabled state handling.\n */\nconst ActionSubmit = (props: ActionSubmitProps) => {\n\tconst { form, ...buttonProps } = props;\n\tconst state = useFormState(form);\n\treturn (\n\t\t<Button\n\t\t\t{...buttonProps}\n\t\t\tloading={state.loading}\n\t\t\tdisabled={state.loading || !state.dirty}\n\t\t\ttype={\"submit\"}\n\t\t>\n\t\t\t{props.children}\n\t\t</Button>\n\t);\n};\n\n// ---------------------------------------------------------------------------------------------------------------------\n\nexport interface ActionClickProps extends ButtonProps {\n\tonClick: (e: any) => any;\n}\n\n/**\n * Basic action button that handles click events with loading and error handling.\n */\nconst ActionClick = (props: ActionClickProps) => {\n\tconst [pending, setPending] = useState(false);\n\tconst alepha = useAlepha();\n\n\tconst onClick = async (e: any) => {\n\t\tsetPending(true);\n\t\ttry {\n\t\t\tawait props.onClick(e);\n\t\t} catch (e) {\n\t\t\tconsole.error(e);\n\t\t\tawait alepha.events.emit(\"form:submit:error\", {\n\t\t\t\tid: \"action\",\n\t\t\t\terror: e as Error,\n\t\t\t});\n\t\t} finally {\n\t\t\tsetPending(false);\n\t\t}\n\t};\n\n\treturn (\n\t\t<Button\n\t\t\t{...props}\n\t\t\tdisabled={pending || props.disabled}\n\t\t\tloading={pending}\n\t\t\tonClick={onClick}\n\t\t>\n\t\t\t{props.children}\n\t\t</Button>\n\t);\n};\n\n// ---------------------------------------------------------------------------------------------------------------------\n\nexport interface ActiveHrefProps extends ButtonProps {\n\thref: string;\n\tactive?: Partial<UseActiveOptions> | false;\n\trouterGoOptions?: RouterGoOptions;\n}\n\n/**\n * Action for navigation with active state support.\n */\nconst ActionHref = (props: ActiveHrefProps) => {\n\tconst { active: options, routerGoOptions, ...buttonProps } = props;\n\tconst router = useRouter();\n\tconst { isPending, isActive } = useActive(\n\t\toptions ? { href: props.href, ...options } : { href: props.href },\n\t);\n\tconst anchorProps = router.anchor(props.href, routerGoOptions);\n\n\treturn (\n\t\t<Button\n\t\t\tcomponent={\"a\"}\n\t\t\tloading={isPending}\n\t\t\t{...anchorProps}\n\t\t\t{...buttonProps}\n\t\t\tvariant={isActive && options !== false ? \"filled\" : \"subtle\"}\n\t\t>\n\t\t\t{props.children}\n\t\t</Button>\n\t);\n};\n","import { NestedView, useRouterEvents } from \"@alepha/react\";\nimport type {\n\tColorSchemeScriptProps,\n\tMantineProviderProps,\n} from \"@mantine/core\";\nimport { ColorSchemeScript, MantineProvider } from \"@mantine/core\";\nimport { ModalsProvider, type ModalsProviderProps } from \"@mantine/modals\";\nimport { Notifications, type NotificationsProps } from \"@mantine/notifications\";\nimport type { NavigationProgressProps } from \"@mantine/nprogress\";\nimport { NavigationProgress, nprogress } from \"@mantine/nprogress\";\nimport type { ReactNode } from \"react\";\n\nexport interface AlephaMantineProviderProps {\n\tchildren?: ReactNode;\n\tmantine?: MantineProviderProps;\n\tcolorSchemeScript?: ColorSchemeScriptProps;\n\tnavigationProgress?: NavigationProgressProps;\n\tnotifications?: NotificationsProps;\n\tmodals?: ModalsProviderProps;\n}\n\nconst AlephaMantineProvider = (props: AlephaMantineProviderProps) => {\n\tuseRouterEvents({\n\t\tonBegin: () => {\n\t\t\tnprogress.start();\n\t\t},\n\t\tonEnd: () => {\n\t\t\tnprogress.complete();\n\t\t},\n\t});\n\n\treturn (\n\t\t<>\n\t\t\t<ColorSchemeScript\n\t\t\t\tdefaultColorScheme={props.mantine?.defaultColorScheme}\n\t\t\t\t{...props.colorSchemeScript}\n\t\t\t/>\n\t\t\t<MantineProvider {...props.mantine}>\n\t\t\t\t<Notifications {...props.notifications} />\n\t\t\t\t<NavigationProgress {...props.navigationProgress} />\n\t\t\t\t<ModalsProvider {...props.modals}>\n\t\t\t\t\t{props.children ?? <NestedView />}\n\t\t\t\t</ModalsProvider>\n\t\t\t</MantineProvider>\n\t\t</>\n\t);\n};\n\nexport default AlephaMantineProvider;\n","import { TypeBoxError } from \"@alepha/core\";\nimport { type InputField, useFormState } from \"@alepha/react-form\";\nimport {\n\tAutocomplete,\n\ttype AutocompleteProps,\n\tFlex,\n\tInput,\n\tPasswordInput,\n\ttype PasswordInputProps,\n\tSegmentedControl,\n\ttype SegmentedControlProps,\n\tSelect,\n\ttype SelectProps,\n\tSwitch,\n\ttype SwitchProps,\n\tTextarea,\n\ttype TextareaProps,\n\tTextInput,\n\ttype TextInputProps,\n} from \"@mantine/core\";\nimport type { ComponentType, ReactNode } from \"react\";\n\nexport interface ControlProps {\n\tinput: InputField;\n\n\ttitle?: string;\n\tdescription?: string;\n\n\ticon?: ReactNode;\n\n\ttext?: TextInputProps;\n\tarea?: boolean | TextareaProps;\n\tselect?: boolean | SelectProps;\n\tautocomplete?: boolean | AutocompleteProps;\n\tpassword?: boolean | PasswordInputProps;\n\tswitch?: boolean | SwitchProps;\n\tsegmented?: boolean | Partial<SegmentedControlProps>;\n\n\tcustom?: ComponentType<CustomControlProps>;\n}\n\n/**\n * Generic form control that renders the appropriate input based on the schema and props.\n *\n * Supports:\n * - TextInput\n * - Textarea\n * - Select (for enum types)\n * - Autocomplete\n * - PasswordInput\n * - Switch (for boolean types)\n * - SegmentedControl (for enum types)\n * - Custom component\n *\n * Automatically handles labels, descriptions, error messages, and required state.\n */\nconst Control = (props: ControlProps) => {\n\tconst form = useFormState(props.input);\n\tif (!props.input?.props) {\n\t\treturn null;\n\t}\n\n\t// shared props\n\n\tconst disabled = false; // form.loading;\n\tconst id = props.input.props.id;\n\tconst label =\n\t\tprops.title ??\n\t\t(\"title\" in props.input.schema &&\n\t\ttypeof props.input.schema.title === \"string\"\n\t\t\t? props.input.schema.title\n\t\t\t: undefined) ??\n\t\tprettyName(props.input.path);\n\tconst description =\n\t\tprops.description ??\n\t\t(\"description\" in props.input.schema &&\n\t\ttypeof props.input.schema.description === \"string\"\n\t\t\t? props.input.schema.description\n\t\t\t: undefined);\n\tconst error =\n\t\tform.error && form.error instanceof TypeBoxError\n\t\t\t? form.error.value.message\n\t\t\t: undefined;\n\tconst icon = props.icon;\n\tconst required = props.input.required;\n\n\tconst inputProps = {\n\t\tlabel,\n\t\tdescription,\n\t\terror,\n\t\trequired,\n\t\tdisabled,\n\t};\n\n\t// -------------------------------------------------------------------------------------------------------------------\n\n\tif (props.custom) {\n\t\tconst Custom = props.custom;\n\t\treturn (\n\t\t\t<Input.Wrapper {...inputProps}>\n\t\t\t\t<Flex flex={1} mt={\"calc(var(--mantine-spacing-xs) / 2)\"}>\n\t\t\t\t\t<Custom\n\t\t\t\t\t\tdefaultValue={props.input.props.defaultValue}\n\t\t\t\t\t\tonChange={(value) => {\n\t\t\t\t\t\t\tprops.input.set(value);\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t</Flex>\n\t\t\t</Input.Wrapper>\n\t\t);\n\t}\n\n\t// region <SegmentedControl/>\n\tif (props.segmented) {\n\t\tconst segmentedControlProps: Partial<SegmentedControlProps> =\n\t\t\ttypeof props.segmented === \"object\" ? props.segmented : {};\n\t\tconst data =\n\t\t\tsegmentedControlProps.data ??\n\t\t\t(props.input.schema &&\n\t\t\t\"enum\" in props.input.schema &&\n\t\t\tArray.isArray(props.input.schema.enum)\n\t\t\t\t? props.input.schema.enum?.map((value: string) => ({\n\t\t\t\t\t\tvalue,\n\t\t\t\t\t\tlabel: value,\n\t\t\t\t\t}))\n\t\t\t\t: []);\n\t\treturn (\n\t\t\t<Input.Wrapper {...inputProps}>\n\t\t\t\t<Flex mt={\"calc(var(--mantine-spacing-xs) / 2)\"}>\n\t\t\t\t\t<SegmentedControl\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\tdefaultValue={String(props.input.props.defaultValue)}\n\t\t\t\t\t\t{...segmentedControlProps}\n\t\t\t\t\t\tonChange={(value) => {\n\t\t\t\t\t\t\tprops.input.set(value);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tdata={data}\n\t\t\t\t\t/>\n\t\t\t\t</Flex>\n\t\t\t</Input.Wrapper>\n\t\t);\n\t}\n\t// endregion\n\n\t// region <Autocomplete/>\n\tif (props.autocomplete) {\n\t\tconst autocompleteProps =\n\t\t\ttypeof props.autocomplete === \"object\" ? props.autocomplete : {};\n\n\t\treturn (\n\t\t\t<Autocomplete\n\t\t\t\t{...inputProps}\n\t\t\t\tid={id}\n\t\t\t\tleftSection={icon}\n\t\t\t\t{...props.input.props}\n\t\t\t\t{...autocompleteProps}\n\t\t\t/>\n\t\t);\n\t}\n\t// endregion\n\n\t// region <Select/>\n\tif (\n\t\t(props.input.schema &&\n\t\t\t\"enum\" in props.input.schema &&\n\t\t\tprops.input.schema.enum) ||\n\t\tprops.select\n\t) {\n\t\tconst data =\n\t\t\tprops.input.schema &&\n\t\t\t\"enum\" in props.input.schema &&\n\t\t\tArray.isArray(props.input.schema.enum)\n\t\t\t\t? props.input.schema.enum?.map((value: string) => ({\n\t\t\t\t\t\tvalue,\n\t\t\t\t\t\tlabel: value,\n\t\t\t\t\t}))\n\t\t\t\t: [];\n\n\t\tconst selectProps = typeof props.select === \"object\" ? props.select : {};\n\n\t\treturn (\n\t\t\t<Select\n\t\t\t\t{...inputProps}\n\t\t\t\tid={id}\n\t\t\t\tleftSection={icon}\n\t\t\t\tdata={data}\n\t\t\t\t{...props.input.props}\n\t\t\t\t{...selectProps}\n\t\t\t/>\n\t\t);\n\t}\n\t// endregion\n\n\t// region <Switch/>\n\n\tif (\n\t\t(props.input.schema &&\n\t\t\t\"type\" in props.input.schema &&\n\t\t\tprops.input.schema.type === \"boolean\") ||\n\t\tprops.switch\n\t) {\n\t\tconst switchProps = typeof props.switch === \"object\" ? props.switch : {};\n\n\t\treturn (\n\t\t\t<Switch\n\t\t\t\t{...inputProps}\n\t\t\t\tid={id}\n\t\t\t\tcolor={\"blue\"}\n\t\t\t\tdefaultChecked={props.input.props.defaultValue}\n\t\t\t\t{...props.input.props}\n\t\t\t\t{...switchProps}\n\t\t\t/>\n\t\t);\n\t}\n\t// endregion\n\n\t// region <PasswordInput/>\n\tif (props.password) {\n\t\tconst passwordInputProps =\n\t\t\ttypeof props.password === \"object\" ? props.password : {};\n\t\treturn (\n\t\t\t<PasswordInput\n\t\t\t\t{...inputProps}\n\t\t\t\tid={id}\n\t\t\t\tleftSection={icon}\n\t\t\t\t{...props.input.props}\n\t\t\t\t{...passwordInputProps}\n\t\t\t/>\n\t\t);\n\t}\n\t//endregion\n\n\t//region <Textarea/>\n\tif (props.area) {\n\t\tconst textAreaProps = typeof props.area === \"object\" ? props.area : {};\n\t\treturn (\n\t\t\t<Textarea\n\t\t\t\t{...inputProps}\n\t\t\t\tid={id}\n\t\t\t\tleftSection={icon}\n\t\t\t\t{...props.input.props}\n\t\t\t\t{...textAreaProps}\n\t\t\t/>\n\t\t);\n\t}\n\t//endregion\n\n\t// region <TextInput/>\n\tconst textInputProps = typeof props.text === \"object\" ? props.text : {};\n\treturn (\n\t\t<TextInput\n\t\t\t{...inputProps}\n\t\t\tid={id}\n\t\t\tleftSection={icon}\n\t\t\t{...props.input.props}\n\t\t\t{...textInputProps}\n\t\t/>\n\t);\n\t//endregion\n};\n\nexport default Control;\n\nconst prettyName = (name: string) => {\n\treturn capitalize(name.replaceAll(\"/\", \"\"));\n};\n\nconst capitalize = (str: string) => {\n\treturn str.charAt(0).toUpperCase() + str.slice(1);\n};\n\nexport type CustomControlProps = {\n\tdefaultValue: any;\n\tonChange: (value: any) => void;\n};\n","import { $module } from \"@alepha/core\";\nimport { AlephaReact } from \"@alepha/react\";\n\n// ---------------------------------------------------------------------------------------------------------------------\nimport \"@mantine/core/styles.css\";\nimport \"@mantine/nprogress/styles.css\";\nimport \"@mantine/spotlight/styles.css\";\nimport \"@mantine/notifications/styles.css\";\n\n// ---------------------------------------------------------------------------------------------------------------------\n\nexport { default as Action } from \"./components/Action\";\nexport { default as AlephaMantineProvider } from \"./components/AlephaMantineProvider.tsx\";\nexport { default as Control } from \"./components/Control\";\n\n// ---------------------------------------------------------------------------------------------------------------------\n\n/**\n *\n *\n * @module alepha.ui\n */\nexport const AlephaUI = $module({\n\tname: \"alepha.ui\",\n\tservices: [AlephaReact],\n});\n"],"mappings":"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"}

package/package.json

@@ -0,0 +1,62 @@
+{
+	"name": "@alepha/ui",
+	"keywords": [
+		"alepha",
+		"ui",
+		"mantine"
+	],
+	"author": "Feunard",
+	"version": "0.10.4",
+	"type": "module",
+	"engines": {
+		"node": ">=22.0.0"
+	},
+	"license": "MIT",
+	"main": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"files": [
+		"dist",
+		"src"
+	],
+	"dependencies": {
+		"@alepha/core": "0.10.4",
+		"@alepha/react": "0.10.4",
+		"@alepha/react-form": "0.10.4",
+		"@mantine/core": "^8.3.3",
+		"@mantine/hooks": "^8.3.3",
+		"@mantine/modals": "^8.3.3",
+		"@mantine/notifications": "^8.3.3",
+		"@mantine/nprogress": "^8.3.3",
+		"@mantine/spotlight": "^8.3.3"
+	},
+	"devDependencies": {
+		"@biomejs/biome": "^2.2.5",
+		"react": "^19.2.0",
+		"react-dom": "^19.2.0",
+		"tsdown": "^0.15.6",
+		"typescript": "^5.9.3",
+		"vitest": "^3.2.4"
+	},
+	"peerDependencies": {
+		"react": "*",
+		"react-dom": "*"
+	},
+	"scripts": {
+		"test": "vitest run",
+		"lint": "biome check --write --unsafe",
+		"build": "tsdown -c ../../tsdown.config.ts",
+		"check": "tsc"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/feunard/alepha.git"
+	},
+	"homepage": "https://github.com/feunard/alepha",
+	"module": "./dist/index.js",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"import": "./dist/index.js"
+		}
+	}
+}

package/src/components/Action.tsx

@@ -0,0 +1,184 @@
+import {
+	type RouterGoOptions,
+	type UseActiveOptions,
+	useActive,
+	useAlepha,
+	useRouter,
+} from "@alepha/react";
+import { type FormModel, useFormState } from "@alepha/react-form";
+import { Button, type ButtonProps, Flex } from "@mantine/core";
+import { type ReactNode, useState } from "react";
+
+export interface ActionCommonProps extends ButtonProps {
+	children?: ReactNode;
+	textVisibleFrom?: "xs" | "sm" | "md" | "lg" | "xl";
+	// TODO
+
+	/**
+	 * If set, a confirmation dialog will be shown before performing the action.
+	 * If `true`, a default title and message will be used.
+	 * If a string, it will be used as the message with a default title.
+	 * If an object, it can contain `title` and `message` properties to customize the dialog.
+	 */
+	confirm?: boolean | string | { title?: string; message: string };
+}
+
+export type ActionProps = ActionCommonProps &
+	(ActiveHrefProps | ActionClickProps | ActionSubmitProps | {});
+
+// ---------------------------------------------------------------------------------------------------------------------
+
+const Action = (_props: ActionProps) => {
+	const props = { variant: "subtle", ..._props };
+
+	if (props.leftSection && !props.children) {
+		props.className ??= "mantine-Action-iconOnly";
+		props.p ??= "xs";
+	}
+
+	if (props.textVisibleFrom) {
+		const { children, textVisibleFrom, leftSection, ...rest } = props;
+		return (
+			<>
+				<Flex w={"100%"} visibleFrom={textVisibleFrom}>
+					<Action flex={1} {...rest} leftSection={leftSection}>
+						{children}
+					</Action>
+				</Flex>
+				<Flex w={"100%"} hiddenFrom={textVisibleFrom}>
+					<Action px={"xs"} {...rest}>
+						{leftSection}
+					</Action>
+				</Flex>
+			</>
+		);
+	}
+
+	const renderAction = () => {
+		if ("href" in props && props.href) {
+			return (
+				<ActionHref {...props} href={props.href}>
+					{props.children}
+				</ActionHref>
+			);
+		}
+
+		if ("onClick" in props && props.onClick) {
+			return (
+				<ActionClick {...props} onClick={props.onClick}>
+					{props.children}
+				</ActionClick>
+			);
+		}
+
+		if ("form" in props && props.form) {
+			return (
+				<ActionSubmit {...props} form={props.form}>
+					{props.children}
+				</ActionSubmit>
+			);
+		}
+
+		return <Button {...(props as any)}>{props.children}</Button>;
+	};
+
+	return renderAction();
+};
+
+export default Action;
+
+// ---------------------------------------------------------------------------------------------------------------------
+
+export interface ActionSubmitProps extends ButtonProps {
+	form: FormModel<any>;
+}
+
+/**
+ * Action button that submits a form with loading and disabled state handling.
+ */
+const ActionSubmit = (props: ActionSubmitProps) => {
+	const { form, ...buttonProps } = props;
+	const state = useFormState(form);
+	return (
+		<Button
+			{...buttonProps}
+			loading={state.loading}
+			disabled={state.loading || !state.dirty}
+			type={"submit"}
+		>
+			{props.children}
+		</Button>
+	);
+};
+
+// ---------------------------------------------------------------------------------------------------------------------
+
+export interface ActionClickProps extends ButtonProps {
+	onClick: (e: any) => any;
+}
+
+/**
+ * Basic action button that handles click events with loading and error handling.
+ */
+const ActionClick = (props: ActionClickProps) => {
+	const [pending, setPending] = useState(false);
+	const alepha = useAlepha();
+
+	const onClick = async (e: any) => {
+		setPending(true);
+		try {
+			await props.onClick(e);
+		} catch (e) {
+			console.error(e);
+			await alepha.events.emit("form:submit:error", {
+				id: "action",
+				error: e as Error,
+			});
+		} finally {
+			setPending(false);
+		}
+	};
+
+	return (
+		<Button
+			{...props}
+			disabled={pending || props.disabled}
+			loading={pending}
+			onClick={onClick}
+		>
+			{props.children}
+		</Button>
+	);
+};
+
+// ---------------------------------------------------------------------------------------------------------------------
+
+export interface ActiveHrefProps extends ButtonProps {
+	href: string;
+	active?: Partial<UseActiveOptions> | false;
+	routerGoOptions?: RouterGoOptions;
+}
+
+/**
+ * Action for navigation with active state support.
+ */
+const ActionHref = (props: ActiveHrefProps) => {
+	const { active: options, routerGoOptions, ...buttonProps } = props;
+	const router = useRouter();
+	const { isPending, isActive } = useActive(
+		options ? { href: props.href, ...options } : { href: props.href },
+	);
+	const anchorProps = router.anchor(props.href, routerGoOptions);
+
+	return (
+		<Button
+			component={"a"}
+			loading={isPending}
+			{...anchorProps}
+			{...buttonProps}
+			variant={isActive && options !== false ? "filled" : "subtle"}
+		>
+			{props.children}
+		</Button>
+	);
+};

package/src/components/AlephaMantineProvider.tsx

@@ -0,0 +1,49 @@
+import { NestedView, useRouterEvents } from "@alepha/react";
+import type {
+	ColorSchemeScriptProps,
+	MantineProviderProps,
+} from "@mantine/core";
+import { ColorSchemeScript, MantineProvider } from "@mantine/core";
+import { ModalsProvider, type ModalsProviderProps } from "@mantine/modals";
+import { Notifications, type NotificationsProps } from "@mantine/notifications";
+import type { NavigationProgressProps } from "@mantine/nprogress";
+import { NavigationProgress, nprogress } from "@mantine/nprogress";
+import type { ReactNode } from "react";
+
+export interface AlephaMantineProviderProps {
+	children?: ReactNode;
+	mantine?: MantineProviderProps;
+	colorSchemeScript?: ColorSchemeScriptProps;
+	navigationProgress?: NavigationProgressProps;
+	notifications?: NotificationsProps;
+	modals?: ModalsProviderProps;
+}
+
+const AlephaMantineProvider = (props: AlephaMantineProviderProps) => {
+	useRouterEvents({
+		onBegin: () => {
+			nprogress.start();
+		},
+		onEnd: () => {
+			nprogress.complete();
+		},
+	});
+
+	return (
+		<>
+			<ColorSchemeScript
+				defaultColorScheme={props.mantine?.defaultColorScheme}
+				{...props.colorSchemeScript}
+			/>
+			<MantineProvider {...props.mantine}>
+				<Notifications {...props.notifications} />
+				<NavigationProgress {...props.navigationProgress} />
+				<ModalsProvider {...props.modals}>
+					{props.children ?? <NestedView />}
+				</ModalsProvider>
+			</MantineProvider>
+		</>
+	);
+};
+
+export default AlephaMantineProvider;