@alepha/ui 0.14.0 → 0.14.2

package/dist/demo/DemoResetPassword-DVXiiiX7.js

@@ -0,0 +1,341 @@
+import { t as Showcase_default } from "./Showcase-vemLuO2t.js";
+import { ActionButton, Control } from "@alepha/ui";
+import { AlephaError, t } from "alepha";
+import { useRouter } from "@alepha/react/router";
+import { IconAlertCircle, IconCheck, IconInfoCircle, IconLock, IconMail } from "@tabler/icons-react";
+import { Alert, Card, Flex, Image, PinInput, Stack, Text, Title } from "@mantine/core";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useI18n } from "@alepha/react/i18n";
+import { useState } from "react";
+import { useForm } from "@alepha/react/form";
+import { useClient } from "@alepha/react";
+import { resetPasswordRequestSchema } from "alepha/api/users";
+
+//#region ../../src/auth/components/ResetPassword.tsx
+const ResetPassword = (props) => {
+	const router = useRouter();
+	const userCtrl = useClient();
+	const { tr } = useI18n();
+	const [resetState, setResetState] = useState({ step: "email" });
+	const [error, setError] = useState(null);
+	const [isSubmitting, setIsSubmitting] = useState(false);
+	const redirect = router.query.r || "/";
+	const settings = props.realmConfig.settings;
+	const isResetPasswordAllowed = settings?.resetPasswordAllowed !== false;
+	const emailForm = useForm({
+		schema: resetPasswordRequestSchema,
+		handler: async (data) => {
+			setError(null);
+			setResetState({
+				step: "code",
+				intent: await userCtrl.createPasswordResetIntent({
+					query: { userRealmName: props.realmConfig.realmName },
+					body: { email: data.email }
+				}),
+				email: data.email
+			});
+		}
+	});
+	const passwordForm = useForm({
+		schema: t.object({
+			password: t.string({ minLength: 8 }),
+			confirmPassword: t.string({ minLength: 8 })
+		}),
+		handler: async (data) => {
+			if (data.password !== data.confirmPassword) throw new AlephaError("Passwords do not match");
+			if (!resetState.intent || !resetState.code) throw new AlephaError("Invalid reset state");
+			await userCtrl.completePasswordReset({ body: {
+				intentId: resetState.intent.intentId,
+				code: resetState.code,
+				newPassword: data.password
+			} });
+			setResetState({ step: "success" });
+		}
+	}, [resetState.intent, resetState.code]);
+	const handleCodeComplete = (value) => {
+		if (value.length === 6) setResetState((prev) => ({
+			...prev,
+			step: "password",
+			code: value
+		}));
+	};
+	const handleResendCode = async () => {
+		if (!resetState.email) return;
+		setIsSubmitting(true);
+		setError(null);
+		try {
+			const intent = await userCtrl.createPasswordResetIntent({
+				query: { userRealmName: props.realmConfig.realmName },
+				body: { email: resetState.email }
+			});
+			setResetState((prev) => ({
+				...prev,
+				intent
+			}));
+		} catch (err) {
+			setError(err instanceof Error ? err.message : "Failed to resend code");
+		} finally {
+			setIsSubmitting(false);
+		}
+	};
+	return /* @__PURE__ */ jsx(Flex, {
+		flex: 1,
+		justify: "center",
+		align: "center",
+		children: /* @__PURE__ */ jsxs(Stack, {
+			gap: "sm",
+			w: 360,
+			children: [/* @__PURE__ */ jsx(Card, {
+				withBorder: true,
+				p: "lg",
+				bg: "var(--alepha-elevated)",
+				children: /* @__PURE__ */ jsxs(Stack, {
+					gap: "md",
+					children: [
+						(settings.logoUrl || settings.displayName || settings.description) && /* @__PURE__ */ jsxs(Stack, {
+							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
+								})
+							]
+						}),
+						error && /* @__PURE__ */ jsx(Alert, {
+							variant: "light",
+							color: "red",
+							icon: /* @__PURE__ */ jsx(IconAlertCircle, {}),
+							children: /* @__PURE__ */ jsx(Text, {
+								size: "sm",
+								children: error
+							})
+						}),
+						!isResetPasswordAllowed ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Alert, {
+							variant: "light",
+							color: "yellow",
+							icon: /* @__PURE__ */ jsx(IconAlertCircle, {}),
+							children: /* @__PURE__ */ jsx(Text, {
+								size: "sm",
+								children: tr("resetPasswordDisabled")
+							})
+						}), /* @__PURE__ */ jsx(ActionButton, {
+							href: router.path("login", { query: { realm: props.realmConfig.realmName } }),
+							children: tr("resetPasswordBackToSignIn")
+						})] }) : resetState.step === "email" ? /* @__PURE__ */ jsx("form", {
+							...emailForm.props,
+							children: /* @__PURE__ */ jsxs(Stack, {
+								flex: 1,
+								gap: "md",
+								children: [
+									/* @__PURE__ */ jsx(Text, {
+										size: "lg",
+										fw: 500,
+										ta: "center",
+										children: tr("resetPasswordTitle")
+									}),
+									/* @__PURE__ */ jsx(Text, {
+										size: "sm",
+										c: "dimmed",
+										children: tr("resetPasswordEnterEmail")
+									}),
+									/* @__PURE__ */ jsx(Control, {
+										title: tr("resetPasswordEmail"),
+										input: emailForm.input.email,
+										icon: /* @__PURE__ */ jsx(IconMail, {}),
+										text: {
+											autoComplete: "email",
+											autoFocus: true,
+											disabled: !isResetPasswordAllowed
+										}
+									}),
+									/* @__PURE__ */ jsx(ActionButton, {
+										form: emailForm,
+										disabled: !isResetPasswordAllowed,
+										children: tr("resetPasswordSendCode")
+									})
+								]
+							})
+						}) : resetState.step === "code" ? /* @__PURE__ */ jsxs(Stack, {
+							gap: "md",
+							children: [
+								/* @__PURE__ */ jsx(Text, {
+									size: "lg",
+									fw: 500,
+									ta: "center",
+									children: tr("resetPasswordTitle")
+								}),
+								/* @__PURE__ */ jsx(Alert, {
+									variant: "light",
+									color: "blue",
+									icon: /* @__PURE__ */ jsx(IconInfoCircle, {}),
+									children: /* @__PURE__ */ jsx(Text, {
+										size: "sm",
+										children: tr("resetPasswordCodeSent")
+									})
+								}),
+								/* @__PURE__ */ jsx(Text, {
+									size: "sm",
+									c: "dimmed",
+									ta: "center",
+									children: tr("resetPasswordEnterCode")
+								}),
+								/* @__PURE__ */ jsx(Flex, {
+									justify: "center",
+									children: /* @__PURE__ */ jsx(PinInput, {
+										length: 6,
+										type: "number",
+										autoFocus: true,
+										oneTimeCode: true,
+										onComplete: handleCodeComplete,
+										"aria-label": "Password reset verification code"
+									})
+								}),
+								/* @__PURE__ */ jsx(ActionButton, {
+									variant: "subtle",
+									onClick: handleResendCode,
+									loading: isSubmitting,
+									children: tr("resetPasswordResendCode")
+								})
+							]
+						}) : resetState.step === "password" ? /* @__PURE__ */ jsx("form", {
+							...passwordForm.props,
+							children: /* @__PURE__ */ jsxs(Stack, {
+								flex: 1,
+								gap: "md",
+								children: [
+									/* @__PURE__ */ jsx(Text, {
+										size: "lg",
+										fw: 500,
+										ta: "center",
+										children: tr("resetPasswordTitle")
+									}),
+									/* @__PURE__ */ jsx(Text, {
+										size: "sm",
+										c: "dimmed",
+										children: tr("resetPasswordEnterNewPassword")
+									}),
+									/* @__PURE__ */ jsx(Control, {
+										title: tr("resetPasswordNewPassword"),
+										input: passwordForm.input.password,
+										icon: /* @__PURE__ */ jsx(IconLock, {}),
+										password: {
+											autoComplete: "new-password",
+											autoFocus: true
+										}
+									}),
+									/* @__PURE__ */ jsx(Control, {
+										title: tr("resetPasswordConfirmPassword"),
+										input: passwordForm.input.confirmPassword,
+										icon: /* @__PURE__ */ jsx(IconLock, {}),
+										password: { autoComplete: "new-password" }
+									}),
+									/* @__PURE__ */ jsx(ActionButton, {
+										form: passwordForm,
+										children: tr("resetPasswordSetNewPassword")
+									})
+								]
+							})
+						}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Alert, {
+							variant: "light",
+							color: "green",
+							icon: /* @__PURE__ */ jsx(IconCheck, {}),
+							children: /* @__PURE__ */ jsx(Text, {
+								size: "sm",
+								children: tr("resetPasswordSuccess")
+							})
+						}), /* @__PURE__ */ jsx(ActionButton, {
+							href: router.path("login", { query: { realm: props.realmConfig.realmName } }),
+							children: tr("resetPasswordBackToSignIn")
+						})] })
+					]
+				})
+			}), /* @__PURE__ */ jsx(ActionButton, {
+				variant: "subtle",
+				href: redirect,
+				children: tr("resetPasswordCancel")
+			})]
+		})
+	});
+};
+var ResetPassword_default = ResetPassword;
+
+//#endregion
+//#region ../../src/demo/components/auth/DemoResetPassword.tsx
+const showcaseSchema = t.object({
+	resetPasswordAllowed: t.boolean({
+		title: "Reset Allowed",
+		default: true,
+		$control: { switch: true }
+	}),
+	showBranding: t.boolean({
+		title: "Show Branding",
+		default: true,
+		$control: { switch: true }
+	})
+});
+const buildRealmConfig = (props) => {
+	return {
+		realmName: "demo",
+		authenticationMethods: [{
+			name: "credentials",
+			type: "CREDENTIALS"
+		}],
+		settings: {
+			displayName: props.showBranding ? "Demo App" : void 0,
+			description: props.showBranding ? "Reset your password" : void 0,
+			logoUrl: void 0,
+			registrationAllowed: true,
+			emailEnabled: true,
+			emailRequired: true,
+			usernameEnabled: false,
+			usernameRequired: false,
+			phoneEnabled: false,
+			phoneRequired: false,
+			verifyEmailRequired: false,
+			verifyPhoneRequired: false,
+			firstNameLastNameEnabled: false,
+			firstNameLastNameRequired: false,
+			resetPasswordAllowed: props.resetPasswordAllowed,
+			passwordPolicy: {
+				minLength: 8,
+				requireUppercase: true,
+				requireLowercase: true,
+				requireNumbers: true,
+				requireSpecialCharacters: false
+			}
+		}
+	};
+};
+const DemoResetPassword = () => {
+	return /* @__PURE__ */ jsx(Showcase_default, {
+		title: "ResetPassword",
+		schema: showcaseSchema,
+		initialValues: {
+			resetPasswordAllowed: true,
+			showBranding: true
+		},
+		columns: 1,
+		children: (props) => /* @__PURE__ */ jsx(ResetPassword_default, { realmConfig: buildRealmConfig(props) })
+	});
+};
+var DemoResetPassword_default = DemoResetPassword;
+
+//#endregion
+export { DemoResetPassword_default as default };
+//# sourceMappingURL=DemoResetPassword-DVXiiiX7.js.map

