@stackframe/tanstack-start 0.0.1 → 2.8.91

package/dist/esm/components/api-key-dialogs.d.ts

@@ -0,0 +1,28 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { ApiKey, ApiKeyCreationOptions, ApiKeyType } from "../lib/stack-app/api-keys";
+
+//#region src/components/api-key-dialogs.d.ts
+declare const neverInMs: number;
+declare const expiresInOptions: {
+  readonly [x: number]: "1 day" | "7 days" | "30 days" | "90 days" | "1 year" | "Never";
+};
+/**
+ * Dialog for creating a new API key
+ */
+declare function CreateApiKeyDialog<Type extends ApiKeyType = ApiKeyType>(props: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onKeyCreated?: (key: ApiKey<Type, true>) => void;
+  createApiKey: (data: ApiKeyCreationOptions<Type>) => Promise<ApiKey<Type, true>>;
+  mockMode?: boolean;
+}): react_jsx_runtime0.JSX.Element;
+/**
+ * Dialog for showing the newly created API key
+ */
+declare function ShowApiKeyDialog<Type extends ApiKeyType = ApiKeyType>(props: {
+  apiKey: ApiKey<Type, true> | null;
+  onClose?: () => void;
+}): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { CreateApiKeyDialog, ShowApiKeyDialog, expiresInOptions, neverInMs };
+//# sourceMappingURL=api-key-dialogs.d.ts.map

package/dist/esm/components/api-key-dialogs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"api-key-dialogs.d.ts","names":[],"sources":["../../../src/components/api-key-dialogs.tsx"],"mappings":";;;;cAqBa,SAAA;AAAA,cACA,gBAAA;EAAA,UAOH,CAAA;AAAA;;;;iBAKM,kBAAA,cAAgC,UAAA,GAAa,UAAA,CAAA,CAAY,KAAA;EACvE,IAAA;EACA,YAAA,GAAe,IAAA;EACf,YAAA,IAAgB,GAAA,EAAK,MAAA,CAAO,IAAA;EAC5B,YAAA,GAAe,IAAA,EAAM,qBAAA,CAAsB,IAAA,MAAU,OAAA,CAAQ,MAAA,CAAO,IAAA;EACpE,QAAA;AAAA,IACD,kBAAA,CAAA,GAAA,CAAA,OAAA;;;;iBAqGe,gBAAA,cAA8B,UAAA,GAAa,UAAA,CAAA,CAAY,KAAA;EACrE,MAAA,EAAQ,MAAA,CAAO,IAAA;EACf,OAAA;AAAA,IACD,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/esm/components/api-key-dialogs.js

@@ -0,0 +1,158 @@
+'use client';
+
+import { yupResolver } from "@hookform/resolvers/yup";
+import { yupObject, yupString } from "@stackframe/stack-shared/dist/schema-fields";
+import { captureError } from "@stackframe/stack-shared/dist/utils/errors";
+import { runAsynchronously } from "@stackframe/stack-shared/dist/utils/promises";
+import { ActionDialog, Button, CopyField, Input, Label, Typography } from "@stackframe/stack-ui";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { useUser } from "../index.js";
+import { FormWarningText } from "../components/elements/form-warning.js";
+import { useTranslation } from "../lib/translations.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/api-key-dialogs.tsx
+const neverInMs = 1e3 * 60 * 60 * 24 * 365 * 200;
+const expiresInOptions = {
+	[1e3 * 60 * 60 * 24 * 1]: "1 day",
+	[1e3 * 60 * 60 * 24 * 7]: "7 days",
+	[1e3 * 60 * 60 * 24 * 30]: "30 days",
+	[1e3 * 60 * 60 * 24 * 90]: "90 days",
+	[1e3 * 60 * 60 * 24 * 365]: "1 year",
+	[neverInMs]: "Never"
+};
+/**
+* Dialog for creating a new API key
+*/
+function CreateApiKeyDialog(props) {
+	const { t } = useTranslation();
+	useUser({ or: props.mockMode ? "return-null" : "redirect" });
+	const [loading, setLoading] = useState(false);
+	const { register, handleSubmit, formState: { errors }, reset } = useForm({
+		resolver: yupResolver(yupObject({
+			description: yupString().defined().nonEmpty(t("Description is required")),
+			expiresIn: yupString().defined()
+		})),
+		defaultValues: {
+			description: "",
+			expiresIn: Object.keys(expiresInOptions)[2]
+		}
+	});
+	const onSubmit = async (data) => {
+		setLoading(true);
+		try {
+			const expiresAt = new Date(Date.now() + parseInt(data.expiresIn));
+			const apiKey = await props.createApiKey({
+				description: data.description,
+				expiresAt
+			});
+			if (props.onKeyCreated) props.onKeyCreated(apiKey);
+			reset();
+			props.onOpenChange(false);
+		} catch (error) {
+			captureError("Failed to create API key", { error });
+		} finally {
+			setLoading(false);
+		}
+	};
+	return /* @__PURE__ */ jsx(ActionDialog, {
+		open: props.open,
+		onOpenChange: props.onOpenChange,
+		title: t("Create API Key"),
+		description: t("API keys grant programmatic access to your account."),
+		children: /* @__PURE__ */ jsxs("form", {
+			onSubmit: (e) => {
+				e.preventDefault();
+				runAsynchronously(handleSubmit(onSubmit));
+			},
+			className: "space-y-4",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "space-y-2",
+					children: [
+						/* @__PURE__ */ jsx(Label, {
+							htmlFor: "description",
+							children: t("Description")
+						}),
+						/* @__PURE__ */ jsx(Input, {
+							id: "description",
+							placeholder: t("e.g. Development, Production, CI/CD"),
+							...register("description")
+						}),
+						errors.description && /* @__PURE__ */ jsx(FormWarningText, { text: errors.description.message })
+					]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "space-y-2",
+					children: [
+						/* @__PURE__ */ jsx(Label, {
+							htmlFor: "expiresIn",
+							children: t("Expires In")
+						}),
+						/* @__PURE__ */ jsx("select", {
+							id: "expiresIn",
+							className: "w-full p-2 border border-input rounded-md bg-background",
+							...register("expiresIn"),
+							children: Object.entries(expiresInOptions).map(([value, label]) => /* @__PURE__ */ jsx("option", {
+								value,
+								children: t(label)
+							}, value))
+						}),
+						errors.expiresIn && /* @__PURE__ */ jsx(FormWarningText, { text: errors.expiresIn.message })
+					]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex justify-end gap-2 pt-4",
+					children: [/* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "secondary",
+						onClick: () => {
+							reset();
+							props.onOpenChange(false);
+						},
+						children: t("Cancel")
+					}), /* @__PURE__ */ jsx(Button, {
+						type: "submit",
+						loading,
+						children: t("Create")
+					})]
+				})
+			]
+		})
+	});
+}
+/**
+* Dialog for showing the newly created API key
+*/
+function ShowApiKeyDialog(props) {
+	const { t } = useTranslation();
+	return /* @__PURE__ */ jsx(ActionDialog, {
+		open: !!props.apiKey,
+		title: t("API Key"),
+		okButton: { label: t("Close") },
+		onClose: props.onClose,
+		preventClose: true,
+		confirmText: t("I understand that I will not be able to view this key again."),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-4",
+			children: [/* @__PURE__ */ jsxs(Typography, { children: [
+				t("Here is your API key."),
+				" ",
+				/* @__PURE__ */ jsx("span", {
+					className: "font-bold",
+					children: t("Copy it to a safe place. You will not be able to view it again.")
+				})
+			] }), /* @__PURE__ */ jsx(CopyField, {
+				type: "input",
+				monospace: true,
+				value: props.apiKey?.value ?? "",
+				label: t("Secret API Key")
+			})]
+		})
+	});
+}
+
+//#endregion
+export { CreateApiKeyDialog, ShowApiKeyDialog, expiresInOptions, neverInMs };
+//# sourceMappingURL=api-key-dialogs.js.map

