@ccatto/auth-ui 0.1.0

package/README.md

@@ -0,0 +1,94 @@
+# @ccatto/auth-ui
+
+Presentational React forms for authentication flows: sign-in, register, and a `LoginCatto` card wrapper. Designed to slot into the Catto app template (`@ccatto/ui` + `next-intl` + your auth client of choice).
+
+The components are **bring-your-own-auth** — they don't import Better Auth, JWT, or any other backend. You pass an `onSubmit` callback that does the auth call (and any navigation that should follow); the form handles the loading state and error display.
+
+## Install
+
+```bash
+yarn add @ccatto/auth-ui
+```
+
+Peer deps: `react`, `next-intl`, `@ccatto/ui`.
+
+## Usage
+
+```tsx
+// app/[locale]/(public)/signin/page.tsx
+'use client';
+
+import { LoginCatto } from '@ccatto/auth-ui';
+import { signIn } from '@/lib/auth-client-better';
+import { useRouter } from '@/navigation';
+
+export default function Page() {
+  const router = useRouter();
+
+  return (
+    <LoginCatto
+      onSubmit={async ({ email, password }) => {
+        const result = await signIn.email({ email, password });
+        if (result?.error) throw new Error(result.error.message);
+        router.push('/dashboard'); // or '/paddles', or wherever
+      }}
+    />
+  );
+}
+```
+
+```tsx
+// app/[locale]/(public)/signin/register/page.tsx
+'use client';
+
+import { RegisterUserFormCatto } from '@ccatto/auth-ui';
+import { signUp } from '@/lib/auth-client-better';
+import { useRouter } from '@/navigation';
+
+export default function Page() {
+  const router = useRouter();
+
+  return (
+    <RegisterUserFormCatto
+      onSubmit={async ({ name, email, password }) => {
+        const result = await signUp.email({ name, email, password });
+        if (result?.error) throw new Error(result.error.message);
+        router.push('/dashboard');
+      }}
+    />
+  );
+}
+```
+
+## Translation keys
+
+Default namespace is `auth`; override with the `i18nNamespace` prop. Within the namespace the components expect:
+
+```json
+{
+  "signIn": {
+    "cardTitle": "Sign in to your account",
+    "emailLabel": "Email",
+    "passwordLabel": "Password",
+    "submit": "Sign in",
+    "submitting": "Signing in…",
+    "errorGeneric": "Sign in failed. Check your credentials and try again."
+  },
+  "register": {
+    "nameLabel": "Name",
+    "emailLabel": "Email",
+    "passwordLabel": "Password",
+    "submit": "Create account",
+    "submitting": "Creating account…",
+    "errorGeneric": "Could not create your account. Try again or contact support."
+  }
+}
+```
+
+## Exports
+
+- `LoginCatto` — `CardCatto` wrapper around `SignInEmailPassFormCatto`. Same props plus `cardVariant` / `cardWidth`.
+- `SignInEmailPassFormCatto` — email + password form.
+- `RegisterUserFormCatto` — name + email + password form.
+
+All forms accept `i18nNamespace?: string` (default `'auth'`) and a required `onSubmit` callback.

package/dist/index.cjs

