@alepha/ui 0.17.1 → 0.18.0

package/dist/demo/DemoText-CzXuUn3g.js

@@ -0,0 +1,124 @@
+import { c as Text, p as Flex } from "./core-RCUw1Q-a.js";
+import { t as Showcase } from "./Showcase-Dq3MISpd.js";
+import { t } from "alepha";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region ../../src/demo/components/core/DemoText.tsx
+const showcaseSchema = t.object({
+	bold: t.boolean({
+		title: "bold",
+		default: false,
+		$control: { switch: true }
+	}),
+	italic: t.boolean({
+		title: "italic",
+		default: false,
+		$control: { switch: true }
+	}),
+	light: t.boolean({
+		title: "light",
+		default: false,
+		$control: { switch: true }
+	}),
+	muted: t.boolean({
+		title: "muted",
+		default: false,
+		$control: { switch: true }
+	}),
+	small: t.boolean({
+		title: "small",
+		default: false,
+		$control: { switch: true }
+	}),
+	monospace: t.boolean({
+		title: "monospace",
+		default: false,
+		$control: { switch: true }
+	}),
+	uppercase: t.boolean({
+		title: "uppercase",
+		default: false,
+		$control: { switch: true }
+	}),
+	capitalize: t.boolean({
+		title: "capitalize",
+		default: false,
+		$control: { switch: true }
+	}),
+	center: t.boolean({
+		title: "center",
+		default: false,
+		$control: { switch: true }
+	}),
+	intent: t.optional(t.enum([
+		"primary",
+		"info",
+		"success",
+		"warning",
+		"danger"
+	], { title: "intent" }))
+});
+const DemoText = () => {
+	return /* @__PURE__ */ jsx(Showcase, {
+		title: "Text",
+		schema: showcaseSchema,
+		initialValues: {
+			bold: false,
+			italic: false,
+			light: false,
+			muted: false,
+			small: false,
+			monospace: false,
+			uppercase: false,
+			capitalize: false,
+			center: false,
+			intent: void 0
+		},
+		columns: 2,
+		children: (props) => /* @__PURE__ */ jsxs(Flex, {
+			col: true,
+			gap: "lg",
+			p: "md",
+			style: { minWidth: 300 },
+			children: [
+				/* @__PURE__ */ jsx(Text, {
+					bold: props.bold,
+					italic: props.italic,
+					light: props.light,
+					muted: props.muted,
+					small: props.small,
+					monospace: props.monospace,
+					uppercase: props.uppercase,
+					capitalize: props.capitalize,
+					center: props.center,
+					intent: props.intent || void 0,
+					children: "The quick brown fox jumps over the lazy dog."
+				}),
+				/* @__PURE__ */ jsx(Text, {
+					muted: true,
+					small: true,
+					children: "Muted small text for secondary information."
+				}),
+				/* @__PURE__ */ jsx(Text, {
+					bold: true,
+					intent: "danger",
+					children: "Bold danger text for errors."
+				}),
+				/* @__PURE__ */ jsx(Text, {
+					monospace: true,
+					children: "console.log(\"monospace text\");"
+				}),
+				/* @__PURE__ */ jsx(Text, {
+					bold: true,
+					uppercase: true,
+					muted: true,
+					children: "Section header style"
+				})
+			]
+		})
+	});
+};
+
+//#endregion
+export { DemoText as default };
+//# sourceMappingURL=DemoText-CzXuUn3g.js.map