package/dist/esm/components/api-key-dialogs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"api-key-dialogs.js","names":[],"sources":["../../../src/components/api-key-dialogs.tsx"],"sourcesContent":["'use client';\n\n\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY, INSTEAD EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\n\nimport { yupResolver } from \"@hookform/resolvers/yup\";\nimport { yupObject, yupString } from '@stackframe/stack-shared/dist/schema-fields';\nimport { captureError } from '@stackframe/stack-shared/dist/utils/errors';\nimport { runAsynchronously } from '@stackframe/stack-shared/dist/utils/promises';\nimport { ActionDialog, Button, CopyField, Input, Label, Typography } from '@stackframe/stack-ui';\nimport { useState } from \"react\";\nimport { useForm } from 'react-hook-form';\nimport * as yup from \"yup\";\nimport { useUser } from '..';\nimport { FormWarningText } from '../components/elements/form-warning';\nimport { ApiKey, ApiKeyCreationOptions, ApiKeyType } from \"../lib/stack-app/api-keys\";\nimport { useTranslation } from \"../lib/translations\";\n\n// Constants for expiration options\nexport const neverInMs = 1000 * 60 * 60 * 24 * 365 * 200;\nexport const expiresInOptions = {\n  [1000 * 60 * 60 * 24 * 1]: \"1 day\",\n  [1000 * 60 * 60 * 24 * 7]: \"7 days\",\n  [1000 * 60 * 60 * 24 * 30]: \"30 days\",\n  [1000 * 60 * 60 * 24 * 90]: \"90 days\",\n  [1000 * 60 * 60 * 24 * 365]: \"1 year\",\n  [neverInMs]: \"Never\",\n} as const;\n\n/**\n * Dialog for creating a new API key\n */\nexport function CreateApiKeyDialog<Type extends ApiKeyType = ApiKeyType>(props: {\n  open: boolean,\n  onOpenChange: (open: boolean) => void,\n  onKeyCreated?: (key: ApiKey<Type, true>) => void,\n  createApiKey: (data: ApiKeyCreationOptions<Type>) => Promise<ApiKey<Type, true>>,\n  mockMode?: boolean,\n}) {\n  const { t } = useTranslation();\n  const user = useUser({ or: props.mockMode ? 'return-null' : 'redirect' });\n  const [loading, setLoading] = useState(false);\n\n  const apiKeySchema = yupObject({\n    description: yupString().defined().nonEmpty(t('Description is required')),\n    expiresIn: yupString().defined(),\n  });\n\n  const { register, handleSubmit, formState: { errors }, reset } = useForm({\n    resolver: yupResolver(apiKeySchema),\n    defaultValues: {\n      description: '',\n      expiresIn: Object.keys(expiresInOptions)[2], // Default to 30 days\n    }\n  });\n\n  const onSubmit = async (data: yup.InferType<typeof apiKeySchema>) => {\n    setLoading(true);\n    try {\n      const expiresAt = new Date(Date.now() + parseInt(data.expiresIn));\n      const apiKey = await props.createApiKey({\n        description: data.description,\n        expiresAt,\n      });\n\n      if (props.onKeyCreated) {\n        props.onKeyCreated(apiKey);\n      }\n\n      reset();\n      props.onOpenChange(false);\n    } catch (error) {\n      captureError(\"Failed to create API key\", { error });\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  return (\n    <ActionDialog\n      open={props.open}\n      onOpenChange={props.onOpenChange}\n      title={t('Create API Key')}\n      description={t('API keys grant programmatic access to your account.')}\n    >\n      <form\n        onSubmit={(e) => {\n          e.preventDefault();\n          runAsynchronously(handleSubmit(onSubmit));\n        }}\n        className=\"space-y-4\"\n      >\n        <div className=\"space-y-2\">\n          <Label htmlFor=\"description\">{t('Description')}</Label>\n          <Input\n            id=\"description\"\n            placeholder={t('e.g. Development, Production, CI/CD')}\n            {...register('description')}\n          />\n          {errors.description && <FormWarningText text={errors.description.message} />}\n        </div>\n\n        <div className=\"space-y-2\">\n          <Label htmlFor=\"expiresIn\">{t('Expires In')}</Label>\n          <select\n            id=\"expiresIn\"\n            className=\"w-full p-2 border border-input rounded-md bg-background\"\n            {...register('expiresIn')}\n          >\n            {Object.entries(expiresInOptions).map(([value, label]) => (\n              <option key={value} value={value}>{t(label)}</option>\n            ))}\n          </select>\n          {errors.expiresIn && <FormWarningText text={errors.expiresIn.message} />}\n        </div>\n\n        <div className=\"flex justify-end gap-2 pt-4\">\n          <Button\n            type=\"button\"\n            variant=\"secondary\"\n            onClick={() => {\n              reset();\n              props.onOpenChange(false);\n            }}\n          >\n            {t('Cancel')}\n          </Button>\n          <Button type=\"submit\" loading={loading}>\n            {t('Create')}\n          </Button>\n        </div>\n      </form>\n    </ActionDialog>\n  );\n}\n\n/**\n * Dialog for showing the newly created API key\n */\nexport function ShowApiKeyDialog<Type extends ApiKeyType = ApiKeyType>(props: {\n  apiKey: ApiKey<Type, true> | null,\n  onClose?: () => void,\n}) {\n  const { t } = useTranslation();\n\n  return (\n    <ActionDialog\n      open={!!props.apiKey}\n      title={t(\"API Key\")}\n      okButton={{ label: t(\"Close\") }}\n      onClose={props.onClose}\n      preventClose\n      confirmText={t(\"I understand that I will not be able to view this key again.\")}\n    >\n      <div className=\"flex flex-col gap-4\">\n        <Typography>\n          {t(\"Here is your API key.\")}{\" \"}\n          <span className=\"font-bold\">\n            {t(\"Copy it to a safe place. You will not be able to view it again.\")}\n          </span>\n        </Typography>\n        <CopyField\n          type=\"input\"\n          monospace\n          value={props.apiKey?.value ?? ''}\n          label={t(\"Secret API Key\")}\n        />\n      </div>\n    </ActionDialog>\n  );\n}\n"],"mappings":"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"}