@@ -0,0 +1,150 @@
+"use client";
+'use strict';
+
+var ui = require('@ccatto/ui');
+var nextIntl = require('next-intl');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/LoginCatto.tsx
+var SignInEmailPassFormCatto = ({
+  onSubmit,
+  i18nNamespace = "auth"
+}) => {
+  const t = nextIntl.useTranslations(i18nNamespace);
+  const [email, setEmail] = react.useState("");
+  const [password, setPassword] = react.useState("");
+  const [error, setError] = react.useState(null);
+  const [submitting, setSubmitting] = react.useState(false);
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError(null);
+    setSubmitting(true);
+    try {
+      await onSubmit({ email, password });
+    } catch (err) {
+      setError(err instanceof Error ? err.message : t("signIn.errorGeneric"));
+    } finally {
+      setSubmitting(false);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, className: "flex flex-col gap-4 p-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ui.InputCatto,
+      {
+        type: "email",
+        label: t("signIn.emailLabel"),
+        value: email,
+        onChange: (value) => setEmail(value),
+        required: true,
+        autoComplete: "email"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ui.InputCatto,
+      {
+        type: "password",
+        label: t("signIn.passwordLabel"),
+        value: password,
+        onChange: (value) => setPassword(value),
+        required: true,
+        autoComplete: "current-password"
+      }
+    ),
+    error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-red-600 dark:text-red-400", children: error }),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.ButtonCatto, { type: "submit", variant: "primary", disabled: submitting, children: submitting ? t("signIn.submitting") : t("signIn.submit") })
+  ] });
+};
+var SignInEmailPassFormCatto_default = SignInEmailPassFormCatto;
+var LoginCatto = ({
+  cardVariant = "midnightEmber",
+  cardWidth = "5xl",
+  i18nNamespace = "auth",
+  ...formProps
+}) => {
+  const t = nextIntl.useTranslations(i18nNamespace);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-6 h-full", children: /* @__PURE__ */ jsxRuntime.jsx(
+    ui.CardCatto,
+    {
+      title: t("signIn.cardTitle"),
+      variant: cardVariant,
+      width: cardWidth,
+      headerComponent: /* @__PURE__ */ jsxRuntime.jsx(
+        SignInEmailPassFormCatto_default,
+        {
+          ...formProps,
+          i18nNamespace
+        }
+      )
+    }
+  ) });
+};
+var LoginCatto_default = LoginCatto;
+var RegisterUserFormCatto = ({
+  onSubmit,
+  i18nNamespace = "auth"
+}) => {
+  const t = nextIntl.useTranslations(i18nNamespace);
+  const [name, setName] = react.useState("");
+  const [email, setEmail] = react.useState("");
+  const [password, setPassword] = react.useState("");
+  const [error, setError] = react.useState(null);
+  const [submitting, setSubmitting] = react.useState(false);
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError(null);
+    setSubmitting(true);
+    try {
+      await onSubmit({ name, email, password });
+    } catch (err) {
+      setError(err instanceof Error ? err.message : t("register.errorGeneric"));
+    } finally {
+      setSubmitting(false);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, className: "flex flex-col gap-4 p-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ui.InputCatto,
+      {
+        type: "text",
+        label: t("register.nameLabel"),
+        value: name,
+        onChange: (value) => setName(value),
+        required: true,
+        autoComplete: "name"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ui.InputCatto,
+      {
+        type: "email",
+        label: t("register.emailLabel"),
+        value: email,
+        onChange: (value) => setEmail(value),
+        required: true,
+        autoComplete: "email"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ui.InputCatto,
+      {
+        type: "password",
+        label: t("register.passwordLabel"),
+        value: password,
+        onChange: (value) => setPassword(value),
+        required: true,
+        autoComplete: "new-password",
+        minLength: 8
+      }
+    ),
+    error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-red-600 dark:text-red-400", children: error }),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.ButtonCatto, { type: "submit", variant: "primary", disabled: submitting, children: submitting ? t("register.submitting") : t("register.submit") })
+  ] });
+};
+var RegisterUserFormCatto_default = RegisterUserFormCatto;
+
+exports.LoginCatto = LoginCatto_default;
+exports.RegisterUserFormCatto = RegisterUserFormCatto_default;
+exports.SignInEmailPassFormCatto = SignInEmailPassFormCatto_default;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/SignInEmailPassFormCatto.tsx","../src/LoginCatto.tsx","../src/RegisterUserFormCatto.tsx"],"names":["useTranslations","useState","jsxs","jsx","InputCatto","ButtonCatto","CardCatto"],"mappings":"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","file":"index.cjs","sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { ButtonCatto, InputCatto } from '@ccatto/ui';\nimport { useTranslations } from 'next-intl';\n\nexport interface SignInValues {\n  email: string;\n  password: string;\n}\n\nexport interface SignInEmailPassFormCattoProps {\n  /**\n   * Called with `{ email, password }` when the user submits the form. Throw\n   * (or reject) to surface an error message in the form. The component owns\n   * its own loading + error UI; the caller owns the auth client and any\n   * navigation that should happen on success.\n   */\n  onSubmit: (values: SignInValues) => Promise<void> | void;\n  /**\n   * next-intl namespace this form's labels are read from. The keys it expects\n   * inside the namespace are `signIn.cardTitle`, `signIn.emailLabel`,\n   * `signIn.passwordLabel`, `signIn.submit`, `signIn.submitting`,\n   * `signIn.errorGeneric`. Defaults to `auth`.\n   */\n  i18nNamespace?: string;\n}\n\nconst SignInEmailPassFormCatto = ({\n  onSubmit,\n  i18nNamespace = 'auth',\n}: SignInEmailPassFormCattoProps) => {\n  const t = useTranslations(i18nNamespace);\n  const [email, setEmail] = useState('');\n  const [password, setPassword] = useState('');\n  const [error, setError] = useState<string | null>(null);\n  const [submitting, setSubmitting] = useState(false);\n\n  const handleSubmit = async (e: React.FormEvent) => {\n    e.preventDefault();\n    setError(null);\n    setSubmitting(true);\n    try {\n      await onSubmit({ email, password });\n    } catch (err) {\n      setError(err instanceof Error ? err.message : t('signIn.errorGeneric'));\n    } finally {\n      setSubmitting(false);\n    }\n  };\n\n  return (\n    <form onSubmit={handleSubmit} className=\"flex flex-col gap-4 p-4\">\n      <InputCatto\n        type=\"email\"\n        label={t('signIn.emailLabel')}\n        value={email}\n        onChange={(value) => setEmail(value)}\n        required\n        autoComplete=\"email\"\n      />\n      <InputCatto\n        type=\"password\"\n        label={t('signIn.passwordLabel')}\n        value={password}\n        onChange={(value) => setPassword(value)}\n        required\n        autoComplete=\"current-password\"\n      />\n      {error && (\n        <p className=\"text-sm text-red-600 dark:text-red-400\">{error}</p>\n      )}\n      <ButtonCatto type=\"submit\" variant=\"primary\" disabled={submitting}>\n        {submitting ? t('signIn.submitting') : t('signIn.submit')}\n      </ButtonCatto>\n    </form>\n  );\n};\n\nexport default SignInEmailPassFormCatto;\n","'use client';\n\nimport { CardCatto } from '@ccatto/ui';\nimport { useTranslations } from 'next-intl';\nimport SignInEmailPassFormCatto, {\n  type SignInEmailPassFormCattoProps,\n} from './SignInEmailPassFormCatto';\n\nexport interface LoginCattoProps extends SignInEmailPassFormCattoProps {\n  /** CardCatto variant. Defaults to 'midnightEmber'. */\n  cardVariant?: string;\n  /** CardCatto width. Defaults to '5xl'. */\n  cardWidth?: string;\n}\n\nconst LoginCatto = ({\n  cardVariant = 'midnightEmber',\n  cardWidth = '5xl',\n  i18nNamespace = 'auth',\n  ...formProps\n}: LoginCattoProps) => {\n  const t = useTranslations(i18nNamespace);\n\n  return (\n    <div className=\"mt-6 h-full\">\n      <CardCatto\n        title={t('signIn.cardTitle')}\n        // CardCatto's variant + width props are loosely typed here so consumers\n        // can pass any of the package's themes without us having to track the\n        // union in two places.\n        variant={cardVariant as never}\n        width={cardWidth as never}\n        headerComponent={\n          <SignInEmailPassFormCatto\n            {...formProps}\n            i18nNamespace={i18nNamespace}\n          />\n        }\n      />\n    </div>\n  );\n};\n\nexport default LoginCatto;\n","'use client';\n\nimport { useState } from 'react';\nimport { ButtonCatto, InputCatto } from '@ccatto/ui';\nimport { useTranslations } from 'next-intl';\n\nexport interface RegisterValues {\n  name: string;\n  email: string;\n  password: string;\n}\n\nexport interface RegisterUserFormCattoProps {\n  /**\n   * Called with `{ name, email, password }` when the user submits the form.\n   * Throw (or reject) to surface an error message. The component owns its\n   * own loading + error UI; the caller owns the auth client and any\n   * post-register navigation.\n   */\n  onSubmit: (values: RegisterValues) => Promise<void> | void;\n  /**\n   * next-intl namespace this form's labels are read from. The keys it expects\n   * inside the namespace are `register.nameLabel`, `register.emailLabel`,\n   * `register.passwordLabel`, `register.submit`, `register.submitting`,\n   * `register.errorGeneric`. Defaults to `auth`.\n   */\n  i18nNamespace?: string;\n}\n\nconst RegisterUserFormCatto = ({\n  onSubmit,\n  i18nNamespace = 'auth',\n}: RegisterUserFormCattoProps) => {\n  const t = useTranslations(i18nNamespace);\n  const [name, setName] = useState('');\n  const [email, setEmail] = useState('');\n  const [password, setPassword] = useState('');\n  const [error, setError] = useState<string | null>(null);\n  const [submitting, setSubmitting] = useState(false);\n\n  const handleSubmit = async (e: React.FormEvent) => {\n    e.preventDefault();\n    setError(null);\n    setSubmitting(true);\n    try {\n      await onSubmit({ name, email, password });\n    } catch (err) {\n      setError(err instanceof Error ? err.message : t('register.errorGeneric'));\n    } finally {\n      setSubmitting(false);\n    }\n  };\n\n  return (\n    <form onSubmit={handleSubmit} className=\"flex flex-col gap-4 p-4\">\n      <InputCatto\n        type=\"text\"\n        label={t('register.nameLabel')}\n        value={name}\n        onChange={(value) => setName(value)}\n        required\n        autoComplete=\"name\"\n      />\n      <InputCatto\n        type=\"email\"\n        label={t('register.emailLabel')}\n        value={email}\n        onChange={(value) => setEmail(value)}\n        required\n        autoComplete=\"email\"\n      />\n      <InputCatto\n        type=\"password\"\n        label={t('register.passwordLabel')}\n        value={password}\n        onChange={(value) => setPassword(value)}\n        required\n        autoComplete=\"new-password\"\n        minLength={8}\n      />\n      {error && (\n        <p className=\"text-sm text-red-600 dark:text-red-400\">{error}</p>\n      )}\n      <ButtonCatto type=\"submit\" variant=\"primary\" disabled={submitting}>\n        {submitting ? t('register.submitting') : t('register.submit')}\n      </ButtonCatto>\n    </form>\n  );\n};\n\nexport default RegisterUserFormCatto;\n"]}

