npm - @alepha/ui - Versions diffs - 0.16.2 → 0.17.1 - Mend

@alepha/ui 0.16.2 → 0.17.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (175) hide show

package/dist/demo/{DemoLogin-DSzP0Lkv.js → DemoLogin-DjJ9314c.js} RENAMED Viewed

@@ -1,16 +1,16 @@
-import { t as Showcase } from "./Showcase-C9btr_SJ.js";
-import { n as IconGithub, t as IconGoogle } from "./IconGoogle-CTeZyrek.js";
+import { n as IconGithub, t as IconGoogle } from "./IconGoogle-Ch1m3Uzl.js";
+import { t as Showcase } from "./Showcase-BzoXNlCn.js";
 import { ActionButton, Control, capitalize } from "@alepha/ui";
 import { AlephaError, t } from "alepha";
 import { IconLock, IconUser } from "@tabler/icons-react";
 import { useRouter } from "alepha/react/router";
-import { Card, Flex, Group, Image, Stack, Text, Title } from "@mantine/core";
+import { Card, Flex, Image, Text as Text$1, Title } from "@mantine/core";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useI18n } from "alepha/react/i18n";
-import { useMemo } from "react";
-import { FormValidationError, useForm } from "alepha/react/form";
 import { useAuth } from "alepha/react/auth";
+import { FormValidationError, useForm } from "alepha/react/form";
+import { useI18n } from "alepha/react/i18n";
 import { HttpError } from "alepha/server";
