@olwiba/ui 0.1.13 → 0.1.15

package/dist/index.d.ts

@@ -3,8 +3,10 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default, { ReactNode } from 'react';
 import { ButtonProps as ButtonProps$1, CardProps as CardProps$1, BadgeProps as BadgeProps$1, InputProps as InputProps$1, TextareaProps as TextareaProps$1, CheckboxProps as CheckboxProps$1, SwitchProps as SwitchProps$1 } from '@olwiba/cn';
-export { CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@olwiba/cn';
+export { CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Enchanted, EnchantedProps } from '@olwiba/cn';
 import { LucideIcon } from 'lucide-react';
+import { ColumnDef } from '@tanstack/react-table';
+export { ColumnDef as DataTableColumn } from '@tanstack/react-table';
 export { MdxContent, MdxContentProps } from './mdx/index.js';
 
 declare function cn(...inputs: ClassValue[]): string;
@@ -260,19 +262,34 @@ interface AppShellProps {
 declare function AppShell({ brand, navItems, action, user, pageTitle, headerStart, headerEnd, renderLink, collapsible, sidebarPosition, side, children, }?: AppShellProps): react_jsx_runtime.JSX.Element;
 
 interface AuthFormProps {
-    /** Controls form title, fields, and footer text. @default 'signin' */
-    mode?: 'signin' | 'signup';
+    /**
+     * Controls form title, fields, and footer text.
+     * - `'signin'` / `'signup'` — email + password
+     * - `'forgot-password'` — email only, sends a reset link
+     * - `'reset-password'` — new password + confirmation
+     * - `'verify'` — one-time code entry (email verification or 2FA)
+     * @default 'signin'
+     */
+    mode?: 'signin' | 'signup' | 'forgot-password' | 'reset-password' | 'verify';
     onSubmit?: (e: React.FormEvent<HTMLFormElement>) => void;
     onSso?: () => void;
     /** (signin) Link to the sign-up page */
     signUpHref?: string;
-    /** (signup) Link back to the sign-in page */
+    /** (signup / forgot-password / reset-password / verify) Link back to the sign-in page */
     signInHref?: string;
     forgotPasswordHref?: string;
+    /** (verify) Re-sends the one-time code */
+    onResend?: () => void;
+    /** (verify) Address the code was sent to, shown in the description */
+    destination?: string;
+    /** (verify) Number of digits in the code. @default 6 */
+    codeLength?: number;
     /** Brand node — in centered layout renders above the card; in split layout renders inside the card */
     brand?: React.ReactNode;
     /** Error message displayed below the form fields */
     error?: string;
+    /** Positive confirmation message displayed below the form fields (e.g. "Reset link sent") */
+    success?: string;
     /** Disables the submit button and shows a loading label */
     loading?: boolean;
     /** Render prop for links — use to inject framework-native link components (e.g. TanStack Router Link) */
@@ -295,6 +312,108 @@ interface AuthSectionProps extends AuthFormProps {
 }
 declare function AuthSection({ layout, children, panel, className, ...formProps }: AuthSectionProps): react_jsx_runtime.JSX.Element;
 
+interface SettingsSectionProps {
+    title: string;
+    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 */
+    danger?: boolean;
+    className?: string;
+}
+/**
+ * One title+description+content row for a settings page. Stack a few inside
+ * a `<div className="divide-y divide-border">` to build a full settings
+ * page — one block reused per row, rather than a bespoke layout each time.
+ */
+declare function SettingsSection({ title, description, children, danger, className }: SettingsSectionProps): react_jsx_runtime.JSX.Element;
+
+interface TeamMemberRecord {
+    id: string;
+    name: string;
+    email: string;
+    avatar?: string;
+    role: string;
+}
+interface TeamMembersPanelProps {
+    members: TeamMemberRecord[];
+    /** Roles offered in the invite dialog and the per-row role menu. @default ['Owner', 'Admin', 'Member'] */
+    roles?: string[];
+    onInvite?: (email: string, role: string) => void;
+    onRoleChange?: (memberId: string, role: string) => void;
+    onRemove?: (memberId: string) => void;
+    title?: string;
+    description?: string;
+}
+/**
+ * Member list with role management and an invite dialog. One block for
+ * team/org administration — built on `DataTable` rather than a bespoke list.
+ */
+declare function TeamMembersPanel({ members, roles, onInvite, onRoleChange, onRemove, title, description, }: TeamMembersPanelProps): react_jsx_runtime.JSX.Element;
+
+interface BillingUsageMetric {
+    label: string;
+    used: number;
+    limit: number;
+    unit?: string;
+}
+interface BillingInvoice {
+    id: string;
+    date: string;
+    amount: string;
+    status: 'paid' | 'open' | 'void';
+    downloadUrl?: string;
+}
+interface BillingPaymentMethod {
+    brand: string;
+    last4: string;
+    expiry: string;
+}
+interface BillingPanelProps {
+    planName: string;
+    planPrice?: string;
+    renewalDate?: string;
+    usage?: BillingUsageMetric[];
+    paymentMethod?: BillingPaymentMethod;
+    invoices?: BillingInvoice[];
+    onManagePlan?: () => void;
+    onUpdatePaymentMethod?: () => void;
+    className?: string;
+}
+/**
+ * In-app billing summary — current plan + usage, payment method, invoice
+ * history. Built from `SettingsSection` rows and `DataTable`, rather than a
+ * one-off billing page each time. Marketing plan comparisons stay in
+ * `PricingSection`/`UpgradePrompt` — this is the account-side view.
+ */
+declare function BillingPanel({ planName, planPrice, renewalDate, usage, paymentMethod, invoices, onManagePlan, onUpdatePaymentMethod, className, }: BillingPanelProps): react_jsx_runtime.JSX.Element;
+
+interface OnboardingStep {
+    id: string;
+    title: string;
+    description?: string;
+    content: React.ReactNode;
+    /** Runs before advancing past this step. Return `false`/an error string to block. */
+    onNext?: () => boolean | string | Promise<boolean | string>;
+}
+interface OnboardingWizardProps {
+    steps: OnboardingStep[];
+    /** Called after the last step's `onNext` succeeds. */
+    onComplete?: () => void;
+    onStepChange?: (index: number) => void;
+    /** Controlled current step index — omit to let the component manage it internally. */
+    step?: number;
+    onStepIndexChange?: (index: number) => void;
+    completeLabel?: string;
+    className?: string;
+}
+/**
+ * Stateful multi-step onboarding flow. One component driven by a `steps`
+ * prop — swap the array to reshape the flow rather than hand-building a
+ * new wizard per feature.
+ */
+declare function OnboardingWizard({ steps, onComplete, onStepChange, step: stepProp, onStepIndexChange, completeLabel, className, }: OnboardingWizardProps): react_jsx_runtime.JSX.Element;
+
 interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
     icon?: LucideIcon;
     title: string;
@@ -956,6 +1075,121 @@ interface ConfirmDialogProps extends Pick<UseConfirmReturn, 'isOpen' | 'options'
 }
 declare function ConfirmDialog({ isOpen, options, handleConfirm, handleCancel, destructive }: ConfirmDialogProps): react_jsx_runtime.JSX.Element;
 
+interface CommandMenuItem {
+    id: string;
+    label: string;
+    icon?: LucideIcon;
+    shortcut?: string;
+    keywords?: string[];
+    onSelect: () => void;
+}
+interface CommandMenuGroup {
+    heading: string;
+    items: CommandMenuItem[];
+}
+interface CommandMenuProps {
+    groups: CommandMenuGroup[];
+    placeholder?: string;
+    emptyMessage?: string;
+    /** Controlled open state — omit to let the component manage it internally. */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Registers Cmd+K (mac) / Ctrl+K (win) to toggle the palette. @default true */
+    hotkey?: boolean;
+}
+/**
+ * Global search / Cmd+K command palette. One component — pass different
+ * `groups` per surface rather than building a bespoke dialog each time.
+ */
+declare function CommandMenu({ groups, placeholder, emptyMessage, open: openProp, onOpenChange, hotkey, }: CommandMenuProps): react_jsx_runtime.JSX.Element;
+
+interface DataTableProps<TData> {
+    columns: ColumnDef<TData>[];
+    data: TData[];
+    /** Shows a quick-filter input above the table, matching against `searchKey`. */
+    searchKey?: string;
+    searchPlaceholder?: string;
+    /** Adds a checkbox column and reports the selected rows. */
+    selectable?: boolean;
+    onSelectionChange?: (rows: TData[]) => void;
+    /** Rows per page. Set to `0` to disable pagination entirely. @default 10 */
+    pageSize?: number;
+    /** Slot rendered top-right of the toolbar — e.g. an "Add" button. */
+    toolbar?: React.ReactNode;
+    onRowClick?: (row: TData) => void;
+    emptyMessage?: string;
+    className?: string;
+}
+/**
+ * Sortable, paginated, optionally-selectable data table. One component —
+ * toggle `searchKey`/`selectable`/`pageSize` rather than reaching for a
+ * different table component per use case.
+ */
+declare function DataTable<TData>({ columns, data, searchKey, searchPlaceholder, selectable, onSelectionChange, pageSize, toolbar, onRowClick, emptyMessage, className, }: DataTableProps<TData>): react_jsx_runtime.JSX.Element;
+
+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;
+}
+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;
+}
+/**
+ * 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.
+ */
+declare function FileUpload({ accept, multiple, maxSizeMb, maxFiles, files: filesProp, defaultFiles, onFilesChange, onFilesAdded, disabled, hint, className, }: FileUploadProps): react_jsx_runtime.JSX.Element;
+
+interface NotifyAction {
+    label: string;
+    onClick: () => void;
+}
+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;
+}
+/**
+ * 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.
+ */
+declare function NotificationToast({ variant, title, description, avatar, action, secondaryAction, onDismiss, }: NotificationToastProps): react_jsx_runtime.JSX.Element;
+interface NotifyOptions extends Omit<NotificationToastProps, 'onDismiss'> {
+    duration?: number;
+}
+/** Fires a `NotificationToast` through sonner. Requires `<Toaster />` from `@olwiba/cn` mounted once in your app. */
+declare function notify(options: NotifyOptions): string | number;
+
 declare const sizes: {
     readonly sm: {
         readonly outer: "w-44";
@@ -1322,4 +1556,4 @@ interface UsePaginationReturn {
 }
 declare function usePagination(total: number, pageSize: number): UsePaginationReturn;
 
-export { AnimatedPill, type AnimatedPillProps, AppContent, type AppContentProps, AppGrid, AppGridCell, type AppGridCellProps, type AppGridProps, type AppNavItem, AppScreen, AppShell, type AppShellAction, type AppShellBrand, type AppShellProps, type AppShellRenderLink, type AppShellUser, type AuthFormProps, AuthSection, type AuthSectionProps, Badge, type BadgeProps, BrandColorSwitchMinimal, Button, type ButtonProps, Card, type CardProps, CarouselSection, type CarouselSectionProps, ChangelogCard, type ChangelogCardProps, type ChangelogHighlight, ChangelogList, type ChangelogListProps, type ChangelogReleaseType, Checkbox, type CheckboxProps, type ComparisonColumn, ComparisonSection, type ComparisonSectionProps, ConfirmDialog, type ConfirmDialogProps, type ConfirmOptions, type ContactInfoItem, ContactSection, type ContactSectionProps, ContextMenu, type ContextMenuDef, type ContextMenuProps, CountUp, type CountUpProps, CountdownTimer, type CountdownTimerProps, CtaCardSection, type CtaCardSectionProps, CtaSection, type CtaSectionProps, DevBanner, type DevBannerProps, Dock, type DockItem, type DockProps, EmptyState, type EmptyStateProps, ErrorPage, type ErrorPageProps, FadeIn, type FadeInProps, FaqSection, type FaqSectionProps, FeatureCard, type FeatureCardProps, type FeatureMarqueeItem, type FeatureMarqueeRow, FeatureMarqueeSection, type FeatureMarqueeSectionProps, FeaturesSection, type FeaturesSectionProps, FlowBracket, type FlowBracketProps, FlowConnector, type FlowConnectorProps, Footer, type FooterProps, FullPageSpinner, GlassCard, type GlassCardProps, Grid, GridItem, type GridItemProps, type GridProps, type GroupedFeatureGroup, GroupedFeaturesSection, type GroupedFeaturesSectionProps, HeroSection, type HeroSectionProps, type Hotkey, ImageCard, type ImageCardProps, Input, type InputProps, LogoStrip, type LogoStripProps, type MarketingSectionSpacing, ModeSwitchMinimal, Navbar, type NavbarProps, NewsletterSection, type NewsletterSectionProps, OlwibaUIProvider, type OlwibaUIProviderProps, Overlay, type OverlayProps, type OverlayVariant, PageHeader, type PageHeaderBackButton, type PageHeaderBreadcrumb, type PageHeaderProps, PageTransition, type PageTransitionProps, PhoneFrame, type PhoneFrameProps, type PostAuthor, PostCard, type PostCardProps, PostList, type PostListProps, PricingCard, type PricingCardProps, type PricingFeature, type PricingPlan, PricingSection, type PricingSectionProps, PublicPageFrame, type PublicPageFrameProps, type QualificationColumn, QualificationSection, type QualificationSectionProps, RegisterHotkeys, RootErrorFallback, Section, type SectionProps, SectionTitle, type SectionTitleProps, Spotlight, type SpotlightGroup, type SpotlightItem, type SpotlightProps, Stack, type StackProps, StaggerChildren, type StaggerChildrenProps, StatCard, type StatCardProps, StatsSection, type StatsSectionProps, type StepItem, StepsSection, type StepsSectionProps, Suspensed, Switch, type SwitchProps, type TeamMember, TeamSection, type TeamSectionProps, type TechStackItem, TechStackSection, type TechStackSectionProps, TestimonialCard, type TestimonialCardProps, TestimonialsSection, type TestimonialsSectionProps, Textarea, type TextareaProps, ThemeColorUpdater, ThemeSwitchMinimal, type UIMode, Underlay, type UnderlayProps, type UnderlayVariant, type UpgradeComparisonRow, UpgradePrompt, type UpgradePromptProps, type UseConfirmReturn, type UseControlledOpenReturn, type UsePaginationReturn, VersionBanner, cn, marketingSectionSpacing, useConfirm, useControlledOpen, useCopyToClipboard, useDebounce, useIntersectionObserver, useLocalStorage, useMediaQuery, useMounted, useOlwibaUI, usePagination, useScrolledPast, useUIMode };
+export { AnimatedPill, type AnimatedPillProps, AppContent, type AppContentProps, AppGrid, AppGridCell, type AppGridCellProps, type AppGridProps, type AppNavItem, AppScreen, AppShell, type AppShellAction, type AppShellBrand, type AppShellProps, type AppShellRenderLink, type AppShellUser, type AuthFormProps, AuthSection, type AuthSectionProps, Badge, type BadgeProps, type BillingInvoice, BillingPanel, type BillingPanelProps, type BillingPaymentMethod, type BillingUsageMetric, BrandColorSwitchMinimal, Button, type ButtonProps, Card, type CardProps, CarouselSection, type CarouselSectionProps, ChangelogCard, type ChangelogCardProps, type ChangelogHighlight, ChangelogList, type ChangelogListProps, type ChangelogReleaseType, Checkbox, type CheckboxProps, CommandMenu, type CommandMenuGroup, type CommandMenuItem, type CommandMenuProps, type ComparisonColumn, ComparisonSection, type ComparisonSectionProps, ConfirmDialog, type ConfirmDialogProps, type ConfirmOptions, type ContactInfoItem, ContactSection, type ContactSectionProps, ContextMenu, type ContextMenuDef, type ContextMenuProps, CountUp, type CountUpProps, CountdownTimer, type CountdownTimerProps, CtaCardSection, type CtaCardSectionProps, CtaSection, type CtaSectionProps, DataTable, type DataTableProps, DevBanner, type DevBannerProps, Dock, type DockItem, type DockProps, EmptyState, type EmptyStateProps, ErrorPage, type ErrorPageProps, FadeIn, type FadeInProps, FaqSection, type FaqSectionProps, FeatureCard, type FeatureCardProps, type FeatureMarqueeItem, type FeatureMarqueeRow, FeatureMarqueeSection, type FeatureMarqueeSectionProps, FeaturesSection, type FeaturesSectionProps, FileUpload, type FileUploadEntry, type FileUploadProps, FlowBracket, type FlowBracketProps, FlowConnector, type FlowConnectorProps, Footer, type FooterProps, FullPageSpinner, GlassCard, type GlassCardProps, Grid, GridItem, type GridItemProps, type GridProps, type GroupedFeatureGroup, GroupedFeaturesSection, type GroupedFeaturesSectionProps, HeroSection, type HeroSectionProps, type Hotkey, ImageCard, type ImageCardProps, Input, type InputProps, LogoStrip, type LogoStripProps, type MarketingSectionSpacing, ModeSwitchMinimal, Navbar, type NavbarProps, NewsletterSection, type NewsletterSectionProps, NotificationToast, type NotificationToastProps, type NotifyAction, type NotifyOptions, OlwibaUIProvider, type OlwibaUIProviderProps, type OnboardingStep, OnboardingWizard, type OnboardingWizardProps, Overlay, type OverlayProps, type OverlayVariant, PageHeader, type PageHeaderBackButton, type PageHeaderBreadcrumb, type PageHeaderProps, PageTransition, type PageTransitionProps, PhoneFrame, type PhoneFrameProps, type PostAuthor, PostCard, type PostCardProps, PostList, type PostListProps, PricingCard, type PricingCardProps, type PricingFeature, type PricingPlan, PricingSection, type PricingSectionProps, PublicPageFrame, type PublicPageFrameProps, type QualificationColumn, QualificationSection, type QualificationSectionProps, RegisterHotkeys, RootErrorFallback, Section, type SectionProps, SectionTitle, type SectionTitleProps, SettingsSection, type SettingsSectionProps, Spotlight, type SpotlightGroup, type SpotlightItem, type SpotlightProps, Stack, type StackProps, StaggerChildren, type StaggerChildrenProps, StatCard, type StatCardProps, StatsSection, type StatsSectionProps, type StepItem, StepsSection, type StepsSectionProps, Suspensed, Switch, type SwitchProps, type TeamMember, type TeamMemberRecord, TeamMembersPanel, type TeamMembersPanelProps, TeamSection, type TeamSectionProps, type TechStackItem, TechStackSection, type TechStackSectionProps, TestimonialCard, type TestimonialCardProps, TestimonialsSection, type TestimonialsSectionProps, Textarea, type TextareaProps, ThemeColorUpdater, ThemeSwitchMinimal, type UIMode, Underlay, type UnderlayProps, type UnderlayVariant, type UpgradeComparisonRow, UpgradePrompt, type UpgradePromptProps, type UseConfirmReturn, type UseControlledOpenReturn, type UsePaginationReturn, VersionBanner, cn, marketingSectionSpacing, notify, useConfirm, useControlledOpen, useCopyToClipboard, useDebounce, useIntersectionObserver, useLocalStorage, useMediaQuery, useMounted, useOlwibaUI, usePagination, useScrolledPast, useUIMode };