package/dist/index.d.cts

@@ -0,0 +1,56 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface SignInValues {
+    email: string;
+    password: string;
+}
+interface SignInEmailPassFormCattoProps {
+    /**
+     * Called with `{ email, password }` when the user submits the form. Throw
+     * (or reject) to surface an error message in the form. The component owns
+     * its own loading + error UI; the caller owns the auth client and any
+     * navigation that should happen on success.
+     */
+    onSubmit: (values: SignInValues) => Promise<void> | void;
+    /**
+     * next-intl namespace this form's labels are read from. The keys it expects
+     * inside the namespace are `signIn.cardTitle`, `signIn.emailLabel`,
+     * `signIn.passwordLabel`, `signIn.submit`, `signIn.submitting`,
+     * `signIn.errorGeneric`. Defaults to `auth`.
+     */
+    i18nNamespace?: string;
+}
+declare const SignInEmailPassFormCatto: ({ onSubmit, i18nNamespace, }: SignInEmailPassFormCattoProps) => react_jsx_runtime.JSX.Element;
+
+interface LoginCattoProps extends SignInEmailPassFormCattoProps {
+    /** CardCatto variant. Defaults to 'midnightEmber'. */
+    cardVariant?: string;
+    /** CardCatto width. Defaults to '5xl'. */
+    cardWidth?: string;
+}
+declare const LoginCatto: ({ cardVariant, cardWidth, i18nNamespace, ...formProps }: LoginCattoProps) => react_jsx_runtime.JSX.Element;
+
+interface RegisterValues {
+    name: string;
+    email: string;
+    password: string;
+}
+interface RegisterUserFormCattoProps {
+    /**
+     * Called with `{ name, email, password }` when the user submits the form.
+     * Throw (or reject) to surface an error message. The component owns its
+     * own loading + error UI; the caller owns the auth client and any
+     * post-register navigation.
+     */
+    onSubmit: (values: RegisterValues) => Promise<void> | void;
+    /**
+     * next-intl namespace this form's labels are read from. The keys it expects
+     * inside the namespace are `register.nameLabel`, `register.emailLabel`,
+     * `register.passwordLabel`, `register.submit`, `register.submitting`,
+     * `register.errorGeneric`. Defaults to `auth`.
+     */
+    i18nNamespace?: string;
+}
+declare const RegisterUserFormCatto: ({ onSubmit, i18nNamespace, }: RegisterUserFormCattoProps) => react_jsx_runtime.JSX.Element;
+
+export { LoginCatto, type LoginCattoProps, RegisterUserFormCatto, type RegisterUserFormCattoProps, type RegisterValues, SignInEmailPassFormCatto, type SignInEmailPassFormCattoProps, type SignInValues };

