@olwiba/ui 0.0.28 → 0.0.30

package/dist/index.d.ts

@@ -125,16 +125,27 @@ interface AppShellProps {
 declare function AppShell({ brand, navItems, action, user, pageTitle, renderLink, collapsible, sidebarPosition, side, children, }?: AppShellProps): react_jsx_runtime.JSX.Element;
 
 interface AuthFormProps {
+    /** Controls form title, fields, and footer text. @default 'signin' */
+    mode?: 'signin' | 'signup';
     onSubmit?: (e: React.FormEvent<HTMLFormElement>) => void;
     onSso?: () => void;
+    /** (signin) Link to the sign-up page */
     signUpHref?: string;
+    /** (signup) Link back to the sign-in page */
+    signInHref?: string;
     forgotPasswordHref?: string;
     brand?: React.ReactNode;
+    /** Error message displayed below the form fields */
+    error?: string;
+    /** Disables the submit button and shows a loading label */
+    loading?: boolean;
+    /** Render prop for links — use to inject framework-native link components (e.g. TanStack Router Link) */
+    renderLink?: AppShellRenderLink;
 }
 interface AuthSectionProps extends AuthFormProps {
-    /** Visual layout of the auth screen */
+    /** Visual layout of the auth screen. @default 'centered' */
     layout?: 'centered' | 'split';
-    /** Custom form/card content. Defaults to the built-in sign-in form. */
+    /** Custom form/card content. Defaults to the built-in form. */
     children?: React.ReactNode;
     /** (split layout only) Custom content for the left decorative panel */
     panel?: React.ReactNode;

package/dist/index.js

@@ -253,6 +253,7 @@ function AppShell({
   }
   return inner;
 }
+var defaultRenderLink2 = ({ href, children, className }) => /* @__PURE__ */ jsx("a", { href, className, children });
 function CenteredAuth({ children }) {
   return /* @__PURE__ */ jsx("section", { className: "flex h-full min-h-[720px] w-full flex-col items-center justify-center gap-6 rounded-2xl bg-muted p-6 md:p-10", children: /* @__PURE__ */ jsx("div", { className: "flex w-full max-w-sm flex-col gap-6", children }) });
 }
@@ -286,36 +287,70 @@ function SplitAuth({ children, panel }) {
     /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center p-6 lg:p-10", children })
   ] });
 }
-function DefaultForm({ onSubmit, onSso, signUpHref = "#", forgotPasswordHref = "#", brand }) {
+function DefaultForm({
+  mode = "signin",
+  onSubmit,
+  onSso,
+  signUpHref = "#",
+  signInHref = "#",
+  forgotPasswordHref = "#",
+  brand,
+  error,
+  loading,
+  renderLink = defaultRenderLink2
+}) {
+  const isSignUp = mode === "signup";
   return /* @__PURE__ */ jsxs(Card$1, { className: "w-full max-w-md", children: [
     /* @__PURE__ */ jsxs(CardHeader, { children: [
       brand && /* @__PURE__ */ jsx("div", { className: "mb-2", children: brand }),
-      /* @__PURE__ */ jsx(CardTitle, { children: "Sign in" }),
-      /* @__PURE__ */ jsx(CardDescription, { children: "Enter your email and password to continue." })
+      /* @__PURE__ */ jsx(CardTitle, { children: isSignUp ? "Create an account" : "Sign in" }),
+      /* @__PURE__ */ jsx(CardDescription, { children: isSignUp ? "Enter your details to create your account." : "Enter your email and password to continue." })
     ] }),
     /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4", children: [
       /* @__PURE__ */ jsxs("form", { onSubmit, className: "space-y-4", children: [
+        isSignUp && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "auth-name", children: "Name" }),
+          /* @__PURE__ */ jsx(Input$1, { id: "auth-name", name: "name", type: "text", placeholder: "Your name", autoComplete: "name" })
+        ] }),
         /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
           /* @__PURE__ */ jsx(Label, { htmlFor: "auth-email", children: "Email" }),
-          /* @__PURE__ */ jsx(Input$1, { id: "auth-email", type: "email", placeholder: "name@company.com" })
+          /* @__PURE__ */ jsx(Input$1, { id: "auth-email", name: "email", type: "email", placeholder: "name@company.com", autoComplete: "email" })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
             /* @__PURE__ */ jsx(Label, { htmlFor: "auth-password", children: "Password" }),
-            forgotPasswordHref && /* @__PURE__ */ jsx("a", { className: "text-xs text-muted-foreground underline underline-offset-4 hover:text-foreground", href: forgotPasswordHref, children: "Forgot password?" })
+            !isSignUp && forgotPasswordHref && renderLink({
+              href: forgotPasswordHref,
+              className: "text-xs text-muted-foreground underline underline-offset-4 hover:text-foreground",
+              children: "Forgot password?"
+            })
           ] }),