package/dist/esm/components/api-key-table.d.ts

@@ -0,0 +1,10 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { ApiKey } from "../lib/stack-app/api-keys";
+
+//#region src/components/api-key-table.d.ts
+declare function ApiKeyTable(props: {
+  apiKeys: ApiKey[];
+}): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ApiKeyTable };
+//# sourceMappingURL=api-key-table.d.ts.map

package/dist/esm/components/api-key-table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"api-key-table.d.ts","names":[],"sources":["../../../src/components/api-key-table.tsx"],"mappings":";;;;iBAwGgB,WAAA,CAAY,KAAA;EAAS,OAAA,EAAS,MAAA;AAAA,IAAU,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/esm/components/api-key-table.js

@@ -0,0 +1,142 @@
+'use client';
+
+import { ActionCell, ActionDialog, BadgeCell, DataTable, DataTableColumnHeader, DataTableFacetedFilter, DateCell, SearchToolbarItem, TextCell, standardFilterFn } from "@stackframe/stack-ui";
+import { useMemo, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/api-key-table.tsx
+function toolbarRender(table) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SearchToolbarItem, {
+		table,
+		placeholder: "Search table"
+	}), /* @__PURE__ */ jsx(DataTableFacetedFilter, {
+		column: table.getColumn("status"),
+		title: "Status",
+		options: [
+			"valid",
+			"expired",
+			"revoked"
+		].map((provider) => ({
+			value: provider,
+			label: provider
+		}))
+	})] });
+}
+function RevokeDialog(props) {
+	return /* @__PURE__ */ jsx(ActionDialog, {
+		open: props.open,
+		onOpenChange: props.onOpenChange,
+		title: "Revoke API Key",
+		danger: true,
+		cancelButton: true,
+		okButton: {
+			label: "Revoke Key",
+			onClick: async () => {
+				await props.apiKey.revoke();
+			}
+		},
+		confirmText: "I understand this will unlink all the apps using this API key",
+		children: `Are you sure you want to revoke API key *****${props.apiKey.value.lastFour}?`
+	});
+}
+function Actions({ row }) {
+	const [isRevokeModalOpen, setIsRevokeModalOpen] = useState(false);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(RevokeDialog, {
+		apiKey: row.original,
+		open: isRevokeModalOpen,
+		onOpenChange: setIsRevokeModalOpen
+	}), /* @__PURE__ */ jsx(ActionCell, {
+		invisible: row.original.status !== "valid",
+		items: [{
+			item: "Revoke",
+			danger: true,
+			onClick: () => setIsRevokeModalOpen(true)
+		}]
+	})] });
+}
+const columns = [
+	{
+		accessorKey: "description",
+		header: ({ column }) => /* @__PURE__ */ jsx(DataTableColumnHeader, {
+			column,
+			columnTitle: "Description"
+		}),
+		cell: ({ row }) => /* @__PURE__ */ jsx(TextCell, {
+			size: 100,
+			children: row.original.description
+		})
+	},
+	{
+		accessorKey: "status",
+		header: ({ column }) => /* @__PURE__ */ jsx(DataTableColumnHeader, {
+			column,
+			columnTitle: "Status"
+		}),
+		cell: ({ row }) => /* @__PURE__ */ jsx(BadgeCell, { badges: [row.original.status] }),
+		filterFn: standardFilterFn
+	},
+	{
+		id: "value",
+		accessorFn: (row) => row.value.lastFour,
+		header: ({ column }) => /* @__PURE__ */ jsx(DataTableColumnHeader, {
+			column,
+			columnTitle: "Client Key"
+		}),
+		cell: ({ row }) => /* @__PURE__ */ jsxs(TextCell, { children: ["*******", row.original.value.lastFour] }),
+		enableSorting: false
+	},
+	{
+		accessorKey: "expiresAt",
+		header: ({ column }) => /* @__PURE__ */ jsx(DataTableColumnHeader, {
+			column,
+			columnTitle: "Expires At"
+		}),
+		cell: ({ row }) => {
+			if (row.original.status === "revoked") return /* @__PURE__ */ jsx(TextCell, { children: "-" });
+			return row.original.expiresAt ? /* @__PURE__ */ jsx(DateCell, {
+				date: row.original.expiresAt,
+				ignoreAfterYears: 50
+			}) : /* @__PURE__ */ jsx(TextCell, { children: "Never" });
+		}
+	},
+	{
+		accessorKey: "createdAt",
+		header: ({ column }) => /* @__PURE__ */ jsx(DataTableColumnHeader, {
+			column,
+			columnTitle: "Created At"
+		}),
+		cell: ({ row }) => /* @__PURE__ */ jsx(DateCell, {
+			date: row.original.createdAt,
+			ignoreAfterYears: 50
+		})
+	},
+	{
+		id: "actions",
+		cell: ({ row }) => /* @__PURE__ */ jsx(Actions, { row })
+	}
+];
+function ApiKeyTable(props) {
+	return /* @__PURE__ */ jsx(DataTable, {
+		data: useMemo(() => {
+			return props.apiKeys.map((apiKey) => ({
+				...apiKey,
+				status: {
+					"valid": "valid",
+					"manually-revoked": "revoked",
+					"expired": "expired"
+				}[apiKey.whyInvalid() || "valid"]
+			})).sort((a, b) => {
+				if (a.status === b.status) return a.createdAt < b.createdAt ? 1 : -1;
+				return a.status === "valid" ? -1 : 1;
+			});
+		}, [props.apiKeys]),
+		columns,
+		toolbarRender,
+		defaultColumnFilters: [],
+		defaultSorting: []
+	});
+}
+
+//#endregion
+export { ApiKeyTable };
+//# sourceMappingURL=api-key-table.js.map