package/dist/demo/DemoResetPassword-DVXiiiX7.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DemoResetPassword-DVXiiiX7.js","names":["Showcase","ResetPassword"],"sources":["../../src/auth/components/ResetPassword.tsx","../../src/demo/components/auth/DemoResetPassword.tsx"],"sourcesContent":["import { useClient } from \"@alepha/react\";\nimport { useForm } from \"@alepha/react/form\";\nimport { useI18n } from \"@alepha/react/i18n\";\nimport { useRouter } from \"@alepha/react/router\";\nimport { ActionButton, Control } from \"@alepha/ui\";\nimport {\n  Alert,\n  Card,\n  Flex,\n  Image,\n  PinInput,\n  Stack,\n  Text,\n  Title,\n} from \"@mantine/core\";\nimport {\n  IconAlertCircle,\n  IconCheck,\n  IconInfoCircle,\n  IconLock,\n  IconMail,\n} from \"@tabler/icons-react\";\nimport { AlephaError, t } from \"alepha\";\nimport type {\n  PasswordResetIntentResponse,\n  UserController,\n  UserRealmConfig,\n} from \"alepha/api/users\";\nimport { resetPasswordRequestSchema } from \"alepha/api/users\";\nimport { useState } from \"react\";\nimport type { AuthI18n } from \"../AuthI18n.ts\";\nimport type { AuthRouter } from \"../AuthRouter.ts\";\n\nexport interface ResetPasswordProps {\n  realmConfig: UserRealmConfig;\n}\n\ntype Step = \"email\" | \"code\" | \"password\" | \"success\";\n\ninterface ResetState {\n  step: Step;\n  intent?: PasswordResetIntentResponse;\n  email?: string;\n  code?: string;\n}\n\nconst ResetPassword = (props: ResetPasswordProps) => {\n  const router = useRouter<AuthRouter>();\n  const userCtrl = useClient<UserController>();\n  const { tr } = useI18n<AuthI18n, \"en\">();\n  const [resetState, setResetState] = useState<ResetState>({ step: \"email\" });\n  const [error, setError] = useState<string | null>(null);\n  const [isSubmitting, setIsSubmitting] = useState(false);\n  const redirect = router.query.r || \"/\";\n\n  const settings = props.realmConfig.settings;\n  const isResetPasswordAllowed = settings?.resetPasswordAllowed !== false;\n\n  // Phase 1: Request password reset intent\n  const emailForm = useForm({\n    schema: resetPasswordRequestSchema,\n    handler: async (data) => {\n      setError(null);\n      const intent = await userCtrl.createPasswordResetIntent({\n        query: { userRealmName: props.realmConfig.realmName },\n        body: { email: data.email },\n      });\n\n      setResetState({\n        step: \"code\",\n        intent,\n        email: data.email,\n      });\n    },\n  });\n\n  // Phase 2: Complete password reset\n  const passwordForm = useForm(\n    {\n      schema: t.object({\n        password: t.string({ minLength: 8 }),\n        confirmPassword: t.string({ minLength: 8 }),\n      }),\n      handler: async (data) => {\n        if (data.password !== data.confirmPassword) {\n          throw new AlephaError(\"Passwords do not match\");\n        }\n\n        if (!resetState.intent || !resetState.code) {\n          throw new AlephaError(\"Invalid reset state\");\n        }\n\n        await userCtrl.completePasswordReset({\n          body: {\n            intentId: resetState.intent.intentId,\n            code: resetState.code,\n            newPassword: data.password,\n          },\n        });\n\n        setResetState({ step: \"success\" });\n      },\n    },\n    [resetState.intent, resetState.code],\n  );\n\n  const handleCodeComplete = (value: string) => {\n    if (value.length === 6) {\n      setResetState((prev) => ({\n        ...prev,\n        step: \"password\",\n        code: value,\n      }));\n    }\n  };\n\n  const handleResendCode = async () => {\n    if (!resetState.email) return;\n\n    setIsSubmitting(true);\n    setError(null);\n\n    try {\n      const intent = await userCtrl.createPasswordResetIntent({\n        query: { userRealmName: props.realmConfig.realmName },\n        body: { email: resetState.email },\n      });\n\n      setResetState((prev) => ({\n        ...prev,\n        intent,\n      }));\n    } catch (err) {\n      setError(err instanceof Error ? err.message : \"Failed to resend code\");\n    } finally {\n      setIsSubmitting(false);\n    }\n  };\n\n  return (\n    <Flex flex={1} justify={\"center\"} align={\"center\"}>\n      <Stack gap={\"sm\"} w={360}>\n        <Card withBorder p={\"lg\"} bg={\"var(--alepha-elevated)\"}>\n          <Stack gap={\"md\"}>\n            {/* Realm branding */}\n            {(settings.logoUrl ||\n              settings.displayName ||\n              settings.description) && (\n              <Stack 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              </Stack>\n            )}\n\n            {error && (\n              <Alert variant=\"light\" color=\"red\" icon={<IconAlertCircle />}>\n                <Text size=\"sm\">{error}</Text>\n              </Alert>\n            )}\n\n            {!isResetPasswordAllowed ? (\n              <>\n                <Alert\n                  variant=\"light\"\n                  color=\"yellow\"\n                  icon={<IconAlertCircle />}\n                >\n                  <Text size=\"sm\">{tr(\"resetPasswordDisabled\")}</Text>\n                </Alert>\n                <ActionButton\n                  href={router.path(\"login\", {\n                    query: { realm: props.realmConfig.realmName },\n                  })}\n                >\n                  {tr(\"resetPasswordBackToSignIn\")}\n                </ActionButton>\n              </>\n            ) : resetState.step === \"email\" ? (\n              <form {...emailForm.props}>\n                <Stack flex={1} gap={\"md\"}>\n                  <Text size=\"lg\" fw={500} ta=\"center\">\n                    {tr(\"resetPasswordTitle\")}\n                  </Text>\n                  <Text size=\"sm\" c=\"dimmed\">\n                    {tr(\"resetPasswordEnterEmail\")}\n                  </Text>\n                  <Control\n                    title={tr(\"resetPasswordEmail\")}\n                    input={emailForm.input.email}\n                    icon={<IconMail />}\n                    text={{\n                      autoComplete: \"email\",\n                      autoFocus: true,\n                      disabled: !isResetPasswordAllowed,\n                    }}\n                  />\n                  <ActionButton\n                    form={emailForm}\n                    disabled={!isResetPasswordAllowed}\n                  >\n                    {tr(\"resetPasswordSendCode\")}\n                  </ActionButton>\n                </Stack>\n              </form>\n            ) : resetState.step === \"code\" ? (\n              <Stack gap={\"md\"}>\n                <Text size=\"lg\" fw={500} ta=\"center\">\n                  {tr(\"resetPasswordTitle\")}\n                </Text>\n                <Alert variant=\"light\" color=\"blue\" icon={<IconInfoCircle />}>\n                  <Text size=\"sm\">{tr(\"resetPasswordCodeSent\")}</Text>\n                </Alert>\n                <Text size=\"sm\" c=\"dimmed\" ta=\"center\">\n                  {tr(\"resetPasswordEnterCode\")}\n                </Text>\n                <Flex justify=\"center\">\n                  <PinInput\n                    length={6}\n                    type=\"number\"\n                    autoFocus\n                    oneTimeCode\n                    onComplete={handleCodeComplete}\n                    aria-label=\"Password reset verification code\"\n                  />\n                </Flex>\n                <ActionButton\n                  variant=\"subtle\"\n                  onClick={handleResendCode}\n                  loading={isSubmitting}\n                >\n                  {tr(\"resetPasswordResendCode\")}\n                </ActionButton>\n              </Stack>\n            ) : resetState.step === \"password\" ? (\n              <form {...passwordForm.props}>\n                <Stack flex={1} gap={\"md\"}>\n                  <Text size=\"lg\" fw={500} ta=\"center\">\n                    {tr(\"resetPasswordTitle\")}\n                  </Text>\n                  <Text size=\"sm\" c=\"dimmed\">\n                    {tr(\"resetPasswordEnterNewPassword\")}\n                  </Text>\n                  <Control\n                    title={tr(\"resetPasswordNewPassword\")}\n                    input={passwordForm.input.password}\n                    icon={<IconLock />}\n                    password={{\n                      autoComplete: \"new-password\",\n                      autoFocus: true,\n                    }}\n                  />\n                  <Control\n                    title={tr(\"resetPasswordConfirmPassword\")}\n                    input={passwordForm.input.confirmPassword}\n                    icon={<IconLock />}\n                    password={{\n                      autoComplete: \"new-password\",\n                    }}\n                  />\n                  <ActionButton form={passwordForm}>\n                    {tr(\"resetPasswordSetNewPassword\")}\n                  </ActionButton>\n                </Stack>\n              </form>\n            ) : (\n              <>\n                <Alert variant=\"light\" color=\"green\" icon={<IconCheck />}>\n                  <Text size=\"sm\">{tr(\"resetPasswordSuccess\")}</Text>\n                </Alert>\n                <ActionButton\n                  href={router.path(\"login\", {\n                    query: { realm: props.realmConfig.realmName },\n                  })}\n                >\n                  {tr(\"resetPasswordBackToSignIn\")}\n                </ActionButton>\n              </>\n            )}\n          </Stack>\n        </Card>\n        <ActionButton variant={\"subtle\"} href={redirect}>\n          {tr(\"resetPasswordCancel\")}\n        </ActionButton>\n      </Stack>\n    </Flex>\n  );\n};\n\nexport default ResetPassword;\n","import { t } from \"alepha\";\nimport type { UserRealmConfig } from \"alepha/api/users\";\nimport ResetPassword from \"../../../auth/components/ResetPassword.tsx\";\nimport Showcase from \"../shared/Showcase.tsx\";\n\nconst showcaseSchema = t.object({\n  resetPasswordAllowed: t.boolean({\n    title: \"Reset Allowed\",\n    default: true,\n    $control: { switch: true },\n  }),\n  showBranding: t.boolean({\n    title: \"Show Branding\",\n    default: true,\n    $control: { switch: true },\n  }),\n});\n\nconst buildRealmConfig = (props: {\n  resetPasswordAllowed: boolean;\n  showBranding: boolean;\n}): UserRealmConfig => {\n  return {\n    realmName: \"demo\",\n    authenticationMethods: [{ name: \"credentials\", type: \"CREDENTIALS\" }],\n    settings: {\n      displayName: props.showBranding ? \"Demo App\" : undefined,\n      description: props.showBranding ? \"Reset your password\" : undefined,\n      logoUrl: undefined,\n      registrationAllowed: true,\n      emailEnabled: true,\n      emailRequired: true,\n      usernameEnabled: false,\n      usernameRequired: false,\n      phoneEnabled: false,\n      phoneRequired: false,\n      verifyEmailRequired: false,\n      verifyPhoneRequired: false,\n      firstNameLastNameEnabled: false,\n      firstNameLastNameRequired: false,\n      resetPasswordAllowed: props.resetPasswordAllowed,\n      passwordPolicy: {\n        minLength: 8,\n        requireUppercase: true,\n        requireLowercase: true,\n        requireNumbers: true,\n        requireSpecialCharacters: false,\n      },\n    },\n  };\n};\n\nconst DemoResetPassword = () => {\n  return (\n    <Showcase\n      title=\"ResetPassword\"\n      schema={showcaseSchema}\n      initialValues={{\n        resetPasswordAllowed: true,\n        showBranding: true,\n      }}\n      columns={1}\n    >\n      {(props) => <ResetPassword realmConfig={buildRealmConfig(props)} />}\n    </Showcase>\n  );\n};\n\nexport default DemoResetPassword;\n"],"mappings":"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"}