package/dist/index.d.ts

@@ -0,0 +1,56 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface SignInValues {
+    email: string;
+    password: string;
+}
+interface SignInEmailPassFormCattoProps {
+    /**
+     * Called with `{ email, password }` when the user submits the form. Throw
+     * (or reject) to surface an error message in the form. The component owns
+     * its own loading + error UI; the caller owns the auth client and any
+     * navigation that should happen on success.
+     */
+    onSubmit: (values: SignInValues) => Promise<void> | void;
+    /**
+     * next-intl namespace this form's labels are read from. The keys it expects
+     * inside the namespace are `signIn.cardTitle`, `signIn.emailLabel`,
+     * `signIn.passwordLabel`, `signIn.submit`, `signIn.submitting`,
+     * `signIn.errorGeneric`. Defaults to `auth`.
+     */
+    i18nNamespace?: string;
+}
+declare const SignInEmailPassFormCatto: ({ onSubmit, i18nNamespace, }: SignInEmailPassFormCattoProps) => react_jsx_runtime.JSX.Element;
+
+interface LoginCattoProps extends SignInEmailPassFormCattoProps {
+    /** CardCatto variant. Defaults to 'midnightEmber'. */
+    cardVariant?: string;
+    /** CardCatto width. Defaults to '5xl'. */
+    cardWidth?: string;
+}
+declare const LoginCatto: ({ cardVariant, cardWidth, i18nNamespace, ...formProps }: LoginCattoProps) => react_jsx_runtime.JSX.Element;
+
+interface RegisterValues {
+    name: string;
+    email: string;
+    password: string;
+}
+interface RegisterUserFormCattoProps {
+    /**
+     * Called with `{ name, email, password }` when the user submits the form.
+     * Throw (or reject) to surface an error message. The component owns its
+     * own loading + error UI; the caller owns the auth client and any
+     * post-register navigation.
+     */
+    onSubmit: (values: RegisterValues) => Promise<void> | void;
+    /**
+     * next-intl namespace this form's labels are read from. The keys it expects
+     * inside the namespace are `register.nameLabel`, `register.emailLabel`,
+     * `register.passwordLabel`, `register.submit`, `register.submitting`,
+     * `register.errorGeneric`. Defaults to `auth`.
+     */
+    i18nNamespace?: string;
+}
+declare const RegisterUserFormCatto: ({ onSubmit, i18nNamespace, }: RegisterUserFormCattoProps) => react_jsx_runtime.JSX.Element;
+
+export { LoginCatto, type LoginCattoProps, RegisterUserFormCatto, type RegisterUserFormCattoProps, type RegisterValues, SignInEmailPassFormCatto, type SignInEmailPassFormCattoProps, type SignInValues };