package/dist/demo/DemoText-CzXuUn3g.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DemoText-CzXuUn3g.js","names":[],"sources":["../../src/demo/components/core/DemoText.tsx"],"sourcesContent":["import type { AlephaIntent } from \"@alepha/ui\";\nimport { Flex, Text } from \"@alepha/ui\";\nimport { t } from \"alepha\";\nimport Showcase from \"../shared/Showcase.tsx\";\n\nconst showcaseSchema = t.object({\n  bold: t.boolean({\n    title: \"bold\",\n    default: false,\n    $control: { switch: true },\n  }),\n  italic: t.boolean({\n    title: \"italic\",\n    default: false,\n    $control: { switch: true },\n  }),\n  light: t.boolean({\n    title: \"light\",\n    default: false,\n    $control: { switch: true },\n  }),\n  muted: t.boolean({\n    title: \"muted\",\n    default: false,\n    $control: { switch: true },\n  }),\n  small: t.boolean({\n    title: \"small\",\n    default: false,\n    $control: { switch: true },\n  }),\n  monospace: t.boolean({\n    title: \"monospace\",\n    default: false,\n    $control: { switch: true },\n  }),\n  uppercase: t.boolean({\n    title: \"uppercase\",\n    default: false,\n    $control: { switch: true },\n  }),\n  capitalize: t.boolean({\n    title: \"capitalize\",\n    default: false,\n    $control: { switch: true },\n  }),\n  center: t.boolean({\n    title: \"center\",\n    default: false,\n    $control: { switch: true },\n  }),\n  intent: t.optional(\n    t.enum([\"primary\", \"info\", \"success\", \"warning\", \"danger\"], {\n      title: \"intent\",\n    }),\n  ),\n});\n\nconst DemoText = () => {\n  return (\n    <Showcase\n      title=\"Text\"\n      schema={showcaseSchema}\n      initialValues={{\n        bold: false,\n        italic: false,\n        light: false,\n        muted: false,\n        small: false,\n        monospace: false,\n        uppercase: false,\n        capitalize: false,\n        center: false,\n        intent: undefined,\n      }}\n      columns={2}\n    >\n      {(props) => (\n        <Flex col gap=\"lg\" p=\"md\" style={{ minWidth: 300 }}>\n          <Text\n            bold={props.bold}\n            italic={props.italic}\n            light={props.light}\n            muted={props.muted}\n            small={props.small}\n            monospace={props.monospace}\n            uppercase={props.uppercase}\n            capitalize={props.capitalize}\n            center={props.center}\n            intent={(props.intent || undefined) as AlephaIntent | undefined}\n          >\n            The quick brown fox jumps over the lazy dog.\n          </Text>\n          <Text muted small>\n            Muted small text for secondary information.\n          </Text>\n          <Text bold intent=\"danger\">\n            Bold danger text for errors.\n          </Text>\n          <Text monospace>console.log(\"monospace text\");</Text>\n          <Text bold uppercase muted>\n            Section header style\n          </Text>\n        </Flex>\n      )}\n    </Showcase>\n  );\n};\n\nexport default DemoText;\n"],"mappings":";;;;;;AAKA,MAAM,iBAAiB,EAAE,OAAO;CAC9B,MAAM,EAAE,QAAQ;EACd,OAAO;EACP,SAAS;EACT,UAAU,EAAE,QAAQ,MAAM;EAC3B,CAAC;CACF,QAAQ,EAAE,QAAQ;EAChB,OAAO;EACP,SAAS;EACT,UAAU,EAAE,QAAQ,MAAM;EAC3B,CAAC;CACF,OAAO,EAAE,QAAQ;EACf,OAAO;EACP,SAAS;EACT,UAAU,EAAE,QAAQ,MAAM;EAC3B,CAAC;CACF,OAAO,EAAE,QAAQ;EACf,OAAO;EACP,SAAS;EACT,UAAU,EAAE,QAAQ,MAAM;EAC3B,CAAC;CACF,OAAO,EAAE,QAAQ;EACf,OAAO;EACP,SAAS;EACT,UAAU,EAAE,QAAQ,MAAM;EAC3B,CAAC;CACF,WAAW,EAAE,QAAQ;EACnB,OAAO;EACP,SAAS;EACT,UAAU,EAAE,QAAQ,MAAM;EAC3B,CAAC;CACF,WAAW,EAAE,QAAQ;EACnB,OAAO;EACP,SAAS;EACT,UAAU,EAAE,QAAQ,MAAM;EAC3B,CAAC;CACF,YAAY,EAAE,QAAQ;EACpB,OAAO;EACP,SAAS;EACT,UAAU,EAAE,QAAQ,MAAM;EAC3B,CAAC;CACF,QAAQ,EAAE,QAAQ;EAChB,OAAO;EACP,SAAS;EACT,UAAU,EAAE,QAAQ,MAAM;EAC3B,CAAC;CACF,QAAQ,EAAE,SACR,EAAE,KAAK;EAAC;EAAW;EAAQ;EAAW;EAAW;EAAS,EAAE,EAC1D,OAAO,UACR,CAAC,CACH;CACF,CAAC;AAEF,MAAM,iBAAiB;AACrB,QACE,oBAAC;EACC,OAAM;EACN,QAAQ;EACR,eAAe;GACb,MAAM;GACN,QAAQ;GACR,OAAO;GACP,OAAO;GACP,OAAO;GACP,WAAW;GACX,WAAW;GACX,YAAY;GACZ,QAAQ;GACR,QAAQ;GACT;EACD,SAAS;aAEP,UACA,qBAAC;GAAK;GAAI,KAAI;GAAK,GAAE;GAAK,OAAO,EAAE,UAAU,KAAK;;IAChD,oBAAC;KACC,MAAM,MAAM;KACZ,QAAQ,MAAM;KACd,OAAO,MAAM;KACb,OAAO,MAAM;KACb,OAAO,MAAM;KACb,WAAW,MAAM;KACjB,WAAW,MAAM;KACjB,YAAY,MAAM;KAClB,QAAQ,MAAM;KACd,QAAS,MAAM,UAAU;eAC1B;MAEM;IACP,oBAAC;KAAK;KAAM;eAAM;MAEX;IACP,oBAAC;KAAK;KAAK,QAAO;eAAS;MAEpB;IACP,oBAAC;KAAK;eAAU;MAAqC;IACrD,oBAAC;KAAK;KAAK;KAAU;eAAM;MAEpB;;IACF;GAEA"}

package/dist/demo/DemoToast-BgHDhWrX.js

