@alepha/ui 0.17.2 → 0.18.1

package/dist/demo/ResetPassword-DWN0lzr5.js

@@ -0,0 +1,286 @@
+import { t as __exportAll } from "./rolldown-runtime-CjeV3_4I.js";
+import { h as ActionButton, s as Control } from "./core-RCUw1Q-a.js";
+import { AlephaError, t } from "alepha";
+import { useForm } from "alepha/react/form";
+import { useI18n } from "alepha/react/i18n";
+import { Alert, Card, Flex, Image, PinInput, Text, Title } from "@mantine/core";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { IconAlertCircle, IconCheck, IconInfoCircle, IconLock, IconMail } from "@tabler/icons-react";
+import { useRouter } from "alepha/react/router";
+import { useClient } from "alepha/react";
+import { resetPasswordRequestSchema } from "alepha/api/users";
+
+//#region ../../src/auth/components/ResetPassword.tsx
+var ResetPassword_exports = /* @__PURE__ */ __exportAll({ default: () => ResetPassword });
+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(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
+								})
+							]
+						}),
+						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(Flex, {
+								direction: "column",
+								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(Flex, {
+							direction: "column",
+							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(Flex, {
+								direction: "column",
+								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")
+			})]
+		})
+	});
+};
+
+//#endregion
+export { ResetPassword_exports as n, ResetPassword as t };
+//# sourceMappingURL=ResetPassword-DWN0lzr5.js.map

package/dist/demo/ResetPassword-DWN0lzr5.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResetPassword-DWN0lzr5.js","names":[],"sources":["../../src/auth/components/ResetPassword.tsx"],"sourcesContent":["import { ActionButton, Control } from \"@alepha/ui\";\nimport { Alert, Card, Flex, Image, PinInput, Text, Title } 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  RealmConfig,\n  UserController,\n} from \"alepha/api/users\";\nimport { resetPasswordRequestSchema } from \"alepha/api/users\";\nimport { useClient } from \"alepha/react\";\nimport { useForm } from \"alepha/react/form\";\nimport { useI18n } from \"alepha/react/i18n\";\nimport { useRouter } from \"alepha/react/router\";\nimport { useState } from \"react\";\nimport type { AuthI18n } from \"../AuthI18n.ts\";\nimport type { AuthRouter } from \"../AuthRouter.ts\";\n\nexport interface ResetPasswordProps {\n  realmConfig: RealmConfig;\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      <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            {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                <Flex direction=\"column\" 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                </Flex>\n              </form>\n            ) : resetState.step === \"code\" ? (\n              <Flex direction=\"column\" 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              </Flex>\n            ) : resetState.step === \"password\" ? (\n              <form {...passwordForm.props}>\n                <Flex direction=\"column\" 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                </Flex>\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          </Flex>\n        </Card>\n        <ActionButton variant={\"subtle\"} href={redirect}>\n          {tr(\"resetPasswordCancel\")}\n        </ActionButton>\n      </Flex>\n    </Flex>\n  );\n};\n\nexport default ResetPassword;\n"],"mappings":"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"}

package/dist/demo/Showcase-Dq3MISpd.js