package/dist/esm/components/api-key-table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"api-key-table.js","names":[],"sources":["../../../src/components/api-key-table.tsx"],"sourcesContent":["'use client';\n\n\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY, INSTEAD EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\nimport { ActionCell, ActionDialog, BadgeCell, DataTable, DataTableColumnHeader, DataTableFacetedFilter, DateCell, SearchToolbarItem, TextCell, standardFilterFn } from \"@stackframe/stack-ui\";\nimport { ColumnDef, Row, Table } from \"@tanstack/react-table\";\nimport { useMemo, useState } from \"react\";\nimport { ApiKey } from \"../lib/stack-app/api-keys\";\n\ntype ExtendedApiKey = ApiKey & {\n  status: 'valid' | 'expired' | 'revoked',\n};\n\nfunction toolbarRender<TData>(table: Table<TData>) {\n  return (\n    <>\n      <SearchToolbarItem table={table} placeholder=\"Search table\" />\n      <DataTableFacetedFilter\n        column={table.getColumn(\"status\")}\n        title=\"Status\"\n        options={['valid', 'expired', 'revoked'].map((provider) => ({\n          value: provider,\n          label: provider,\n        }))}\n      />\n    </>\n  );\n}\n\nfunction RevokeDialog(props: {\n  apiKey: ExtendedApiKey,\n  open: boolean,\n  onOpenChange: (open: boolean) => void,\n}) {\n  return <ActionDialog\n    open={props.open}\n    onOpenChange={props.onOpenChange}\n    title=\"Revoke API Key\"\n    danger\n    cancelButton\n    okButton={{ label: \"Revoke Key\", onClick: async () => { await props.apiKey.revoke(); } }}\n    confirmText=\"I understand this will unlink all the apps using this API key\"\n  >\n    {`Are you sure you want to revoke API key *****${props.apiKey.value.lastFour}?`}\n  </ActionDialog>;\n}\n\nfunction Actions({ row }: { row: Row<ExtendedApiKey> }) {\n  const [isRevokeModalOpen, setIsRevokeModalOpen] = useState(false);\n  return (\n    <>\n      <RevokeDialog apiKey={row.original} open={isRevokeModalOpen} onOpenChange={setIsRevokeModalOpen} />\n      <ActionCell\n        invisible={row.original.status !== 'valid'}\n        items={[{\n          item: \"Revoke\",\n          danger: true,\n          onClick: () => setIsRevokeModalOpen(true),\n        }]}\n      />\n    </>\n  );\n}\n\nconst columns: ColumnDef<ExtendedApiKey>[] =  [\n  {\n    accessorKey: \"description\",\n    header: ({ column }) => <DataTableColumnHeader column={column} columnTitle=\"Description\" />,\n    cell: ({ row }) => <TextCell size={100}>{row.original.description}</TextCell>,\n  },\n  {\n    accessorKey: \"status\",\n    header: ({ column }) => <DataTableColumnHeader column={column} columnTitle=\"Status\" />,\n    cell: ({ row }) => <BadgeCell badges={[row.original.status]} />,\n    filterFn: standardFilterFn,\n  },\n  {\n    id: \"value\",\n    accessorFn: (row) => row.value.lastFour,\n    header: ({ column }) => <DataTableColumnHeader column={column} columnTitle=\"Client Key\" />,\n    cell: ({ row }) => <TextCell>*******{row.original.value.lastFour}</TextCell>,\n    enableSorting: false,\n  },\n  {\n    accessorKey: \"expiresAt\",\n    header: ({ column }) => <DataTableColumnHeader column={column} columnTitle=\"Expires At\" />,\n    cell: ({ row }) => {\n      if (row.original.status === 'revoked') return <TextCell>-</TextCell>;\n      return row.original.expiresAt ? <DateCell date={row.original.expiresAt} ignoreAfterYears={50} /> : <TextCell>Never</TextCell>;\n    },\n  },\n  {\n    accessorKey: \"createdAt\",\n    header: ({ column }) => <DataTableColumnHeader column={column} columnTitle=\"Created At\" />,\n    cell: ({ row }) => <DateCell date={row.original.createdAt} ignoreAfterYears={50} />\n  },\n  {\n    id: \"actions\",\n    cell: ({ row }) => <Actions row={row} />,\n  },\n];\n\nexport function ApiKeyTable(props: { apiKeys: ApiKey[] }) {\n  const extendedApiKeys = useMemo(() => {\n    const keys = props.apiKeys.map((apiKey) => ({\n      ...apiKey,\n      status: ({ 'valid': 'valid', 'manually-revoked': 'revoked', 'expired': 'expired' } as const)[apiKey.whyInvalid() || 'valid'],\n    } satisfies ExtendedApiKey));\n    // first sort based on status, then by createdAt\n    return keys.sort((a, b) => {\n      if (a.status === b.status) {\n        return a.createdAt < b.createdAt ? 1 : -1;\n      }\n      return a.status === 'valid' ? -1 : 1;\n    });\n  }, [props.apiKeys]);\n\n  return <DataTable\n    data={extendedApiKeys}\n    columns={columns}\n    toolbarRender={toolbarRender}\n    defaultColumnFilters={[]}\n    defaultSorting={[]}\n  />;\n}\n"],"mappings":";;;;;;;AAeA,SAAS,cAAqB,OAAqB;AACjD,QACE,4CACE,oBAAC;EAAyB;EAAO,aAAY;GAAiB,EAC9D,oBAAC;EACC,QAAQ,MAAM,UAAU,SAAS;EACjC,OAAM;EACN,SAAS;GAAC;GAAS;GAAW;GAAU,CAAC,KAAK,cAAc;GAC1D,OAAO;GACP,OAAO;GACR,EAAE;GACH,IACD;;AAIP,SAAS,aAAa,OAInB;AACD,QAAO,oBAAC;EACN,MAAM,MAAM;EACZ,cAAc,MAAM;EACpB,OAAM;EACN;EACA;EACA,UAAU;GAAE,OAAO;GAAc,SAAS,YAAY;AAAE,UAAM,MAAM,OAAO,QAAQ;;GAAK;EACxF,aAAY;YAEX,gDAAgD,MAAM,OAAO,MAAM,SAAS;GAChE;;AAGjB,SAAS,QAAQ,EAAE,OAAqC;CACtD,MAAM,CAAC,mBAAmB,wBAAwB,SAAS,MAAM;AACjE,QACE,4CACE,oBAAC;EAAa,QAAQ,IAAI;EAAU,MAAM;EAAmB,cAAc;GAAwB,EACnG,oBAAC;EACC,WAAW,IAAI,SAAS,WAAW;EACnC,OAAO,CAAC;GACN,MAAM;GACN,QAAQ;GACR,eAAe,qBAAqB,KAAK;GAC1C,CAAC;GACF,IACD;;AAIP,MAAM,UAAwC;CAC5C;EACE,aAAa;EACb,SAAS,EAAE,aAAa,oBAAC;GAA8B;GAAQ,aAAY;IAAgB;EAC3F,OAAO,EAAE,UAAU,oBAAC;GAAS,MAAM;aAAM,IAAI,SAAS;IAAuB;EAC9E;CACD;EACE,aAAa;EACb,SAAS,EAAE,aAAa,oBAAC;GAA8B;GAAQ,aAAY;IAAW;EACtF,OAAO,EAAE,UAAU,oBAAC,aAAU,QAAQ,CAAC,IAAI,SAAS,OAAO,GAAI;EAC/D,UAAU;EACX;CACD;EACE,IAAI;EACJ,aAAa,QAAQ,IAAI,MAAM;EAC/B,SAAS,EAAE,aAAa,oBAAC;GAA8B;GAAQ,aAAY;IAAe;EAC1F,OAAO,EAAE,UAAU,qBAAC,uBAAS,WAAQ,IAAI,SAAS,MAAM,YAAoB;EAC5E,eAAe;EAChB;CACD;EACE,aAAa;EACb,SAAS,EAAE,aAAa,oBAAC;GAA8B;GAAQ,aAAY;IAAe;EAC1F,OAAO,EAAE,UAAU;AACjB,OAAI,IAAI,SAAS,WAAW,UAAW,QAAO,oBAAC,sBAAS,MAAY;AACpE,UAAO,IAAI,SAAS,YAAY,oBAAC;IAAS,MAAM,IAAI,SAAS;IAAW,kBAAkB;KAAM,GAAG,oBAAC,sBAAS,UAAgB;;EAEhI;CACD;EACE,aAAa;EACb,SAAS,EAAE,aAAa,oBAAC;GAA8B;GAAQ,aAAY;IAAe;EAC1F,OAAO,EAAE,UAAU,oBAAC;GAAS,MAAM,IAAI,SAAS;GAAW,kBAAkB;IAAM;EACpF;CACD;EACE,IAAI;EACJ,OAAO,EAAE,UAAU,oBAAC,WAAa,MAAO;EACzC;CACF;AAED,SAAgB,YAAY,OAA8B;AAexD,QAAO,oBAAC;EACN,MAfsB,cAAc;AAMpC,UALa,MAAM,QAAQ,KAAK,YAAY;IAC1C,GAAG;IACH,QAAS;KAAE,SAAS;KAAS,oBAAoB;KAAW,WAAW;KAAW,CAAW,OAAO,YAAY,IAAI;IACrH,EAA2B,CAEhB,MAAM,GAAG,MAAM;AACzB,QAAI,EAAE,WAAW,EAAE,OACjB,QAAO,EAAE,YAAY,EAAE,YAAY,IAAI;AAEzC,WAAO,EAAE,WAAW,UAAU,KAAK;KACnC;KACD,CAAC,MAAM,QAAQ,CAAC;EAIR;EACM;EACf,sBAAsB,EAAE;EACxB,gBAAgB,EAAE;GAClB"}