@@ -0,0 +1,95 @@
+import { c as Text, h as ActionButton, p as Flex, v as useToast } from "./core-RCUw1Q-a.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { IconCheck, IconExclamationMark, IconInfoCircle, IconX } from "@tabler/icons-react";
+
+//#region ../../src/demo/components/layout/DemoToast.tsx
+const DemoToast = () => {
+	const toast = useToast();
+	return /* @__PURE__ */ jsxs(Flex, {
+		col: true,
+		gap: "xl",
+		p: "xl",
+		children: [
+			/* @__PURE__ */ jsx(Text, {
+				bold: true,
+				size: "lg",
+				children: "Toast Service"
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				muted: true,
+				small: true,
+				children: "Notification toasts via the ToastService. Fire-and-forget notifications for user feedback."
+			}),
+			/* @__PURE__ */ jsxs(Flex, {
+				gap: "md",
+				wrap: "wrap",
+				children: [
+					/* @__PURE__ */ jsx(ActionButton, {
+						icon: IconCheck,
+						variant: "light",
+						intent: "success",
+						onClick: () => toast.success("Operation completed successfully."),
+						children: "Success"
+					}),
+					/* @__PURE__ */ jsx(ActionButton, {
+						icon: IconX,
+						variant: "light",
+						intent: "danger",
+						onClick: () => toast.danger("Something went wrong."),
+						children: "Error"
+					}),
+					/* @__PURE__ */ jsx(ActionButton, {
+						icon: IconExclamationMark,
+						variant: "light",
+						intent: "warning",
+						onClick: () => toast.warning("Please check your input."),
+						children: "Warning"
+					}),
+					/* @__PURE__ */ jsx(ActionButton, {
+						icon: IconInfoCircle,
+						variant: "light",
+						intent: "info",
+						onClick: () => toast.info("Here is some useful information."),
+						children: "Info"
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs(Flex, {
+				col: true,
+				gap: "md",
+				children: [/* @__PURE__ */ jsx(Text, {
+					bold: true,
+					small: true,
+					uppercase: true,
+					muted: true,
+					children: "With Title"
+				}), /* @__PURE__ */ jsxs(Flex, {
+					gap: "md",
+					wrap: "wrap",
+					children: [/* @__PURE__ */ jsx(ActionButton, {
+						variant: "light",
+						intent: "success",
+						onClick: () => toast.success({
+							message: "Your changes have been saved.",
+							title: "Saved"
+						}),
+						children: "With Title"
+					}), /* @__PURE__ */ jsx(ActionButton, {
+						variant: "light",
+						intent: "danger",
+						onClick: () => toast.danger({
+							message: "Failed to connect to the server.",
+							title: "Connection Error",
+							autoClose: false
+						}),
+						children: "Persistent"
+					})]
+				})]
+			})
+		]
+	});
+};
+
+//#endregion
+export { DemoToast as default };
+//# sourceMappingURL=DemoToast-BgHDhWrX.js.map

package/dist/demo/DemoToast-BgHDhWrX.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DemoToast-BgHDhWrX.js","names":[],"sources":["../../src/demo/components/layout/DemoToast.tsx"],"sourcesContent":["import { ActionButton, Flex, Text, useToast } from \"@alepha/ui\";\nimport {\n  IconCheck,\n  IconExclamationMark,\n  IconInfoCircle,\n  IconX,\n} from \"@tabler/icons-react\";\n\nconst DemoToast = () => {\n  const toast = useToast();\n\n  return (\n    <Flex col gap=\"xl\" p=\"xl\">\n      <Text bold size=\"lg\">\n        Toast Service\n      </Text>\n      <Text muted small>\n        Notification toasts via the ToastService. Fire-and-forget notifications\n        for user feedback.\n      </Text>\n\n      <Flex gap=\"md\" wrap=\"wrap\">\n        <ActionButton\n          icon={IconCheck}\n          variant=\"light\"\n          intent=\"success\"\n          onClick={() => toast.success(\"Operation completed successfully.\")}\n        >\n          Success\n        </ActionButton>\n\n        <ActionButton\n          icon={IconX}\n          variant=\"light\"\n          intent=\"danger\"\n          onClick={() => toast.danger(\"Something went wrong.\")}\n        >\n          Error\n        </ActionButton>\n\n        <ActionButton\n          icon={IconExclamationMark}\n          variant=\"light\"\n          intent=\"warning\"\n          onClick={() => toast.warning(\"Please check your input.\")}\n        >\n          Warning\n        </ActionButton>\n\n        <ActionButton\n          icon={IconInfoCircle}\n          variant=\"light\"\n          intent=\"info\"\n          onClick={() => toast.info(\"Here is some useful information.\")}\n        >\n          Info\n        </ActionButton>\n      </Flex>\n\n      <Flex col gap=\"md\">\n        <Text bold small uppercase muted>\n          With Title\n        </Text>\n        <Flex gap=\"md\" wrap=\"wrap\">\n          <ActionButton\n            variant=\"light\"\n            intent=\"success\"\n            onClick={() =>\n              toast.success({\n                message: \"Your changes have been saved.\",\n                title: \"Saved\",\n              })\n            }\n          >\n            With Title\n          </ActionButton>\n          <ActionButton\n            variant=\"light\"\n            intent=\"danger\"\n            onClick={() =>\n              toast.danger({\n                message: \"Failed to connect to the server.\",\n                title: \"Connection Error\",\n                autoClose: false,\n              })\n            }\n          >\n            Persistent\n          </ActionButton>\n        </Flex>\n      </Flex>\n    </Flex>\n  );\n};\n\nexport default DemoToast;\n"],"mappings":";;;;;AAQA,MAAM,kBAAkB;CACtB,MAAM,QAAQ,UAAU;AAExB,QACE,qBAAC;EAAK;EAAI,KAAI;EAAK,GAAE;;GACnB,oBAAC;IAAK;IAAK,MAAK;cAAK;KAEd;GACP,oBAAC;IAAK;IAAM;cAAM;KAGX;GAEP,qBAAC;IAAK,KAAI;IAAK,MAAK;;KAClB,oBAAC;MACC,MAAM;MACN,SAAQ;MACR,QAAO;MACP,eAAe,MAAM,QAAQ,oCAAoC;gBAClE;OAEc;KAEf,oBAAC;MACC,MAAM;MACN,SAAQ;MACR,QAAO;MACP,eAAe,MAAM,OAAO,wBAAwB;gBACrD;OAEc;KAEf,oBAAC;MACC,MAAM;MACN,SAAQ;MACR,QAAO;MACP,eAAe,MAAM,QAAQ,2BAA2B;gBACzD;OAEc;KAEf,oBAAC;MACC,MAAM;MACN,SAAQ;MACR,QAAO;MACP,eAAe,MAAM,KAAK,mCAAmC;gBAC9D;OAEc;;KACV;GAEP,qBAAC;IAAK;IAAI,KAAI;eACZ,oBAAC;KAAK;KAAK;KAAM;KAAU;eAAM;MAE1B,EACP,qBAAC;KAAK,KAAI;KAAK,MAAK;gBAClB,oBAAC;MACC,SAAQ;MACR,QAAO;MACP,eACE,MAAM,QAAQ;OACZ,SAAS;OACT,OAAO;OACR,CAAC;gBAEL;OAEc,EACf,oBAAC;MACC,SAAQ;MACR,QAAO;MACP,eACE,MAAM,OAAO;OACX,SAAS;OACT,OAAO;OACP,WAAW;OACZ,CAAC;gBAEL;OAEc;MACV;KACF;;GACF"}

package/dist/demo/{DemoTypeForm-CWz6fJrJ.js → DemoTypeForm-DDzWoMSV.js}

@@ -1,8 +1,8 @@
-import { t as Showcase } from "./Showcase-BzoXNlCn.js";
-import { TypeForm } from "@alepha/ui";
+import { o as TypeForm } from "./core-RCUw1Q-a.js";
+import { t as Showcase } from "./Showcase-Dq3MISpd.js";
 import { t } from "alepha";
-import { jsx } from "react/jsx-runtime";
 import { useForm } from "alepha/react/form";
+import { jsx } from "react/jsx-runtime";
 
 //#region ../../src/demo/components/core/DemoTypeForm.tsx
 const formSchema = t.object({
@@ -79,4 +79,4 @@ const DemoTypeForm = () => {
 
 //#endregion
 export { DemoTypeForm as default };
-//# sourceMappingURL=DemoTypeForm-CWz6fJrJ.js.map
+//# sourceMappingURL=DemoTypeForm-DDzWoMSV.js.map

package/dist/demo/{DemoTypeForm-CWz6fJrJ.js.map → DemoTypeForm-DDzWoMSV.js.map}

@@ -1 +1 @@
-{"version":3,"file":"DemoTypeForm-CWz6fJrJ.js","names":[],"sources":["../../src/demo/components/core/DemoTypeForm.tsx"],"sourcesContent":["import { TypeForm } from \"@alepha/ui\";\nimport { t } from \"alepha\";\nimport { useForm } from \"alepha/react/form\";\nimport Showcase from \"../shared/Showcase.tsx\";\n\nconst formSchema = t.object({\n  username: t.text({ title: \"Username\", default: \"\" }),\n  email: t.email({ title: \"Email\", default: \"\" }),\n  age: t.integer({ title: \"Age\", minimum: 0, maximum: 120 }),\n  role: t.enum([\"admin\", \"user\", \"guest\"], { title: \"Role\", default: \"user\" }),\n  subscribe: t.boolean({ title: \"Subscribe\", default: false }),\n});\n\nconst showcaseSchema = t.object({\n  columns: t.integer({\n    title: \"Columns\",\n    default: 1,\n    minimum: 1,\n    maximum: 4,\n    $control: { slider: true },\n  }),\n  fill: t.boolean({\n    title: \"Fill Width\",\n    default: false,\n    $control: { switch: true },\n  }),\n  skipSubmitButton: t.boolean({\n    title: \"Hide Submit\",\n    default: false,\n    $control: { switch: true },\n  }),\n});\n\nconst DemoTypeForm = () => {\n  const form = useForm(\n    {\n      schema: formSchema,\n      handler: (values) => {\n        alert(JSON.stringify(values, null, 2));\n      },\n    },\n    [],\n  );\n\n  return (\n    <Showcase\n      title=\"TypeForm\"\n      schema={showcaseSchema}\n      initialValues={{\n        columns: 1,\n        fill: false,\n        skipSubmitButton: false,\n      }}\n      columns={1}\n    >\n      {(props) => (\n        <TypeForm\n          form={form}\n          columns={props.columns}\n          fill={props.fill}\n          skipSubmitButton={props.skipSubmitButton}\n          submitButtonProps={{ children: \"Submit\" }}\n        />\n      )}\n    </Showcase>\n  );\n};\n\nexport default DemoTypeForm;\n"],"mappings":";;;;;;;AAKA,MAAM,aAAa,EAAE,OAAO;CAC1B,UAAU,EAAE,KAAK;EAAE,OAAO;EAAY,SAAS;EAAI,CAAC;CACpD,OAAO,EAAE,MAAM;EAAE,OAAO;EAAS,SAAS;EAAI,CAAC;CAC/C,KAAK,EAAE,QAAQ;EAAE,OAAO;EAAO,SAAS;EAAG,SAAS;EAAK,CAAC;CAC1D,MAAM,EAAE,KAAK;EAAC;EAAS;EAAQ;EAAQ,EAAE;EAAE,OAAO;EAAQ,SAAS;EAAQ,CAAC;CAC5E,WAAW,EAAE,QAAQ;EAAE,OAAO;EAAa,SAAS;EAAO,CAAC;CAC7D,CAAC;AAEF,MAAM,iBAAiB,EAAE,OAAO;CAC9B,SAAS,EAAE,QAAQ;EACjB,OAAO;EACP,SAAS;EACT,SAAS;EACT,SAAS;EACT,UAAU,EAAE,QAAQ,MAAM;EAC3B,CAAC;CACF,MAAM,EAAE,QAAQ;EACd,OAAO;EACP,SAAS;EACT,UAAU,EAAE,QAAQ,MAAM;EAC3B,CAAC;CACF,kBAAkB,EAAE,QAAQ;EAC1B,OAAO;EACP,SAAS;EACT,UAAU,EAAE,QAAQ,MAAM;EAC3B,CAAC;CACH,CAAC;AAEF,MAAM,qBAAqB;CACzB,MAAM,OAAO,QACX;EACE,QAAQ;EACR,UAAU,WAAW;AACnB,SAAM,KAAK,UAAU,QAAQ,MAAM,EAAE,CAAC;;EAEzC,EACD,EAAE,CACH;AAED,QACE,oBAAC;EACC,OAAM;EACN,QAAQ;EACR,eAAe;GACb,SAAS;GACT,MAAM;GACN,kBAAkB;GACnB;EACD,SAAS;aAEP,UACA,oBAAC;GACO;GACN,SAAS,MAAM;GACf,MAAM,MAAM;GACZ,kBAAkB,MAAM;GACxB,mBAAmB,EAAE,UAAU,UAAU;IACzC;GAEK"}
+{"version":3,"file":"DemoTypeForm-DDzWoMSV.js","names":[],"sources":["../../src/demo/components/core/DemoTypeForm.tsx"],"sourcesContent":["import { TypeForm } from \"@alepha/ui\";\nimport { t } from \"alepha\";\nimport { useForm } from \"alepha/react/form\";\nimport Showcase from \"../shared/Showcase.tsx\";\n\nconst formSchema = t.object({\n  username: t.text({ title: \"Username\", default: \"\" }),\n  email: t.email({ title: \"Email\", default: \"\" }),\n  age: t.integer({ title: \"Age\", minimum: 0, maximum: 120 }),\n  role: t.enum([\"admin\", \"user\", \"guest\"], { title: \"Role\", default: \"user\" }),\n  subscribe: t.boolean({ title: \"Subscribe\", default: false }),\n});\n\nconst showcaseSchema = t.object({\n  columns: t.integer({\n    title: \"Columns\",\n    default: 1,\n    minimum: 1,\n    maximum: 4,\n    $control: { slider: true },\n  }),\n  fill: t.boolean({\n    title: \"Fill Width\",\n    default: false,\n    $control: { switch: true },\n  }),\n  skipSubmitButton: t.boolean({\n    title: \"Hide Submit\",\n    default: false,\n    $control: { switch: true },\n  }),\n});\n\nconst DemoTypeForm = () => {\n  const form = useForm(\n    {\n      schema: formSchema,\n      handler: (values) => {\n        alert(JSON.stringify(values, null, 2));\n      },\n    },\n    [],\n  );\n\n  return (\n    <Showcase\n      title=\"TypeForm\"\n      schema={showcaseSchema}\n      initialValues={{\n        columns: 1,\n        fill: false,\n        skipSubmitButton: false,\n      }}\n      columns={1}\n    >\n      {(props) => (\n        <TypeForm\n          form={form}\n          columns={props.columns}\n          fill={props.fill}\n          skipSubmitButton={props.skipSubmitButton}\n          submitButtonProps={{ children: \"Submit\" }}\n        />\n      )}\n    </Showcase>\n  );\n};\n\nexport default DemoTypeForm;\n"],"mappings":";;;;;;;AAKA,MAAM,aAAa,EAAE,OAAO;CAC1B,UAAU,EAAE,KAAK;EAAE,OAAO;EAAY,SAAS;EAAI,CAAC;CACpD,OAAO,EAAE,MAAM;EAAE,OAAO;EAAS,SAAS;EAAI,CAAC;CAC/C,KAAK,EAAE,QAAQ;EAAE,OAAO;EAAO,SAAS;EAAG,SAAS;EAAK,CAAC;CAC1D,MAAM,EAAE,KAAK;EAAC;EAAS;EAAQ;EAAQ,EAAE;EAAE,OAAO;EAAQ,SAAS;EAAQ,CAAC;CAC5E,WAAW,EAAE,QAAQ;EAAE,OAAO;EAAa,SAAS;EAAO,CAAC;CAC7D,CAAC;AAEF,MAAM,iBAAiB,EAAE,OAAO;CAC9B,SAAS,EAAE,QAAQ;EACjB,OAAO;EACP,SAAS;EACT,SAAS;EACT,SAAS;EACT,UAAU,EAAE,QAAQ,MAAM;EAC3B,CAAC;CACF,MAAM,EAAE,QAAQ;EACd,OAAO;EACP,SAAS;EACT,UAAU,EAAE,QAAQ,MAAM;EAC3B,CAAC;CACF,kBAAkB,EAAE,QAAQ;EAC1B,OAAO;EACP,SAAS;EACT,UAAU,EAAE,QAAQ,MAAM;EAC3B,CAAC;CACH,CAAC;AAEF,MAAM,qBAAqB;CACzB,MAAM,OAAO,QACX;EACE,QAAQ;EACR,UAAU,WAAW;AACnB,SAAM,KAAK,UAAU,QAAQ,MAAM,EAAE,CAAC;;EAEzC,EACD,EAAE,CACH;AAED,QACE,oBAAC;EACC,OAAM;EACN,QAAQ;EACR,eAAe;GACb,SAAS;GACT,MAAM;GACN,kBAAkB;GACnB;EACD,SAAS;aAEP,UACA,oBAAC;GACO;GACN,SAAS,MAAM;GACf,MAAM,MAAM;GACZ,kBAAkB,MAAM;GACxB,mBAAmB,EAAE,UAAU,UAAU;IACzC;GAEK"}

package/dist/demo/DemoVerifyEmail-C_Irdnov.js

@@ -0,0 +1,30 @@
+import "./core-RCUw1Q-a.js";
+import "./IconGoogle-CSQLPYwX.js";
+import "./Login-hSOU3jZc.js";
+import "./Register-a70LPgs2.js";
+import "./ResetPassword-DWN0lzr5.js";
+import { t as VerifyEmail } from "./VerifyEmail-DZWL72K4.js";
+import "./auth-d6n3xbug.js";
+import { t as Showcase } from "./Showcase-Dq3MISpd.js";
+import { t } from "alepha";
+import { jsx } from "react/jsx-runtime";
+
+//#region ../../src/demo/components/auth/DemoVerifyEmail.tsx
+const showcaseSchema = t.object({ placeholder: t.boolean({
+	title: "Demo Mode",
+	default: true,
+	$control: { switch: true }
+}) });
+const DemoVerifyEmail = () => {
+	return /* @__PURE__ */ jsx(Showcase, {
+		title: "VerifyEmail",
+		schema: showcaseSchema,
+		initialValues: { placeholder: true },
+		columns: 1,
+		children: () => /* @__PURE__ */ jsx(VerifyEmail, {})
+	});
+};
+
+//#endregion
+export { DemoVerifyEmail as default };
+//# sourceMappingURL=DemoVerifyEmail-C_Irdnov.js.map

package/dist/demo/DemoVerifyEmail-C_Irdnov.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DemoVerifyEmail-C_Irdnov.js","names":[],"sources":["../../src/demo/components/auth/DemoVerifyEmail.tsx"],"sourcesContent":["import { VerifyEmail } from \"@alepha/ui/auth\";\nimport { t } from \"alepha\";\nimport Showcase from \"../shared/Showcase.tsx\";\n\nconst showcaseSchema = t.object({\n  placeholder: t.boolean({\n    title: \"Demo Mode\",\n    default: true,\n    $control: { switch: true },\n  }),\n});\n\nconst DemoVerifyEmail = () => {\n  return (\n    <Showcase\n      title=\"VerifyEmail\"\n      schema={showcaseSchema}\n      initialValues={{\n        placeholder: true,\n      }}\n      columns={1}\n    >\n      {() => <VerifyEmail />}\n    </Showcase>\n  );\n};\n\nexport default DemoVerifyEmail;\n"],"mappings":";;;;;;;;;;;;AAIA,MAAM,iBAAiB,EAAE,OAAO,EAC9B,aAAa,EAAE,QAAQ;CACrB,OAAO;CACP,SAAS;CACT,UAAU,EAAE,QAAQ,MAAM;CAC3B,CAAC,EACH,CAAC;AAEF,MAAM,wBAAwB;AAC5B,QACE,oBAAC;EACC,OAAM;EACN,QAAQ;EACR,eAAe,EACb,aAAa,MACd;EACD,SAAS;kBAEF,oBAAC,gBAAc;GACb"}

package/dist/demo/IconGoogle-CSQLPYwX.js

@@ -0,0 +1,56 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region ../../src/auth/components/icons/IconGithub.tsx
+const IconGithub = () => {
+	return /* @__PURE__ */ jsx("svg", {
+		width: "24",
+		height: "24",
+		viewBox: "0 0 1024 1024",
+		fill: "none",
+		xmlns: "http://www.w3.org/2000/svg",
+		children: /* @__PURE__ */ jsx("path", {
+			fillRule: "evenodd",
+			clipRule: "evenodd",
+			d: "M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z",
+			transform: "scale(64)",
+			fill: "var(--alepha-text)"
+		})
+	});
+};
+
+//#endregion
+//#region ../../src/auth/components/icons/IconGoogle.tsx
+const IconGoogle = () => {
+	return /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		height: "24",
+		viewBox: "0 0 24 24",
+		width: "24",
+		children: [
+			/* @__PURE__ */ jsx("path", {
+				d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z",
+				fill: "#4285F4"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z",
+				fill: "#34A853"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z",
+				fill: "#FBBC05"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z",
+				fill: "#EA4335"
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M1 1h22v22H1z",
+				fill: "none"
+			})
+		]
+	});
+};
+
+//#endregion
+export { IconGithub as n, IconGoogle as t };
+//# sourceMappingURL=IconGoogle-CSQLPYwX.js.map

package/dist/demo/IconGoogle-CSQLPYwX.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconGoogle-CSQLPYwX.js","names":[],"sources":["../../src/auth/components/icons/IconGithub.tsx","../../src/auth/components/icons/IconGoogle.tsx"],"sourcesContent":["const IconGithub = () => {\n  return (\n    <svg\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 1024 1024\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z\"\n        transform=\"scale(64)\"\n        fill={\"var(--alepha-text)\"}\n      />\n    </svg>\n  );\n};\n\nexport default IconGithub;\n","const IconGoogle = () => {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      width=\"24\"\n    >\n      <path\n        d=\"M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z\"\n        fill=\"#4285F4\"\n      />\n      <path\n        d=\"M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z\"\n        fill=\"#34A853\"\n      />\n      <path\n        d=\"M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z\"\n        fill=\"#FBBC05\"\n      />\n      <path\n        d=\"M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z\"\n        fill=\"#EA4335\"\n      />\n      <path d=\"M1 1h22v22H1z\" fill=\"none\" />\n    </svg>\n  );\n};\n\nexport default IconGoogle;\n"],"mappings":";;;AAAA,MAAM,mBAAmB;AACvB,QACE,oBAAC;EACC,OAAM;EACN,QAAO;EACP,SAAQ;EACR,MAAK;EACL,OAAM;YAEN,oBAAC;GACC,UAAS;GACT,UAAS;GACT,GAAE;GACF,WAAU;GACV,MAAM;IACN;GACE;;;;;AChBV,MAAM,mBAAmB;AACvB,QACE,qBAAC;EACC,OAAM;EACN,QAAO;EACP,SAAQ;EACR,OAAM;;GAEN,oBAAC;IACC,GAAE;IACF,MAAK;KACL;GACF,oBAAC;IACC,GAAE;IACF,MAAK;KACL;GACF,oBAAC;IACC,GAAE;IACF,MAAK;KACL;GACF,oBAAC;IACC,GAAE;IACF,MAAK;KACL;GACF,oBAAC;IAAK,GAAE;IAAgB,MAAK;KAAS;;GAClC"}

package/dist/demo/Login-hSOU3jZc.js

@@ -0,0 +1,219 @@
+import { t as __exportAll } from "./rolldown-runtime-CjeV3_4I.js";
+import { h as ActionButton, n as capitalize, s as Control } from "./core-RCUw1Q-a.js";
+import { n as IconGithub, t as IconGoogle } from "./IconGoogle-CSQLPYwX.js";
+import { AlephaError, t } from "alepha";
+import { FormValidationError, useForm } from "alepha/react/form";
+import { useI18n } from "alepha/react/i18n";
+import { Card, Flex, Image, Text, Title } from "@mantine/core";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { IconLock, IconUser } from "@tabler/icons-react";
+import { useRouter } from "alepha/react/router";
+import { useAuth } from "alepha/react/auth";
+import { HttpError } from "alepha/server";
+
+//#region ../../src/auth/components/Login.tsx
+var Login_exports = /* @__PURE__ */ __exportAll({ default: () => Login });
+const Login = (props) => {
+	const auth = useAuth();
+	const router = useRouter();
+	const { tr } = useI18n();
+	const redirect = router.query.r || "/";
+	const credentialsProvider = props.realmConfig.authenticationMethods.find((it) => it.type === "CREDENTIALS");
+	const settings = props.realmConfig.settings;
+	const loginMethods = useMemo(() => {
+		const methods = [];
+		if (settings.usernameEnabled !== false) methods.push("username");
+		if (settings.emailEnabled !== false) methods.push("email");
+		if (settings.phoneEnabled === true) methods.push("phone");
+		return methods;
+	}, [settings]);
+	const identifierTitle = useMemo(() => {
+		if (loginMethods.length === 0) return tr("loginUsername");
+		if (loginMethods.length === 1) {
+			if (loginMethods[0] === "username") return tr("loginUsername");
+			if (loginMethods[0] === "email") return tr("loginEmail");
+			if (loginMethods[0] === "phone") return tr("loginPhone");
+		}
+		const labels = loginMethods.map((m) => {
+			if (m === "username") return tr("loginUsername").toLowerCase();
+			if (m === "email") return tr("loginEmail").toLowerCase();
+			if (m === "phone") return tr("loginPhone").toLowerCase();
+			return m;
+		});
+		return capitalize(`${labels.slice(0, -1).join(", ")} or ${labels[labels.length - 1]}`);
+	}, [loginMethods, tr]);
+	const form = useForm({
+		schema: t.object({
+			identifier: t.string({ minLength: 1 }),
+			password: t.string({ minLength: settings.passwordPolicy?.minLength || 6 })
+		}),
+		handler: async (data) => {
+			if (!credentialsProvider) throw new AlephaError("Credentials provider not configured");
+			try {
+				await auth.login(credentialsProvider.name, {
+					username: data.identifier,
+					password: data.password,
+					realm: props.realmConfig.realmName
+				});
+				await router.push(router.query.r || "/");
+			} catch (error) {
+				if (error instanceof HttpError && error.error === "InvalidCredentialsError") throw new FormValidationError({
+					message: "Invalid identifier or password",
+					path: "/password"
+				});
+				throw error;
+			}
+		}
+	});
+	const getAutoCompleteType = () => {
+		if (loginMethods.includes("email")) return "email";
+		if (loginMethods.includes("username")) return "username";
+		if (loginMethods.includes("phone")) return "tel";
+		return "username";
+	};
+	const externalLoginMethods = props.realmConfig.authenticationMethods.filter((method) => method.type !== "CREDENTIALS");
+	const showOrDivider = credentialsProvider && externalLoginMethods.length > 0;
+	return /* @__PURE__ */ jsx(Flex, {
+		flex: 1,
+		justify: "center",
+		align: "center",
+		children: /* @__PURE__ */ jsxs(Flex, {
+			direction: "column",
+			gap: "sm",
+			w: 360,
+			children: [/* @__PURE__ */ jsx(Card, {
+				withBorder: true,
+				p: "lg",
+				bg: "var(--alepha-elevated)",
+				children: /* @__PURE__ */ jsxs(Flex, {
+					direction: "column",
+					gap: "md",
+					children: [
+						(settings.logoUrl || settings.displayName || settings.description) && /* @__PURE__ */ jsxs(Flex, {
+							direction: "column",
+							gap: "xs",
+							align: "center",
+							mb: "xs",
+							children: [
+								settings.logoUrl && /* @__PURE__ */ jsx(Image, {
+									src: settings.logoUrl,
+									alt: settings.displayName || props.realmConfig.realmName,
+									h: 48,
+									w: "auto",
+									fit: "contain"
+								}),
+								settings.displayName && /* @__PURE__ */ jsx(Title, {
+									order: 4,
+									ta: "center",
+									children: settings.displayName
+								}),
+								settings.description && /* @__PURE__ */ jsx(Text, {
+									size: "sm",
+									c: "dimmed",
+									ta: "center",
+									children: settings.description
+								})
+							]
+						}),
+						credentialsProvider && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("form", {
+							...form.props,
+							children: /* @__PURE__ */ jsxs(Flex, {
+								direction: "column",
+								flex: 1,
+								gap: "md",
+								children: [
+									/* @__PURE__ */ jsx(Control, {
+										title: identifierTitle,
+										input: form.input.identifier,
+										icon: IconUser,
+										text: { autoComplete: getAutoCompleteType() }
+									}),
+									/* @__PURE__ */ jsx(Control, {
+										title: tr("loginPassword"),
+										input: form.input.password,
+										icon: IconLock,
+										password: { autoComplete: "current-password" }
+									}),
+									/* @__PURE__ */ jsx(ActionButton, {
+										variant: "filled",
+										form,
+										children: tr("loginSignIn")
+									})
+								]
+							})
+						}), settings.resetPasswordAllowed && /* @__PURE__ */ jsx(Text, {
+							size: "sm",
+							ta: "center",
+							children: /* @__PURE__ */ jsx(ActionButton, {
+								href: router.path("resetPassword", { query: { realm: props.realmConfig.realmName } }),
+								anchorProps: { inherit: true },
+								children: tr("loginForgotPassword")
+							})
+						})] }),
+						showOrDivider && /* @__PURE__ */ jsxs(Flex, {
+							align: "center",
+							justify: "center",
+							gap: "md",
+							children: [
+								/* @__PURE__ */ jsx(Flex, {
+									flex: 1,
+									h: "1px",
+									bg: "var(--alepha-border)"
+								}),
+								/* @__PURE__ */ jsx(Text, {
+									size: "xs",
+									c: "dimmed",
+									children: tr("loginOr")
+								}),
+								/* @__PURE__ */ jsx(Flex, {
+									flex: 1,
+									h: "1px",
+									bg: "var(--alepha-border)"
+								})
+							]
+						}),
+						externalLoginMethods.length > 0 && /* @__PURE__ */ jsx(Flex, {
+							direction: "column",
+							gap: "sm",
+							children: externalLoginMethods.map((method) => /* @__PURE__ */ jsx(ActionButton, {
+								variant: "default",
+								leftSection: leftSection(method.name.toLowerCase()),
+								onClick: () => auth.login(method.name, {
+									redirect,
+									realm: props.realmConfig.realmName
+								}),
+								children: tr("loginContinueWith", { args: [capitalize(method.name)] })
+							}, method.type))
+						}),
+						settings.registrationAllowed && /* @__PURE__ */ jsxs(Text, {
+							size: "sm",
+							ta: "center",
+							children: [
+								tr("loginNoAccount"),
+								" ",
+								/* @__PURE__ */ jsx(ActionButton, {
+									href: router.path("register", { query: { realm: props.realmConfig.realmName } }),
+									anchorProps: { inherit: true },
+									children: tr("loginSignUp")
+								})
+							]
+						})
+					]
+				})
+			}), /* @__PURE__ */ jsx(ActionButton, {
+				variant: "subtle",
+				href: "/",
+				children: tr("loginCancel")
+			})]
+		})
+	});
+};
+const leftSection = (name) => {
+	if (name === "google") return /* @__PURE__ */ jsx(IconGoogle, {});
+	if (name === "github") return /* @__PURE__ */ jsx(IconGithub, {});
+};
+
+//#endregion
+export { Login_exports as n, Login as t };
+//# sourceMappingURL=Login-hSOU3jZc.js.map