-          /* @__PURE__ */ jsx(Input$1, { id: "auth-password", type: "password", placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022" })
+          /* @__PURE__ */ jsx(
+            Input$1,
+            {
+              id: "auth-password",
+              name: "password",
+              type: "password",
+              placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022",
+              autoComplete: isSignUp ? "new-password" : "current-password"
+            }
+          )
         ] }),
+        error && /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-destructive", children: error }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-          /* @__PURE__ */ jsx(Button$1, { type: "submit", className: "w-full", children: "Continue" }),
-          onSso && /* @__PURE__ */ jsx(Button$1, { type: "button", variant: "outline", className: "w-full", onClick: onSso, children: "Use SSO" })
+          /* @__PURE__ */ jsx(Button$1, { type: "submit", className: "w-full", disabled: loading, children: loading ? "Please wait\u2026" : isSignUp ? "Create account" : "Sign in" }),
+          onSso && /* @__PURE__ */ jsx(Button$1, { type: "button", variant: "outline", className: "w-full", onClick: onSso, disabled: loading, children: "Use SSO" })
         ] })
       ] }),
-      signUpHref && /* @__PURE__ */ jsxs("p", { className: "text-center text-xs text-muted-foreground", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-center text-xs text-muted-foreground", children: isSignUp ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        "Already have an account?",
+        " ",
+        renderLink({ href: signInHref, className: "text-foreground underline underline-offset-4", children: "Sign in" })
+      ] }) : signUpHref && /* @__PURE__ */ jsxs(Fragment, { children: [
         "New here?",
         " ",
-        /* @__PURE__ */ jsx("a", { className: "text-foreground underline underline-offset-4", href: signUpHref, children: "Create an account" })
-      ] })
+        renderLink({ href: signUpHref, className: "text-foreground underline underline-offset-4", children: "Create an account" })
+      ] }) })
     ] })
   ] });
 }
@@ -349,14 +384,14 @@ function EmptyState({ icon: Icon, title, description, action, className, ...prop
     }
   );
 }
