@olwiba/ui 0.0.36 → 0.0.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olwiba/ui",
-  "version": "0.0.36",
+  "version": "0.0.38",
   "private": false,
   "type": "module",
   "sideEffects": false,

package/src/blog/ChangelogCard.tsx

@@ -0,0 +1,73 @@
+'use client';
+
+import * as React from 'react';
+import { Badge, cn } from '@olwiba/cn';
+import type { AppShellRenderLink } from '../app/AppShell';
+
+export interface ChangelogCardProps {
+  title: string;
+  summary: string;
+  date: string;
+  slug: string;
+  version?: string;
+  hrefPrefix?: string;
+  renderLink?: AppShellRenderLink;
+}
+
+function formatDate(dateStr: string) {
+  return new Date(dateStr).toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  });
+}
+
+export function ChangelogCard({
+  title,
+  summary,
+  date,
+  slug,
+  version,
+  hrefPrefix = '/changelog',
+  renderLink,
+}: ChangelogCardProps) {
+  const href = `${hrefPrefix}/${slug}`;
+
+  const LinkWrapper = ({
+    children,
+    className,
+  }: {
+    children: React.ReactNode;
+    className?: string;
+  }) =>
+    renderLink ? (
+      renderLink({ href, children, className })
+    ) : (
+      <a href={href} className={className}>
+        {children}
+      </a>
+    );
+
+  return (
+    <article className="group flex flex-col gap-3 border-b border-border/60 pb-8 last:border-0 last:pb-0">
+      <div className="flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
+        <time dateTime={date}>{formatDate(date)}</time>
+        {version && (
+          <>
+            <span>·</span>
+            <Badge variant="secondary" className="font-mono text-xs">
+              {version}
+            </Badge>
+          </>
+        )}
+      </div>
+      <h2 className="text-lg font-semibold leading-snug tracking-tight">
+        <LinkWrapper className="transition-colors hover:text-primary">{title}</LinkWrapper>
+      </h2>
+      <p className={cn('line-clamp-3 text-sm text-muted-foreground')}>{summary}</p>
+      <LinkWrapper className="text-sm font-medium text-primary hover:underline">
+        Read release notes →
+      </LinkWrapper>
+    </article>
+  );
+}

package/src/blog/ChangelogList.tsx

@@ -0,0 +1,35 @@
+'use client';
+
+import type { AppShellRenderLink } from '../app/AppShell';
+import { ChangelogCard, type ChangelogCardProps } from './ChangelogCard';
+
+export interface ChangelogListProps {
+  entries: ChangelogCardProps[];
+  renderLink?: AppShellRenderLink;
+  emptyMessage?: string;
+  hrefPrefix?: string;
+}
+
+export function ChangelogList({
+  entries,
+  renderLink,
+  emptyMessage = 'No changelog entries yet.',
+  hrefPrefix,
+}: ChangelogListProps) {
+  if (entries.length === 0) {
+    return <p className="text-sm italic text-muted-foreground">{emptyMessage}</p>;
+  }
+
+  return (
+    <div className="flex flex-col gap-8">
+      {entries.map((entry) => (
+        <ChangelogCard
+          key={entry.slug}
+          {...entry}
+          hrefPrefix={hrefPrefix}
+          renderLink={renderLink}
+        />
+      ))}
+    </div>
+  );
+}

package/src/index.ts

@@ -57,8 +57,8 @@ export { TestimonialsSection, type TestimonialsSectionProps } from './marketing/
 export { TeamSection } from './marketing/TeamSection';
 export { FaqSection, type FaqSectionProps } from './marketing/FaqSection';
 export { StatsSection, type StatsSectionProps } from './marketing/StatsSection';
-export { NewsletterSection } from './marketing/NewsletterSection';
-export { ContactSection } from './marketing/ContactSection';
+export { NewsletterSection, type NewsletterSectionProps } from './marketing/NewsletterSection';
+export { ContactSection, type ContactSectionProps, type ContactInfoItem } from './marketing/ContactSection';
 
 // ─── Marketing — elements ─────────────────────────────────────────────────────
 export { Navbar, type NavbarProps } from './marketing/Navbar';
@@ -107,6 +107,8 @@ export { RootErrorFallback } from './components/RootErrorFallback';
 // ─── Blog ────────────────────────────────────────────────────────────────────
 export { PostCard, type PostCardProps } from './blog/PostCard';
 export { PostList, type PostListProps } from './blog/PostList';
+export { ChangelogList, type ChangelogListProps } from './blog/ChangelogList';
+export { ChangelogCard, type ChangelogCardProps } from './blog/ChangelogCard';
 export { MdxContent, type MdxContentProps } from './blog/MdxContent';
 
 // ─── Hooks ────────────────────────────────────────────────────────────────────