package/dist/esm/components/credential-sign-in.d.ts

@@ -0,0 +1,7 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/credential-sign-in.d.ts
+declare function CredentialSignIn(): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { CredentialSignIn };
+//# sourceMappingURL=credential-sign-in.d.ts.map

package/dist/esm/components/credential-sign-in.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"credential-sign-in.d.ts","names":[],"sources":["../../../src/components/credential-sign-in.tsx"],"mappings":";;;iBAmBgB,gBAAA,CAAA,GAAgB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/esm/components/credential-sign-in.js

@@ -0,0 +1,85 @@
+'use client';
+
+import { yupResolver } from "@hookform/resolvers/yup";
+import { passwordSchema, strictEmailSchema, yupObject } from "@stackframe/stack-shared/dist/schema-fields";
+import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
+import { Button, Input, Label, PasswordInput } from "@stackframe/stack-ui";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { useStackApp } from "../index.js";
+import { useTranslation } from "../lib/translations.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FormWarningText } from "./elements/form-warning.js";
+import { StyledLink } from "./link.js";
+
+//#region src/components/credential-sign-in.tsx
+function CredentialSignIn() {
+	const { t } = useTranslation();
+	const { register, handleSubmit, setError, formState: { errors } } = useForm({ resolver: yupResolver(yupObject({
+		email: strictEmailSchema(t("Please enter a valid email")).defined().nonEmpty(t("Please enter your email")),
+		password: passwordSchema.defined().nonEmpty(t("Please enter your password"))
+	})) });
+	const app = useStackApp();
+	const [loading, setLoading] = useState(false);
+	const onSubmit = async (data) => {
+		setLoading(true);
+		try {
+			const { email, password } = data;
+			const result = await app.signInWithCredential({
+				email,
+				password
+			});
+			if (result.status === "error") setError("email", {
+				type: "manual",
+				message: result.error.message
+			});
+		} finally {
+			setLoading(false);
+		}
+	};
+	return /* @__PURE__ */ jsxs("form", {
+		className: "flex flex-col items-stretch stack-scope",
+		onSubmit: (e) => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e)),
+		noValidate: true,
+		children: [
+			/* @__PURE__ */ jsx(Label, {
+				htmlFor: "email",
+				className: "mb-1",
+				children: t("Email")
+			}),
+			/* @__PURE__ */ jsx(Input, {
+				id: "email",
+				type: "email",
+				autoComplete: "email",
+				...register("email")
+			}),
+			/* @__PURE__ */ jsx(FormWarningText, { text: errors.email?.message?.toString() }),
+			/* @__PURE__ */ jsx(Label, {
+				htmlFor: "password",
+				className: "mt-4 mb-1",
+				children: t("Password")
+			}),
+			/* @__PURE__ */ jsx(PasswordInput, {
+				id: "password",
+				autoComplete: "current-password",
+				...register("password")
+			}),
+			/* @__PURE__ */ jsx(FormWarningText, { text: errors.password?.message?.toString() }),
+			/* @__PURE__ */ jsx(StyledLink, {
+				href: app.urls.forgotPassword,
+				className: "mt-1 text-sm",
+				children: t("Forgot password?")
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				type: "submit",
+				className: "mt-6",
+				loading,
+				children: t("Sign In")
+			})
+		]
+	});
+}
+
+//#endregion
+export { CredentialSignIn };
+//# sourceMappingURL=credential-sign-in.js.map