+import { useMemo } from "react";
 //#region ../../src/auth/components/Login.tsx
 const Login = (props) => {
@@ -77,17 +77,20 @@ const Login = (props) => {
 		flex: 1,
 		justify: "center",
 		align: "center",
-		children: /* @__PURE__ */ jsxs(Stack, {
+		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(Stack, {
+				children: /* @__PURE__ */ jsxs(Flex, {
+					direction: "column",
 					gap: "md",
 					children: [
-						(settings.logoUrl || settings.displayName || settings.description) && /* @__PURE__ */ jsxs(Stack, {
+						(settings.logoUrl || settings.displayName || settings.description) && /* @__PURE__ */ jsxs(Flex, {
+							direction: "column",
 							gap: "xs",
 							align: "center",
 							mb: "xs",
@@ -104,7 +107,7 @@ const Login = (props) => {
 									ta: "center",
 									children: settings.displayName
 								}),
-								settings.description && /* @__PURE__ */ jsx(Text, {
+								settings.description && /* @__PURE__ */ jsx(Text$1, {
 									size: "sm",
 									c: "dimmed",
 									ta: "center",
@@ -114,7 +117,8 @@ const Login = (props) => {
 						}),
 						credentialsProvider && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("form", {
 							...form.props,
-							children: /* @__PURE__ */ jsxs(Stack, {
+							children: /* @__PURE__ */ jsxs(Flex, {
+								direction: "column",
 								flex: 1,
 								gap: "md",
 								children: [
@@ -137,7 +141,7 @@ const Login = (props) => {
 									})
 								]
 							})
-						}), settings.resetPasswordAllowed && /* @__PURE__ */ jsx(Text, {
+						}), settings.resetPasswordAllowed && /* @__PURE__ */ jsx(Text$1, {
 							size: "sm",
 							ta: "center",
 							children: /* @__PURE__ */ jsx(ActionButton, {
@@ -146,7 +150,7 @@ const Login = (props) => {
 								children: tr("loginForgotPassword")
 							})
 						})] }),
-						showOrDivider && /* @__PURE__ */ jsxs(Group, {
+						showOrDivider && /* @__PURE__ */ jsxs(Flex, {
 							align: "center",
 							justify: "center",
 							gap: "md",
@@ -156,7 +160,7 @@ const Login = (props) => {
 									h: "1px",
 									bg: "var(--alepha-border)"
 								}),
-								/* @__PURE__ */ jsx(Text, {
+								/* @__PURE__ */ jsx(Text$1, {
 									size: "xs",
 									c: "dimmed",
 									children: tr("loginOr")
@@ -168,7 +172,8 @@ const Login = (props) => {
 								})
 							]
 						}),
-						externalLoginMethods.length > 0 && /* @__PURE__ */ jsx(Stack, {
+						externalLoginMethods.length > 0 && /* @__PURE__ */ jsx(Flex, {
+							direction: "column",
 							gap: "sm",
 							children: externalLoginMethods.map((method) => /* @__PURE__ */ jsx(ActionButton, {
 								variant: "default",
@@ -180,7 +185,7 @@ const Login = (props) => {
 								children: tr("loginContinueWith", { args: [capitalize(method.name)] })
 							}, method.type))
 						}),
-						settings.registrationAllowed && /* @__PURE__ */ jsxs(Text, {
+						settings.registrationAllowed && /* @__PURE__ */ jsxs(Text$1, {
 							size: "sm",
 							ta: "center",
 							children: [
@@ -325,4 +330,4 @@ const DemoLogin = () => {
 //#endregion
 export { DemoLogin as default };
-//# sourceMappingURL=DemoLogin-DSzP0Lkv.js.map
+//# sourceMappingURL=DemoLogin-DjJ9314c.js.map

package/dist/demo/DemoLogin-DjJ9314c.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"DemoLogin-DjJ9314c.js","names":["Text"],"sources":["../../src/auth/components/Login.tsx","../../src/demo/components/auth/DemoLogin.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","import { t } from \"alepha\";\nimport type { RealmConfig } from \"alepha/api/users\";\nimport Login from \"../../../auth/components/Login.tsx\";\nimport Showcase from \"../shared/Showcase.tsx\";\n\nconst showcaseSchema = t.object({\n showCredentials: t.boolean({\n title: \"Credentials\",\n default: true,\n $control: { switch: true },\n }),\n showGoogleOAuth: t.boolean({\n title: \"Google OAuth\",\n default: true,\n $control: { switch: true },\n }),\n showGithubOAuth: t.boolean({\n title: \"GitHub OAuth\",\n default: false,\n $control: { switch: true },\n }),\n usernameEnabled: t.boolean({\n title: \"Username Login\",\n default: true,\n $control: { switch: true },\n }),\n emailEnabled: t.boolean({\n title: \"Email Login\",\n default: true,\n $control: { switch: true },\n }),\n phoneEnabled: t.boolean({\n title: \"Phone Login\",\n default: false,\n $control: { switch: true },\n }),\n registrationAllowed: t.boolean({\n title: \"Show Sign Up\",\n default: true,\n $control: { switch: true },\n }),\n resetPasswordAllowed: t.boolean({\n title: \"Forgot Password\",\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 showCredentials: boolean;\n showGoogleOAuth: boolean;\n showGithubOAuth: boolean;\n usernameEnabled: boolean;\n emailEnabled: boolean;\n phoneEnabled: boolean;\n registrationAllowed: boolean;\n resetPasswordAllowed: boolean;\n showBranding: boolean;\n}): RealmConfig => {\n const authMethods: RealmConfig[\"authenticationMethods\"] = [];\n\n if (props.showCredentials) {\n authMethods.push({ name: \"credentials\", type: \"CREDENTIALS\" });\n }\n if (props.showGoogleOAuth) {\n authMethods.push({ name: \"google\", type: \"OAUTH2\" });\n }\n if (props.showGithubOAuth) {\n authMethods.push({ name: \"github\", type: \"OAUTH2\" });\n }\n\n return {\n realmName: \"demo\",\n authenticationMethods: authMethods,\n settings: {\n displayName: props.showBranding ? \"Demo App\" : undefined,\n description: props.showBranding ? \"Sign in to continue\" : undefined,\n logoUrl: undefined,\n registrationAllowed: props.registrationAllowed,\n emailEnabled: props.emailEnabled,\n emailRequired: false,\n usernameEnabled: props.usernameEnabled,\n usernameRegExp: \"^[a-zA-Z0-9_]{3,30}$\",\n usernameRequired: false,\n phoneEnabled: props.phoneEnabled,\n phoneRequired: false,\n verifyEmailRequired: false,\n verifyPhoneRequired: false,\n firstNameLastNameEnabled: false,\n firstNameLastNameRequired: false,\n resetPasswordAllowed: props.resetPasswordAllowed,\n adminEmails: [],\n adminUsernames: [],\n passwordPolicy: {\n minLength: 8,\n requireUppercase: true,\n requireLowercase: true,\n requireNumbers: true,\n requireSpecialCharacters: false,\n },\n },\n };\n};\n\nconst DemoLogin = () => {\n return (\n <Showcase\n title=\"Login\"\n schema={showcaseSchema}\n initialValues={{\n showCredentials: true,\n showGoogleOAuth: true,\n showGithubOAuth: false,\n usernameEnabled: true,\n emailEnabled: true,\n phoneEnabled: false,\n registrationAllowed: true,\n resetPasswordAllowed: true,\n showBranding: true,\n }}\n columns={1}\n >\n {(props) => <Login realmConfig={buildRealmConfig(props)} />}\n </Showcase>\n );\n};\n\nexport default DemoLogin;\n"],"mappings":";;;;;;;;;;;;;;;AAoBA,MAAM,SAAS,UAAsB;CACnC,MAAM,OAAO,SAAS;CACtB,MAAM,SAAS,WAAuB;CACtC,MAAM,EAAE,OAAO,SAAyB;CACxC,MAAM,WAAW,OAAO,MAAM,KAAK;CAEnC,MAAM,sBAAsB,MAAM,YAAY,sBAAsB,MACjE,OAAO,GAAG,SAAS,cACrB;CAED,MAAM,WAAW,MAAM,YAAY;CAGnC,MAAM,eAAe,cAAc;EACjC,MAAM,UAAU,EAAE;AAClB,MAAI,SAAS,oBAAoB,MAAO,SAAQ,KAAK,WAAW;AAChE,MAAI,SAAS,iBAAiB,MAAO,SAAQ,KAAK,QAAQ;AAC1D,MAAI,SAAS,iBAAiB,KAAM,SAAQ,KAAK,QAAQ;AACzD,SAAO;IACN,CAAC,SAAS,CAAC;CAGd,MAAM,kBAAkB,cAAc;AACpC,MAAI,aAAa,WAAW,EAAG,QAAO,GAAG,gBAAgB;AACzD,MAAI,aAAa,WAAW,GAAG;AAC7B,OAAI,aAAa,OAAO,WAAY,QAAO,GAAG,gBAAgB;AAC9D,OAAI,aAAa,OAAO,QAAS,QAAO,GAAG,aAAa;AACxD,OAAI,aAAa,OAAO,QAAS,QAAO,GAAG,aAAa;;EAE1D,MAAM,SAAS,aAAa,KAAK,MAAM;AACrC,OAAI,MAAM,WAAY,QAAO,GAAG,gBAAgB,CAAC,aAAa;AAC9D,OAAI,MAAM,QAAS,QAAO,GAAG,aAAa,CAAC,aAAa;AACxD,OAAI,MAAM,QAAS,QAAO,GAAG,aAAa,CAAC,aAAa;AACxD,UAAO;IACP;AACF,SAAO,WACL,GAAG,OAAO,MAAM,GAAG,GAAG,CAAC,KAAK,KAAK,CAAC,MAAM,OAAO,OAAO,SAAS,KAChE;IACA,CAAC,cAAc,GAAG,CAAC;CAEtB,MAAM,OAAO,QAAQ;EACnB,QAAQ,EAAE,OAAO;GACf,YAAY,EAAE,OAAO,EACnB,WAAW,GACZ,CAAC;GACF,UAAU,EAAE,OAAO,EACjB,WAAW,SAAS,gBAAgB,aAAa,GAClD,CAAC;GACH,CAAC;EACF,SAAS,OAAO,SAAS;AACvB,OAAI,CAAC,oBACH,OAAM,IAAI,YAAY,sCAAsC;AAG9D,OAAI;AACF,UAAM,KAAK,MAAM,oBAAoB,MAAM;KACzC,UAAU,KAAK;KACf,UAAU,KAAK;KACf,OAAO,MAAM,YAAY;KAC1B,CAAC;AACF,UAAM,OAAO,KAAK,OAAO,MAAM,KAAK,IAAI;YACjC,OAAO;AACd,QACE,iBAAiB,aACjB,MAAM,UAAU,0BAEhB,OAAM,IAAI,oBAAoB;KAC5B,SAAS;KACT,MAAM;KACP,CAAC;AAEJ,UAAM;;;EAGX,CAAC;CAEF,MAAM,4BAA4B;AAChC,MAAI,aAAa,SAAS,QAAQ,CAChC,QAAO;AAET,MAAI,aAAa,SAAS,WAAW,CACnC,QAAO;AAET,MAAI,aAAa,SAAS,QAAQ,CAChC,QAAO;AAET,SAAO;;CAGT,MAAM,uBAAuB,MAAM,YAAY,sBAAsB,QAClE,WAAW,OAAO,SAAS,cAC7B;CAED,MAAM,gBAAgB,uBAAuB,qBAAqB,SAAS;AAE3E,QACE,oBAAC;EAAK,MAAM;EAAG,SAAS;EAAU,OAAO;YACvC,qBAAC;GAAK,WAAU;GAAS,KAAK;GAAM,GAAG;cACrC,oBAAC;IAAK;IAAW,GAAG;IAAM,IAAI;cAC5B,qBAAC;KAAK,WAAU;KAAS,KAAK;;OAE1B,SAAS,WACT,SAAS,eACT,SAAS,gBACT,qBAAC;OAAK,WAAU;OAAS,KAAK;OAAM,OAAM;OAAS,IAAG;;QACnD,SAAS,WACR,oBAAC;SACC,KAAK,SAAS;SACd,KAAK,SAAS,eAAe,MAAM,YAAY;SAC/C,GAAG;SACH,GAAE;SACF,KAAI;UACJ;QAEH,SAAS,eACR,oBAAC;SAAM,OAAO;SAAG,IAAG;mBACjB,SAAS;UACJ;QAET,SAAS,eACR,oBAACA;SAAK,MAAK;SAAK,GAAE;SAAS,IAAG;mBAC3B,SAAS;UACL;;QAEJ;MAIR,uBACC,4CACE,oBAAC;OAAK,GAAI,KAAK;iBACb,qBAAC;QAAK,WAAU;QAAS,MAAM;QAAG,KAAK;;SACrC,oBAAC;UACC,OAAO;UACP,OAAO,KAAK,MAAM;UAClB,MAAM;UACN,MAAM,EACJ,cAAc,qBAAqB,EACpC;WACD;SACF,oBAAC;UACC,OAAO,GAAG,gBAAgB;UAC1B,OAAO,KAAK,MAAM;UAClB,MAAM;UACN,UAAU,EACR,cAAc,oBACf;WACD;SACF,oBAAC;UAAa,SAAS;UAAgB;oBACpC,GAAG,cAAc;WACL;;SACV;QACF,EACN,SAAS,wBACR,oBAACA;OAAK,MAAK;OAAK,IAAG;iBACjB,oBAAC;QACC,MAAM,OAAO,KAAK,iBAAiB,EACjC,OAAO,EAAE,OAAO,MAAM,YAAY,WAAW,EAC9C,CAAC;QACF,aAAa,EAAE,SAAS,MAAM;kBAE7B,GAAG,sBAAsB;SACb;QACV,IAER;MAIJ,iBACC,qBAAC;OAAK,OAAM;OAAS,SAAQ;OAAS,KAAK;;QACzC,oBAAC;SAAK,MAAM;SAAG,GAAG;SAAO,IAAI;UAA0B;QACvD,oBAACA;SAAK,MAAK;SAAK,GAAG;mBAChB,GAAG,UAAU;UACT;QACP,oBAAC;SAAK,MAAM;SAAG,GAAG;SAAO,IAAI;UAA0B;;QAClD;MAIR,qBAAqB,SAAS,KAC7B,oBAAC;OAAK,WAAU;OAAS,KAAK;iBAC3B,qBAAqB,KAAK,WACzB,oBAAC;QACC,SAAS;QAET,aAAa,YAAY,OAAO,KAAK,aAAa,CAAC;QACnD,eACE,KAAK,MAAM,OAAO,MAAM;SACtB;SACA,OAAO,MAAM,YAAY;SAC1B,CAAC;kBAGH,GAAG,qBAAqB,EACvB,MAAM,CAAC,WAAW,OAAO,KAAK,CAAC,EAChC,CAAC;UAXG,OAAO,KAYC,CACf;QACG;MAIR,SAAS,uBACR,qBAACA;OAAK,MAAK;OAAK,IAAG;;QAChB,GAAG,iBAAiB;QAAE;QACvB,oBAAC;SACC,MAAM,OAAO,KAAK,YAAY,EAC5B,OAAO,EAAE,OAAO,MAAM,YAAY,WAAW,EAC9C,CAAC;SACF,aAAa,EAAE,SAAS,MAAM;mBAE7B,GAAG,cAAc;UACL;;QACV;;MAEJ;KACF,EACP,oBAAC;IAAa,SAAS;IAAU,MAAM;cACpC,GAAG,cAAc;KACL;IACV;GACF;;AAMX,MAAM,eAAe,SAAiB;AACpC,KAAI,SAAS,SACX,QAAO,oBAAC,eAAa;AAGvB,KAAI,SAAS,SACX,QAAO,oBAAC,eAAa;;;;;ACzPzB,MAAM,iBAAiB,EAAE,OAAO;CAC9B,iBAAiB,EAAE,QAAQ;EACzB,OAAO;EACP,SAAS;EACT,UAAU,EAAE,QAAQ,MAAM;EAC3B,CAAC;CACF,iBAAiB,EAAE,QAAQ;EACzB,OAAO;EACP,SAAS;EACT,UAAU,EAAE,QAAQ,MAAM;EAC3B,CAAC;CACF,iBAAiB,EAAE,QAAQ;EACzB,OAAO;EACP,SAAS;EACT,UAAU,EAAE,QAAQ,MAAM;EAC3B,CAAC;CACF,iBAAiB,EAAE,QAAQ;EACzB,OAAO;EACP,SAAS;EACT,UAAU,EAAE,QAAQ,MAAM;EAC3B,CAAC;CACF,cAAc,EAAE,QAAQ;EACtB,OAAO;EACP,SAAS;EACT,UAAU,EAAE,QAAQ,MAAM;EAC3B,CAAC;CACF,cAAc,EAAE,QAAQ;EACtB,OAAO;EACP,SAAS;EACT,UAAU,EAAE,QAAQ,MAAM;EAC3B,CAAC;CACF,qBAAqB,EAAE,QAAQ;EAC7B,OAAO;EACP,SAAS;EACT,UAAU,EAAE,QAAQ,MAAM;EAC3B,CAAC;CACF,sBAAsB,EAAE,QAAQ;EAC9B,OAAO;EACP,SAAS;EACT,UAAU,EAAE,QAAQ,MAAM;EAC3B,CAAC;CACF,cAAc,EAAE,QAAQ;EACtB,OAAO;EACP,SAAS;EACT,UAAU,EAAE,QAAQ,MAAM;EAC3B,CAAC;CACH,CAAC;AAEF,MAAM,oBAAoB,UAUP;CACjB,MAAM,cAAoD,EAAE;AAE5D,KAAI,MAAM,gBACR,aAAY,KAAK;EAAE,MAAM;EAAe,MAAM;EAAe,CAAC;AAEhE,KAAI,MAAM,gBACR,aAAY,KAAK;EAAE,MAAM;EAAU,MAAM;EAAU,CAAC;AAEtD,KAAI,MAAM,gBACR,aAAY,KAAK;EAAE,MAAM;EAAU,MAAM;EAAU,CAAC;AAGtD,QAAO;EACL,WAAW;EACX,uBAAuB;EACvB,UAAU;GACR,aAAa,MAAM,eAAe,aAAa;GAC/C,aAAa,MAAM,eAAe,wBAAwB;GAC1D,SAAS;GACT,qBAAqB,MAAM;GAC3B,cAAc,MAAM;GACpB,eAAe;GACf,iBAAiB,MAAM;GACvB,gBAAgB;GAChB,kBAAkB;GAClB,cAAc,MAAM;GACpB,eAAe;GACf,qBAAqB;GACrB,qBAAqB;GACrB,0BAA0B;GAC1B,2BAA2B;GAC3B,sBAAsB,MAAM;GAC5B,aAAa,EAAE;GACf,gBAAgB,EAAE;GAClB,gBAAgB;IACd,WAAW;IACX,kBAAkB;IAClB,kBAAkB;IAClB,gBAAgB;IAChB,0BAA0B;IAC3B;GACF;EACF;;AAGH,MAAM,kBAAkB;AACtB,QACE,oBAAC;EACC,OAAM;EACN,QAAQ;EACR,eAAe;GACb,iBAAiB;GACjB,iBAAiB;GACjB,iBAAiB;GACjB,iBAAiB;GACjB,cAAc;GACd,cAAc;GACd,qBAAqB;GACrB,sBAAsB;GACtB,cAAc;GACf;EACD,SAAS;aAEP,UAAU,oBAAC,SAAM,aAAa,iBAAiB,MAAM,GAAI;GAClD"}

package/dist/demo/{DemoRegister-DavFBsCz.js → DemoRegister-DzkJ5M83.js} RENAMED Viewed

@@ -1,15 +1,15 @@
-import { t as Showcase } from "./Showcase-C9btr_SJ.js";
-import { n as IconGithub, t as IconGoogle } from "./IconGoogle-CTeZyrek.js";
+import { n as IconGithub, t as IconGoogle } from "./IconGoogle-Ch1m3Uzl.js";
+import { t as Showcase } from "./Showcase-BzoXNlCn.js";
 import { ActionButton, Control, capitalize } from "@alepha/ui";
 import { TypeBoxError, t } from "alepha";
 import { IconAlertCircle, IconLock, IconMail, IconPhone, IconUser } from "@tabler/icons-react";
 import { useRouter } from "alepha/react/router";
-import { Alert, Card, Flex, Group, Image, PinInput, Stack, Text, Title } from "@mantine/core";
+import { Alert, Card, Flex, Image, PinInput, Text as Text$1, Title } from "@mantine/core";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useAuth } from "alepha/react/auth";
+import { useForm } from "alepha/react/form";
 import { useI18n } from "alepha/react/i18n";
 import { useMemo, useState } from "react";
-import { useForm } from "alepha/react/form";
-import { useAuth } from "alepha/react/auth";
 import { useClient } from "alepha/react";
 //#region ../../src/auth/components/Register.tsx
@@ -115,23 +115,25 @@ const Register = (props) => {
 		flex: 1,
 		justify: "center",
 		align: "center",
-		children: /* @__PURE__ */ jsx(Stack, {
+		children: /* @__PURE__ */ jsx(Flex, {
+			direction: "column",
 			gap: "sm",
 			w: 360,
 			children: /* @__PURE__ */ jsx(Card, {
 				withBorder: true,
 				p: "lg",
 				bg: "var(--alepha-elevated)",
-				children: /* @__PURE__ */ jsxs(Stack, {
+				children: /* @__PURE__ */ jsxs(Flex, {
+					direction: "column",
 					gap: "md",
 					children: [
-						/* @__PURE__ */ jsx(Text, {
+						/* @__PURE__ */ jsx(Text$1, {
 							size: "lg",
 							fw: 500,
 							ta: "center",
 							children: tr("registerVerifyTitle") ?? "Verify your account"
 						}),
-						/* @__PURE__ */ jsx(Text, {
+						/* @__PURE__ */ jsx(Text$1, {
 							size: "sm",
 							c: "dimmed",
 							ta: "center",
@@ -141,14 +143,15 @@ const Register = (props) => {
 							variant: "light",
 							color: "red",
 							icon: /* @__PURE__ */ jsx(IconAlertCircle, {}),
-							children: /* @__PURE__ */ jsx(Text, {
+							children: /* @__PURE__ */ jsx(Text$1, {
 								size: "sm",
 								children: verificationError
 							})
 						}),
-						registrationState.intent.expectEmailVerification && /* @__PURE__ */ jsxs(Stack, {
+						registrationState.intent.expectEmailVerification && /* @__PURE__ */ jsxs(Flex, {
+							direction: "column",
 							gap: "xs",
-							children: [/* @__PURE__ */ jsx(Text, {
+							children: [/* @__PURE__ */ jsx(Text$1, {
 								size: "sm",
 								fw: 500,
 								children: tr("registerEmailCode")
@@ -164,9 +167,10 @@ const Register = (props) => {
 								})
 							})]
 						}),
-						registrationState.intent.expectPhoneVerification && /* @__PURE__ */ jsxs(Stack, {
+						registrationState.intent.expectPhoneVerification && /* @__PURE__ */ jsxs(Flex, {
+							direction: "column",
 							gap: "xs",
-							children: [/* @__PURE__ */ jsx(Text, {
+							children: [/* @__PURE__ */ jsx(Text$1, {
 								size: "sm",
 								fw: 500,
 								children: tr("registerPhoneCode")
@@ -208,16 +212,19 @@ const Register = (props) => {
 		flex: 1,
 		justify: "center",
 		align: "center",
-		children: /* @__PURE__ */ jsxs(Stack, {
+		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(Stack, {
+				children: /* @__PURE__ */ jsxs(Flex, {
+					direction: "column",
 					gap: "md",
-					children: [(settings.logoUrl || settings.displayName || settings.description) && /* @__PURE__ */ jsxs(Stack, {
+					children: [(settings.logoUrl || settings.displayName || settings.description) && /* @__PURE__ */ jsxs(Flex, {
+						direction: "column",
 						gap: "xs",
 						align: "center",
 						mb: "xs",
@@ -234,7 +241,7 @@ const Register = (props) => {
 								ta: "center",
 								children: settings.displayName
 							}),
-							settings.description && /* @__PURE__ */ jsx(Text, {
+							settings.description && /* @__PURE__ */ jsx(Text$1, {
 								size: "sm",
 								c: "dimmed",
 								ta: "center",
@@ -245,7 +252,7 @@ const Register = (props) => {
 						variant: "light",
 						color: "yellow",
 						icon: /* @__PURE__ */ jsx(IconAlertCircle, {}),
-						children: /* @__PURE__ */ jsx(Text, {
+						children: /* @__PURE__ */ jsx(Text$1, {
 							size: "sm",
 							children: tr("registerDisabled")
 						})
@@ -255,7 +262,8 @@ const Register = (props) => {
 					})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
 						credentialsProvider && /* @__PURE__ */ jsx("form", {
 							...form.props,
-							children: /* @__PURE__ */ jsxs(Stack, {
+							children: /* @__PURE__ */ jsxs(Flex, {
+								direction: "column",
 								flex: 1,
 								gap: "md",
 								children: [
@@ -298,7 +306,7 @@ const Register = (props) => {
 								]
 							})
 						}),
-						showOrDivider && /* @__PURE__ */ jsxs(Group, {
+						showOrDivider && /* @__PURE__ */ jsxs(Flex, {
 							align: "center",
 							justify: "center",
 							gap: "md",
@@ -308,7 +316,7 @@ const Register = (props) => {
 									h: "1px",
 									bg: "var(--alepha-border)"
 								}),
-								/* @__PURE__ */ jsx(Text, {
+								/* @__PURE__ */ jsx(Text$1, {
 									size: "xs",
 									c: "dimmed",
 									children: tr("registerOr")
@@ -320,7 +328,8 @@ const Register = (props) => {
 								})
 							]
 						}),
-						externalMethods.length > 0 && /* @__PURE__ */ jsx(Stack, {
+						externalMethods.length > 0 && /* @__PURE__ */ jsx(Flex, {
+							direction: "column",
 							gap: "sm",
 							children: externalMethods.map((method) => /* @__PURE__ */ jsx(ActionButton, {
 								variant: "default",
@@ -332,7 +341,7 @@ const Register = (props) => {
 								children: tr("registerContinueWith", { args: [capitalize(method.name)] })
 							}, method.type))
 						}),
-						/* @__PURE__ */ jsxs(Text, {
+						/* @__PURE__ */ jsxs(Text$1, {
 							size: "sm",
 							ta: "center",
 							children: [
@@ -489,4 +498,4 @@ const DemoRegister = () => {
 //#endregion
 export { DemoRegister as default };
-//# sourceMappingURL=DemoRegister-DavFBsCz.js.map
+//# sourceMappingURL=DemoRegister-DzkJ5M83.js.map

package/dist/demo/DemoRegister-DzkJ5M83.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"DemoRegister-DzkJ5M83.js","names":["Text"],"sources":["../../src/auth/components/Register.tsx","../../src/demo/components/auth/DemoRegister.tsx"],"sourcesContent":["import { ActionButton, Control, capitalize } from \"@alepha/ui\";\nimport { Alert, Card, Flex, Image, PinInput, Text, Title } from \"@mantine/core\";\nimport {\n IconAlertCircle,\n IconLock,\n IconMail,\n IconPhone,\n IconUser,\n} from \"@tabler/icons-react\";\nimport { TypeBoxError, t } from \"alepha\";\nimport type {\n RealmConfig,\n RegistrationIntentResponse,\n UserController,\n} from \"alepha/api/users\";\nimport { useClient } from \"alepha/react\";\nimport { useAuth } from \"alepha/react/auth\";\nimport { useForm } from \"alepha/react/form\";\nimport { useI18n } from \"alepha/react/i18n\";\nimport { useRouter } from \"alepha/react/router\";\nimport { useMemo, useState } 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 RegisterProps {\n realmConfig: RealmConfig;\n}\n\ntype RegistrationPhase = \"form\" | \"verification\";\n\ninterface RegistrationState {\n phase: RegistrationPhase;\n intent?: RegistrationIntentResponse;\n credentials?: {\n identifier: string;\n password: string;\n };\n}\n\nconst Register = (props: RegisterProps) => {\n const auth = useAuth();\n const userCtrl = useClient<UserController>();\n const router = useRouter<AuthRouter>();\n const { tr } = useI18n<AuthI18n, \"en\">();\n const redirect = router.query.r || \"/\";\n\n const [registrationState, setRegistrationState] = useState<RegistrationState>(\n {\n phase: \"form\",\n },\n );\n const [emailCode, setEmailCode] = useState(\"\");\n const [phoneCode, setPhoneCode] = useState(\"\");\n const [verificationError, setVerificationError] = useState<string | null>(\n null,\n );\n const [isSubmitting, setIsSubmitting] = useState(false);\n\n const credentialsProvider = props.realmConfig.authenticationMethods.find(\n (it) => it.type === \"CREDENTIALS\",\n );\n\n const settings = props.realmConfig.settings || {};\n const isRegistrationAllowed = settings.registrationAllowed !== false;\n\n const registerSchema = useMemo(() => {\n const registerSchema = t.object({\n username: t.optional(\n t.text({\n trim: true,\n pattern: settings.usernameRegExp,\n }),\n ),\n email: t.optional(t.email()),\n phoneNumber: t.optional(t.e164()),\n password: t.string({ minLength: 8 }),\n confirmPassword: t.string({ minLength: 8 }),\n });\n\n const required = registerSchema.required as string[];\n\n if (settings.usernameRequired) required.push(\"username\");\n if (settings.emailRequired) required.push(\"email\");\n if (settings.phoneRequired) required.push(\"phoneNumber\");\n\n return registerSchema;\n }, []);\n\n const form = useForm({\n schema: registerSchema,\n handler: async (data) => {\n if (data.password !== data.confirmPassword) {\n throw new TypeBoxError({\n message: \"Passwords do not match\",\n instancePath: \"/confirmPassword\",\n keyword: \"not\",\n schemaPath: \"\",\n params: {},\n });\n }\n\n // Phase 1: Create registration intent\n const intent = await userCtrl.createRegistrationIntent({\n query: { userRealmName: props.realmConfig.realmName },\n body: {\n username: data.username,\n email: data.email,\n phoneNumber: data.phoneNumber,\n password: data.password,\n },\n });\n\n const identifier = data.username ?? data.email ?? data.phoneNumber;\n\n // Check if verification is needed\n if (\n intent.expectEmailVerification ||\n intent.expectPhoneVerification ||\n intent.expectCaptcha\n ) {\n // Move to verification phase\n setRegistrationState({\n phase: \"verification\",\n intent,\n credentials: identifier\n ? { identifier, password: data.password }\n : undefined,\n });\n return;\n }\n\n // No verification needed - complete registration immediately\n await userCtrl.createUserFromIntent({\n body: { intentId: intent.intentId },\n });\n\n // Auto-login after registration\n if (identifier && credentialsProvider) {\n await auth.login(credentialsProvider.name, {\n username: identifier,\n password: data.password,\n realm: props.realmConfig.realmName,\n });\n }\n\n await router.push(router.query.r || \"/\");\n },\n });\n\n const handleVerificationSubmit = async () => {\n if (!registrationState.intent) return;\n\n setIsSubmitting(true);\n setVerificationError(null);\n\n try {\n // Phase 2: Complete registration with verification codes\n await userCtrl.createUserFromIntent({\n body: {\n intentId: registrationState.intent.intentId,\n emailCode: registrationState.intent.expectEmailVerification\n ? emailCode\n : undefined,\n phoneCode: registrationState.intent.expectPhoneVerification\n ? phoneCode\n : undefined,\n },\n });\n\n // Auto-login after registration\n if (registrationState.credentials && credentialsProvider) {\n await auth.login(credentialsProvider.name, {\n username: registrationState.credentials.identifier,\n password: registrationState.credentials.password,\n realm: props.realmConfig.realmName,\n });\n }\n\n await router.push(router.query.r || \"/\");\n } catch (error) {\n setVerificationError(\n error instanceof Error ? error.message : \"Verification failed\",\n );\n } finally {\n setIsSubmitting(false);\n }\n };\n\n const canSubmitVerification = () => {\n if (!registrationState.intent) return false;\n\n if (\n registrationState.intent.expectEmailVerification &&\n emailCode.length !== 6\n ) {\n return false;\n }\n\n if (\n registrationState.intent.expectPhoneVerification &&\n phoneCode.length !== 6\n ) {\n return false;\n }\n\n return true;\n };\n\n // Verification phase UI\n if (registrationState.phase === \"verification\" && registrationState.intent) {\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 <Text size=\"lg\" fw={500} ta=\"center\">\n {tr(\"registerVerifyTitle\") ?? \"Verify your account\"}\n </Text>\n <Text size=\"sm\" c=\"dimmed\" ta=\"center\">\n {tr(\"registerVerifyDescription\") ??\n \"Please enter the verification code(s) sent to you.\"}\n </Text>\n\n {verificationError && (\n <Alert variant=\"light\" color=\"red\" icon={<IconAlertCircle />}>\n <Text size=\"sm\">{verificationError}</Text>\n </Alert>\n )}\n\n {registrationState.intent.expectEmailVerification && (\n <Flex direction=\"column\" gap={\"xs\"}>\n <Text size=\"sm\" fw={500}>\n {tr(\"registerEmailCode\")}\n </Text>\n <Flex justify=\"center\">\n <PinInput\n length={6}\n value={emailCode}\n onChange={setEmailCode}\n type=\"number\"\n oneTimeCode\n aria-label=\"Email verification code\"\n />\n </Flex>\n </Flex>\n )}\n\n {registrationState.intent.expectPhoneVerification && (\n <Flex direction=\"column\" gap={\"xs\"}>\n <Text size=\"sm\" fw={500}>\n {tr(\"registerPhoneCode\")}\n </Text>\n <Flex justify=\"center\">\n <PinInput\n length={6}\n value={phoneCode}\n onChange={setPhoneCode}\n type=\"number\"\n oneTimeCode\n aria-label=\"Phone verification code\"\n />\n </Flex>\n </Flex>\n )}\n\n <ActionButton\n color={\"blue\"}\n onClick={handleVerificationSubmit}\n loading={isSubmitting}\n disabled={!canSubmitVerification()}\n >\n {tr(\"registerVerifySubmit\")}\n </ActionButton>\n\n <ActionButton\n variant=\"subtle\"\n onClick={() =>\n setRegistrationState({ phase: \"form\", intent: undefined })\n }\n >\n {tr(\"registerVerifyBack\") ?? \"Back to registration\"}\n </ActionButton>\n </Flex>\n </Card>\n </Flex>\n </Flex>\n );\n }\n\n // External login methods\n const externalMethods = props.realmConfig.authenticationMethods.filter(\n (method) => method.type !== \"CREDENTIALS\",\n );\n\n const showOrDivider = credentialsProvider && externalMethods.length > 0;\n\n // Registration form phase UI\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 {!isRegistrationAllowed ? (\n <>\n <Alert\n variant=\"light\"\n color=\"yellow\"\n icon={<IconAlertCircle />}\n >\n <Text size=\"sm\">{tr(\"registerDisabled\")}</Text>\n </Alert>\n <ActionButton\n href={router.path(\"login\", {\n query: { realm: props.realmConfig.realmName },\n })}\n >\n {tr(\"registerBackToSignIn\")}\n </ActionButton>\n </>\n ) : (\n <>\n {/* Credentials registration form */}\n {credentialsProvider && (\n <form {...form.props}>\n <Flex direction=\"column\" flex={1} gap={\"md\"}>\n {settings.usernameEnabled !== false &&\n form.input.username && (\n <Control\n title={tr(\"registerUsername\")}\n input={form.input.username}\n icon={<IconUser />}\n text={{\n autoComplete: \"username\",\n }}\n />\n )}\n {settings.emailEnabled !== false && form.input.email && (\n <Control\n title={tr(\"registerEmail\")}\n input={form.input.email}\n icon={<IconMail />}\n text={{\n autoComplete: \"email\",\n }}\n />\n )}\n {settings.phoneEnabled === true &&\n form.input.phoneNumber && (\n <Control\n title={tr(\"registerPhone\")}\n input={form.input.phoneNumber}\n icon={<IconPhone />}\n text={{\n autoComplete: \"tel\",\n }}\n />\n )}\n <Control\n title={tr(\"registerPassword\")}\n input={form.input.password}\n icon={<IconLock />}\n password={{\n autoComplete: \"new-password\",\n }}\n />\n <Control\n title={tr(\"registerConfirmPassword\")}\n input={form.input.confirmPassword}\n icon={<IconLock />}\n password={{\n autoComplete: \"new-password\",\n }}\n />\n <ActionButton\n form={form}\n color={\"blue\"}\n variant={\"filled\"}\n >\n {tr(\"registerCreateAccount\")}\n </ActionButton>\n </Flex>\n </form>\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(\"registerOr\")}\n </Text>\n <Flex flex={1} h={\"1px\"} bg={\"var(--alepha-border)\"} />\n </Flex>\n )}\n\n {/* External login methods */}\n {externalMethods.length > 0 && (\n <Flex direction=\"column\" gap={\"sm\"}>\n {externalMethods.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(\"registerContinueWith\", {\n args: [capitalize(method.name)],\n })}\n </ActionButton>\n ))}\n </Flex>\n )}\n\n {/* Sign in link */}\n <Text size=\"sm\" ta=\"center\">\n {tr(\"registerHaveAccount\")}{\" \"}\n <ActionButton\n href={router.path(\"login\", {\n query: { realm: props.realmConfig.realmName },\n })}\n anchorProps={{ inherit: true }}\n >\n {tr(\"registerSignIn\")}\n </ActionButton>\n </Text>\n </>\n )}\n </Flex>\n </Card>\n <ActionButton variant={\"subtle\"} href={redirect}>\n {tr(\"registerCancel\")}\n </ActionButton>\n </Flex>\n </Flex>\n );\n};\n\nexport default Register;\n\nconst leftSection = (name: string) => {\n if (name === \"google\") {\n return <IconGoogle />;\n }\n\n if (name === \"github\") {\n return <IconGithub />;\n }\n};\n","import { t } from \"alepha\";\nimport type { RealmConfig } from \"alepha/api/users\";\nimport Register from \"../../../auth/components/Register.tsx\";\nimport Showcase from \"../shared/Showcase.tsx\";\n\nconst showcaseSchema = t.object({\n showCredentials: t.boolean({\n title: \"Credentials\",\n default: true,\n $control: { switch: true },\n }),\n showGoogleOAuth: t.boolean({\n title: \"Google OAuth\",\n default: true,\n $control: { switch: true },\n }),\n showGithubOAuth: t.boolean({\n title: \"GitHub OAuth\",\n default: false,\n $control: { switch: true },\n }),\n usernameEnabled: t.boolean({\n title: \"Username Field\",\n default: true,\n $control: { switch: true },\n }),\n usernameRequired: t.boolean({\n title: \"Username Required\",\n default: false,\n $control: { switch: true },\n }),\n emailEnabled: t.boolean({\n title: \"Email Field\",\n default: true,\n $control: { switch: true },\n }),\n emailRequired: t.boolean({\n title: \"Email Required\",\n default: true,\n $control: { switch: true },\n }),\n phoneEnabled: t.boolean({\n title: \"Phone Field\",\n default: false,\n $control: { switch: true },\n }),\n phoneRequired: t.boolean({\n title: \"Phone Required\",\n default: false,\n $control: { switch: true },\n }),\n registrationAllowed: t.boolean({\n title: \"Registration 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 showCredentials: boolean;\n showGoogleOAuth: boolean;\n showGithubOAuth: boolean;\n usernameEnabled: boolean;\n usernameRequired: boolean;\n emailEnabled: boolean;\n emailRequired: boolean;\n phoneEnabled: boolean;\n phoneRequired: boolean;\n registrationAllowed: boolean;\n showBranding: boolean;\n}): RealmConfig => {\n const authMethods: RealmConfig[\"authenticationMethods\"] = [];\n\n if (props.showCredentials) {\n authMethods.push({ name: \"credentials\", type: \"CREDENTIALS\" });\n }\n if (props.showGoogleOAuth) {\n authMethods.push({ name: \"google\", type: \"OAUTH2\" });\n }\n if (props.showGithubOAuth) {\n authMethods.push({ name: \"github\", type: \"OAUTH2\" });\n }\n\n return {\n realmName: \"demo\",\n authenticationMethods: authMethods,\n settings: {\n displayName: props.showBranding ? \"Demo App\" : undefined,\n description: props.showBranding ? \"Create your account\" : undefined,\n logoUrl: undefined,\n registrationAllowed: props.registrationAllowed,\n emailEnabled: props.emailEnabled,\n emailRequired: props.emailRequired,\n usernameEnabled: props.usernameEnabled,\n usernameRequired: props.usernameRequired,\n usernameRegExp: \"^[a-zA-Z0-9_]{3,30}$\",\n phoneEnabled: props.phoneEnabled,\n phoneRequired: props.phoneRequired,\n verifyEmailRequired: false,\n verifyPhoneRequired: false,\n firstNameLastNameEnabled: false,\n firstNameLastNameRequired: false,\n resetPasswordAllowed: true,\n adminEmails: [],\n adminUsernames: [],\n passwordPolicy: {\n minLength: 8,\n requireUppercase: true,\n requireLowercase: true,\n requireNumbers: true,\n requireSpecialCharacters: false,\n },\n },\n };\n};\n\nconst DemoRegister = () => {\n return (\n <Showcase\n title=\"Register\"\n schema={showcaseSchema}\n initialValues={{\n showCredentials: true,\n showGoogleOAuth: true,\n showGithubOAuth: false,\n usernameEnabled: true,\n usernameRequired: false,\n emailEnabled: true,\n emailRequired: true,\n phoneEnabled: false,\n phoneRequired: false,\n registrationAllowed: true,\n showBranding: true,\n }}\n columns={1}\n >\n {(props) => <Register realmConfig={buildRealmConfig(props)} />}\n </Showcase>\n );\n};\n\nexport default DemoRegister;\n"],"mappings":"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"}

package/dist/demo/{DemoResetPassword-BS2rIAQK.js → DemoResetPassword-DWh4_BpQ.js} RENAMED Viewed

@@ -1,13 +1,13 @@
-import { t as Showcase } from "./Showcase-C9btr_SJ.js";
+import { t as Showcase } from "./Showcase-BzoXNlCn.js";
 import { ActionButton, Control } from "@alepha/ui";
 import { AlephaError, t } from "alepha";
 import { IconAlertCircle, IconCheck, IconInfoCircle, IconLock, IconMail } from "@tabler/icons-react";
 import { useRouter } from "alepha/react/router";
-import { Alert, Card, Flex, Image, PinInput, Stack, Text, Title } from "@mantine/core";
+import { Alert, Card, Flex, Image, PinInput, Text as Text$1, Title } from "@mantine/core";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useForm } from "alepha/react/form";
 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";
@@ -82,17 +82,20 @@ const ResetPassword = (props) => {
 		flex: 1,
 		justify: "center",
 		align: "center",
-		children: /* @__PURE__ */ jsxs(Stack, {
+		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(Stack, {
+				children: /* @__PURE__ */ jsxs(Flex, {
+					direction: "column",
 					gap: "md",
 					children: [
-						(settings.logoUrl || settings.displayName || settings.description) && /* @__PURE__ */ jsxs(Stack, {
+						(settings.logoUrl || settings.displayName || settings.description) && /* @__PURE__ */ jsxs(Flex, {
+							direction: "column",
 							gap: "xs",
 							align: "center",
 							mb: "xs",
@@ -109,7 +112,7 @@ const ResetPassword = (props) => {
 									ta: "center",
 									children: settings.displayName
 								}),
-								settings.description && /* @__PURE__ */ jsx(Text, {
+								settings.description && /* @__PURE__ */ jsx(Text$1, {
 									size: "sm",
 									c: "dimmed",
 									ta: "center",
@@ -121,7 +124,7 @@ const ResetPassword = (props) => {
 							variant: "light",
 							color: "red",
 							icon: /* @__PURE__ */ jsx(IconAlertCircle, {}),
-							children: /* @__PURE__ */ jsx(Text, {
+							children: /* @__PURE__ */ jsx(Text$1, {
 								size: "sm",
 								children: error
 							})
@@ -130,7 +133,7 @@ const ResetPassword = (props) => {
 							variant: "light",
 							color: "yellow",
 							icon: /* @__PURE__ */ jsx(IconAlertCircle, {}),
-							children: /* @__PURE__ */ jsx(Text, {
+							children: /* @__PURE__ */ jsx(Text$1, {
 								size: "sm",
 								children: tr("resetPasswordDisabled")
 							})
@@ -139,17 +142,18 @@ const ResetPassword = (props) => {
 							children: tr("resetPasswordBackToSignIn")
 						})] }) : resetState.step === "email" ? /* @__PURE__ */ jsx("form", {
 							...emailForm.props,
-							children: /* @__PURE__ */ jsxs(Stack, {
+							children: /* @__PURE__ */ jsxs(Flex, {
+								direction: "column",
 								flex: 1,
 								gap: "md",
 								children: [
-									/* @__PURE__ */ jsx(Text, {
+									/* @__PURE__ */ jsx(Text$1, {
 										size: "lg",
 										fw: 500,
 										ta: "center",
 										children: tr("resetPasswordTitle")
 									}),
-									/* @__PURE__ */ jsx(Text, {
+									/* @__PURE__ */ jsx(Text$1, {
 										size: "sm",
 										c: "dimmed",
 										children: tr("resetPasswordEnterEmail")
@@ -171,10 +175,11 @@ const ResetPassword = (props) => {
 									})
 								]
 							})
-						}) : resetState.step === "code" ? /* @__PURE__ */ jsxs(Stack, {
+						}) : resetState.step === "code" ? /* @__PURE__ */ jsxs(Flex, {
+							direction: "column",
 							gap: "md",
 							children: [
-								/* @__PURE__ */ jsx(Text, {
+								/* @__PURE__ */ jsx(Text$1, {
 									size: "lg",
 									fw: 500,
 									ta: "center",
@@ -184,12 +189,12 @@ const ResetPassword = (props) => {
 									variant: "light",
 									color: "blue",
 									icon: /* @__PURE__ */ jsx(IconInfoCircle, {}),
-									children: /* @__PURE__ */ jsx(Text, {
+									children: /* @__PURE__ */ jsx(Text$1, {
 										size: "sm",
 										children: tr("resetPasswordCodeSent")
 									})
 								}),
-								/* @__PURE__ */ jsx(Text, {
+								/* @__PURE__ */ jsx(Text$1, {
 									size: "sm",
 									c: "dimmed",
 									ta: "center",
@@ -215,17 +220,18 @@ const ResetPassword = (props) => {
 							]
 						}) : resetState.step === "password" ? /* @__PURE__ */ jsx("form", {
 							...passwordForm.props,
-							children: /* @__PURE__ */ jsxs(Stack, {
+							children: /* @__PURE__ */ jsxs(Flex, {
+								direction: "column",
 								flex: 1,
 								gap: "md",
 								children: [
-									/* @__PURE__ */ jsx(Text, {
+									/* @__PURE__ */ jsx(Text$1, {
 										size: "lg",
 										fw: 500,
 										ta: "center",
 										children: tr("resetPasswordTitle")
 									}),
-									/* @__PURE__ */ jsx(Text, {
+									/* @__PURE__ */ jsx(Text$1, {
 										size: "sm",
 										c: "dimmed",
 										children: tr("resetPasswordEnterNewPassword")
@@ -255,7 +261,7 @@ const ResetPassword = (props) => {
 							variant: "light",
 							color: "green",
 							icon: /* @__PURE__ */ jsx(IconCheck, {}),
-							children: /* @__PURE__ */ jsx(Text, {
+							children: /* @__PURE__ */ jsx(Text$1, {
 								size: "sm",
 								children: tr("resetPasswordSuccess")
 							})
@@ -339,4 +345,4 @@ const DemoResetPassword = () => {
 //#endregion
 export { DemoResetPassword as default };
-//# sourceMappingURL=DemoResetPassword-BS2rIAQK.js.map
+//# sourceMappingURL=DemoResetPassword-DWh4_BpQ.js.map

package/dist/demo/DemoResetPassword-DWh4_BpQ.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"DemoResetPassword-DWh4_BpQ.js","names":["Text"],"sources":["../../src/auth/components/ResetPassword.tsx","../../src/demo/components/auth/DemoResetPassword.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","import { t } from \"alepha\";\nimport type { RealmConfig } 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}): RealmConfig => {\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 usernameRegExp: \"^[a-zA-Z0-9_]{3,30}$\",\n phoneEnabled: false,\n phoneRequired: false,\n verifyEmailRequired: false,\n verifyPhoneRequired: false,\n firstNameLastNameEnabled: false,\n firstNameLastNameRequired: false,\n resetPasswordAllowed: props.resetPasswordAllowed,\n adminEmails: [],\n adminUsernames: [],\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-zNkUmHRl.js → DemoSidebar-C1csnGhX.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import { t as Showcase } from "./Showcase-C9btr_SJ.js";
+import { t as Showcase } from "./Showcase-BzoXNlCn.js";
 import { Sidebar } from "@alepha/ui";
 import { t } from "alepha";
 import { IconDashboard, IconFiles, IconSettings, IconUsers } from "@tabler/icons-react";
@@ -78,4 +78,4 @@ const DemoSidebar = () => {
 //#endregion
 export { DemoSidebar as default };
-//# sourceMappingURL=DemoSidebar-zNkUmHRl.js.map
+//# sourceMappingURL=DemoSidebar-C1csnGhX.js.map

package/dist/demo/{DemoSidebar-zNkUmHRl.js.map → DemoSidebar-C1csnGhX.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DemoSidebar-~~zNkUmHRl~~.js","names":[],"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,oBAAC;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"}
1	+ {"version":3,"file":"DemoSidebar-C1csnGhX.js","names":[],"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,oBAAC;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"}