@olwiba/ui 0.1.13 → 0.1.15

package/src/components/Notify.tsx

@@ -0,0 +1,94 @@
+'use client';
+
+import * as React from 'react';
+import { toast } from 'sonner';
+import { 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' | '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" />,
+  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

@@ -13,6 +13,7 @@ export {
 
 // ─── Primitives — mode-aware re-exports of @olwiba/cn components ─────────────
 export * from './primitives';
+export { Enchanted, type EnchantedProps } from '@olwiba/cn';
 
 // ─── Layout — grid, stack, section primitives ────────────────────────────────
 export * from './layout';
@@ -34,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,
@@ -94,6 +120,14 @@ export { Spotlight, type SpotlightProps, type SpotlightGroup, type SpotlightItem
 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';
 
 // ─── Components — device mockups ────────────────────────────────────────────
 export { PhoneFrame, type PhoneFrameProps } from './components/PhoneFrame';