@olwiba/ui 0.1.15 → 0.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olwiba/ui",
-  "version": "0.1.15",
+  "version": "0.2.1",
   "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/Chart.tsx

@@ -0,0 +1,245 @@
+'use client';
+
+import * as React from 'react';
+import {
+  Area,
+  AreaChart,
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Cell,
+  Line,
+  LineChart,
+  Pie,
+  PieChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import { cn } from '@olwiba/cn';
+
+export interface ChartSeries {
+  /** Data key to plot. */
+  key: string;
+  /** Legend and tooltip label. @default key */
+  label?: string;
+  /** CSS color. @default theme tokens --chart-1..5 in fixed order */
+  color?: string;
+}
+
+export interface ChartProps {
+  /** Chart form. @default 'line' */
+  type?: 'line' | 'area' | 'bar' | 'donut';
+  data: Array<Record<string, string | number>>;
+  /** Key for x-axis categories (line/area/bar) or slice labels (donut). */
+  xKey: string;
+  /** Series to plot. Donut uses `series[0].key` as the slice value. */
+  series: ChartSeries[];
+  /** Chart height in px. @default 300 */
+  height?: number;
+  /** Horizontal grid lines. @default true (ignored for donut) */
+  grid?: boolean;
+  /** Legend. @default true for multiple series or donut, false for one series */
+  legend?: boolean;
+  /** Formats values in tooltips and the y-axis, e.g. `(v) => \`$${v}\``. */
+  valueFormatter?: (value: number) => string;
+  className?: string;
+}
+
+// Fixed categorical order — series N always gets token N, never cycled.
+const TOKEN_COLORS = ['var(--chart-1)', 'var(--chart-2)', 'var(--chart-3)', 'var(--chart-4)', 'var(--chart-5)'];
+
+const seriesColor = (s: ChartSeries, i: number) => s.color ?? TOKEN_COLORS[i % TOKEN_COLORS.length];
+
+function ChartTooltip({
+  active,
+  payload,
+  label,
+  valueFormatter,
+}: {
+  active?: boolean;
+  payload?: Array<{ name?: string; value?: number | string; color?: string; payload?: { fill?: string } }>;
+  label?: string | number;
+  valueFormatter: (value: number) => string;
+}) {
+  if (!active || !payload?.length) return null;
+  return (
+    <div className="rounded-lg border bg-popover px-3 py-2 text-xs text-popover-foreground shadow-md">
+      {label !== undefined && <p className="mb-1 font-medium">{label}</p>}
+      <div className="space-y-1">
+        {payload.map((entry, i) => (
+          <div key={i} className="flex items-center gap-2">
+            <span
+              aria-hidden
+              className="size-2 shrink-0 rounded-full"
+              style={{ background: entry.color ?? entry.payload?.fill }}
+            />
+            <span className="text-muted-foreground">{entry.name}</span>
+            <span className="ml-auto pl-3 font-medium tabular-nums">
+              {typeof entry.value === 'number' ? valueFormatter(entry.value) : entry.value}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function ChartLegend({ entries }: { entries: Array<{ label: string; color: string }> }) {
+  return (
+    <div className="mt-3 flex flex-wrap items-center justify-center gap-x-4 gap-y-1">
+      {entries.map((entry) => (
+        <div key={entry.label} className="flex items-center gap-1.5 text-xs text-muted-foreground">
+          <span aria-hidden className="size-2 rounded-full" style={{ background: entry.color }} />
+          {entry.label}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+const axisProps = {
+  tickLine: false,
+  axisLine: false,
+  tick: { fill: 'var(--muted-foreground)', fontSize: 12 },
+  tickMargin: 8,
+} as const;
+
+/**
+ * Theme-aware chart — one component, `type` switches the form. Colors come
+ * from the `--chart-1..5` theme tokens in fixed order (override per series
+ * via `color`). Line and area for change-over-time, bar for magnitude
+ * comparison, donut for part-of-whole identity. More than 5 donut slices:
+ * fold the tail into an "Other" slice in your data instead of adding hues.
+ */
+export function Chart({
+  type = 'line',
+  data,
+  xKey,
+  series,
+  height = 300,
+  grid = true,
+  legend,
+  valueFormatter = (v) => String(v),
+  className,
+}: ChartProps) {
+  const showLegend = legend ?? (type === 'donut' || series.length > 1);
+  const tooltip = (
+    <Tooltip
+      cursor={type === 'bar' ? { fill: 'var(--muted)', opacity: 0.4 } : { stroke: 'var(--border)' }}
+      content={<ChartTooltip valueFormatter={valueFormatter} />}
+    />
+  );
+  const gridEl = grid ? (
+    <CartesianGrid vertical={false} stroke="var(--border)" strokeOpacity={0.6} />
+  ) : null;
+
+  let chart: React.ReactElement;
+  let legendEntries: Array<{ label: string; color: string }>;
+
+  if (type === 'donut') {
+    const valueKey = series[0]?.key;
+    legendEntries = data.map((row, i) => ({
+      label: String(row[xKey]),
+      color: TOKEN_COLORS[i % TOKEN_COLORS.length],
+    }));
+    chart = (
+      <PieChart>
+        <Pie
+          data={data}
+          dataKey={valueKey}
+          nameKey={xKey}
+          innerRadius="60%"
+          outerRadius="85%"
+          paddingAngle={2}
+          stroke="var(--card)"
+          strokeWidth={2}
+        >
+          {data.map((row, i) => (
+            <Cell key={String(row[xKey])} fill={TOKEN_COLORS[i % TOKEN_COLORS.length]} />
+          ))}
+        </Pie>
+        {tooltip}
+      </PieChart>
+    );
+  } else {
+    legendEntries = series.map((s, i) => ({ label: s.label ?? s.key, color: seriesColor(s, i) }));
+
+    if (type === 'bar') {
+      chart = (
+        <BarChart data={data} barCategoryGap="25%">
+          {gridEl}
+          <XAxis dataKey={xKey} {...axisProps} />
+          <YAxis {...axisProps} width={48} tickFormatter={valueFormatter} />
+          {tooltip}
+          {series.map((s, i) => (
+            <Bar
+              key={s.key}
+              dataKey={s.key}
+              name={s.label ?? s.key}
+              fill={seriesColor(s, i)}
+              radius={[4, 4, 0, 0]}
+              maxBarSize={40}
+            />
+          ))}
+        </BarChart>
+      );
+    } else if (type === 'area') {
+      chart = (
+        <AreaChart data={data}>
+          {gridEl}
+          <XAxis dataKey={xKey} {...axisProps} />
+          <YAxis {...axisProps} width={48} tickFormatter={valueFormatter} />
+          {tooltip}
+          {series.map((s, i) => (
+            <Area
+              key={s.key}
+              type="monotone"
+              dataKey={s.key}
+              name={s.label ?? s.key}
+              stroke={seriesColor(s, i)}
+              strokeWidth={2}
+              fill={seriesColor(s, i)}
+              fillOpacity={0.12}
+              dot={false}
+              activeDot={{ r: 4 }}
+            />
+          ))}
+        </AreaChart>
+      );
+    } else {
+      chart = (
+        <LineChart data={data}>
+          {gridEl}
+          <XAxis dataKey={xKey} {...axisProps} />
+          <YAxis {...axisProps} width={48} tickFormatter={valueFormatter} />
+          {tooltip}
+          {series.map((s, i) => (
+            <Line
+              key={s.key}
+              type="monotone"
+              dataKey={s.key}
+              name={s.label ?? s.key}
+              stroke={seriesColor(s, i)}
+              strokeWidth={2}
+              dot={false}
+              activeDot={{ r: 4 }}
+            />
+          ))}
+        </LineChart>
+      );
+    }
+  }
+
+  return (
+    <div className={cn('w-full', className)}>
+      <div style={{ height }}>
+        <ResponsiveContainer width="100%" height="100%">
+          {chart}
+        </ResponsiveContainer>
+      </div>
+      {showLegend && <ChartLegend entries={legendEntries} />}
+    </div>
+  );
+}

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