package/dist/esm/components/credential-sign-in.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"credential-sign-in.js","names":[],"sources":["../../../src/components/credential-sign-in.tsx"],"sourcesContent":["'use client';\n\n\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY, INSTEAD EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\n\nimport { yupResolver } from \"@hookform/resolvers/yup\";\nimport { passwordSchema, strictEmailSchema, yupObject } from \"@stackframe/stack-shared/dist/schema-fields\";\nimport { runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { Button, Input, Label, PasswordInput } from \"@stackframe/stack-ui\";\nimport { useState } from \"react\";\nimport { useForm } from \"react-hook-form\";\nimport * as yup from \"yup\";\nimport { useStackApp } from \"..\";\nimport { useTranslation } from \"../lib/translations\";\nimport { FormWarningText } from \"./elements/form-warning\";\nimport { StyledLink } from \"./link\";\n\nexport function CredentialSignIn() {\n  const { t } = useTranslation();\n\n  const schema = yupObject({\n    email: strictEmailSchema(t('Please enter a valid email')).defined().nonEmpty(t('Please enter your email')),\n    password: passwordSchema.defined().nonEmpty(t('Please enter your password'))\n  });\n\n  const { register, handleSubmit, setError, formState: { errors } } = useForm({\n    resolver: yupResolver(schema)\n  });\n  const app = useStackApp();\n  const [loading, setLoading] = useState(false);\n\n  const onSubmit = async (data: yup.InferType<typeof schema>) => {\n    setLoading(true);\n\n    try {\n      const { email, password } = data;\n      const result = await app.signInWithCredential({\n        email,\n        password,\n      });\n      if (result.status === 'error') {\n        setError('email', { type: 'manual', message: result.error.message });\n      }\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  return (\n    <form\n      className=\"flex flex-col items-stretch stack-scope\"\n      onSubmit={e => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e))}\n      noValidate\n    >\n      <Label htmlFor=\"email\" className=\"mb-1\">{t('Email')}</Label>\n      <Input\n        id=\"email\"\n        type=\"email\"\n        autoComplete=\"email\"\n        {...register('email')}\n      />\n      <FormWarningText text={errors.email?.message?.toString()} />\n\n      <Label htmlFor=\"password\" className=\"mt-4 mb-1\">{t('Password')}</Label>\n      <PasswordInput\n        id=\"password\"\n        autoComplete=\"current-password\"\n        {...register('password')}\n      />\n      <FormWarningText text={errors.password?.message?.toString()} />\n\n      <StyledLink href={app.urls.forgotPassword} className=\"mt-1 text-sm\">\n        {t('Forgot password?')}\n      </StyledLink>\n\n      <Button type=\"submit\" className=\"mt-6\" loading={loading}>\n        {t('Sign In')}\n      </Button>\n    </form>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;AAmBA,SAAgB,mBAAmB;CACjC,MAAM,EAAE,MAAM,gBAAgB;CAO9B,MAAM,EAAE,UAAU,cAAc,UAAU,WAAW,EAAE,aAAa,QAAQ,EAC1E,UAAU,YANG,UAAU;EACvB,OAAO,kBAAkB,EAAE,6BAA6B,CAAC,CAAC,SAAS,CAAC,SAAS,EAAE,0BAA0B,CAAC;EAC1G,UAAU,eAAe,SAAS,CAAC,SAAS,EAAE,6BAA6B,CAAC;EAC7E,CAAC,CAG6B,EAC9B,CAAC;CACF,MAAM,MAAM,aAAa;CACzB,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;CAE7C,MAAM,WAAW,OAAO,SAAuC;AAC7D,aAAW,KAAK;AAEhB,MAAI;GACF,MAAM,EAAE,OAAO,aAAa;GAC5B,MAAM,SAAS,MAAM,IAAI,qBAAqB;IAC5C;IACA;IACD,CAAC;AACF,OAAI,OAAO,WAAW,QACpB,UAAS,SAAS;IAAE,MAAM;IAAU,SAAS,OAAO,MAAM;IAAS,CAAC;YAE9D;AACR,cAAW,MAAM;;;AAIrB,QACE,qBAAC;EACC,WAAU;EACV,WAAU,MAAK,2BAA2B,aAAa,SAAS,CAAC,EAAE,CAAC;EACpE;;GAEA,oBAAC;IAAM,SAAQ;IAAQ,WAAU;cAAQ,EAAE,QAAQ;KAAS;GAC5D,oBAAC;IACC,IAAG;IACH,MAAK;IACL,cAAa;IACb,GAAI,SAAS,QAAQ;KACrB;GACF,oBAAC,mBAAgB,MAAM,OAAO,OAAO,SAAS,UAAU,GAAI;GAE5D,oBAAC;IAAM,SAAQ;IAAW,WAAU;cAAa,EAAE,WAAW;KAAS;GACvE,oBAAC;IACC,IAAG;IACH,cAAa;IACb,GAAI,SAAS,WAAW;KACxB;GACF,oBAAC,mBAAgB,MAAM,OAAO,UAAU,SAAS,UAAU,GAAI;GAE/D,oBAAC;IAAW,MAAM,IAAI,KAAK;IAAgB,WAAU;cAClD,EAAE,mBAAmB;KACX;GAEb,oBAAC;IAAO,MAAK;IAAS,WAAU;IAAgB;cAC7C,EAAE,UAAU;KACN;;GACJ"}

package/dist/esm/components/credential-sign-up.d.ts

@@ -0,0 +1,9 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/credential-sign-up.d.ts
+declare function CredentialSignUp(props: {
+  noPasswordRepeat?: boolean;
+}): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { CredentialSignUp };
+//# sourceMappingURL=credential-sign-up.d.ts.map

package/dist/esm/components/credential-sign-up.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"credential-sign-up.d.ts","names":[],"sources":["../../../src/components/credential-sign-up.tsx"],"mappings":";;;iBAmBgB,gBAAA,CAAiB,KAAA;EAAS,gBAAA;AAAA,IAA4B,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/esm/components/credential-sign-up.js