package/src/marketing/ContactSection.tsx

@@ -1,44 +1,81 @@
 'use client';
 
 import * as React from 'react';
-import { Mail, MapPin, MessageSquare, Phone, Send } from 'lucide-react';
+import { Mail, MapPin, MessageSquare, Phone, Send, type LucideIcon } from 'lucide-react';
 import { Badge, Button, Input, Label, Separator, Textarea } from '@olwiba/cn';
 
-const contactInfo = [
-  { Icon: Mail, label: 'Email', value: 'hello@olwiba.com' },
-  { Icon: Phone, label: 'Phone', value: '+1 (555) 000-0000' },
-  { Icon: MapPin, label: 'Office', value: 'San Francisco, CA' },
+export type ContactInfoItem = {
+  label: string;
+  value: string;
+  icon?: LucideIcon;
+};
+
+export interface ContactSectionProps {
+  badge?: string;
+  title?: string;
+  description?: string;
+  contactInfo?: ContactInfoItem[];
+  successTitle?: string;
+  successDescription?: string;
+  sendAnotherLabel?: string;
+  onSubmit?: (event: React.FormEvent<HTMLFormElement>) => void | Promise<void>;
+}
+
+const defaultContactInfoResolved: ContactInfoItem[] = [
+  { icon: Mail, label: 'Email', value: 'hello@olwiba.com' },
+  { icon: Phone, label: 'Phone', value: '+1 (555) 000-0000' },
+  { icon: MapPin, label: 'Office', value: 'San Francisco, CA' },
 ];
 
-export function ContactSection() {
+const defaults = {
+  badge: 'Contact us',
+  title: "Let's talk",
+  description:
+    "Have a question or want to work together? Fill in the form and we'll get back to you within one business day.",
+  successTitle: 'Message sent',
+  successDescription: "Thanks for reaching out. We'll get back to you within one business day.",
+  sendAnotherLabel: 'Send another',
+};
+
+export function ContactSection({
+  badge = defaults.badge,
+  title = defaults.title,
+  description = defaults.description,
+  contactInfo = defaultContactInfoResolved,
+  successTitle = defaults.successTitle,
+  successDescription = defaults.successDescription,
+  sendAnotherLabel = defaults.sendAnotherLabel,
+  onSubmit,
+}: ContactSectionProps = {}) {
   const [submitted, setSubmitted] = React.useState(false);
 
-  function handleSubmit(e: React.FormEvent) {
+  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
     e.preventDefault();
+    await onSubmit?.(e);
     setSubmitted(true);
   }
 
   return (
     <section className="overflow-hidden rounded-2xl border bg-card">
       <div className="grid lg:grid-cols-[1fr_1.4fr]">
-        {/* Left panel */}
         <div className="relative overflow-hidden bg-primary px-8 py-12 text-primary-foreground">
           <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,hsl(var(--primary-foreground)/0.1),transparent_60%)]" />
           <div className="relative space-y-6">
             <div>
-              <Badge variant="secondary" className="mb-3 bg-primary-foreground/15 text-primary-foreground hover:bg-primary-foreground/20">
-                Contact us
+              <Badge
+                variant="secondary"
+                className="mb-3 bg-primary-foreground/15 text-primary-foreground hover:bg-primary-foreground/20"
+              >
+                {badge}
               </Badge>
-              <h2 className="text-2xl font-semibold">Let's talk</h2>
-              <p className="mt-2 text-sm text-primary-foreground/70">
-                Have a question or want to work together? Fill in the form and we'll get back to you within one business day.
-              </p>
+              <h2 className="text-2xl font-semibold">{title}</h2>
+              <p className="mt-2 text-sm text-primary-foreground/70">{description}</p>
             </div>
 
             <Separator className="bg-primary-foreground/20" />
 
             <div className="space-y-4">
-              {contactInfo.map(({ Icon, label, value }) => (
+              {contactInfo.map(({ icon: Icon = Mail, label, value }) => (
                 <div key={label} className="flex items-center gap-3">
                   <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary-foreground/10">
                     <Icon className="size-4" />
@@ -53,7 +90,6 @@ export function ContactSection() {
           </div>
         </div>
 
-        {/* Form */}
         <div className="p-8">
           {submitted ? (
             <div className="flex h-full min-h-[320px] flex-col items-center justify-center gap-4 text-center">
@@ -61,12 +97,12 @@ export function ContactSection() {
                 <MessageSquare className="size-6" />
               </div>
               <div>
-                <h3 className="font-semibold">Message sent</h3>
-                <p className="mt-1 text-sm text-muted-foreground">
-                  Thanks for reaching out. We'll get back to you within one business day.
-                </p>
+                <h3 className="font-semibold">{successTitle}</h3>
+                <p className="mt-1 text-sm text-muted-foreground">{successDescription}</p>
               </div>
-              <Button variant="outline" onClick={() => setSubmitted(false)}>Send another</Button>
+              <Button variant="outline" onClick={() => setSubmitted(false)}>
+                {sendAnotherLabel}
+              </Button>
             </div>
           ) : (
             <form onSubmit={handleSubmit} className="space-y-5">

package/src/marketing/NewsletterSection.tsx

@@ -4,13 +4,51 @@ import * as React from 'react';
 import { ArrowRight, Mail } from 'lucide-react';
 import { Badge, Button, Input } from '@olwiba/cn';
 
-export function NewsletterSection() {
+export interface NewsletterSectionProps {
+  badge?: string;
+  title?: string;
+  description?: string;
+  placeholder?: string;
+  submitLabel?: string;
+  privacyHref?: string;
+  privacyLabel?: string;
+  successTitle?: string;
+  successDescription?: string;
+  onSubscribe?: (email: string) => void | Promise<void>;
+}
+
+const defaults = {
+  badge: 'Newsletter',
+  title: 'Stay in the loop',
+  description:
+    'New components, release notes, and product tips — straight to your inbox. No spam, unsubscribe any time.',
+  placeholder: 'you@company.com',
+  submitLabel: 'Subscribe',
+  privacyHref: '#',
+  privacyLabel: 'Privacy Policy',
+  successTitle: "You're on the list.",
+  successDescription: "We'll be in touch soon.",
+};
+
+export function NewsletterSection({
+  badge = defaults.badge,
+  title = defaults.title,
+  description = defaults.description,
+  placeholder = defaults.placeholder,
+  submitLabel = defaults.submitLabel,
+  privacyHref = defaults.privacyHref,
+  privacyLabel = defaults.privacyLabel,
+  successTitle = defaults.successTitle,
+  successDescription = defaults.successDescription,
+  onSubscribe,
+}: NewsletterSectionProps = {}) {
   const [email, setEmail] = React.useState('');
   const [submitted, setSubmitted] = React.useState(false);
 
-  function handleSubmit(e: React.FormEvent) {
+  async function handleSubmit(e: React.FormEvent) {
     e.preventDefault();
     if (!email) return;
+    await onSubscribe?.(email);
     setSubmitted(true);
   }
 
@@ -23,31 +61,29 @@ export function NewsletterSection() {
             <Mail className="size-5" />
           </div>
 
-          <Badge variant="secondary" className="mb-3">Newsletter</Badge>
-          <h2 className="text-balance text-3xl font-semibold tracking-tight sm:text-4xl">
-            Stay in the loop
-          </h2>
-          <p className="mx-auto mt-4 max-w-sm text-pretty text-muted-foreground">
-            New components, release notes, and product tips — straight to your inbox. No spam, unsubscribe any time.
-          </p>
+          <Badge variant="secondary" className="mb-3">
+            {badge}
+          </Badge>
+          <h2 className="text-balance text-3xl font-semibold tracking-tight sm:text-4xl">{title}</h2>
+          <p className="mx-auto mt-4 max-w-sm text-pretty text-muted-foreground">{description}</p>
 
           {submitted ? (
             <div className="mt-8 rounded-2xl border bg-muted/50 px-6 py-5 text-sm">
-              <span className="font-medium">You're on the list.</span>{' '}
-              <span className="text-muted-foreground">We'll be in touch soon.</span>
+              <span className="font-medium">{successTitle}</span>{' '}
+              <span className="text-muted-foreground">{successDescription}</span>
             </div>
           ) : (
             <form onSubmit={handleSubmit} className="mt-8 flex flex-col gap-3 sm:flex-row">
               <Input
                 type="email"
-                placeholder="you@company.com"
+                placeholder={placeholder}
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
                 required
                 className="flex-1"
               />
               <Button type="submit">
-                Subscribe
+                {submitLabel}
                 <ArrowRight className="ml-2 size-4" />
               </Button>
             </form>
@@ -55,7 +91,10 @@ export function NewsletterSection() {
 
           <p className="mt-4 text-xs text-muted-foreground">
             By subscribing you agree to our{' '}
-            <a href="#" className="underline underline-offset-4 hover:text-foreground">Privacy Policy</a>.
+            <a href={privacyHref} className="underline underline-offset-4 hover:text-foreground">
+              {privacyLabel}
+            </a>
+            .
           </p>
         </div>
       </div>