@olwiba/ui 0.0.29 → 0.0.32

package/dist/index.d.ts

@@ -134,11 +134,14 @@ interface AuthFormProps {
     /** (signup) Link back to the sign-in page */
     signInHref?: string;
     forgotPasswordHref?: string;
+    /** Brand node — in centered layout renders above the card; in split layout renders inside the card */
     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. @default 'centered' */

package/dist/index.js

@@ -253,8 +253,12 @@ function AppShell({
   }
   return inner;
 }
-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 }) });
+var defaultRenderLink2 = ({ href, children, className }) => /* @__PURE__ */ jsx("a", { href, className, children });
+function CenteredAuth({ children, brand, className }) {
+  return /* @__PURE__ */ jsxs("section", { className: cn$1("flex min-h-screen flex-col justify-center bg-background py-12 px-4 sm:px-6 lg:px-8", className), children: [
+    brand && /* @__PURE__ */ jsx("div", { className: "mx-auto w-full max-w-md text-center mb-8", children: brand }),
+    /* @__PURE__ */ jsx("div", { className: "mx-auto w-full max-w-md", children })
+  ] });
 }
 function SplitAuth({ children, panel }) {
   const defaultPanel = /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6", children: [
@@ -295,10 +299,11 @@ function DefaultForm({
   forgotPasswordHref = "#",
   brand,
   error,
-  loading
+  loading,
+  renderLink = defaultRenderLink2
 }) {
   const isSignUp = mode === "signup";
-  return /* @__PURE__ */ jsxs(Card$1, { className: "w-full max-w-md", children: [
+  return /* @__PURE__ */ jsxs(Card, { className: "w-full", children: [
     /* @__PURE__ */ jsxs(CardHeader, { children: [
       brand && /* @__PURE__ */ jsx("div", { className: "mb-2", children: brand }),
       /* @__PURE__ */ jsx(CardTitle, { children: isSignUp ? "Create an account" : "Sign in" }),
@@ -308,19 +313,23 @@ function DefaultForm({
       /* @__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__ */ jsx(Input, { 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", name: "email", type: "email", placeholder: "name@company.com", autoComplete: "email" })
+          /* @__PURE__ */ jsx(Label, { htmlFor: "auth-email", children: "Email address" }),
+          /* @__PURE__ */ jsx(Input, { 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" }),
-            !isSignUp && 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,
+            Input,
             {
               id: "auth-password",
               name: "password",
@@ -332,18 +341,18 @@ function DefaultForm({
         ] }),
         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", 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" })
+          /* @__PURE__ */ jsx(Button, { type: "submit", className: "w-full", disabled: loading, children: loading ? "Please wait\u2026" : isSignUp ? "Create account" : "Sign in" }),
+          onSso && /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", className: "w-full", onClick: onSso, disabled: loading, children: "Use SSO" })
         ] })
       ] }),
       /* @__PURE__ */ jsx("p", { className: "text-center text-xs text-muted-foreground", children: isSignUp ? /* @__PURE__ */ jsxs(Fragment, { children: [
         "Already have an account?",
         " ",
-        /* @__PURE__ */ jsx("a", { className: "text-foreground underline underline-offset-4", href: signInHref, children: "Sign in" })
+        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" })
       ] }) })
     ] })
   ] });
@@ -355,11 +364,13 @@ function AuthSection({
   className,
   ...formProps
 }) {
-  const form = children ?? /* @__PURE__ */ jsx(DefaultForm, { ...formProps });
   if (layout === "split") {
-    return /* @__PURE__ */ jsx("div", { className: cn$1("h-full", className), children: /* @__PURE__ */ jsx(SplitAuth, { panel, children: form }) });
+    const form2 = children ?? /* @__PURE__ */ jsx(DefaultForm, { ...formProps });
+    return /* @__PURE__ */ jsx("div", { className: cn$1("h-full", className), children: /* @__PURE__ */ jsx(SplitAuth, { panel, children: form2 }) });
   }
-  return /* @__PURE__ */ jsx("div", { className: cn$1("h-full", className), children: /* @__PURE__ */ jsx(CenteredAuth, { children: form }) });
+  const { brand, ...restFormProps } = formProps;
+  const form = children ?? /* @__PURE__ */ jsx(DefaultForm, { ...restFormProps });
+  return /* @__PURE__ */ jsx(CenteredAuth, { brand, className, children: form });
 }
 function EmptyState({ icon: Icon, title, description, action, className, ...props }) {
   return /* @__PURE__ */ jsxs(
@@ -378,14 +389,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%)]" }),
@@ -596,7 +607,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,
@@ -606,7 +617,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: [
@@ -736,14 +747,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%)]" }),
@@ -821,7 +832,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.",
@@ -829,7 +840,7 @@ function PricingSection({
   plans,
   saveBadge = "Save 34%",
   isAuthenticated,
-  renderLink = defaultRenderLink5,
+  renderLink = defaultRenderLink6,
   footnote
 }) {
   const [annual, setAnnual] = React25.useState(false);
@@ -1264,13 +1275,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 ?? "/";
@@ -1340,13 +1351,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.`;
@@ -1864,13 +1875,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
 }) {