@@ -0,0 +1,117 @@
+'use client';
+
+import { yupResolver } from "@hookform/resolvers/yup";
+import { passwordSchema, strictEmailSchema, yupObject } from "@stackframe/stack-shared/dist/schema-fields";
+import { runAsynchronously, runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
+import { Button, Input, Label, PasswordInput } from "@stackframe/stack-ui";
+import React, { useState } from "react";
+import { useForm } from "react-hook-form";
+import { useTranslation } from "../lib/translations.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { FormWarningText } from "./elements/form-warning.js";
+import { getPasswordError } from "@stackframe/stack-shared/dist/helpers/password";
+import * as yup from "yup";
+import { useStackApp } from "../lib/hooks.js";
+
+//#region src/components/credential-sign-up.tsx
+function CredentialSignUp(props) {
+	const { t } = useTranslation();
+	const { register, handleSubmit, setError, formState: { errors }, clearErrors } = useForm({ resolver: yupResolver(yupObject({
+		email: strictEmailSchema(t("Please enter a valid email")).defined().nonEmpty(t("Please enter your email")),
+		password: passwordSchema.defined().nonEmpty(t("Please enter your password")).test({
+			name: "is-valid-password",
+			test: (value, ctx) => {
+				const error = getPasswordError(value);
+				if (error) return ctx.createError({ message: error.message });
+				else return true;
+			}
+		}),
+		...!props.noPasswordRepeat && { passwordRepeat: passwordSchema.nullable().oneOf([
+			yup.ref("password"),
+			"",
+			null
+		], t("Passwords do not match")).nonEmpty(t("Please repeat your password")) }
+	})) });
+	const app = useStackApp();
+	const [loading, setLoading] = useState(false);
+	const onSubmit = async (data) => {
+		setLoading(true);
+		try {
+			const { email, password } = data;
+			const result = await app.signUpWithCredential({
+				email,
+				password
+			});
+			if (result.status === "error") setError("email", {
+				type: "manual",
+				message: result.error.message
+			});
+		} finally {
+			setLoading(false);
+		}
+	};
+	const registerPassword = register("password");
+	const registerPasswordRepeat = register("passwordRepeat");
+	return /* @__PURE__ */ jsxs("form", {
+		className: "flex flex-col items-stretch stack-scope",
+		onSubmit: (e) => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e)),
+		noValidate: true,
+		children: [
+			/* @__PURE__ */ jsx(Label, {
+				htmlFor: "email",
+				className: "mb-1",
+				children: t("Email")
+			}),
+			/* @__PURE__ */ jsx(Input, {
+				id: "email",
+				type: "email",
+				autoComplete: "email",
+				...register("email")
+			}),
+			/* @__PURE__ */ jsx(FormWarningText, { text: errors.email?.message?.toString() }),
+			/* @__PURE__ */ jsx(Label, {
+				htmlFor: "password",
+				className: "mt-4 mb-1",
+				children: t("Password")
+			}),
+			/* @__PURE__ */ jsx(PasswordInput, {
+				id: "password",
+				autoComplete: "new-password",
+				...registerPassword,
+				onChange: (e) => {
+					clearErrors("password");
+					clearErrors("passwordRepeat");
+					runAsynchronously(registerPassword.onChange(e));
+				}
+			}),
+			/* @__PURE__ */ jsx(FormWarningText, { text: errors.password?.message?.toString() }),
+			!props.noPasswordRepeat && /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsx(Label, {
+					htmlFor: "repeat-password",
+					className: "mt-4 mb-1",
+					children: t("Repeat Password")
+				}),
+				/* @__PURE__ */ jsx(PasswordInput, {
+					id: "repeat-password",
+					...registerPasswordRepeat,
+					onChange: (e) => {
+						clearErrors("password");
+						clearErrors("passwordRepeat");
+						runAsynchronously(registerPasswordRepeat.onChange(e));
+					}
+				}),
+				/* @__PURE__ */ jsx(FormWarningText, { text: errors.passwordRepeat?.message?.toString() })
+			] }),
+			/* @__PURE__ */ jsx(Button, {
+				type: "submit",
+				className: "mt-6",
+				loading,
+				children: t("Sign Up")
+			})
+		]
+	});
+}
+
+//#endregion
+export { CredentialSignUp };
+//# sourceMappingURL=credential-sign-up.js.map

