@olwiba/ui 0.1.15 → 0.2.1

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>
+  );
+}

package/src/mechanics/Sortable.tsx

@@ -0,0 +1,128 @@
+'use client';
+
+import * as React from 'react';
+import {
+  DndContext,
+  KeyboardSensor,
+  PointerSensor,
+  closestCenter,
+  useSensor,
+  useSensors,
+  type DragEndEvent,
+} from '@dnd-kit/core';
+import {
+  SortableContext,
+  arrayMove,
+  horizontalListSortingStrategy,
+  rectSortingStrategy,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { cn } from '@olwiba/cn';
+
+export interface SortableProps {
+  /** Item ids in render order — one per child, same order as `children`. */
+  items: string[];
+  /** Fired with the new id order after a drag completes. */
+  onReorder: (items: string[]) => void;
+  /** One element per id — pairing is by position, so keep orders aligned. */
+  children: React.ReactNode;
+  /** Layout of the sortable collection. @default 'vertical' */
+  direction?: 'vertical' | 'horizontal' | 'grid';
+  disabled?: boolean;
+  className?: string;
+  itemClassName?: string;
+}
+
+const strategies = {
+  vertical: verticalListSortingStrategy,
+  horizontal: horizontalListSortingStrategy,
+  grid: rectSortingStrategy,
+} as const;
+
+const containerClasses = {
+  vertical: 'flex flex-col gap-2',
+  horizontal: 'flex gap-2',
+  grid: 'grid gap-2',
+} as const;
+
+function SortableItem({
+  id,
+  disabled,
+  className,
+  children,
+}: {
+  id: string;
+  disabled?: boolean;
+  className?: string;
+  children: React.ReactNode;
+}) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id, disabled });
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={{ transform: CSS.Transform.toString(transform), transition }}
+      className={cn(
+        'touch-none',
+        !disabled && 'cursor-grab active:cursor-grabbing',
+        isDragging && 'relative z-10 opacity-80',
+        className,
+      )}
+      {...attributes}
+      {...listeners}
+    >
+      {children}
+    </div>
+  );
+}
+
+/**
+ * Drag-to-reorder behavior — wraps any children and makes them sortable by
+ * pointer or keyboard. A mechanic, not a list component: feed it cards, rows,
+ * or tiles. Controlled: pass `items` (ids in order) and apply the new order
+ * in `onReorder`.
+ */
+export function Sortable({
+  items,
+  onReorder,
+  children,
+  direction = 'vertical',
+  disabled,
+  className,
+  itemClassName,
+}: SortableProps) {
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
+  );
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+    if (!over || active.id === over.id) return;
+    const oldIndex = items.indexOf(String(active.id));
+    const newIndex = items.indexOf(String(over.id));
+    if (oldIndex === -1 || newIndex === -1) return;
+    onReorder(arrayMove(items, oldIndex, newIndex));
+  };
+
+  const childArray = React.Children.toArray(children);
+
+  return (
+    <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+      <SortableContext items={items} strategy={strategies[direction]}>
+        <div className={cn(containerClasses[direction], className)}>
+          {childArray.map((child, i) =>
+            items[i] === undefined ? null : (
+              <SortableItem key={items[i]} id={items[i]} disabled={disabled} className={itemClassName}>
+                {child}
+              </SortableItem>
+            ),
+          )}
+        </div>
+      </SortableContext>
+    </DndContext>
+  );
+}

package/src/marketing/CarouselSection.tsx

@@ -1,126 +0,0 @@
-'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/CtaCardSection.tsx

@@ -1,95 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { ArrowRight, Rocket } from 'lucide-react';
-import { cn } from '@olwiba/cn';
-import type { AppShellRenderLink } from '../app/AppShell';
-
-export interface CtaCardSectionProps {
-  heading: string;
-  description?: string;
-  primaryCta: { label: string; href: string };
-  footnote?: string;
-  icon?: React.ReactNode;
-  renderLink?: AppShellRenderLink;
-}
-
-const defaultRenderLink: AppShellRenderLink = ({ href, children, className }) => (
-  <a href={href} className={className}>{children}</a>
-);
-
-export function CtaCardSection({
-  heading,
-  description,
-  primaryCta,
-  footnote,
-  icon,
-  renderLink = defaultRenderLink,
-}: CtaCardSectionProps) {
-  const ref = React.useRef<HTMLElement>(null);
-  const [visible, setVisible] = React.useState(false);
-
-  React.useEffect(() => {
-    const el = ref.current;
-    if (!el) return;
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        if (entry.isIntersecting) {
-          setVisible(true);
-          observer.disconnect();
-        }
-      },
-      { threshold: 0.15 },
-    );
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, []);
-
-  return (
-    <section
-      ref={ref}
-      className={cn(
-        'relative overflow-hidden rounded-3xl border border-gray-200 shadow-sm dark:border-border',
-        'bg-[#E0DFDB] dark:bg-card',
-        'transition-[opacity,transform] duration-700 ease-out',
-        visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-6',
-      )}
-    >
-      {/* Decorative icon */}
-      <div
-        className="pointer-events-none absolute inset-0 flex items-center justify-center"
-        style={{
-          opacity: visible ? 0.12 : 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 dark:text-foreground" strokeWidth={0.75} />}
-      </div>
-
-      {/* Content */}
-      <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: (
-              <span className="inline-flex items-center gap-2 rounded-full bg-foreground px-6 py-3 text-sm font-medium text-background transition-opacity hover:opacity-80">
-                {primaryCta.label}
-                <ArrowRight className="size-4" />
-              </span>
-            ),
-          })}
-        </div>
-        {footnote && (
-          <p className="mt-5 text-sm text-muted-foreground">{footnote}</p>
-        )}
-      </div>
-    </section>
-  );
-}