package/dist/demo/DemoSidebar-DWnjYHoP.js

@@ -0,0 +1,82 @@
+import { t as Showcase_default } from "./Showcase-vemLuO2t.js";
+import { Sidebar } from "@alepha/ui";
+import { t } from "alepha";
+import { IconDashboard, IconFiles, IconSettings, IconUsers } from "@tabler/icons-react";
+import { Flex } from "@mantine/core";
+import { jsx } from "react/jsx-runtime";
+
+//#region ../../src/demo/components/core/DemoSidebar.tsx
+const sidebarItems = [
+	{ type: "search" },
+	{ type: "divider" },
+	{
+		icon: IconDashboard,
+		label: "Dashboard"
+	},
+	{
+		icon: IconUsers,
+		label: "Users",
+		children: [
+			{ label: "All Users" },
+			{ label: "Add User" },
+			{ label: "Roles" }
+		]
+	},
+	{
+		icon: IconFiles,
+		label: "Files"
+	},
+	{ type: "spacer" },
+	{
+		position: "bottom",
+		icon: IconSettings,
+		label: "Settings"
+	}
+];
+const showcaseSchema = t.object({
+	collapsed: t.boolean({
+		title: "Collapsed",
+		default: false,
+		$control: { switch: true }
+	}),
+	gap: t.enum([
+		"xs",
+		"sm",
+		"md",
+		"lg"
+	], {
+		title: "Gap",
+		default: "xs",
+		$control: { segmented: true }
+	})
+});
+const DemoSidebar = () => {
+	return /* @__PURE__ */ jsx(Showcase_default, {
+		title: "Sidebar",
+		schema: showcaseSchema,
+		initialValues: {
+			collapsed: false,
+			gap: "xs"
+		},
+		columns: 1,
+		windowProps: {
+			fill: true,
+			containerProps: { p: 0 }
+		},
+		children: (props) => /* @__PURE__ */ jsx(Flex, {
+			h: "100%",
+			w: props.collapsed ? 60 : 240,
+			bg: "var(--alepha-surface)",
+			children: /* @__PURE__ */ jsx(Sidebar, {
+				items: sidebarItems,
+				collapsed: props.collapsed,
+				gap: props.gap
+			})
+		})
+	});
+};
+var DemoSidebar_default = DemoSidebar;
+
+//#endregion
+export { DemoSidebar_default as default };
+//# sourceMappingURL=DemoSidebar-DWnjYHoP.js.map