package/dist/index.js

@@ -0,0 +1,146 @@
+"use client";
+import { InputCatto, ButtonCatto, CardCatto } from '@ccatto/ui';
+import { useTranslations } from 'next-intl';
+import { useState } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/LoginCatto.tsx
+var SignInEmailPassFormCatto = ({
+  onSubmit,
+  i18nNamespace = "auth"
+}) => {
+  const t = useTranslations(i18nNamespace);
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState(null);
+  const [submitting, setSubmitting] = useState(false);
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError(null);
+    setSubmitting(true);
+    try {
+      await onSubmit({ email, password });
+    } catch (err) {
+      setError(err instanceof Error ? err.message : t("signIn.errorGeneric"));
+    } finally {
+      setSubmitting(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "flex flex-col gap-4 p-4", children: [
+    /* @__PURE__ */ jsx(
+      InputCatto,
+      {
+        type: "email",
+        label: t("signIn.emailLabel"),
+        value: email,
+        onChange: (value) => setEmail(value),
+        required: true,
+        autoComplete: "email"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      InputCatto,
+      {
+        type: "password",
+        label: t("signIn.passwordLabel"),
+        value: password,
+        onChange: (value) => setPassword(value),
+        required: true,
+        autoComplete: "current-password"
+      }
+    ),
+    error && /* @__PURE__ */ jsx("p", { className: "text-sm text-red-600 dark:text-red-400", children: error }),
+    /* @__PURE__ */ jsx(ButtonCatto, { type: "submit", variant: "primary", disabled: submitting, children: submitting ? t("signIn.submitting") : t("signIn.submit") })
+  ] });
+};
+var SignInEmailPassFormCatto_default = SignInEmailPassFormCatto;
+var LoginCatto = ({
+  cardVariant = "midnightEmber",
+  cardWidth = "5xl",
+  i18nNamespace = "auth",
+  ...formProps
+}) => {
+  const t = useTranslations(i18nNamespace);
+  return /* @__PURE__ */ jsx("div", { className: "mt-6 h-full", children: /* @__PURE__ */ jsx(
+    CardCatto,
+    {
+      title: t("signIn.cardTitle"),
+      variant: cardVariant,
+      width: cardWidth,
+      headerComponent: /* @__PURE__ */ jsx(
+        SignInEmailPassFormCatto_default,
+        {
+          ...formProps,
+          i18nNamespace
+        }
+      )
+    }
+  ) });
+};
+var LoginCatto_default = LoginCatto;
+var RegisterUserFormCatto = ({
+  onSubmit,
+  i18nNamespace = "auth"
+}) => {
+  const t = useTranslations(i18nNamespace);
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState(null);
+  const [submitting, setSubmitting] = useState(false);
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError(null);
+    setSubmitting(true);
+    try {
+      await onSubmit({ name, email, password });
+    } catch (err) {
+      setError(err instanceof Error ? err.message : t("register.errorGeneric"));
+    } finally {
+      setSubmitting(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "flex flex-col gap-4 p-4", children: [
+    /* @__PURE__ */ jsx(
+      InputCatto,
+      {
+        type: "text",
+        label: t("register.nameLabel"),
+        value: name,
+        onChange: (value) => setName(value),
+        required: true,
+        autoComplete: "name"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      InputCatto,
+      {
+        type: "email",
+        label: t("register.emailLabel"),
+        value: email,
+        onChange: (value) => setEmail(value),
+        required: true,
+        autoComplete: "email"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      InputCatto,
+      {
+        type: "password",
+        label: t("register.passwordLabel"),
+        value: password,
+        onChange: (value) => setPassword(value),
+        required: true,
+        autoComplete: "new-password",
+        minLength: 8
+      }
+    ),
+    error && /* @__PURE__ */ jsx("p", { className: "text-sm text-red-600 dark:text-red-400", children: error }),
+    /* @__PURE__ */ jsx(ButtonCatto, { type: "submit", variant: "primary", disabled: submitting, children: submitting ? t("register.submitting") : t("register.submit") })
+  ] });
+};
+var RegisterUserFormCatto_default = RegisterUserFormCatto;
+
+export { LoginCatto_default as LoginCatto, RegisterUserFormCatto_default as RegisterUserFormCatto, SignInEmailPassFormCatto_default as SignInEmailPassFormCatto };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/SignInEmailPassFormCatto.tsx","../src/LoginCatto.tsx","../src/RegisterUserFormCatto.tsx"],"names":["useTranslations","jsx","useState","jsxs","InputCatto","ButtonCatto"],"mappings":"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","file":"index.js","sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { ButtonCatto, InputCatto } from '@ccatto/ui';\nimport { useTranslations } from 'next-intl';\n\nexport interface SignInValues {\n  email: string;\n  password: string;\n}\n\nexport interface SignInEmailPassFormCattoProps {\n  /**\n   * Called with `{ email, password }` when the user submits the form. Throw\n   * (or reject) to surface an error message in the form. The component owns\n   * its own loading + error UI; the caller owns the auth client and any\n   * navigation that should happen on success.\n   */\n  onSubmit: (values: SignInValues) => Promise<void> | void;\n  /**\n   * next-intl namespace this form's labels are read from. The keys it expects\n   * inside the namespace are `signIn.cardTitle`, `signIn.emailLabel`,\n   * `signIn.passwordLabel`, `signIn.submit`, `signIn.submitting`,\n   * `signIn.errorGeneric`. Defaults to `auth`.\n   */\n  i18nNamespace?: string;\n}\n\nconst SignInEmailPassFormCatto = ({\n  onSubmit,\n  i18nNamespace = 'auth',\n}: SignInEmailPassFormCattoProps) => {\n  const t = useTranslations(i18nNamespace);\n  const [email, setEmail] = useState('');\n  const [password, setPassword] = useState('');\n  const [error, setError] = useState<string | null>(null);\n  const [submitting, setSubmitting] = useState(false);\n\n  const handleSubmit = async (e: React.FormEvent) => {\n    e.preventDefault();\n    setError(null);\n    setSubmitting(true);\n    try {\n      await onSubmit({ email, password });\n    } catch (err) {\n      setError(err instanceof Error ? err.message : t('signIn.errorGeneric'));\n    } finally {\n      setSubmitting(false);\n    }\n  };\n\n  return (\n    <form onSubmit={handleSubmit} className=\"flex flex-col gap-4 p-4\">\n      <InputCatto\n        type=\"email\"\n        label={t('signIn.emailLabel')}\n        value={email}\n        onChange={(value) => setEmail(value)}\n        required\n        autoComplete=\"email\"\n      />\n      <InputCatto\n        type=\"password\"\n        label={t('signIn.passwordLabel')}\n        value={password}\n        onChange={(value) => setPassword(value)}\n        required\n        autoComplete=\"current-password\"\n      />\n      {error && (\n        <p className=\"text-sm text-red-600 dark:text-red-400\">{error}</p>\n      )}\n      <ButtonCatto type=\"submit\" variant=\"primary\" disabled={submitting}>\n        {submitting ? t('signIn.submitting') : t('signIn.submit')}\n      </ButtonCatto>\n    </form>\n  );\n};\n\nexport default SignInEmailPassFormCatto;\n","'use client';\n\nimport { CardCatto } from '@ccatto/ui';\nimport { useTranslations } from 'next-intl';\nimport SignInEmailPassFormCatto, {\n  type SignInEmailPassFormCattoProps,\n} from './SignInEmailPassFormCatto';\n\nexport interface LoginCattoProps extends SignInEmailPassFormCattoProps {\n  /** CardCatto variant. Defaults to 'midnightEmber'. */\n  cardVariant?: string;\n  /** CardCatto width. Defaults to '5xl'. */\n  cardWidth?: string;\n}\n\nconst LoginCatto = ({\n  cardVariant = 'midnightEmber',\n  cardWidth = '5xl',\n  i18nNamespace = 'auth',\n  ...formProps\n}: LoginCattoProps) => {\n  const t = useTranslations(i18nNamespace);\n\n  return (\n    <div className=\"mt-6 h-full\">\n      <CardCatto\n        title={t('signIn.cardTitle')}\n        // CardCatto's variant + width props are loosely typed here so consumers\n        // can pass any of the package's themes without us having to track the\n        // union in two places.\n        variant={cardVariant as never}\n        width={cardWidth as never}\n        headerComponent={\n          <SignInEmailPassFormCatto\n            {...formProps}\n            i18nNamespace={i18nNamespace}\n          />\n        }\n      />\n    </div>\n  );\n};\n\nexport default LoginCatto;\n","'use client';\n\nimport { useState } from 'react';\nimport { ButtonCatto, InputCatto } from '@ccatto/ui';\nimport { useTranslations } from 'next-intl';\n\nexport interface RegisterValues {\n  name: string;\n  email: string;\n  password: string;\n}\n\nexport interface RegisterUserFormCattoProps {\n  /**\n   * Called with `{ name, email, password }` when the user submits the form.\n   * Throw (or reject) to surface an error message. The component owns its\n   * own loading + error UI; the caller owns the auth client and any\n   * post-register navigation.\n   */\n  onSubmit: (values: RegisterValues) => Promise<void> | void;\n  /**\n   * next-intl namespace this form's labels are read from. The keys it expects\n   * inside the namespace are `register.nameLabel`, `register.emailLabel`,\n   * `register.passwordLabel`, `register.submit`, `register.submitting`,\n   * `register.errorGeneric`. Defaults to `auth`.\n   */\n  i18nNamespace?: string;\n}\n\nconst RegisterUserFormCatto = ({\n  onSubmit,\n  i18nNamespace = 'auth',\n}: RegisterUserFormCattoProps) => {\n  const t = useTranslations(i18nNamespace);\n  const [name, setName] = useState('');\n  const [email, setEmail] = useState('');\n  const [password, setPassword] = useState('');\n  const [error, setError] = useState<string | null>(null);\n  const [submitting, setSubmitting] = useState(false);\n\n  const handleSubmit = async (e: React.FormEvent) => {\n    e.preventDefault();\n    setError(null);\n    setSubmitting(true);\n    try {\n      await onSubmit({ name, email, password });\n    } catch (err) {\n      setError(err instanceof Error ? err.message : t('register.errorGeneric'));\n    } finally {\n      setSubmitting(false);\n    }\n  };\n\n  return (\n    <form onSubmit={handleSubmit} className=\"flex flex-col gap-4 p-4\">\n      <InputCatto\n        type=\"text\"\n        label={t('register.nameLabel')}\n        value={name}\n        onChange={(value) => setName(value)}\n        required\n        autoComplete=\"name\"\n      />\n      <InputCatto\n        type=\"email\"\n        label={t('register.emailLabel')}\n        value={email}\n        onChange={(value) => setEmail(value)}\n        required\n        autoComplete=\"email\"\n      />\n      <InputCatto\n        type=\"password\"\n        label={t('register.passwordLabel')}\n        value={password}\n        onChange={(value) => setPassword(value)}\n        required\n        autoComplete=\"new-password\"\n        minLength={8}\n      />\n      {error && (\n        <p className=\"text-sm text-red-600 dark:text-red-400\">{error}</p>\n      )}\n      <ButtonCatto type=\"submit\" variant=\"primary\" disabled={submitting}>\n        {submitting ? t('register.submitting') : t('register.submit')}\n      </ButtonCatto>\n    </form>\n  );\n};\n\nexport default RegisterUserFormCatto;\n"]}

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@ccatto/auth-ui",
+  "version": "0.1.0",
+  "description": "Catto Auth UI - presentational React forms (sign-in, register, login) for Catto-based apps. Bring your own auth client.",
+  "license": "MIT",
+  "author": "Chris Catto",
+  "keywords": [
+    "react",
+    "react-components",
+    "authentication",
+    "auth-ui",
+    "sign-in",
+    "register",
+    "next-intl",
+    "tailwindcss",
+    "catto"
+  ],
+  "homepage": "https://github.com/ccatto/catto-packages/tree/main/packages/auth-ui",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ccatto/catto-packages.git",
+    "directory": "packages/auth-ui"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "clean": "rimraf dist",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "@ccatto/ui": "*",
+    "@types/react": "^19.0.0",
+    "glob": "^13.0.0",
+    "next-intl": "^4.0.0",
+    "react": "^19.0.0",
+    "rimraf": "^6.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.7.0"
+  },
+  "peerDependencies": {
+    "@ccatto/ui": ">=1.0.0",
+    "next-intl": ">=3.0.0",
+    "react": ">=18.0.0"
+  }
+}