@olwiba/ui 0.1.14 → 0.2.0

package/src/components/FileUpload.tsx

@@ -0,0 +1,214 @@
+'use client';
+
+import * as React from 'react';
+import { AlertCircle, CheckCircle2, File as FileIcon, Loader2, UploadCloud, X } from 'lucide-react';
+import { cn } from '@olwiba/cn';
+import { Button } from '../primitives/Button';
+
+export interface FileUploadEntry {
+  id: string;
+  file: File;
+  /** 0–100. Omit while pending, or when not tracking progress. */
+  progress?: number;
+  status?: 'pending' | 'uploading' | 'done' | 'error';
+  error?: string;
+}
+
+export interface FileUploadProps {
+  /** Comma-separated MIME types / extensions, e.g. `"image/png,image/jpeg"`. */
+  accept?: string;
+  multiple?: boolean;
+  maxSizeMb?: number;
+  maxFiles?: number;
+  /** Controlled file list — pass this (with `onFilesChange`) to drive upload progress from your own network layer. */
+  files?: FileUploadEntry[];
+  /** Uncontrolled default list. */
+  defaultFiles?: FileUploadEntry[];
+  onFilesChange?: (files: FileUploadEntry[]) => void;
+  /** Fired with the raw, already-validated `File` objects a user just added. */
+  onFilesAdded?: (files: File[]) => void;
+  disabled?: boolean;
+  /** Helper text under the drop zone, e.g. "PNG or JPG, up to 5MB". */
+  hint?: string;
+  className?: string;
+}
+
+function formatBytes(bytes: number) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+function makeId() {
+  return Math.random().toString(36).slice(2, 10);
+}
+
+/**
+ * Drag-and-drop file picker with a validated queue list. One component —
+ * toggle `multiple`/`accept`/`maxSizeMb`/`maxFiles` rather than reaching for
+ * a separate dropzone per use case. Progress/status is presentation-only;
+ * wire `files`/`onFilesChange` to your own upload layer to drive it.
+ */
+export function FileUpload({
+  accept,
+  multiple = false,
+  maxSizeMb,
+  maxFiles,
+  files: filesProp,
+  defaultFiles,
+  onFilesChange,
+  onFilesAdded,
+  disabled,
+  hint,
+  className,
+}: FileUploadProps) {
+  const [internalFiles, setInternalFiles] = React.useState<FileUploadEntry[]>(defaultFiles ?? []);
+  const [isDragging, setIsDragging] = React.useState(false);
+  const [validationError, setValidationError] = React.useState<string | null>(null);
+  const inputRef = React.useRef<HTMLInputElement>(null);
+  // dragenter/dragleave fire for every child element crossed — count them so the
+  // highlight doesn't flicker while moving over the icon/text inside the zone
+  const dragDepth = React.useRef(0);
+  const files = filesProp ?? internalFiles;
+
+  const setFiles = React.useCallback(
+    (next: FileUploadEntry[]) => {
+      if (!filesProp) setInternalFiles(next);
+      onFilesChange?.(next);
+    },
+    [filesProp, onFilesChange],
+  );
+
+  const acceptList = React.useMemo(
+    () => accept?.split(',').map((a) => a.trim().toLowerCase()).filter(Boolean) ?? [],
+    [accept],
+  );
+
+  const matchesAccept = (file: File) => {
+    if (!acceptList.length) return true;
+    const name = file.name.toLowerCase();
+    return acceptList.some((pattern) =>
+      pattern.startsWith('.') ? name.endsWith(pattern) : file.type === pattern || file.type.startsWith(pattern.replace('/*', '/')),
+    );
+  };
+
+  const handleFiles = (fileList: FileList | null) => {
+    if (!fileList || disabled) return;
+    const incoming = Array.from(fileList);
+    // Single mode replaces the current file, so the existing queue never counts against maxFiles
+    const room = maxFiles && multiple ? Math.max(0, maxFiles - files.length) : maxFiles || Infinity;
+    if (maxFiles && room <= 0) {
+      setValidationError(`You can only add up to ${maxFiles} file${maxFiles === 1 ? '' : 's'}.`);
+      return;
+    }
+
+    const accepted: File[] = [];
+    let rejected = false;
+    for (const file of incoming.slice(0, room)) {
+      if (!matchesAccept(file)) { rejected = true; continue; }
+      if (maxSizeMb && file.size > maxSizeMb * 1024 * 1024) { rejected = true; continue; }
+      accepted.push(file);
+    }
+
+    setValidationError(rejected ? `Some files were skipped — check the file type and size limit.` : null);
+    if (!accepted.length) return;
+
+    const entries: FileUploadEntry[] = accepted.map((file) => ({ id: makeId(), file, status: 'pending' }));
+    setFiles(multiple ? [...files, ...entries] : entries);
+    onFilesAdded?.(accepted);
+  };
+
+  const removeFile = (id: string) => {
+    setFiles(files.filter((f) => f.id !== id));
+  };
+
+  return (
+    <div className={cn('space-y-3', className)}>
+      <div
+        role="button"
+        tabIndex={disabled ? -1 : 0}
+        onClick={() => !disabled && inputRef.current?.click()}
+        onKeyDown={(e) => {
+          if (disabled) return;
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            inputRef.current?.click();
+          }
+        }}
+        onDragOver={(e) => e.preventDefault()}
+        onDragEnter={(e) => {
+          e.preventDefault();
+          dragDepth.current += 1;
+          if (!disabled) setIsDragging(true);
+        }}
+        onDragLeave={() => {
+          dragDepth.current = Math.max(0, dragDepth.current - 1);
+          if (dragDepth.current === 0) setIsDragging(false);
+        }}
+        onDrop={(e) => {
+          e.preventDefault();
+          dragDepth.current = 0;
+          setIsDragging(false);
+          handleFiles(e.dataTransfer.files);
+        }}
+        className={cn(
+          'flex cursor-pointer flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed px-6 py-10 text-center transition-colors',
+          isDragging ? 'border-primary bg-primary/5' : 'border-border hover:border-foreground/30',
+          disabled && 'pointer-events-none opacity-50',
+        )}
+      >
+        <UploadCloud className="size-8 text-muted-foreground" />
+        <p className="text-sm font-medium">
+          <span className="text-primary underline underline-offset-4">Click to upload</span> or drag and drop
+        </p>
+        {hint && <p className="text-xs text-muted-foreground">{hint}</p>}
+        <input
+          ref={inputRef}
+          type="file"
+          accept={accept}
+          multiple={multiple}
+          disabled={disabled}
+          className="sr-only"
+          onChange={(e) => { handleFiles(e.target.files); e.target.value = ''; }}
+        />
+      </div>
+
+      {validationError && <p role="alert" className="text-sm font-medium text-destructive">{validationError}</p>}
+
+      {files.length > 0 && (
+        <ul className="space-y-2">
+          {files.map(({ id, file, progress, status = 'pending', error }) => (
+            <li key={id} className="flex items-center gap-3 rounded-lg border bg-card/60 px-3 py-2.5">
+              <FileIcon className="size-5 shrink-0 text-muted-foreground" />
+              <div className="min-w-0 flex-1">
+                <div className="flex items-center justify-between gap-2">
+                  <p className="truncate text-sm font-medium">{file.name}</p>
+                  <span className="shrink-0 text-xs text-muted-foreground">{formatBytes(file.size)}</span>
+                </div>
+                {status === 'uploading' && (
+                  <div className="mt-1.5 h-1 w-full overflow-hidden rounded-full bg-muted">
+                    <div className="h-full rounded-full bg-primary transition-all" style={{ width: `${progress ?? 0}%` }} />
+                  </div>
+                )}
+                {status === 'error' && error && <p className="mt-1 text-xs text-destructive">{error}</p>}
+              </div>
+              {status === 'uploading' && <Loader2 className="size-4 shrink-0 animate-spin text-muted-foreground" />}
+              {status === 'done' && <CheckCircle2 className="size-4 shrink-0 text-primary" />}
+              {status === 'error' && <AlertCircle className="size-4 shrink-0 text-destructive" />}
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                className="size-7 shrink-0"
+                onClick={() => removeFile(id)}
+              >
+                <X className="size-3.5" />
+                <span className="sr-only">Remove {file.name}</span>
+              </Button>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,96 @@
+'use client';
+
+import * as React from 'react';
+import { toast } from 'sonner';
+import { AlertCircle, AlertTriangle, CheckCircle2, Inbox, Info, X } from 'lucide-react';
+import { cn } from '@olwiba/cn';
+import { Button } from '../primitives/Button';
+
+export interface NotifyAction {
+  label: string;
+  onClick: () => void;
+}
+
+export interface NotificationToastProps {
+  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). */
+  avatar?: string;
+  /** Primary action, right-aligned next to the description (e.g. "Undo"). */
+  action?: NotifyAction;
+  /** Secondary action, rendered after the primary one (e.g. "Decline"). */
+  secondaryAction?: NotifyAction;
+  onDismiss?: () => void;
+}
+
+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;
+
+/**
+ * Rich toast content — rendered via `notify()` inside sonner's `toast.custom`.
+ * One component: `variant` swaps the default icon, `avatar`/`action`/
+ * `secondaryAction` add the pieces a given toast needs, rather than a
+ * separate toast component per shape.
+ */
+export function NotificationToast({
+  variant = 'info',
+  title,
+  description,
+  avatar,
+  action,
+  secondaryAction,
+  onDismiss,
+}: NotificationToastProps) {
+  return (
+    <div className="w-full max-w-sm rounded-lg border bg-card p-4 text-card-foreground shadow-lg">
+      <div className="flex items-start gap-3">
+        <div className="shrink-0 pt-0.5">
+          {avatar ? (
+            // eslint-disable-next-line @next/next/no-img-element
+            <img src={avatar} alt="" className="size-9 rounded-full border object-cover" />
+          ) : (
+            variantIcon[variant]
+          )}
+        </div>
+        <div className="min-w-0 flex-1 pt-0.5">
+          <p className="text-sm font-medium">{title}</p>
+          {description && <p className="mt-1 text-sm text-muted-foreground">{description}</p>}
+          {(action || secondaryAction) && (
+            <div className={cn('mt-3 flex gap-4', avatar && 'gap-3')}>
+              {action && (
+                <button type="button" onClick={action.onClick} className="text-sm font-medium text-primary hover:underline">
+                  {action.label}
+                </button>
+              )}
+              {secondaryAction && (
+                <button type="button" onClick={secondaryAction.onClick} className="text-sm font-medium text-muted-foreground hover:text-foreground">
+                  {secondaryAction.label}
+                </button>
+              )}
+            </div>
+          )}
+        </div>
+        <Button variant="ghost" size="icon" className="size-6 shrink-0 -mt-1 -mr-1" onClick={onDismiss}>
+          <X className="size-4" />
+          <span className="sr-only">Dismiss</span>
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export interface NotifyOptions extends Omit<NotificationToastProps, 'onDismiss'> {
+  duration?: number;
+}
+
+/** Fires a `NotificationToast` through sonner. Requires `<Toaster />` from `@olwiba/cn` mounted once in your app. */
+export function notify(options: NotifyOptions) {
+  const { duration, ...toastProps } = options;
+  return toast.custom((id) => <NotificationToast {...toastProps} onDismiss={() => toast.dismiss(id)} />, { duration });
+}

package/src/index.ts

@@ -35,6 +35,31 @@ export {
   type AuthFormProps,
 } from './app/AuthSection';
 
+export {
+  SettingsSection,
+  type SettingsSectionProps,
+} from './app/SettingsSection';
+
+export {
+  TeamMembersPanel,
+  type TeamMembersPanelProps,
+  type TeamMemberRecord,
+} from './app/TeamMembersPanel';
+
+export {
+  BillingPanel,
+  type BillingPanelProps,
+  type BillingUsageMetric,
+  type BillingInvoice,
+  type BillingPaymentMethod,
+} from './app/BillingPanel';
+
+export {
+  OnboardingWizard,
+  type OnboardingWizardProps,
+  type OnboardingStep,
+} from './app/OnboardingWizard';
+
 export {
   EmptyState,
   type EmptyStateProps,
@@ -59,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';
@@ -90,11 +113,24 @@ 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';
 export { ContextMenu, type ContextMenuProps, type ContextMenuDef } from './components/ContextMenu';
 export { ConfirmDialog, type ConfirmDialogProps } from './components/ConfirmDialog';
+export { CommandMenu, type CommandMenuProps, type CommandMenuGroup, type CommandMenuItem } from './components/CommandMenu';
+
+// ─── Components — data ───────────────────────────────────────────────────────
+export { DataTable, type DataTableProps, type DataTableColumn } from './components/DataTable';
+export { FileUpload, type FileUploadProps, type FileUploadEntry } from './components/FileUpload';
+
+// ─── 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 */}