@olwiba/ui 0.1.2 → 0.1.3

package/package.json

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

package/src/components/FeatureCard.tsx

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import type { LucideIcon } from 'lucide-react';
 import { ArrowRight } from 'lucide-react';
-import { cn } from '@olwiba/cn';
+import { cn, useUIVariant } from '@olwiba/cn';
 
 export interface FeatureCardProps extends React.HTMLAttributes<HTMLDivElement> {
   icon: LucideIcon;
@@ -13,16 +13,28 @@ export interface FeatureCardProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 export function FeatureCard({ icon: Icon, title, description, href, className, ...props }: FeatureCardProps) {
-  const content = (
+  const mode = useUIVariant();
+
+  const cardInner = (
     <div
       className={cn(
-        'group relative flex flex-col gap-4 rounded-2xl border bg-card p-6 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md',
+        'group relative flex h-full flex-col gap-4 border bg-card p-6 transition-all duration-200',
+        mode === 'playful'
+          ? 'rounded-2xl rotate-[0.3deg]'
+          : mode === 'smooth'
+            ? 'rounded-3xl hover:-translate-y-0.5 hover:shadow-md'
+            : 'rounded-2xl hover:-translate-y-0.5 hover:shadow-md',
         href && 'cursor-pointer',
-        className,
+        mode !== 'playful' && className,
       )}
-      {...props}
+      {...(mode !== 'playful' ? props : {})}
     >
-      <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-primary/10 text-primary transition-colors group-hover:bg-primary group-hover:text-primary-foreground">
+      <div
+        className={cn(
+          'flex h-10 w-10 items-center justify-center bg-primary/10 text-primary transition-colors group-hover:bg-primary group-hover:text-primary-foreground',
+          mode === 'smooth' ? 'rounded-2xl' : 'rounded-xl',
+        )}
+      >
         <Icon className="size-5" />
       </div>
       <div className="space-y-1.5">
@@ -37,8 +49,21 @@ export function FeatureCard({ icon: Icon, title, description, href, className, .
     </div>
   );
 
+  const content =
+    mode === 'playful' ? (
+      <div className={cn('group/playful relative h-full', className)} {...props}>
+        <div
+          aria-hidden="true"
+          className="absolute inset-0 rounded-2xl bg-border transition-transform duration-200 translate-x-[5px] translate-y-[5px] -rotate-[0.5deg] group-hover/playful:-rotate-[1.5deg] group-hover/playful:translate-x-[6px] group-hover/playful:translate-y-[6px]"
+        />
+        {cardInner}
+      </div>
+    ) : (
+      cardInner
+    );
+
   if (href) {
-    return <a href={href} className="block">{content}</a>;
+    return <a href={href} className="block h-full">{content}</a>;
   }
 
   return content;

package/src/components/PricingCard.tsx

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { Check, Minus } from 'lucide-react';
-import { Badge, Button, cn, Separator } from '@olwiba/cn';
+import { Badge, Button, cn, Separator, useUIVariant } from '@olwiba/cn';
 
 export interface PricingFeature {
   label: string;
@@ -34,14 +34,21 @@ export function PricingCard({
   className,
   ...props
 }: PricingCardProps) {
-  return (
+  const mode = useUIVariant();
+
+  const cardInner = (
     <div
       className={cn(
-        'relative flex flex-col rounded-2xl border p-6',
+        'relative flex flex-col border p-6',
+        mode === 'playful'
+          ? 'rounded-2xl rotate-[0.3deg]'
+          : mode === 'smooth'
+            ? 'rounded-3xl'
+            : 'rounded-2xl',
         highlighted ? 'border-primary bg-primary/5 shadow-sm' : 'bg-card',
-        className,
+        mode !== 'playful' && className,
       )}
-      {...props}
+      {...(mode !== 'playful' ? props : {})}
     >
       {badge && (
         <div className="absolute -top-3 left-1/2 -translate-x-1/2">
@@ -87,4 +94,21 @@ export function PricingCard({
       </ul>
     </div>
   );
+
+  if (mode === 'playful') {
+    return (
+      <div className={cn('group/playful relative', className)} {...props}>
+        <div
+          aria-hidden="true"
+          className={cn(
+            'absolute inset-0 rounded-2xl transition-transform duration-200 translate-x-[5px] translate-y-[5px] -rotate-[0.5deg] group-hover/playful:-rotate-[1.5deg] group-hover/playful:translate-x-[6px] group-hover/playful:translate-y-[6px]',
+            highlighted ? 'bg-primary/20' : 'bg-border',
+          )}
+        />
+        {cardInner}
+      </div>
+    );
+  }
+
+  return cardInner;
 }

package/src/components/TestimonialCard.tsx

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { Quote, Star } from 'lucide-react';
-import { Avatar, AvatarFallback, AvatarImage, cn } from '@olwiba/cn';
+import { Avatar, AvatarFallback, AvatarImage, cn, useUIVariant } from '@olwiba/cn';
 
 export interface TestimonialCardProps extends React.HTMLAttributes<HTMLDivElement> {
   quote: string;
@@ -25,10 +25,20 @@ export function TestimonialCard({
   className,
   ...props
 }: TestimonialCardProps) {
-  return (
+  const mode = useUIVariant();
+
+  const cardInner = (
     <div
-      className={cn('flex flex-col gap-4 rounded-2xl border bg-card p-6', className)}
-      {...props}
+      className={cn(
+        'flex flex-col gap-4 border bg-card p-6',
+        mode === 'playful'
+          ? 'rounded-2xl rotate-[0.3deg]'
+          : mode === 'smooth'
+            ? 'rounded-3xl'
+            : 'rounded-2xl',
+        mode !== 'playful' && className,
+      )}
+      {...(mode !== 'playful' ? props : {})}
     >
       <Quote className="size-4 text-muted-foreground/40" />
       {rating != null && (
@@ -48,9 +58,9 @@ export function TestimonialCard({
       )}
       <p className="flex-1 text-sm leading-relaxed">{quote}</p>
       <div className="flex items-center gap-3">
-        <Avatar className="size-9 rounded-xl">
+        <Avatar className="size-9">
           <AvatarImage src={avatar} alt={name} />
-          <AvatarFallback className="rounded-xl text-xs">{initials ?? name.slice(0, 2).toUpperCase()}</AvatarFallback>
+          <AvatarFallback className="text-xs">{initials ?? name.slice(0, 2).toUpperCase()}</AvatarFallback>
         </Avatar>
         <div>
           <div className="text-sm font-medium leading-tight">{name}</div>
@@ -61,4 +71,18 @@ export function TestimonialCard({
       </div>
     </div>
   );
+
+  if (mode === 'playful') {
+    return (
+      <div className={cn('group/playful relative', className)} {...props}>
+        <div
+          aria-hidden="true"
+          className="absolute inset-0 rounded-2xl bg-border transition-transform duration-200 translate-x-[5px] translate-y-[5px] -rotate-[0.5deg] group-hover/playful:-rotate-[1.5deg] group-hover/playful:translate-x-[6px] group-hover/playful:translate-y-[6px]"
+        />
+        {cardInner}
+      </div>
+    );
+  }
+
+  return cardInner;
 }

package/src/index.ts

@@ -54,6 +54,7 @@ export {
 export { SectionTitle, type SectionTitleProps } from './marketing/SectionTitle';
 export { HeroSection, type HeroSectionProps } from './marketing/HeroSection';
 export { FeaturesSection, type FeaturesSectionProps } from './marketing/FeaturesSection';
+export { CarouselSection, type CarouselSectionProps } from './marketing/CarouselSection';
 export { CtaSection, type CtaSectionProps } from './marketing/CtaSection';
 export { PricingSection, type PricingSectionProps, type PricingPlan } from './marketing/PricingSection';
 export { TestimonialsSection, type TestimonialsSectionProps } from './marketing/TestimonialsSection';

package/src/marketing/CarouselSection.tsx

@@ -0,0 +1,126 @@
+'use client';
+
+import * as React from 'react';
+import type { LucideIcon } from 'lucide-react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { cn, useUIVariant } from '@olwiba/cn';
+import { FeatureCard } from '../components/FeatureCard';
+import { SectionTitle } from './SectionTitle';
+import { FadeIn } from '../motion/FadeIn';
+
+export interface CarouselSectionProps {
+  title?: string;
+  description?: string;
+  badge?: string;
+  features: Array<{ icon: LucideIcon; title: string; description: string; href?: string }>;
+}
+
+/**
+ * Horizontally scrolling card carousel for feature-style content.
+ * Scroll-snap based with prev/next controls — no carousel dependency.
+ */
+export function CarouselSection({
+  title = 'Explore the platform',
+  description,
+  badge = 'Features',
+  features,
+}: CarouselSectionProps) {
+  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 scrollByCard = (direction: 1 | -1) => {
+    const track = trackRef.current;
+    if (!track) return;
+    const card = track.querySelector<HTMLElement>('[data-carousel-item]');
+    const step = card ? card.offsetWidth + 24 : track.clientWidth * 0.8;
+    track.scrollBy({ left: direction * step, behavior: 'smooth' });
+  };
+
+  const sectionClasses = cn(
+    'overflow-hidden bg-card',
+    mode === 'smooth' && 'rounded-3xl border',
+    mode === 'playful' && 'rounded-2xl border-primary/25 border',
+    !mode && 'rounded-2xl border',
+  );
+
+  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 (
+    <section className={sectionClasses}>
+      <div className="px-6 py-14 sm:px-10 sm:py-20">
+        <div className="mx-auto max-w-5xl">
+          <SectionTitle title={title} description={description} badge={badge} />
+
+          <FadeIn direction="up">
+            <div className="mt-10 flex items-center justify-end gap-2">
+              <button
+                type="button"
+                aria-label="Previous"
+                className={controlClasses}
+                onClick={() => scrollByCard(-1)}
+                disabled={!canPrev}
+              >
+                <ChevronLeft className="size-4" />
+              </button>
+              <button
+                type="button"
+                aria-label="Next"
+                className={controlClasses}
+                onClick={() => scrollByCard(1)}
+                disabled={!canNext}
+              >
+                <ChevronRight className="size-4" />
+              </button>
+            </div>
+
+            <div
+              ref={trackRef}
+              className="mt-4 flex snap-x snap-mandatory gap-6 overflow-x-auto pb-4 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+            >
+              {features.map((feature) => (
+                <div
+                  key={feature.title}
+                  data-carousel-item
+                  className="w-[280px] shrink-0 snap-start sm:w-[320px]"
+                >
+                  <FeatureCard
+                    icon={feature.icon}
+                    title={feature.title}
+                    description={feature.description}
+                    href={feature.href}
+                  />
+                </div>
+              ))}
+            </div>
+          </FadeIn>
+        </div>
+      </div>
+    </section>
+  );
+}

package/src/marketing/CtaSection.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { ArrowRight, Sparkles } from 'lucide-react';
-import { Button } from '@olwiba/cn';
+import { Button, cn, useUIVariant } from '@olwiba/cn';
 import { FadeIn } from '../motion/FadeIn';
 import type { AppShellRenderLink } from '../app/AppShell';
 
@@ -26,13 +26,20 @@ export function CtaSection({
   footnote,
   renderLink = defaultRenderLink,
 }: CtaSectionProps) {
+  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="relative px-6 py-16 sm:px-10 sm:py-24">
         <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,hsl(var(--primary)/0.15),transparent_70%)]" />
         <FadeIn direction="up">
           <div className="relative mx-auto max-w-2xl text-center">
-            <div className="mb-4 inline-flex h-10 w-10 items-center justify-center rounded-2xl bg-primary/10 text-primary">
+            <div className={cn('mb-4 inline-flex h-10 w-10 items-center justify-center bg-primary/10 text-primary', mode === 'smooth' ? 'rounded-3xl' : 'rounded-2xl')}>
               <Sparkles className="size-5" />
             </div>
             <h2 className="text-balance text-3xl font-semibold tracking-tight sm:text-4xl">

package/src/marketing/FaqSection.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@olwiba/cn';
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, cn, useUIVariant } from '@olwiba/cn';
 import { SectionTitle } from './SectionTitle';
 import { FadeIn } from '../motion/FadeIn';
 
@@ -17,8 +17,15 @@ export function FaqSection({
   badge = 'FAQ',
   items,
 }: FaqSectionProps) {
+  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-3xl">
           <SectionTitle title={title} description={description} badge={badge} />

package/src/marketing/FeaturesSection.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import type { LucideIcon } from 'lucide-react';
+import { cn, useUIVariant } from '@olwiba/cn';
 import { FeatureCard } from '../components/FeatureCard';
 import { SectionTitle } from './SectionTitle';
 import { StaggerChildren } from '../motion/StaggerChildren';
@@ -18,8 +19,15 @@ export function FeaturesSection({
   badge = 'Features',
   features,
 }: FeaturesSectionProps) {
+  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-4xl">
           <SectionTitle title={title} description={description} badge={badge} />

package/src/marketing/PricingSection.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { Badge, cn } from '@olwiba/cn';
+import { Badge, Button, cn, useUIVariant } from '@olwiba/cn';
 import { PricingCard, type PricingFeature } from '../components/PricingCard';
 import { StaggerChildren } from '../motion/StaggerChildren';
 import type { AppShellRenderLink } from '../app/AppShell';
@@ -42,9 +42,16 @@ export function PricingSection({
   footnote,
 }: PricingSectionProps) {
   const [annual, setAnnual] = 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',
+  )
 
   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">
           {/* Header */}
@@ -63,7 +70,9 @@ export function PricingSection({
 
             {/* Billing toggle */}
             <div className="mt-6 inline-flex items-center gap-3 rounded-full border bg-muted p-1">
-              <button
+              <Button
+                variant="ghost"
+                size="sm"
                 onClick={() => setAnnual(false)}
                 className={cn(
                   'rounded-full px-4 py-1.5 text-sm font-medium transition-colors',
@@ -71,8 +80,10 @@ export function PricingSection({
                 )}
               >
                 Monthly
-              </button>
-              <button
+              </Button>
+              <Button
+                variant="ghost"
+                size="sm"
                 onClick={() => setAnnual(true)}
                 className={cn(
                   'flex items-center gap-2 rounded-full px-4 py-1.5 text-sm font-medium transition-colors',
@@ -83,7 +94,7 @@ export function PricingSection({
                 {saveBadge && (
                   <Badge variant="secondary" className="text-xs">{saveBadge}</Badge>
                 )}
-              </button>
+              </Button>
             </div>
           </div>
 

package/src/marketing/StatsSection.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Separator } from '@olwiba/cn';
+import { Separator, cn, useUIVariant } from '@olwiba/cn';
 import { SectionTitle } from './SectionTitle';
 import { StaggerChildren } from '../motion/StaggerChildren';
 import { CountUp } from '../motion/CountUp';
@@ -33,8 +33,15 @@ export function StatsSection({
   badge = 'By the numbers',
   stats,
 }: StatsSectionProps) {
+  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="relative px-6 py-14 sm:px-10 sm:py-20">
         <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_bottom,hsl(var(--primary)/0.08),transparent_60%)]" />
         <div className="relative mx-auto max-w-4xl">

package/src/marketing/TestimonialsSection.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { cn, useUIVariant } from '@olwiba/cn';
 import { TestimonialCard } from '../components/TestimonialCard';
 import { SectionTitle } from './SectionTitle';
 import { StaggerChildren } from '../motion/StaggerChildren';
@@ -25,8 +26,15 @@ export function TestimonialsSection({
   badge = 'Testimonials',
   testimonials,
 }: TestimonialsSectionProps) {
+  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">
           <SectionTitle title={title} description={description} badge={badge} />

package/src/motion/StaggerChildren.tsx

@@ -59,6 +59,7 @@ export function StaggerChildren({
     <div ref={ref} className={cn(className)} {...props}>
       {React.Children.map(children, (child, i) => (
         <div
+          className="h-full"
           style={{
             transition: `opacity ${duration}ms ease, transform ${duration}ms ease`,
             transitionDelay: `${delay + i * stagger}ms`,