@olwiba/ui 0.1.15 → 0.2.0

package/src/components/NotificationsPopover.tsx

@@ -0,0 +1,146 @@
+'use client';
+
+import * as React from 'react';
+import { Bell, Inbox } from 'lucide-react';
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  cn,
+} from '@olwiba/cn';
+import { Button } from '../primitives/Button';
+
+export interface NotificationItem {
+  id: string;
+  title: string;
+  description?: string;
+  /** Pre-formatted timestamp, e.g. "2h ago" or "Yesterday". */
+  timestamp?: string;
+  read?: boolean;
+  /** Avatar image — takes precedence over `icon`. */
+  avatar?: string;
+  icon?: React.ReactNode;
+}
+
+export interface NotificationsPopoverProps {
+  notifications: NotificationItem[];
+  onNotificationClick?: (notification: NotificationItem) => void;
+  /** Shows a "Mark all read" action in the header when there are unread items. */
+  onMarkAllRead?: () => void;
+  title?: string;
+  emptyMessage?: string;
+  /** Popover alignment relative to the bell button. @default 'end' */
+  align?: 'start' | 'center' | 'end';
+  /** Controlled open state — omit to let the component manage it internally. */
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  className?: string;
+}
+
+/**
+ * Bell button + persistent notification inbox. Complements `notify()` toasts:
+ * a toast announces an event as it happens, this popover holds the history.
+ * Presentation-only — pass `notifications` from your own data layer and
+ * persist read state via `onMarkAllRead`/`onNotificationClick`.
+ */
+export function NotificationsPopover({
+  notifications,
+  onNotificationClick,
+  onMarkAllRead,
+  title = 'Notifications',
+  emptyMessage = 'Nothing new — you’re all caught up.',
+  align = 'end',
+  open,
+  onOpenChange,
+  className,
+}: NotificationsPopoverProps) {
+  const unreadCount = notifications.filter((n) => !n.read).length;
+
+  return (
+    <Popover open={open} onOpenChange={onOpenChange}>
+      <PopoverTrigger asChild>
+        <Button variant="ghost" size="icon" className={cn('relative size-8', className)}>
+          <Bell className="size-4" />
+          {unreadCount > 0 && (
+            <span className="absolute -right-0.5 -top-0.5 flex min-w-4 items-center justify-center rounded-full bg-primary px-1 text-[10px] font-semibold leading-4 text-primary-foreground">
+              {unreadCount > 9 ? '9+' : unreadCount}
+            </span>
+          )}
+          <span className="sr-only">
+            {title}{unreadCount > 0 ? ` (${unreadCount} unread)` : ''}
+          </span>
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent align={align} className="w-80 p-0">
+        <div className="flex items-center justify-between border-b px-4 py-3">
+          <p className="text-sm font-semibold">{title}</p>
+          {onMarkAllRead && unreadCount > 0 && (
+            <button
+              type="button"
+              onClick={onMarkAllRead}
+              className="text-xs font-medium text-muted-foreground hover:text-foreground"
+            >
+              Mark all read
+            </button>
+          )}
+        </div>
+
+        {notifications.length === 0 ? (
+          <div className="flex flex-col items-center gap-2 px-4 py-10 text-center">
+            <Inbox className="size-6 text-muted-foreground" />
+            <p className="text-sm text-muted-foreground">{emptyMessage}</p>
+          </div>
+        ) : (
+          <ul className="max-h-80 overflow-y-auto">
+            {notifications.map((notification) => (
+              <li key={notification.id} className="border-b last:border-b-0">
+                <button
+                  type="button"
+                  onClick={() => onNotificationClick?.(notification)}
+                  className={cn(
+                    'flex w-full items-start gap-3 px-4 py-3 text-left transition-colors hover:bg-muted/60',
+                    !notification.read && 'bg-muted/40',
+                  )}
+                >
+                  <span
+                    aria-hidden
+                    className={cn(
+                      'mt-1.5 size-2 shrink-0 rounded-full',
+                      notification.read ? 'bg-transparent' : 'bg-primary',
+                    )}
+                  />
+                  {notification.avatar ? (
+                    <Avatar className="size-8 shrink-0">
+                      <AvatarImage src={notification.avatar} alt="" />
+                      <AvatarFallback>{notification.title.slice(0, 2).toUpperCase()}</AvatarFallback>
+                    </Avatar>
+                  ) : notification.icon ? (
+                    <span className="mt-0.5 shrink-0 text-muted-foreground">{notification.icon}</span>
+                  ) : null}
+                  <span className="min-w-0 flex-1">
+                    <span className={cn('block truncate text-sm', !notification.read && 'font-medium')}>
+                      {notification.title}
+                    </span>
+                    {notification.description && (
+                      <span className="mt-0.5 line-clamp-2 block text-xs text-muted-foreground">
+                        {notification.description}
+                      </span>
+                    )}
+                    {notification.timestamp && (
+                      <span className="mt-1 block text-xs text-muted-foreground/70">
+                        {notification.timestamp}
+                      </span>
+                    )}
+                  </span>
+                </button>
+              </li>
+            ))}
+          </ul>
+        )}
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/components/Notify.tsx

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { toast } from 'sonner';
-import { CheckCircle2, Inbox, Info, X } from 'lucide-react';
+import { AlertCircle, AlertTriangle, CheckCircle2, Inbox, Info, X } from 'lucide-react';
 import { cn } from '@olwiba/cn';
 import { Button } from '../primitives/Button';
 
@@ -12,7 +12,7 @@ export interface NotifyAction {
 }
 
 export interface NotificationToastProps {
-  variant?: 'success' | 'info' | 'message';
+  variant?: 'success' | 'info' | 'warning' | 'error' | 'message';
   title: string;
   description?: string;
   /** Avatar image — overrides the variant icon (e.g. for a message-from-a-person toast). */
@@ -27,6 +27,8 @@ export interface NotificationToastProps {
 const variantIcon = {
   success: <CheckCircle2 className="size-5 text-primary" />,
   info: <Info className="size-5 text-muted-foreground" />,
+  warning: <AlertTriangle className="size-5 text-amber-500 dark:text-amber-400" />,
+  error: <AlertCircle className="size-5 text-destructive" />,
   message: <Inbox className="size-5 text-muted-foreground" />,
 } as const;
 

package/src/index.ts

@@ -84,10 +84,8 @@ export { FeaturesSection, type FeaturesSectionProps } from './marketing/Features
 export { GroupedFeaturesSection, type GroupedFeaturesSectionProps, type GroupedFeatureGroup } from './marketing/GroupedFeaturesSection';
 export { StepsSection, type StepsSectionProps, type StepItem } from './marketing/StepsSection';
 export { TechStackSection, type TechStackSectionProps, type TechStackItem } from './marketing/TechStackSection';
-export { CarouselSection, type CarouselSectionProps } from './marketing/CarouselSection';
 export { FeatureMarqueeSection, type FeatureMarqueeSectionProps, type FeatureMarqueeRow, type FeatureMarqueeItem } from './marketing/FeatureMarqueeSection';
 export { CtaSection, type CtaSectionProps } from './marketing/CtaSection';
-export { CtaCardSection, type CtaCardSectionProps } from './marketing/CtaCardSection';
 export { PricingSection, type PricingSectionProps, type PricingPlan } from './marketing/PricingSection';
 export { TestimonialsSection, type TestimonialsSectionProps } from './marketing/TestimonialsSection';
 export { TeamSection, type TeamMember, type TeamSectionProps } from './marketing/TeamSection';
@@ -115,6 +113,9 @@ export { CountdownTimer, type CountdownTimerProps } from './motion/CountdownTime
 export { AnimatedPill, type AnimatedPillProps } from './motion/AnimatedPill';
 export { PageTransition, type PageTransitionProps } from './motion/PageTransition';
 
+// ─── Mechanics — behavior wrappers that play any children ────────────────────
+export { Carousel, type CarouselProps } from './mechanics/Carousel';
+
 // ─── Components — interactive ────────────────────────────────────────────────
 export { Spotlight, type SpotlightProps, type SpotlightGroup, type SpotlightItem } from './components/Spotlight';
 export { Dock, type DockProps, type DockItem } from './components/Dock';
@@ -128,6 +129,8 @@ export { FileUpload, type FileUploadProps, type FileUploadEntry } from './compon
 
 // ─── Components — notifications ──────────────────────────────────────────────
 export { NotificationToast, type NotificationToastProps, notify, type NotifyOptions, type NotifyAction } from './components/Notify';
+export { NotificationsPopover, type NotificationsPopoverProps, type NotificationItem } from './components/NotificationsPopover';
+export { ActivityFeed, type ActivityFeedProps, type ActivityFeedItem } from './components/ActivityFeed';
 
 // ─── Components — device mockups ────────────────────────────────────────────
 export { PhoneFrame, type PhoneFrameProps } from './components/PhoneFrame';

package/src/marketing/ContactSection.tsx

@@ -2,7 +2,11 @@
 
 import * as React from 'react';
 import { ChevronDown, Mail, MessageSquare, Send, type LucideIcon } from 'lucide-react';
-import { Badge, Button, Input, Label, Textarea } from '@olwiba/cn';
+import { cn, Label, useUIVariant } from '@olwiba/cn';
+import { Badge } from '../primitives/Badge';
+import { Button } from '../primitives/Button';
+import { Input } from '../primitives/Input';
+import { Textarea } from '../primitives/Textarea';
 
 export type ContactInfoItem = {
   label: string;
@@ -53,6 +57,13 @@ export function ContactSection({
   onSubmit,
 }: ContactSectionProps = {}) {
   const [submitted, setSubmitted] = React.useState(false);
+  const mode = useUIVariant();
+  const sectionClasses = cn(
+    'overflow-hidden bg-card',
+    mode === 'smooth' && 'rounded-3xl border',
+    mode === 'playful' && 'rounded-2xl border-primary/25 border',
+    !mode && 'rounded-2xl border',
+  );
 
   async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
     e.preventDefault();
@@ -61,7 +72,7 @@ export function ContactSection({
   }
 
   return (
-    <section className="overflow-hidden rounded-2xl border bg-card">
+    <section className={sectionClasses}>
       <div className="px-6 py-14 sm:px-10 sm:py-20">
 
         {/* Header */}

package/src/marketing/CtaSection.tsx

@@ -1,16 +1,28 @@
 'use client';
 
-import { ArrowRight, Sparkles } from 'lucide-react';
-import { Button, cn, useUIVariant } from '@olwiba/cn';
+import * as React from 'react';
+import { ArrowRight, Rocket, Sparkles } from 'lucide-react';
+import { cn, useUIVariant } from '@olwiba/cn';
+import { Button } from '../primitives/Button';
 import { FadeIn } from '../motion/FadeIn';
+import { useIntersectionObserver } from '../hooks/use-intersection-observer';
 import type { AppShellRenderLink } from '../app/AppShell';
 
 export interface CtaSectionProps {
   heading: string;
-  description: string;
+  description?: string;
   primaryCta: { label: string; href: string };
   secondaryCta?: { label: string; href: string };
   footnote?: string;
+  /**
+   * Visual treatment of the section.
+   * - `'default'` — badge icon, radial glow, primary + secondary CTAs
+   * - `'showcase'` — large watermark icon with a scroll-reveal, single pill CTA
+   * @default 'default'
+   */
+  variant?: 'default' | 'showcase';
+  /** (showcase) Watermark icon rendered behind the content. @default <Rocket /> */
+  icon?: React.ReactNode;
   renderLink?: AppShellRenderLink;
 }
 
@@ -18,14 +30,79 @@ const defaultRenderLink: AppShellRenderLink = ({ href, children, className }) =>
   <a href={href} className={className}>{children}</a>
 );
 
-export function CtaSection({
+function ShowcaseCta({
   heading,
   description,
   primaryCta,
-  secondaryCta,
   footnote,
+  icon,
   renderLink = defaultRenderLink,
-}: CtaSectionProps) {
+  sectionClasses,
+}: CtaSectionProps & { sectionClasses: string }) {
+  const [ref, intersecting] = useIntersectionObserver({ threshold: 0.15 });
+  const [visible, setVisible] = React.useState(false);
+
+  React.useEffect(() => {
+    if (intersecting) setVisible(true);
+  }, [intersecting]);
+
+  return (
+    <section
+      ref={ref as React.RefObject<HTMLElement>}
+      className={cn(
+        sectionClasses,
+        'relative transition-[opacity,transform] duration-700 ease-out',
+        visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-6',
+      )}
+    >
+      {/* Decorative watermark icon */}
+      <div
+        className="pointer-events-none absolute inset-0 flex items-center justify-center"
+        style={{
+          opacity: visible ? 0.1 : 0,
+          transform: visible ? 'scale(1) rotate(0deg)' : 'scale(0.9) rotate(-5deg)',
+          transition: 'opacity 700ms ease 200ms, transform 700ms ease 200ms',
+        }}
+      >
+        {icon ?? <Rocket className="size-72 text-foreground" strokeWidth={0.75} />}
+      </div>
+
+      <div className="relative z-10 px-6 py-20 text-center sm:px-10 sm:py-28">
+        <h2 className="text-balance text-3xl font-semibold tracking-tight sm:text-4xl">
+          {heading}
+        </h2>
+        {description && (
+          <p className="mx-auto mt-4 max-w-lg text-pretty text-muted-foreground">{description}</p>
+        )}
+        <div className="mt-8">
+          {renderLink({
+            href: primaryCta.href,
+            children: (
+              <Button size="lg" className="rounded-full px-6">
+                {primaryCta.label}
+                <ArrowRight className="ml-2 size-4" />
+              </Button>
+            ),
+          })}
+        </div>
+        {footnote && (
+          <p className="mt-5 text-sm text-muted-foreground">{footnote}</p>
+        )}
+      </div>
+    </section>
+  );
+}
+
+export function CtaSection(props: CtaSectionProps) {
+  const {
+    heading,
+    description,
+    primaryCta,
+    secondaryCta,
+    footnote,
+    variant = 'default',
+    renderLink = defaultRenderLink,
+  } = props;
   const mode = useUIVariant()
   const sectionClasses = cn(
     'overflow-hidden bg-card',
@@ -33,6 +110,11 @@ export function CtaSection({
     mode === 'playful' && 'rounded-2xl border-primary/25 border',
     !mode && 'rounded-2xl border',
   )
+
+  if (variant === 'showcase') {
+    return <ShowcaseCta {...props} sectionClasses={sectionClasses} />;
+  }
+
   return (
     <section className={sectionClasses}>
       <div className="relative px-6 py-16 sm:px-10 sm:py-24">
@@ -45,9 +127,11 @@ export function CtaSection({
             <h2 className="text-balance text-3xl font-semibold tracking-tight sm:text-4xl">
               {heading}
             </h2>
-            <p className="mx-auto mt-4 max-w-lg text-pretty text-muted-foreground">
-              {description}
-            </p>
+            {description && (
+              <p className="mx-auto mt-4 max-w-lg text-pretty text-muted-foreground">
+                {description}
+              </p>
+            )}
             <div className="mt-8 flex flex-wrap items-center justify-center gap-3">
               {renderLink({
                 href: primaryCta.href,

package/src/marketing/FeaturesSection.tsx

@@ -3,14 +3,18 @@
 import type { LucideIcon } from 'lucide-react';
 import { cn, useUIVariant } from '@olwiba/cn';
 import { FeatureCard } from '../components/FeatureCard';
+import { Carousel } from '../mechanics/Carousel';
 import { SectionTitle } from './SectionTitle';
 import { StaggerChildren } from '../motion/StaggerChildren';
+import { FadeIn } from '../motion/FadeIn';
 
 export interface FeaturesSectionProps {
   title?: string;
   description?: string;
   badge?: string;
   features: Array<{ icon: LucideIcon; title: string; description: string; href?: string }>;
+  /** How the feature cards are arranged. @default 'grid' */
+  layout?: 'grid' | 'carousel';
 }
 
 export function FeaturesSection({
@@ -18,6 +22,7 @@ export function FeaturesSection({
   description = 'A complete system of components, blocks, and hooks designed to work together - and get out of your way.',
   badge = 'Features',
   features,
+  layout = 'grid',
 }: FeaturesSectionProps) {
   const mode = useUIVariant()
   const sectionClasses = cn(
@@ -26,23 +31,33 @@ export function FeaturesSection({
     mode === 'playful' && 'rounded-2xl border-primary/25 border',
     !mode && 'rounded-2xl border',
   )
+  const cards = features.map((feature) => (
+    <FeatureCard
+      key={feature.title}
+      icon={feature.icon}
+      title={feature.title}
+      description={feature.description}
+      href={feature.href}
+    />
+  ));
+
   return (
     <section className={sectionClasses}>
       <div className="px-6 py-14 sm:px-10 sm:py-20">
-        <div className="mx-auto max-w-4xl">
+        <div className={cn('mx-auto', layout === 'carousel' ? 'max-w-5xl' : 'max-w-4xl')}>
           <SectionTitle title={title} description={description} badge={badge} />
 
-          <StaggerChildren className="mt-12 grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
-            {features.map((feature) => (
-              <FeatureCard
-                key={feature.title}
-                icon={feature.icon}
-                title={feature.title}
-                description={feature.description}
-                href={feature.href}
-              />
-            ))}
-          </StaggerChildren>
+          {layout === 'carousel' ? (
+            <FadeIn direction="up">
+              <Carousel className="mt-10" ariaLabel={title}>
+                {cards}
+              </Carousel>
+            </FadeIn>
+          ) : (
+            <StaggerChildren className="mt-12 grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
+              {cards}
+            </StaggerChildren>
+          )}
         </div>
       </div>
     </section>

package/src/marketing/HeroSection.tsx

@@ -2,7 +2,9 @@
 
 import * as React from 'react';
 import { ArrowRight } from 'lucide-react';
-import { Avatar, AvatarFallback, AvatarImage, Badge, Button } from '@olwiba/cn';
+import { Avatar, AvatarFallback, AvatarImage, cn, useUIVariant } from '@olwiba/cn';
+import { Badge } from '../primitives/Badge';
+import { Button } from '../primitives/Button';
 import { FadeIn } from '../motion/FadeIn';
 import { PhoneFrame } from '../components/PhoneFrame';
 import type { AppShellRenderLink } from '../app/AppShell';
@@ -39,6 +41,7 @@ export function HeroSection({
   socialProofText,
   renderLink = defaultRenderLink,
 }: HeroSectionProps) {
+  const mode = useUIVariant();
   return (
     <section className="overflow-hidden">
       <div className={marketingSectionSpacing.hero}>
@@ -90,7 +93,7 @@ export function HeroSection({
                   </PhoneFrame>
                 </div>
               ) : (
-                <div className="overflow-hidden rounded-2xl">
+                <div className={cn('overflow-hidden', mode === 'smooth' ? 'rounded-3xl' : 'rounded-2xl')}>
                   {heroImage}
                 </div>
               )}

package/src/marketing/NewsletterSection.tsx

@@ -2,7 +2,10 @@
 
 import * as React from 'react';
 import { ArrowRight, Mail } from 'lucide-react';
-import { Badge, Button, Input } from '@olwiba/cn';
+import { cn, useUIVariant } from '@olwiba/cn';
+import { Badge } from '../primitives/Badge';
+import { Button } from '../primitives/Button';
+import { Input } from '../primitives/Input';
 
 export interface NewsletterSectionProps {
   badge?: string;
@@ -44,6 +47,13 @@ export function NewsletterSection({
 }: NewsletterSectionProps = {}) {
   const [email, setEmail] = React.useState('');
   const [submitted, setSubmitted] = React.useState(false);
+  const mode = useUIVariant();
+  const sectionClasses = cn(
+    'overflow-hidden bg-card',
+    mode === 'smooth' && 'rounded-3xl border',
+    mode === 'playful' && 'rounded-2xl border-primary/25 border',
+    !mode && 'rounded-2xl border',
+  );
 
   async function handleSubmit(e: React.FormEvent) {
     e.preventDefault();
@@ -53,7 +63,7 @@ export function NewsletterSection({
   }
 
   return (
-    <section className="overflow-hidden rounded-2xl border bg-card">
+    <section className={sectionClasses}>
       <div className="relative px-6 py-14 sm:px-10 sm:py-20">
         <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,hsl(var(--primary)/0.1),transparent_60%)]" />
         <div className="relative mx-auto max-w-xl text-center">

package/src/marketing/TeamSection.tsx

@@ -1,7 +1,8 @@
 'use client';
 
 import { Github, Linkedin, Twitter } from 'lucide-react';
-import { Avatar, AvatarFallback, AvatarImage, Badge } from '@olwiba/cn';
+import { Avatar, AvatarFallback, AvatarImage, cn, useUIVariant } from '@olwiba/cn';
+import { Badge } from '../primitives/Badge';
 
 export interface TeamMember {
   name: string;
@@ -56,8 +57,15 @@ export function TeamSection({
   title = 'The people behind Olwiba',
   description = 'A small team with deep experience in design systems, open source, and developer tooling.',
 }: TeamSectionProps) {
+  const mode = useUIVariant();
+  const sectionClasses = cn(
+    'overflow-hidden bg-card',
+    mode === 'smooth' && 'rounded-3xl border',
+    mode === 'playful' && 'rounded-2xl border-primary/25 border',
+    !mode && 'rounded-2xl border',
+  );
   return (
-    <section className="overflow-hidden rounded-2xl border bg-card">
+    <section className={sectionClasses}>
       <div className="px-6 py-14 sm:px-10 sm:py-20">
         <div className="mx-auto max-w-5xl">
           <div className="text-center">

package/src/mechanics/Carousel.tsx

@@ -0,0 +1,112 @@
+'use client';
+
+import * as React from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { cn, useUIVariant } from '@olwiba/cn';
+
+export interface CarouselProps {
+  /** Items to scroll through — each child becomes one snap slide. */
+  children: React.ReactNode;
+  /** Width classes applied to each slide. @default 'w-[280px] sm:w-[320px]' */
+  itemClassName?: string;
+  /** Prev/next control placement. @default 'top-right' */
+  controls?: 'top-right' | 'none';
+  /** Accessible label for the scroll region. */
+  ariaLabel?: string;
+  className?: string;
+}
+
+/**
+ * Scroll-snap carousel behavior — wraps any children in a horizontally
+ * scrolling track with prev/next controls. A mechanic, not a section:
+ * feed it cards, images, or whole blocks. No carousel dependency.
+ */
+export function Carousel({
+  children,
+  itemClassName = 'w-[280px] sm:w-[320px]',
+  controls = 'top-right',
+  ariaLabel,
+  className,
+}: CarouselProps) {
+  const mode = useUIVariant();
+  const trackRef = React.useRef<HTMLDivElement>(null);
+  const [canPrev, setCanPrev] = React.useState(false);
+  const [canNext, setCanNext] = React.useState(true);
+
+  const updateScrollState = React.useCallback(() => {
+    const track = trackRef.current;
+    if (!track) return;
+    setCanPrev(track.scrollLeft > 8);
+    setCanNext(track.scrollLeft < track.scrollWidth - track.clientWidth - 8);
+  }, []);
+
+  React.useEffect(() => {
+    const track = trackRef.current;
+    if (!track) return;
+    updateScrollState();
+    track.addEventListener('scroll', updateScrollState, { passive: true });
+    const observer = new ResizeObserver(updateScrollState);
+    observer.observe(track);
+    return () => {
+      track.removeEventListener('scroll', updateScrollState);
+      observer.disconnect();
+    };
+  }, [updateScrollState]);
+
+  const scrollByItem = (direction: 1 | -1) => {
+    const track = trackRef.current;
+    if (!track) return;
+    const item = track.querySelector<HTMLElement>('[data-carousel-item]');
+    const gap = parseFloat(getComputedStyle(track).columnGap) || 24;
+    const step = item ? item.offsetWidth + gap : track.clientWidth * 0.8;
+    track.scrollBy({ left: direction * step, behavior: 'smooth' });
+  };
+
+  const controlClasses = cn(
+    'flex size-9 items-center justify-center border bg-background text-foreground transition-colors',
+    'hover:bg-muted disabled:opacity-40 disabled:hover:bg-background',
+    mode === 'smooth' ? 'rounded-2xl' : 'rounded-xl',
+  );
+
+  return (
+    <div className={className}>
+      {controls === 'top-right' && (
+        <div className="mb-4 flex items-center justify-end gap-2">
+          <button
+            type="button"
+            aria-label="Previous"
+            className={controlClasses}
+            onClick={() => scrollByItem(-1)}
+            disabled={!canPrev}
+          >
+            <ChevronLeft className="size-4" />
+          </button>
+          <button
+            type="button"
+            aria-label="Next"
+            className={controlClasses}
+            onClick={() => scrollByItem(1)}
+            disabled={!canNext}
+          >
+            <ChevronRight className="size-4" />
+          </button>
+        </div>
+      )}
+
+      <div
+        ref={trackRef}
+        role="region"
+        aria-label={ariaLabel}
+        className="flex snap-x snap-mandatory gap-6 overflow-x-auto pb-4 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+      >
+        {React.Children.map(children, (child) =>
+          child == null ? null : (
+            <div data-carousel-item className={cn('shrink-0 snap-start', itemClassName)}>
+              {child}
+            </div>
+          ),
+        )}
+      </div>
+    </div>
+  );
+}