package/dist/esm/components/credential-sign-up.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"credential-sign-up.js","names":[],"sources":["../../../src/components/credential-sign-up.tsx"],"sourcesContent":["'use client';\n\n\n//===========================================\n// THIS FILE IS AUTO-GENERATED FROM TEMPLATE. DO NOT EDIT IT DIRECTLY, INSTEAD EDIT THE CORRESPONDING FILE IN packages/template\n//===========================================\n\nimport { yupResolver } from \"@hookform/resolvers/yup\";\nimport { getPasswordError } from \"@stackframe/stack-shared/dist/helpers/password\";\nimport { passwordSchema, strictEmailSchema, yupObject } from \"@stackframe/stack-shared/dist/schema-fields\";\nimport { runAsynchronously, runAsynchronouslyWithAlert } from \"@stackframe/stack-shared/dist/utils/promises\";\nimport { Button, Input, Label, PasswordInput } from \"@stackframe/stack-ui\";\nimport React, { useState } from \"react\";\nimport { useForm } from \"react-hook-form\";\nimport * as yup from \"yup\";\nimport { useStackApp } from \"../lib/hooks\";\nimport { useTranslation } from \"../lib/translations\";\nimport { FormWarningText } from \"./elements/form-warning\";\n\nexport function CredentialSignUp(props: { noPasswordRepeat?: boolean }) {\n  const { t } = useTranslation();\n\n  const schema = yupObject({\n    email: strictEmailSchema(t('Please enter a valid email')).defined().nonEmpty(t('Please enter your email')),\n    password: passwordSchema.defined().nonEmpty(t('Please enter your password')).test({\n      name: 'is-valid-password',\n      test: (value, ctx) => {\n        const error = getPasswordError(value);\n        if (error) {\n          return ctx.createError({ message: error.message });\n        } else {\n          return true;\n        }\n      }\n    }),\n    ...(!props.noPasswordRepeat && {\n      passwordRepeat: passwordSchema.nullable().oneOf([yup.ref('password'), \"\", null], t('Passwords do not match')).nonEmpty(t('Please repeat your password'))\n    })\n  });\n\n  const { register, handleSubmit, setError, formState: { errors }, clearErrors } = useForm({\n    resolver: yupResolver(schema)\n  });\n  const app = useStackApp();\n  const [loading, setLoading] = useState(false);\n\n  const onSubmit = async (data: yup.InferType<typeof schema>) => {\n    setLoading(true);\n    try {\n      const { email, password } = data;\n      const result = await app.signUpWithCredential({ email, password });\n      if (result.status === 'error') {\n        setError('email', { type: 'manual', message: result.error.message });\n      }\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  const registerPassword = register('password');\n  const registerPasswordRepeat = register('passwordRepeat');\n\n  return (\n    <form\n      className=\"flex flex-col items-stretch stack-scope\"\n      onSubmit={e => runAsynchronouslyWithAlert(handleSubmit(onSubmit)(e))}\n      noValidate\n    >\n      <Label htmlFor=\"email\" className=\"mb-1\">{t('Email')}</Label>\n      <Input id=\"email\" type=\"email\" autoComplete=\"email\" {...register('email')}/>\n      <FormWarningText text={errors.email?.message?.toString()} />\n\n      <Label htmlFor=\"password\" className=\"mt-4 mb-1\">{t('Password')}</Label>\n      <PasswordInput\n        id=\"password\"\n        autoComplete=\"new-password\"\n        {...registerPassword}\n        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {\n          clearErrors('password');\n          clearErrors('passwordRepeat');\n          runAsynchronously(registerPassword.onChange(e));\n        }}\n      />\n      <FormWarningText text={errors.password?.message?.toString()} />\n      {\n        !props.noPasswordRepeat && (\n          <>\n            <Label htmlFor=\"repeat-password\" className=\"mt-4 mb-1\">{t('Repeat Password')}</Label>\n            <PasswordInput\n              id=\"repeat-password\"\n              {...registerPasswordRepeat}\n              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {\n              clearErrors('password');\n              clearErrors('passwordRepeat');\n              runAsynchronously(registerPasswordRepeat.onChange(e));\n              }}\n            />\n            <FormWarningText text={errors.passwordRepeat?.message?.toString()} />\n          </>\n        )\n      }\n\n      <Button type=\"submit\" className=\"mt-6\" loading={loading}>\n        {t('Sign Up')}\n      </Button>\n    </form>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAmBA,SAAgB,iBAAiB,OAAuC;CACtE,MAAM,EAAE,MAAM,gBAAgB;CAoB9B,MAAM,EAAE,UAAU,cAAc,UAAU,WAAW,EAAE,UAAU,gBAAgB,QAAQ,EACvF,UAAU,YAnBG,UAAU;EACvB,OAAO,kBAAkB,EAAE,6BAA6B,CAAC,CAAC,SAAS,CAAC,SAAS,EAAE,0BAA0B,CAAC;EAC1G,UAAU,eAAe,SAAS,CAAC,SAAS,EAAE,6BAA6B,CAAC,CAAC,KAAK;GAChF,MAAM;GACN,OAAO,OAAO,QAAQ;IACpB,MAAM,QAAQ,iBAAiB,MAAM;AACrC,QAAI,MACF,QAAO,IAAI,YAAY,EAAE,SAAS,MAAM,SAAS,CAAC;QAElD,QAAO;;GAGZ,CAAC;EACF,GAAI,CAAC,MAAM,oBAAoB,EAC7B,gBAAgB,eAAe,UAAU,CAAC,MAAM;GAAC,IAAI,IAAI,WAAW;GAAE;GAAI;GAAK,EAAE,EAAE,yBAAyB,CAAC,CAAC,SAAS,EAAE,8BAA8B,CAAC,EACzJ;EACF,CAAC,CAG6B,EAC9B,CAAC;CACF,MAAM,MAAM,aAAa;CACzB,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;CAE7C,MAAM,WAAW,OAAO,SAAuC;AAC7D,aAAW,KAAK;AAChB,MAAI;GACF,MAAM,EAAE,OAAO,aAAa;GAC5B,MAAM,SAAS,MAAM,IAAI,qBAAqB;IAAE;IAAO;IAAU,CAAC;AAClE,OAAI,OAAO,WAAW,QACpB,UAAS,SAAS;IAAE,MAAM;IAAU,SAAS,OAAO,MAAM;IAAS,CAAC;YAE9D;AACR,cAAW,MAAM;;;CAIrB,MAAM,mBAAmB,SAAS,WAAW;CAC7C,MAAM,yBAAyB,SAAS,iBAAiB;AAEzD,QACE,qBAAC;EACC,WAAU;EACV,WAAU,MAAK,2BAA2B,aAAa,SAAS,CAAC,EAAE,CAAC;EACpE;;GAEA,oBAAC;IAAM,SAAQ;IAAQ,WAAU;cAAQ,EAAE,QAAQ;KAAS;GAC5D,oBAAC;IAAM,IAAG;IAAQ,MAAK;IAAQ,cAAa;IAAQ,GAAI,SAAS,QAAQ;KAAG;GAC5E,oBAAC,mBAAgB,MAAM,OAAO,OAAO,SAAS,UAAU,GAAI;GAE5D,oBAAC;IAAM,SAAQ;IAAW,WAAU;cAAa,EAAE,WAAW;KAAS;GACvE,oBAAC;IACC,IAAG;IACH,cAAa;IACb,GAAI;IACJ,WAAW,MAA2C;AACpD,iBAAY,WAAW;AACvB,iBAAY,iBAAiB;AAC7B,uBAAkB,iBAAiB,SAAS,EAAE,CAAC;;KAEjD;GACF,oBAAC,mBAAgB,MAAM,OAAO,UAAU,SAAS,UAAU,GAAI;GAE7D,CAAC,MAAM,oBACL;IACE,oBAAC;KAAM,SAAQ;KAAkB,WAAU;eAAa,EAAE,kBAAkB;MAAS;IACrF,oBAAC;KACC,IAAG;KACH,GAAI;KACJ,WAAW,MAA2C;AACtD,kBAAY,WAAW;AACvB,kBAAY,iBAAiB;AAC7B,wBAAkB,uBAAuB,SAAS,EAAE,CAAC;;MAErD;IACF,oBAAC,mBAAgB,MAAM,OAAO,gBAAgB,SAAS,UAAU,GAAI;OACpE;GAIP,oBAAC;IAAO,MAAK;IAAS,WAAU;IAAgB;cAC7C,EAAE,UAAU;KACN;;GACJ"}

package/dist/esm/components/elements/form-warning.d.ts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/elements/form-warning.d.ts
+declare function FormWarningText({
+  text
+}: {
+  text?: string;
+}): react_jsx_runtime0.JSX.Element | null;
+//#endregion
+export { FormWarningText };
+//# sourceMappingURL=form-warning.d.ts.map

package/dist/esm/components/elements/form-warning.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-warning.d.ts","names":[],"sources":["../../../../src/components/elements/form-warning.tsx"],"mappings":";;;iBAOgB,eAAA,CAAA;EAAkB;AAAA;EAAU,IAAA;AAAA,IAAe,kBAAA,CAAA,GAAA,CAAA,OAAA"}