package/dist/demo/Login-hSOU3jZc.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Login-hSOU3jZc.js","names":[],"sources":["../../src/auth/components/Login.tsx"],"sourcesContent":["import { ActionButton, Control, capitalize } from \"@alepha/ui\";\nimport { Card, Flex, Image, Text, Title } from \"@mantine/core\";\nimport { IconLock, IconUser } from \"@tabler/icons-react\";\nimport { AlephaError, t } from \"alepha\";\nimport type { RealmConfig } from \"alepha/api/users\";\nimport { useAuth } from \"alepha/react/auth\";\nimport { FormValidationError, useForm } from \"alepha/react/form\";\nimport { useI18n } from \"alepha/react/i18n\";\nimport { useRouter } from \"alepha/react/router\";\nimport { HttpError } from \"alepha/server\";\nimport { useMemo } from \"react\";\nimport type { AuthI18n } from \"../AuthI18n.ts\";\nimport type { AuthRouter } from \"../AuthRouter.ts\";\nimport IconGithub from \"./icons/IconGithub.tsx\";\nimport IconGoogle from \"./icons/IconGoogle.tsx\";\n\nexport interface LoginProps {\n  realmConfig: RealmConfig;\n}\n\nconst Login = (props: LoginProps) => {\n  const auth = useAuth();\n  const router = useRouter<AuthRouter>();\n  const { tr } = useI18n<AuthI18n, \"en\">();\n  const redirect = router.query.r || \"/\";\n\n  const credentialsProvider = props.realmConfig.authenticationMethods.find(\n    (it) => it.type === \"CREDENTIALS\",\n  );\n\n  const settings = props.realmConfig.settings;\n\n  // Determine what login methods are available\n  const loginMethods = useMemo(() => {\n    const methods = [];\n    if (settings.usernameEnabled !== false) methods.push(\"username\");\n    if (settings.emailEnabled !== false) methods.push(\"email\");\n    if (settings.phoneEnabled === true) methods.push(\"phone\");\n    return methods;\n  }, [settings]);\n\n  // Create identifier title based on enabled methods\n  const identifierTitle = useMemo(() => {\n    if (loginMethods.length === 0) return tr(\"loginUsername\");\n    if (loginMethods.length === 1) {\n      if (loginMethods[0] === \"username\") return tr(\"loginUsername\");\n      if (loginMethods[0] === \"email\") return tr(\"loginEmail\");\n      if (loginMethods[0] === \"phone\") return tr(\"loginPhone\");\n    }\n    const labels = loginMethods.map((m) => {\n      if (m === \"username\") return tr(\"loginUsername\").toLowerCase();\n      if (m === \"email\") return tr(\"loginEmail\").toLowerCase();\n      if (m === \"phone\") return tr(\"loginPhone\").toLowerCase();\n      return m;\n    });\n    return capitalize(\n      `${labels.slice(0, -1).join(\", \")} or ${labels[labels.length - 1]}`,\n    );\n  }, [loginMethods, tr]);\n\n  const form = useForm({\n    schema: t.object({\n      identifier: t.string({\n        minLength: 1,\n      }),\n      password: t.string({\n        minLength: settings.passwordPolicy?.minLength || 6,\n      }),\n    }),\n    handler: async (data) => {\n      if (!credentialsProvider) {\n        throw new AlephaError(\"Credentials provider not configured\");\n      }\n\n      try {\n        await auth.login(credentialsProvider.name, {\n          username: data.identifier,\n          password: data.password,\n          realm: props.realmConfig.realmName,\n        });\n        await router.push(router.query.r || \"/\");\n      } catch (error) {\n        if (\n          error instanceof HttpError &&\n          error.error === \"InvalidCredentialsError\"\n        ) {\n          throw new FormValidationError({\n            message: \"Invalid identifier or password\",\n            path: \"/password\",\n          });\n        }\n        throw error;\n      }\n    },\n  });\n\n  const getAutoCompleteType = () => {\n    if (loginMethods.includes(\"email\")) {\n      return \"email\";\n    }\n    if (loginMethods.includes(\"username\")) {\n      return \"username\";\n    }\n    if (loginMethods.includes(\"phone\")) {\n      return \"tel\";\n    }\n    return \"username\";\n  };\n\n  const externalLoginMethods = props.realmConfig.authenticationMethods.filter(\n    (method) => method.type !== \"CREDENTIALS\",\n  );\n\n  const showOrDivider = credentialsProvider && externalLoginMethods.length > 0;\n\n  return (\n    <Flex flex={1} justify={\"center\"} align={\"center\"}>\n      <Flex direction=\"column\" gap={\"sm\"} w={360}>\n        <Card withBorder p={\"lg\"} bg={\"var(--alepha-elevated)\"}>\n          <Flex direction=\"column\" gap={\"md\"}>\n            {/* Realm branding */}\n            {(settings.logoUrl ||\n              settings.displayName ||\n              settings.description) && (\n              <Flex direction=\"column\" gap={\"xs\"} align=\"center\" mb=\"xs\">\n                {settings.logoUrl && (\n                  <Image\n                    src={settings.logoUrl}\n                    alt={settings.displayName || props.realmConfig.realmName}\n                    h={48}\n                    w=\"auto\"\n                    fit=\"contain\"\n                  />\n                )}\n                {settings.displayName && (\n                  <Title order={4} ta=\"center\">\n                    {settings.displayName}\n                  </Title>\n                )}\n                {settings.description && (\n                  <Text size=\"sm\" c=\"dimmed\" ta=\"center\">\n                    {settings.description}\n                  </Text>\n                )}\n              </Flex>\n            )}\n\n            {/* Credentials login form */}\n            {credentialsProvider && (\n              <>\n                <form {...form.props}>\n                  <Flex direction=\"column\" flex={1} gap={\"md\"}>\n                    <Control\n                      title={identifierTitle}\n                      input={form.input.identifier}\n                      icon={IconUser}\n                      text={{\n                        autoComplete: getAutoCompleteType(),\n                      }}\n                    />\n                    <Control\n                      title={tr(\"loginPassword\")}\n                      input={form.input.password}\n                      icon={IconLock}\n                      password={{\n                        autoComplete: \"current-password\",\n                      }}\n                    />\n                    <ActionButton variant={\"filled\"} form={form}>\n                      {tr(\"loginSignIn\")}\n                    </ActionButton>\n                  </Flex>\n                </form>\n                {settings.resetPasswordAllowed && (\n                  <Text size=\"sm\" ta=\"center\">\n                    <ActionButton\n                      href={router.path(\"resetPassword\", {\n                        query: { realm: props.realmConfig.realmName },\n                      })}\n                      anchorProps={{ inherit: true }}\n                    >\n                      {tr(\"loginForgotPassword\")}\n                    </ActionButton>\n                  </Text>\n                )}\n              </>\n            )}\n\n            {/* OR divider - only when both credentials AND external methods exist */}\n            {showOrDivider && (\n              <Flex align=\"center\" justify=\"center\" gap={\"md\"}>\n                <Flex flex={1} h={\"1px\"} bg={\"var(--alepha-border)\"} />\n                <Text size=\"xs\" c={\"dimmed\"}>\n                  {tr(\"loginOr\")}\n                </Text>\n                <Flex flex={1} h={\"1px\"} bg={\"var(--alepha-border)\"} />\n              </Flex>\n            )}\n\n            {/* External login methods */}\n            {externalLoginMethods.length > 0 && (\n              <Flex direction=\"column\" gap={\"sm\"}>\n                {externalLoginMethods.map((method) => (\n                  <ActionButton\n                    variant={\"default\"}\n                    key={method.type}\n                    leftSection={leftSection(method.name.toLowerCase())}\n                    onClick={() =>\n                      auth.login(method.name, {\n                        redirect,\n                        realm: props.realmConfig.realmName,\n                      })\n                    }\n                  >\n                    {tr(\"loginContinueWith\", {\n                      args: [capitalize(method.name)],\n                    })}\n                  </ActionButton>\n                ))}\n              </Flex>\n            )}\n\n            {/* Registration link */}\n            {settings.registrationAllowed && (\n              <Text size=\"sm\" ta=\"center\">\n                {tr(\"loginNoAccount\")}{\" \"}\n                <ActionButton\n                  href={router.path(\"register\", {\n                    query: { realm: props.realmConfig.realmName },\n                  })}\n                  anchorProps={{ inherit: true }}\n                >\n                  {tr(\"loginSignUp\")}\n                </ActionButton>\n              </Text>\n            )}\n          </Flex>\n        </Card>\n        <ActionButton variant={\"subtle\"} href={\"/\"}>\n          {tr(\"loginCancel\")}\n        </ActionButton>\n      </Flex>\n    </Flex>\n  );\n};\n\nexport default Login;\n\nconst leftSection = (name: string) => {\n  if (name === \"google\") {\n    return <IconGoogle />;\n  }\n\n  if (name === \"github\") {\n    return <IconGithub />;\n  }\n};\n"],"mappings":"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"}