@@ -0,0 +1,232 @@
+import { g as ui, o as TypeForm } from "./core-RCUw1Q-a.js";
+import { useForm } from "alepha/react/form";
+import { Card, Flex, Portal, SegmentedControl, Text, Tooltip } from "@mantine/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { IconArrowsMaximize, IconDeviceDesktop, IconDeviceMobile, IconDeviceTablet } from "@tabler/icons-react";
+
+//#region ../../src/demo/components/shared/MacWindow.tsx
+const DEVICE_WIDTHS = {
+	phone: "375px",
+	tablet: "768px",
+	desktop: "100%",
+	full: "100%"
+};
+const MacWindow = ({ children, title, containerProps }) => {
+	const [device, setDevice] = useState("desktop");
+	const isFullPage = device === "full";
+	const header = /* @__PURE__ */ jsxs(Flex, {
+		h: 36,
+		px: "sm",
+		align: "center",
+		gap: 8,
+		style: {
+			background: "var(--mantine-color-default)",
+			borderBottom: "1px solid var(--mantine-color-default-border)"
+		},
+		children: [
+			/* @__PURE__ */ jsxs(Flex, {
+				gap: 6,
+				children: [
+					/* @__PURE__ */ jsx(Flex, {
+						w: 12,
+						h: 12,
+						style: {
+							borderRadius: "50%",
+							background: "#ff5f57"
+						}
+					}),
+					/* @__PURE__ */ jsx(Flex, {
+						w: 12,
+						h: 12,
+						style: {
+							borderRadius: "50%",
+							background: "#febc2e"
+						}
+					}),
+					/* @__PURE__ */ jsx(Flex, {
+						w: 12,
+						h: 12,
+						style: {
+							borderRadius: "50%",
+							background: "#28c840"
+						}
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(Flex, {
+				style: {
+					flex: 1,
+					textAlign: "center",
+					fontSize: 13,
+					color: "var(--mantine-color-dimmed)"
+				},
+				children: title
+			}),
+			/* @__PURE__ */ jsx(SegmentedControl, {
+				size: "xs",
+				value: device,
+				onChange: (v) => setDevice(v),
+				data: [
+					{
+						label: /* @__PURE__ */ jsx(Tooltip, {
+							label: "Phone (375px)",
+							openDelay: 400,
+							children: /* @__PURE__ */ jsx(Flex, {
+								align: "center",
+								children: /* @__PURE__ */ jsx(IconDeviceMobile, { size: 14 })
+							})
+						}),
+						value: "phone"
+					},
+					{
+						label: /* @__PURE__ */ jsx(Tooltip, {
+							label: "Tablet (768px)",
+							openDelay: 400,
+							children: /* @__PURE__ */ jsx(Flex, {
+								align: "center",
+								children: /* @__PURE__ */ jsx(IconDeviceTablet, { size: 14 })
+							})
+						}),
+						value: "tablet"
+					},
+					{
+						label: /* @__PURE__ */ jsx(Tooltip, {
+							label: "Desktop (100%)",
+							openDelay: 400,
+							children: /* @__PURE__ */ jsx(Flex, {
+								align: "center",
+								children: /* @__PURE__ */ jsx(IconDeviceDesktop, { size: 14 })
+							})
+						}),
+						value: "desktop"
+					},
+					{
+						label: /* @__PURE__ */ jsx(Tooltip, {
+							label: "Full page",
+							openDelay: 400,
+							children: /* @__PURE__ */ jsx(Flex, {
+								align: "center",
+								children: /* @__PURE__ */ jsx(IconArrowsMaximize, { size: 14 })
+							})
+						}),
+						value: "full"
+					}
+				]
+			})
+		]
+	});
+	const body = /* @__PURE__ */ jsx(Flex, {
+		direction: "column",
+		flex: 1,
+		p: "md",
+		style: { overflow: "auto" },
+		...containerProps,
+		children
+	});
+	if (isFullPage) return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs(Flex, {
+		direction: "column",
+		style: {
+			position: "fixed",
+			inset: 0,
+			zIndex: 1e3,
+			background: "var(--mantine-color-body)"
+		},
+		children: [header, body]
+	}) });
+	return /* @__PURE__ */ jsxs(Flex, {
+		direction: "column",
+		bdrs: "md",
+		style: {
+			width: DEVICE_WIDTHS[device],
+			maxWidth: "100%",
+			border: "1px solid var(--mantine-color-default-border)",
+			overflow: "hidden",
+			background: "var(--mantine-color-body)",
+			boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
+			transition: "width 0.3s ease"
+		},
+		children: [header, body]
+	});
+};
+
+//#endregion
+//#region ../../src/demo/components/shared/Showcase.tsx
+/**
+* Showcase component for demonstrating UI components with interactive props configuration.
+* Uses TypeForm to render a form based on the props schema and displays the component preview.
+*/
+const Showcase = ({ title, schema, initialValues, columns = 3, children, windowProps }) => {
+	const [values, setValues] = useState(initialValues ?? {});
+	const form = useForm({
+		schema,
+		initialValues,
+		handler: (values) => {
+			setValues(values);
+		},
+		onChange: (key, value) => {
+			return form.submit();
+		}
+	}, [schema]);
+	return /* @__PURE__ */ jsxs(Flex, {
+		flex: 1,
+		px: "md",
+		gap: "md",
+		children: [/* @__PURE__ */ jsx(Flex, {
+			flex: 1,
+			bg: ui.colors.background,
+			h: "100%",
+			justify: "center",
+			align: "flex-start",
+			style: {
+				flex: 1,
+				minWidth: 0,
+				overflow: "auto"
+			},
+			children: /* @__PURE__ */ jsx(MacWindow, {
+				title,
+				...windowProps,
+				children: children(values)
+			})
+		}), /* @__PURE__ */ jsx(Flex, {
+			h: "100%",
+			style: {
+				flex: "0 0 300px",
+				overflow: "auto"
+			},
+			children: /* @__PURE__ */ jsxs(Card, {
+				shadow: "sm",
+				radius: "md",
+				children: [/* @__PURE__ */ jsx(Card.Section, {
+					withBorder: true,
+					py: "xs",
+					inheritPadding: true,
+					children: /* @__PURE__ */ jsxs(Text, {
+						size: "xs",
+						fw: 500,
+						children: [title, " Props"]
+					})
+				}), /* @__PURE__ */ jsx(Card.Section, {
+					p: "sm",
+					children: /* @__PURE__ */ jsx(TypeForm, {
+						form,
+						columns: {
+							base: 1,
+							xs: 1,
+							sm: 1,
+							md: 1,
+							lg: 1,
+							xl: 1
+						},
+						skipSubmitButton: true,
+						skipFormElement: true
+					})
+				})]
+			})
+		})]
+	});
+};
+
+//#endregion
+export { Showcase as t };
+//# sourceMappingURL=Showcase-Dq3MISpd.js.map

package/dist/demo/Showcase-Dq3MISpd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Showcase-Dq3MISpd.js","names":[],"sources":["../../src/demo/components/shared/MacWindow.tsx","../../src/demo/components/shared/Showcase.tsx"],"sourcesContent":["import {\n  Flex,\n  type FlexProps,\n  Portal,\n  SegmentedControl,\n  Tooltip,\n} from \"@mantine/core\";\nimport {\n  IconArrowsMaximize,\n  IconDeviceDesktop,\n  IconDeviceMobile,\n  IconDeviceTablet,\n} from \"@tabler/icons-react\";\nimport { type ReactNode, useState } from \"react\";\n\nexport interface MacWindowProps {\n  children: ReactNode;\n  title?: string;\n  containerProps?: FlexProps;\n}\n\ntype DeviceSize = \"phone\" | \"tablet\" | \"desktop\" | \"full\";\n\nconst DEVICE_WIDTHS: Record<DeviceSize, string> = {\n  phone: \"375px\",\n  tablet: \"768px\",\n  desktop: \"100%\",\n  full: \"100%\",\n};\n\nconst MacWindow = ({ children, title, containerProps }: MacWindowProps) => {\n  const [device, setDevice] = useState<DeviceSize>(\"desktop\");\n  const isFullPage = device === \"full\";\n\n  const controls = (\n    <SegmentedControl\n      size=\"xs\"\n      value={device}\n      onChange={(v) => setDevice(v as DeviceSize)}\n      data={[\n        {\n          label: (\n            <Tooltip label=\"Phone (375px)\" openDelay={400}>\n              <Flex align=\"center\">\n                <IconDeviceMobile size={14} />\n              </Flex>\n            </Tooltip>\n          ),\n          value: \"phone\",\n        },\n        {\n          label: (\n            <Tooltip label=\"Tablet (768px)\" openDelay={400}>\n              <Flex align=\"center\">\n                <IconDeviceTablet size={14} />\n              </Flex>\n            </Tooltip>\n          ),\n          value: \"tablet\",\n        },\n        {\n          label: (\n            <Tooltip label=\"Desktop (100%)\" openDelay={400}>\n              <Flex align=\"center\">\n                <IconDeviceDesktop size={14} />\n              </Flex>\n            </Tooltip>\n          ),\n          value: \"desktop\",\n        },\n        {\n          label: (\n            <Tooltip label=\"Full page\" openDelay={400}>\n              <Flex align=\"center\">\n                <IconArrowsMaximize size={14} />\n              </Flex>\n            </Tooltip>\n          ),\n          value: \"full\",\n        },\n      ]}\n    />\n  );\n\n  const header = (\n    <Flex\n      h={36}\n      px=\"sm\"\n      align=\"center\"\n      gap={8}\n      style={{\n        background: \"var(--mantine-color-default)\",\n        borderBottom: \"1px solid var(--mantine-color-default-border)\",\n      }}\n    >\n      <Flex gap={6}>\n        <Flex\n          w={12}\n          h={12}\n          style={{ borderRadius: \"50%\", background: \"#ff5f57\" }}\n        />\n        <Flex\n          w={12}\n          h={12}\n          style={{ borderRadius: \"50%\", background: \"#febc2e\" }}\n        />\n        <Flex\n          w={12}\n          h={12}\n          style={{ borderRadius: \"50%\", background: \"#28c840\" }}\n        />\n      </Flex>\n\n      <Flex\n        style={{\n          flex: 1,\n          textAlign: \"center\",\n          fontSize: 13,\n          color: \"var(--mantine-color-dimmed)\",\n        }}\n      >\n        {title}\n      </Flex>\n\n      {controls}\n    </Flex>\n  );\n\n  const body = (\n    <Flex\n      direction={\"column\"}\n      flex={1}\n      p=\"md\"\n      style={{ overflow: \"auto\" }}\n      {...containerProps}\n    >\n      {children}\n    </Flex>\n  );\n\n  if (isFullPage) {\n    return (\n      <Portal>\n        <Flex\n          direction=\"column\"\n          style={{\n            position: \"fixed\",\n            inset: 0,\n            zIndex: 1000,\n            background: \"var(--mantine-color-body)\",\n          }}\n        >\n          {header}\n          {body}\n        </Flex>\n      </Portal>\n    );\n  }\n\n  return (\n    <Flex\n      direction=\"column\"\n      bdrs={\"md\"}\n      style={{\n        width: DEVICE_WIDTHS[device],\n        maxWidth: \"100%\",\n        border: \"1px solid var(--mantine-color-default-border)\",\n        overflow: \"hidden\",\n        background: \"var(--mantine-color-body)\",\n        boxShadow: \"0 4px 12px rgba(0, 0, 0, 0.15)\",\n        transition: \"width 0.3s ease\",\n      }}\n    >\n      {header}\n      {body}\n    </Flex>\n  );\n};\n\nexport default MacWindow;\n","import { TypeForm, ui } from \"@alepha/ui\";\nimport { Card, Flex, Text } from \"@mantine/core\";\nimport type { Static, TObject } from \"alepha\";\nimport { useForm } from \"alepha/react/form\";\nimport { type ReactNode, useState } from \"react\";\nimport MacWindow, { type MacWindowProps } from \"./MacWindow.tsx\";\n\nexport interface ShowcaseProps<T extends TObject> {\n  /**\n   * Component title\n   */\n  title: string;\n  /**\n   * Schema for the props configuration\n   */\n  schema: T;\n  /**\n   * Initial values for the props\n   */\n  initialValues?: Partial<Static<T>>;\n  /**\n   * Number of columns for the props form\n   */\n  columns?: number;\n  /**\n   * Render function that receives the current props values\n   */\n  children: (props: Static<T>) => ReactNode;\n  /**\n   * Additional props for the MacWindow container\n   */\n  windowProps?: Partial<MacWindowProps>;\n}\n\n/**\n * Showcase component for demonstrating UI components with interactive props configuration.\n * Uses TypeForm to render a form based on the props schema and displays the component preview.\n */\nconst Showcase = <T extends TObject>({\n  title,\n  schema,\n  initialValues,\n  columns = 3,\n  children,\n  windowProps,\n}: ShowcaseProps<T>) => {\n  const [values, setValues] = useState<Record<string, any>>(\n    initialValues ?? {},\n  );\n\n  const form = useForm(\n    {\n      schema,\n      initialValues,\n      handler: (values) => {\n        setValues(values as Record<string, any>);\n      },\n      onChange: (key, value) => {\n        return form.submit();\n      },\n    },\n    [schema],\n  );\n\n  return (\n    <Flex flex={1} px={\"md\"} gap={\"md\"}>\n      <Flex\n        flex={1}\n        bg={ui.colors.background}\n        h={\"100%\"}\n        justify=\"center\"\n        align=\"flex-start\"\n        style={{ flex: 1, minWidth: 0, overflow: \"auto\" }}\n      >\n        <MacWindow title={title} {...windowProps}>\n          {children(values as Static<T>)}\n        </MacWindow>\n      </Flex>\n\n      <Flex\n        h={\"100%\"}\n        style={{\n          flex: \"0 0 300px\",\n          overflow: \"auto\",\n        }}\n      >\n        <Card shadow=\"sm\" radius=\"md\">\n          <Card.Section withBorder py={\"xs\"} inheritPadding>\n            <Text size={\"xs\"} fw={500}>\n              {title} Props\n            </Text>\n          </Card.Section>\n\n          <Card.Section p={\"sm\"}>\n            <TypeForm\n              form={form}\n              columns={{ base: 1, xs: 1, sm: 1, md: 1, lg: 1, xl: 1 }}\n              skipSubmitButton\n              skipFormElement\n            />\n          </Card.Section>\n        </Card>\n      </Flex>\n    </Flex>\n  );\n};\n\nexport default Showcase;\n"],"mappings":"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"}