package/dist/demo/DemoSidebar-DWnjYHoP.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DemoSidebar-DWnjYHoP.js","names":["Showcase"],"sources":["../../src/demo/components/core/DemoSidebar.tsx"],"sourcesContent":["import { Sidebar, type SidebarNode } from \"@alepha/ui\";\nimport { Flex } from \"@mantine/core\";\nimport {\n  IconDashboard,\n  IconFiles,\n  IconSettings,\n  IconUsers,\n} from \"@tabler/icons-react\";\nimport { t } from \"alepha\";\nimport Showcase from \"../shared/Showcase.tsx\";\n\nconst sidebarItems = [\n  { type: \"search\" },\n  { type: \"divider\" },\n  {\n    icon: IconDashboard,\n    label: \"Dashboard\",\n  },\n  {\n    icon: IconUsers,\n    label: \"Users\",\n    children: [\n      { label: \"All Users\" },\n      { label: \"Add User\" },\n      { label: \"Roles\" },\n    ],\n  },\n  {\n    icon: IconFiles,\n    label: \"Files\",\n  },\n  { type: \"spacer\" },\n  {\n    position: \"bottom\",\n    icon: IconSettings,\n    label: \"Settings\",\n  },\n] satisfies SidebarNode[];\n\nconst showcaseSchema = t.object({\n  collapsed: t.boolean({\n    title: \"Collapsed\",\n    default: false,\n    $control: { switch: true },\n  }),\n  gap: t.enum([\"xs\", \"sm\", \"md\", \"lg\"], {\n    title: \"Gap\",\n    default: \"xs\",\n    $control: { segmented: true },\n  }),\n});\n\nconst DemoSidebar = () => {\n  return (\n    <Showcase\n      title=\"Sidebar\"\n      schema={showcaseSchema}\n      initialValues={{\n        collapsed: false,\n        gap: \"xs\",\n      }}\n      columns={1}\n      windowProps={{\n        fill: true,\n        containerProps: { p: 0 },\n      }}\n    >\n      {(props) => (\n        <Flex\n          h={\"100%\"}\n          w={props.collapsed ? 60 : 240}\n          bg=\"var(--alepha-surface)\"\n        >\n          <Sidebar\n            items={sidebarItems}\n            collapsed={props.collapsed}\n            gap={props.gap}\n          />\n        </Flex>\n      )}\n    </Showcase>\n  );\n};\n\nexport default DemoSidebar;\n"],"mappings":";;;;;;;;AAWA,MAAM,eAAe;CACnB,EAAE,MAAM,UAAU;CAClB,EAAE,MAAM,WAAW;CACnB;EACE,MAAM;EACN,OAAO;EACR;CACD;EACE,MAAM;EACN,OAAO;EACP,UAAU;GACR,EAAE,OAAO,aAAa;GACtB,EAAE,OAAO,YAAY;GACrB,EAAE,OAAO,SAAS;GACnB;EACF;CACD;EACE,MAAM;EACN,OAAO;EACR;CACD,EAAE,MAAM,UAAU;CAClB;EACE,UAAU;EACV,MAAM;EACN,OAAO;EACR;CACF;AAED,MAAM,iBAAiB,EAAE,OAAO;CAC9B,WAAW,EAAE,QAAQ;EACnB,OAAO;EACP,SAAS;EACT,UAAU,EAAE,QAAQ,MAAM;EAC3B,CAAC;CACF,KAAK,EAAE,KAAK;EAAC;EAAM;EAAM;EAAM;EAAK,EAAE;EACpC,OAAO;EACP,SAAS;EACT,UAAU,EAAE,WAAW,MAAM;EAC9B,CAAC;CACH,CAAC;AAEF,MAAM,oBAAoB;AACxB,QACE,oBAACA;EACC,OAAM;EACN,QAAQ;EACR,eAAe;GACb,WAAW;GACX,KAAK;GACN;EACD,SAAS;EACT,aAAa;GACX,MAAM;GACN,gBAAgB,EAAE,GAAG,GAAG;GACzB;aAEC,UACA,oBAAC;GACC,GAAG;GACH,GAAG,MAAM,YAAY,KAAK;GAC1B,IAAG;aAEH,oBAAC;IACC,OAAO;IACP,WAAW,MAAM;IACjB,KAAK,MAAM;KACX;IACG;GAEA;;AAIf,0BAAe"}