-var defaultRenderLink2 = ({ href, children, className }) => /* @__PURE__ */ jsx("a", { href, className, children });
+var defaultRenderLink3 = ({ href, children, className }) => /* @__PURE__ */ jsx("a", { href, className, children });
 function ErrorPage({
   statusCode = "404",
   title = "Page not found",
   description = "The page you're looking for doesn't exist or has been moved. Check the URL or head back home.",
   action = { label: "Take me home", href: "/" },
   backAction = { label: "Go back" },
-  renderLink = defaultRenderLink2
+  renderLink = defaultRenderLink3
 }) {
   return /* @__PURE__ */ jsx("section", { className: "overflow-hidden rounded-2xl border bg-card", children: /* @__PURE__ */ jsxs("div", { className: "relative flex min-h-[560px] flex-col items-center justify-center px-6 py-16 text-center", children: [
     /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-[radial-gradient(circle_at_center,hsl(var(--muted)/0.8),transparent_70%)]" }),
@@ -567,7 +602,7 @@ function SectionTitle({ title, description, badge, className }) {
     description && /* @__PURE__ */ jsx("p", { className: "mx-auto mt-4 max-w-2xl text-pretty text-muted-foreground", children: description })
   ] }) });
 }
-var defaultRenderLink3 = ({ href, children, className }) => /* @__PURE__ */ jsx("a", { href, className, children });
+var defaultRenderLink4 = ({ href, children, className }) => /* @__PURE__ */ jsx("a", { href, className, children });
 function HeroSection({
   heading,
   badge,
@@ -577,7 +612,7 @@ function HeroSection({
   heroImage,
   avatarUrls,
   socialProofText,
-  renderLink = defaultRenderLink3
+  renderLink = defaultRenderLink4
 }) {
   return /* @__PURE__ */ jsx("section", { className: "overflow-hidden", children: /* @__PURE__ */ jsxs("div", { className: "px-6 py-14 sm:px-10 sm:py-20", children: [
     /* @__PURE__ */ jsxs("div", { className: "mx-auto grid max-w-6xl items-center gap-10 lg:grid-cols-2 lg:gap-16", children: [
@@ -707,14 +742,14 @@ function FeaturesSection({
     )) })
   ] }) }) });
 }
-var defaultRenderLink4 = ({ href, children, className }) => /* @__PURE__ */ jsx("a", { href, className, children });
+var defaultRenderLink5 = ({ href, children, className }) => /* @__PURE__ */ jsx("a", { href, className, children });
 function CtaSection({
   heading,
   description,
   primaryCta,
   secondaryCta,
   footnote,
-  renderLink = defaultRenderLink4
+  renderLink = defaultRenderLink5
 }) {
   return /* @__PURE__ */ jsx("section", { className: "overflow-hidden rounded-2xl border bg-card", children: /* @__PURE__ */ jsxs("div", { className: "relative px-6 py-16 sm:px-10 sm:py-24", children: [
     /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-[radial-gradient(ellipse_at_center,hsl(var(--primary)/0.15),transparent_70%)]" }),
@@ -792,7 +827,7 @@ function PricingCard({
     }
   );
 }
-var defaultRenderLink5 = ({ href, children, className }) => /* @__PURE__ */ jsx("a", { href, className, children });
+var defaultRenderLink6 = ({ href, children, className }) => /* @__PURE__ */ jsx("a", { href, className, children });
 function PricingSection({
   title = "Simple, transparent pricing",
   description = "Start for free. Scale as you grow. No hidden fees.",
@@ -800,7 +835,7 @@ function PricingSection({
   plans,
   saveBadge = "Save 34%",
   isAuthenticated,
-  renderLink = defaultRenderLink5,
+  renderLink = defaultRenderLink6,
   footnote
 }) {
   const [annual, setAnnual] = React25.useState(false);
@@ -1235,13 +1270,13 @@ function ThemeSwitchMinimal() {
   };
   return /* @__PURE__ */ jsx(Button$1, { variant: "ghost", size: "icon", onClick: toggle, className: "size-8", "aria-label": "Toggle theme", children: theme === "dark" ? /* @__PURE__ */ jsx(Sun, { className: "size-4" }) : /* @__PURE__ */ jsx(Moon, { className: "size-4" }) });
 }
-var defaultRenderLink6 = ({ href, children, className }) => /* @__PURE__ */ jsx("a", { href, className, children });
+var defaultRenderLink7 = ({ href, children, className }) => /* @__PURE__ */ jsx("a", { href, className, children });
 function Navbar({
   brand,
   navLinks,
   cta,
   showThemeToggle = false,
-  renderLink = defaultRenderLink6
+  renderLink = defaultRenderLink7
 }) {
   const [open, setOpen] = React25.useState(false);
   const brandHref = brand.href ?? "/";
@@ -1311,13 +1346,13 @@ function Navbar({
     ] })
   ] }) });
 }
-var defaultRenderLink7 = ({ href, children, className }) => /* @__PURE__ */ jsx("a", { href, className, children });
+var defaultRenderLink8 = ({ href, children, className }) => /* @__PURE__ */ jsx("a", { href, className, children });
 function Footer({
   brand,
   navLinks,
   socialLinks,
   legal,
-  renderLink = defaultRenderLink7
+  renderLink = defaultRenderLink8
 }) {
   const brandHref = brand.href ?? "/";
   const copyrightText = legal ?? `\xA9 ${(/* @__PURE__ */ new Date()).getFullYear()} ${brand.name}. All rights reserved.`;
@@ -1835,13 +1870,13 @@ function FullPageSpinner({ message }) {
     message && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: message })
   ] });
 }
-var defaultRenderLink8 = ({ href, children, className }) => /* @__PURE__ */ jsx("a", { href, className, children });
+var defaultRenderLink9 = ({ href, children, className }) => /* @__PURE__ */ jsx("a", { href, className, children });
 function PageHeader({
   title,
   description,
   breadcrumbs,
   backButton,
-  renderLink = defaultRenderLink8,
+  renderLink = defaultRenderLink9,
   className,
   children
 }) {