@olwiba/ui 0.1.15 → 0.2.0

package/package.json

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

package/src/app/AuthSection.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { Building2, ShieldCheck, Sparkles } from 'lucide-react';
+import { Building2, Loader2, ShieldCheck, Sparkles } from 'lucide-react';
 import {
   Badge,
   CardContent,
@@ -243,17 +243,18 @@ function DefaultForm({
           )}
 
           {error && (
-            <p className="text-sm font-medium text-destructive">{error}</p>
+            <p role="alert" className="text-sm font-medium text-destructive">{error}</p>
           )}
           {success && (
-            <p className="text-sm font-medium text-primary">{success}</p>
+            <p role="status" className="text-sm font-medium text-primary">{success}</p>
           )}
 
           <div className="flex flex-col gap-2">
             <Button type="submit" className="w-full" disabled={loading || (isVerify && code.length < codeLength)}>
+              {loading && <Loader2 className="size-4 animate-spin" />}
               {loading ? 'Please wait…' : copy.submit}
             </Button>
-            {onSso && mode === 'signin' && (
+            {onSso && (mode === 'signin' || mode === 'signup') && (
               <Button type="button" variant="outline" className="w-full" onClick={onSso} disabled={loading}>
                 Use SSO
               </Button>

package/src/app/BillingPanel.tsx

@@ -64,12 +64,14 @@ export function BillingPanel({
   onUpdatePaymentMethod,
   className,
 }: BillingPanelProps) {
+  // Dates and amounts are display strings — sorting them would be lexicographic, so keep it off
   const invoiceColumns = React.useMemo<ColumnDef<BillingInvoice>[]>(() => [
-    { accessorKey: 'date', header: 'Date' },
-    { accessorKey: 'amount', header: 'Amount' },
+    { accessorKey: 'date', header: 'Date', enableSorting: false },
+    { accessorKey: 'amount', header: 'Amount', enableSorting: false },
     {
       accessorKey: 'status',
       header: 'Status',
+      enableSorting: false,
       cell: ({ row }) => (
         <Badge variant={invoiceStatusVariant[row.original.status]} className="capitalize">
           {row.original.status}
@@ -108,17 +110,21 @@ export function BillingPanel({
           </div>
           {usage && usage.length > 0 && (
             <div className="mt-4 space-y-4">
-              {usage.map((metric) => (
-                <div key={metric.label} className="space-y-1.5">
-                  <div className="flex items-center justify-between text-sm">
-                    <span>{metric.label}</span>
-                    <span className="text-muted-foreground">
-                      {metric.used}{metric.unit} / {metric.limit}{metric.unit}
-                    </span>
+              {usage.map((metric) => {
+                const overLimit = metric.limit > 0 && metric.used > metric.limit;
+                const percent = metric.limit > 0 ? Math.min(100, (metric.used / metric.limit) * 100) : 0;
+                return (
+                  <div key={metric.label} className="space-y-1.5">
+                    <div className="flex items-center justify-between text-sm">
+                      <span>{metric.label}</span>
+                      <span className={overLimit ? 'font-medium text-destructive' : 'text-muted-foreground'}>
+                        {metric.used}{metric.unit} / {metric.limit}{metric.unit}
+                      </span>
+                    </div>
+                    <Progress value={percent} className={overLimit ? '[&>div]:bg-destructive' : undefined} />
                   </div>
-                  <Progress value={(metric.used / metric.limit) * 100} />
-                </div>
-              ))}
+                );
+              })}
             </div>
           )}
         </SettingsSection>

package/src/app/OnboardingWizard.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { Check } from 'lucide-react';
+import { Check, Loader2 } from 'lucide-react';
 import { cn } from '@olwiba/cn';
 import { Button } from '../primitives/Button';
 
@@ -57,8 +57,15 @@ export function OnboardingWizard({
   const handleNext = async () => {
     if (current.onNext) {
       setPending(true);
-      const result = await current.onNext();
-      setPending(false);
+      let result: boolean | string;
+      try {
+        result = await current.onNext();
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Something went wrong. Please try again.');
+        return;
+      } finally {
+        setPending(false);
+      }
       if (result === false) { setError('Please complete this step before continuing.'); return; }
       if (typeof result === 'string') { setError(result); return; }
     }
@@ -75,9 +82,13 @@ export function OnboardingWizard({
 
   return (
     <div className={cn('w-full max-w-lg space-y-8', className)}>
-      <ol className="flex items-center">
+      <ol className="flex items-center" aria-label="Progress">
         {steps.map((step, i) => (
-          <li key={step.id} className={cn('flex items-center', i !== steps.length - 1 && 'flex-1')}>
+          <li
+            key={step.id}
+            aria-current={i === index ? 'step' : undefined}
+            className={cn('flex items-center', i !== steps.length - 1 && 'flex-1')}
+          >
             <div
               className={cn(
                 'flex size-8 shrink-0 items-center justify-center rounded-full border text-xs font-medium',
@@ -85,6 +96,7 @@ export function OnboardingWizard({
               )}
             >
               {i < index ? <Check className="size-4" /> : i + 1}
+              <span className="sr-only">{step.title}{i < index ? ' (completed)' : ''}</span>
             </div>
             {i !== steps.length - 1 && (
               <div className={cn('mx-2 h-px flex-1', i < index ? 'bg-primary' : 'bg-border')} />
@@ -99,7 +111,7 @@ export function OnboardingWizard({
           {current.description && <p className="mt-1 text-sm text-muted-foreground">{current.description}</p>}
         </div>
         <div>{current.content}</div>
-        {error && <p className="text-sm font-medium text-destructive">{error}</p>}
+        {error && <p role="alert" className="text-sm font-medium text-destructive">{error}</p>}
       </div>
 
       <div className="flex items-center justify-between">
@@ -107,6 +119,7 @@ export function OnboardingWizard({
           Back
         </Button>
         <Button type="button" onClick={handleNext} disabled={pending}>
+          {pending && <Loader2 className="size-4 animate-spin" />}
           {pending ? 'Please wait…' : isLast ? completeLabel : 'Continue'}
         </Button>
       </div>

package/src/app/SettingsSection.tsx

@@ -6,7 +6,7 @@ export interface SettingsSectionProps {
   description?: string;
   /** Form fields, buttons, or any content for the right-hand column — e.g. a `<form>`. */
   children: React.ReactNode;
-  /** Styles the content column for a destructive action (e.g. "Delete account"). @default false */
+  /** Marks the section as a destructive action (e.g. "Delete account") — renders the title in the destructive color. @default false */
   danger?: boolean;
   className?: string;
 }

package/src/app/TeamMembersPanel.tsx

@@ -50,39 +50,45 @@ export interface TeamMembersPanelProps {
   description?: string;
 }
 
-function InviteDialog({ roles, onInvite }: { roles: string[]; onInvite?: (email: string, role: string) => void }) {
+function InviteDialog({ roles, onInvite, onClose }: { roles: string[]; onInvite?: (email: string, role: string) => void; onClose: () => void }) {
   const [email, setEmail] = React.useState('');
   const [role, setRole] = React.useState(roles[roles.length - 1] ?? roles[0]);
 
   return (
     <DialogContent>
-      <DialogHeader>
-        <DialogTitle>Invite a team member</DialogTitle>
-        <DialogDescription>They&rsquo;ll get an email invite to join this workspace.</DialogDescription>
-      </DialogHeader>
-      <div className="space-y-4 py-2">
-        <div className="space-y-2">
-          <Label htmlFor="invite-email">Email address</Label>
-          <Input id="invite-email" type="email" placeholder="name@company.com" value={email} onChange={(e) => setEmail(e.target.value)} />
-        </div>
-        <div className="space-y-2">
-          <Label>Role</Label>
-          <Select value={role} onValueChange={setRole}>
-            <SelectTrigger><SelectValue /></SelectTrigger>
-            <SelectContent>
-              {roles.map((r) => <SelectItem key={r} value={r}>{r}</SelectItem>)}
-            </SelectContent>
-          </Select>
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          onInvite?.(email, role);
+          onClose();
+        }}
+      >
+        <DialogHeader>
+          <DialogTitle>Invite a team member</DialogTitle>
+          <DialogDescription>They&rsquo;ll get an email invite to join this workspace.</DialogDescription>
+        </DialogHeader>
+        <div className="space-y-4 py-4">
+          <div className="space-y-2">
+            <Label htmlFor="invite-email">Email address</Label>
+            <Input id="invite-email" type="email" required placeholder="name@company.com" value={email} onChange={(e) => setEmail(e.target.value)} />
+          </div>
+          <div className="space-y-2">
+            <Label>Role</Label>
+            <Select value={role} onValueChange={setRole}>
+              <SelectTrigger><SelectValue /></SelectTrigger>
+              <SelectContent>
+                {roles.map((r) => <SelectItem key={r} value={r}>{r}</SelectItem>)}
+              </SelectContent>
+            </Select>
+          </div>
         </div>
-      </div>
-      <DialogFooter>
-        <DialogClose asChild>
-          <Button variant="outline">Cancel</Button>
-        </DialogClose>
-        <DialogClose asChild>
-          <Button disabled={!email} onClick={() => onInvite?.(email, role)}>Send invite</Button>
-        </DialogClose>
-      </DialogFooter>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button type="button" variant="outline">Cancel</Button>
+          </DialogClose>
+          <Button type="submit">Send invite</Button>
+        </DialogFooter>
+      </form>
     </DialogContent>
   );
 }
@@ -100,6 +106,7 @@ export function TeamMembersPanel({
   title = 'Team members',
   description = 'Manage who has access to this workspace.',
 }: TeamMembersPanelProps) {
+  const [inviteOpen, setInviteOpen] = React.useState(false);
   const columns = React.useMemo<ColumnDef<TeamMemberRecord>[]>(() => [
     {
       accessorKey: 'name',
@@ -132,7 +139,7 @@ export function TeamMembersPanel({
           <Badge variant="secondary">{row.original.role}</Badge>
         ),
     },
-    {
+    ...(onRemove ? [{
       id: 'actions',
       header: '',
       cell: ({ row }) => (
@@ -144,29 +151,32 @@ export function TeamMembersPanel({
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent align="end">
-            <DropdownMenuItem className="text-destructive" onClick={() => onRemove?.(row.original.id)}>
+            <DropdownMenuItem className="text-destructive" onClick={() => onRemove(row.original.id)}>
               Remove member
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
       ),
       enableSorting: false,
-    },
+    } satisfies ColumnDef<TeamMemberRecord>] : []),
   ], [roles, onRoleChange, onRemove]);
 
   return (
     <div className="space-y-4">
-      <div className="flex items-center justify-between gap-4">
+      <div className="flex flex-wrap items-center justify-between gap-4">
         <div>
           <h2 className="text-base font-semibold">{title}</h2>
           <p className="mt-1 text-sm text-muted-foreground">{description}</p>
         </div>
-        <Dialog>
-          <DialogTrigger asChild>
-            <Button><UserPlus className="size-4" /> Invite member</Button>
-          </DialogTrigger>
-          <InviteDialog roles={roles} onInvite={onInvite} />
-        </Dialog>
+        {onInvite && (
+          <Dialog open={inviteOpen} onOpenChange={setInviteOpen}>
+            <DialogTrigger asChild>
+              <Button><UserPlus className="size-4" /> Invite member</Button>
+            </DialogTrigger>
+            {/* key resets the form fields each time the dialog opens */}
+            <InviteDialog key={String(inviteOpen)} roles={roles} onInvite={onInvite} onClose={() => setInviteOpen(false)} />
+          </Dialog>
+        )}
       </div>
       <DataTable columns={columns} data={members} searchKey="name" searchPlaceholder="Search members…" pageSize={0} />
     </div>

package/src/components/ActivityFeed.tsx

@@ -0,0 +1,82 @@
+'use client';
+
+import * as React from 'react';
+import { Activity } from 'lucide-react';
+import { Avatar, AvatarFallback, AvatarImage, cn } from '@olwiba/cn';
+
+export interface ActivityFeedItem {
+  id: string;
+  /** Main line — pass rich nodes for emphasis, e.g. <><b>Ana</b> deployed to production</>. */
+  title: React.ReactNode;
+  description?: string;
+  /** Pre-formatted timestamp, e.g. "2h ago" or "Mar 4". */
+  timestamp?: string;
+  /** Avatar image — takes precedence over `icon`. */
+  avatar?: string;
+  /** Fallback initials when `avatar` is set but fails to load. */
+  initials?: string;
+  /** Icon node rendered in the timeline marker when there is no avatar. */
+  icon?: React.ReactNode;
+}
+
+export interface ActivityFeedProps {
+  items: ActivityFeedItem[];
+  emptyMessage?: string;
+  className?: string;
+}
+
+/**
+ * Vertical activity timeline — avatar or icon markers connected by a rail,
+ * one row per event. Presentation-only: pass pre-formatted timestamps and
+ * rich `title` nodes from your own data layer.
+ */
+export function ActivityFeed({
+  items,
+  emptyMessage = 'No activity yet.',
+  className,
+}: ActivityFeedProps) {
+  if (items.length === 0) {
+    return (
+      <div className={cn('flex flex-col items-center gap-2 py-10 text-center', className)}>
+        <Activity className="size-6 text-muted-foreground" />
+        <p className="text-sm text-muted-foreground">{emptyMessage}</p>
+      </div>
+    );
+  }
+
+  return (
+    <ol className={className}>
+      {items.map((item, i) => (
+        <li key={item.id} className="relative flex gap-3 pb-6 last:pb-0">
+          {/* Rail connecting this marker to the next */}
+          {i !== items.length - 1 && (
+            <span aria-hidden className="absolute left-4 top-9 bottom-0 w-px -translate-x-1/2 bg-border" />
+          )}
+          <span className="relative z-10 flex size-8 shrink-0 items-center justify-center">
+            {item.avatar ? (
+              <Avatar className="size-8">
+                <AvatarImage src={item.avatar} alt="" />
+                <AvatarFallback className="text-xs">{item.initials ?? '?'}</AvatarFallback>
+              </Avatar>
+            ) : (
+              <span className="flex size-8 items-center justify-center rounded-full border bg-card text-muted-foreground [&>svg]:size-4">
+                {item.icon ?? <Activity />}
+              </span>
+            )}
+          </span>
+          <div className="min-w-0 flex-1 pt-1">
+            <div className="flex items-baseline justify-between gap-2">
+              <p className="text-sm">{item.title}</p>
+              {item.timestamp && (
+                <span className="shrink-0 text-xs text-muted-foreground">{item.timestamp}</span>
+              )}
+            </div>
+            {item.description && (
+              <p className="mt-0.5 text-xs text-muted-foreground">{item.description}</p>
+            )}
+          </div>
+        </li>
+      ))}
+    </ol>
+  );
+}

package/src/components/CommandMenu.tsx

@@ -54,7 +54,13 @@ export function CommandMenu({
 }: CommandMenuProps) {
   const internal = useControlledOpen(false);
   const isOpen = openProp ?? internal.isOpen;
-  const setOpen = onOpenChange ?? internal.setIsOpen;
+  const setOpen = React.useCallback(
+    (next: boolean) => {
+      if (openProp === undefined) internal.setIsOpen(next);
+      onOpenChange?.(next);
+    },
+    [openProp, onOpenChange, internal.setIsOpen],
+  );
 
   const runItem = (item: CommandMenuItem) => {
     setOpen(false);

package/src/components/DataTable.tsx

@@ -135,7 +135,10 @@ export function DataTable<TData>({
                   const canSort = header.column.getCanSort();
                   const sortDir = header.column.getIsSorted();
                   return (
-                    <TableHead key={header.id}>
+                    <TableHead
+                      key={header.id}
+                      aria-sort={sortDir === 'asc' ? 'ascending' : sortDir === 'desc' ? 'descending' : canSort ? 'none' : undefined}
+                    >
                       {header.isPlaceholder ? null : canSort ? (
                         <button
                           type="button"
@@ -161,7 +164,11 @@ export function DataTable<TData>({
                   key={row.id}
                   data-state={row.getIsSelected() ? 'selected' : undefined}
                   onClick={() => onRowClick?.(row.original)}
-                  className={cn(onRowClick && 'cursor-pointer')}
+                  tabIndex={onRowClick ? 0 : undefined}
+                  onKeyDown={onRowClick ? (e) => {
+                    if (e.key === 'Enter' && e.target === e.currentTarget) onRowClick(row.original);
+                  } : undefined}
+                  className={cn(onRowClick && 'cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring')}
                 >
                   {row.getVisibleCells().map((cell) => (
                     <TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
@@ -179,20 +186,23 @@ export function DataTable<TData>({
         </Table>
       </div>
 
-      {pageSize > 0 && table.getPageCount() > 1 && (
+      {(selectable || (pageSize > 0 && table.getPageCount() > 1)) && (
         <div className="flex items-center justify-between">
           <p className="text-sm text-muted-foreground">
-            {selectable && `${table.getFilteredSelectedRowModel().rows.length} of ${table.getFilteredRowModel().rows.length} selected · `}
-            Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
+            {selectable && `${table.getFilteredSelectedRowModel().rows.length} of ${table.getFilteredRowModel().rows.length} selected`}
+            {selectable && pageSize > 0 && table.getPageCount() > 1 && ' · '}
+            {pageSize > 0 && table.getPageCount() > 1 && `Page ${table.getState().pagination.pageIndex + 1} of ${table.getPageCount()}`}
           </p>
-          <div className="flex gap-2">
-            <Button variant="outline" size="sm" onClick={() => table.previousPage()} disabled={!table.getCanPreviousPage()}>
-              <ChevronLeft className="size-4" /> Previous
-            </Button>
-            <Button variant="outline" size="sm" onClick={() => table.nextPage()} disabled={!table.getCanNextPage()}>
-              Next <ChevronRight className="size-4" />
-            </Button>
-          </div>
+          {pageSize > 0 && table.getPageCount() > 1 && (
+            <div className="flex gap-2">
+              <Button variant="outline" size="sm" onClick={() => table.previousPage()} disabled={!table.getCanPreviousPage()}>
+                <ChevronLeft className="size-4" /> Previous
+              </Button>
+              <Button variant="outline" size="sm" onClick={() => table.nextPage()} disabled={!table.getCanNextPage()}>
+                Next <ChevronRight className="size-4" />
+              </Button>
+            </div>
+          )}
         </div>
       )}
     </div>

package/src/components/FileUpload.tsx

@@ -66,6 +66,9 @@ export function FileUpload({
   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(
@@ -92,7 +95,8 @@ export function FileUpload({
   const handleFiles = (fileList: FileList | null) => {
     if (!fileList || disabled) return;
     const incoming = Array.from(fileList);
-    const room = maxFiles ? Math.max(0, maxFiles - files.length) : Infinity;
+    // 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;
@@ -124,11 +128,26 @@ export function FileUpload({
         role="button"
         tabIndex={disabled ? -1 : 0}
         onClick={() => !disabled && inputRef.current?.click()}
-        onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') inputRef.current?.click(); }}
-        onDragOver={(e) => { e.preventDefault(); if (!disabled) setIsDragging(true); }}
-        onDragLeave={() => setIsDragging(false)}
+        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);
         }}
@@ -154,7 +173,7 @@ export function FileUpload({
         />
       </div>
 
-      {validationError && <p className="text-sm font-medium text-destructive">{validationError}</p>}
+      {validationError && <p role="alert" className="text-sm font-medium text-destructive">{validationError}</p>}
 
       {files.length > 0 && (
         <ul className="space-y-2">