package/dist/demo/DemoTypeForm-P5_VInW2.js

@@ -0,0 +1,83 @@
+import { t as Showcase_default } from "./Showcase-vemLuO2t.js";
+import { TypeForm } from "@alepha/ui";
+import { t } from "alepha";
+import { jsx } from "react/jsx-runtime";
+import { useForm } from "@alepha/react/form";
+
+//#region ../../src/demo/components/core/DemoTypeForm.tsx
+const formSchema = t.object({
+	username: t.text({
+		title: "Username",
+		default: ""
+	}),
+	email: t.email({
+		title: "Email",
+		default: ""
+	}),
+	age: t.integer({
+		title: "Age",
+		minimum: 0,
+		maximum: 120
+	}),
+	role: t.enum([
+		"admin",
+		"user",
+		"guest"
+	], {
+		title: "Role",
+		default: "user"
+	}),
+	subscribe: t.boolean({
+		title: "Subscribe",
+		default: false
+	})
+});
+const showcaseSchema = t.object({
+	columns: t.integer({
+		title: "Columns",
+		default: 1,
+		minimum: 1,
+		maximum: 4,
+		$control: { slider: true }
+	}),
+	fill: t.boolean({
+		title: "Fill Width",
+		default: false,
+		$control: { switch: true }
+	}),
+	skipSubmitButton: t.boolean({
+		title: "Hide Submit",
+		default: false,
+		$control: { switch: true }
+	})
+});
+const DemoTypeForm = () => {
+	const form = useForm({
+		schema: formSchema,
+		handler: (values) => {
+			alert(JSON.stringify(values, null, 2));
+		}
+	}, []);
+	return /* @__PURE__ */ jsx(Showcase_default, {
+		title: "TypeForm",
+		schema: showcaseSchema,
+		initialValues: {
+			columns: 1,
+			fill: false,
+			skipSubmitButton: false
+		},
+		columns: 1,
+		children: (props) => /* @__PURE__ */ jsx(TypeForm, {
+			form,
+			columns: props.columns,
+			fill: props.fill,
+			skipSubmitButton: props.skipSubmitButton,
+			submitButtonProps: { children: "Submit" }
+		})
+	});
+};
+var DemoTypeForm_default = DemoTypeForm;
+
+//#endregion
+export { DemoTypeForm_default as default };
+//# sourceMappingURL=DemoTypeForm-P5_VInW2.js.map

package/dist/demo/DemoTypeForm-P5_VInW2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DemoTypeForm-P5_VInW2.js","names":["Showcase"],"sources":["../../src/demo/components/core/DemoTypeForm.tsx"],"sourcesContent":["import { useForm } from \"@alepha/react/form\";\nimport { TypeForm } from \"@alepha/ui\";\nimport { t } from \"alepha\";\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,oBAACA;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;;AAIf,2BAAe"}