@olwiba/ui 0.1.15 → 0.2.1

package/dist/index.d.ts

@@ -317,7 +317,7 @@ 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;
 }
@@ -531,8 +531,10 @@ interface FeaturesSectionProps {
         description: string;
         href?: string;
     }>;
+    /** How the feature cards are arranged. @default 'grid' */
+    layout?: 'grid' | 'carousel';
 }
-declare function FeaturesSection({ title, description, badge, features, }: FeaturesSectionProps): react_jsx_runtime.JSX.Element;
+declare function FeaturesSection({ title, description, badge, features, layout, }: FeaturesSectionProps): react_jsx_runtime.JSX.Element;
 
 interface GroupedFeatureGroup {
     label: string;
@@ -578,23 +580,6 @@ interface TechStackSectionProps {
 }
 declare function TechStackSection({ badge, title, description, items, }: TechStackSectionProps): react_jsx_runtime.JSX.Element;
 
-interface CarouselSectionProps {
-    title?: string;
-    description?: string;
-    badge?: string;
-    features: Array<{
-        icon: LucideIcon;
-        title: string;
-        description: string;
-        href?: string;
-    }>;
-}
-/**
- * Horizontally scrolling card carousel for feature-style content.
- * Scroll-snap based with prev/next controls — no carousel dependency.
- */
-declare function CarouselSection({ title, description, badge, features, }: CarouselSectionProps): react_jsx_runtime.JSX.Element;
-
 interface FeatureMarqueeItem {
     icon: LucideIcon;
     title: string;
@@ -615,7 +600,7 @@ declare function FeatureMarqueeSection({ badge, title, description, rows, speed,
 
 interface CtaSectionProps {
     heading: string;
-    description: string;
+    description?: string;
     primaryCta: {
         label: string;
         href: string;
@@ -625,22 +610,18 @@ interface CtaSectionProps {
         href: string;
     };
     footnote?: string;
-    renderLink?: AppShellRenderLink;
-}
-declare function CtaSection({ heading, description, primaryCta, secondaryCta, footnote, renderLink, }: CtaSectionProps): react_jsx_runtime.JSX.Element;
-
-interface CtaCardSectionProps {
-    heading: string;
-    description?: string;
-    primaryCta: {
-        label: string;
-        href: string;
-    };
-    footnote?: string;
+    /**
+     * Visual treatment of the section.
+     * - `'default'` — badge icon, radial glow, primary + secondary CTAs
+     * - `'showcase'` — large watermark icon with a scroll-reveal, single pill CTA
+     * @default 'default'
+     */
+    variant?: 'default' | 'showcase';
+    /** (showcase) Watermark icon rendered behind the content. @default <Rocket /> */
     icon?: React.ReactNode;
     renderLink?: AppShellRenderLink;
 }
-declare function CtaCardSection({ heading, description, primaryCta, footnote, icon, renderLink, }: CtaCardSectionProps): react_jsx_runtime.JSX.Element;
+declare function CtaSection(props: CtaSectionProps): react_jsx_runtime.JSX.Element;
 
 interface PricingFeature {
     label: string;
@@ -976,6 +957,45 @@ interface PageTransitionProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 declare function PageTransition({ variant, duration, children, className, style, ...props }: PageTransitionProps): react_jsx_runtime.JSX.Element;
 
+interface CarouselProps {
+    /** Items to scroll through — each child becomes one snap slide. */
+    children: React.ReactNode;
+    /** Width classes applied to each slide. @default 'w-[280px] sm:w-[320px]' */
+    itemClassName?: string;
+    /** Prev/next control placement. @default 'top-right' */
+    controls?: 'top-right' | 'none';
+    /** Accessible label for the scroll region. */
+    ariaLabel?: string;
+    className?: string;
+}
+/**
+ * Scroll-snap carousel behavior — wraps any children in a horizontally
+ * scrolling track with prev/next controls. A mechanic, not a section:
+ * feed it cards, images, or whole blocks. No carousel dependency.
+ */
+declare function Carousel({ children, itemClassName, controls, ariaLabel, className, }: CarouselProps): react_jsx_runtime.JSX.Element;
+
+interface SortableProps {
+    /** Item ids in render order — one per child, same order as `children`. */
+    items: string[];
+    /** Fired with the new id order after a drag completes. */
+    onReorder: (items: string[]) => void;
+    /** One element per id — pairing is by position, so keep orders aligned. */
+    children: React.ReactNode;
+    /** Layout of the sortable collection. @default 'vertical' */
+    direction?: 'vertical' | 'horizontal' | 'grid';
+    disabled?: boolean;
+    className?: string;
+    itemClassName?: string;
+}
+/**
+ * Drag-to-reorder behavior — wraps any children and makes them sortable by
+ * pointer or keyboard. A mechanic, not a list component: feed it cards, rows,
+ * or tiles. Controlled: pass `items` (ids in order) and apply the new order
+ * in `onReorder`.
+ */
+declare function Sortable({ items, onReorder, children, direction, disabled, className, itemClassName, }: SortableProps): react_jsx_runtime.JSX.Element;
+
 interface SpotlightItem {
     id: string;
     label: string;
@@ -1127,6 +1147,41 @@ interface DataTableProps<TData> {
  */
 declare function DataTable<TData>({ columns, data, searchKey, searchPlaceholder, selectable, onSelectionChange, pageSize, toolbar, onRowClick, emptyMessage, className, }: DataTableProps<TData>): react_jsx_runtime.JSX.Element;
 
+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;
+}
+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;
+}
+/**
+ * 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.
+ */
+declare function Chart({ type, data, xKey, series, height, grid, legend, valueFormatter, className, }: ChartProps): react_jsx_runtime.JSX.Element;
+
 interface FileUploadEntry {
     id: string;
     file: File;
@@ -1166,7 +1221,7 @@ interface NotifyAction {
     onClick: () => void;
 }
 interface NotificationToastProps {
-    variant?: 'success' | 'info' | 'message';
+    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). */
@@ -1190,6 +1245,65 @@ interface NotifyOptions extends Omit<NotificationToastProps, 'onDismiss'> {
 /** Fires a `NotificationToast` through sonner. Requires `<Toaster />` from `@olwiba/cn` mounted once in your app. */
 declare function notify(options: NotifyOptions): string | number;
 
+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;
+}
+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`.
+ */
+declare function NotificationsPopover({ notifications, onNotificationClick, onMarkAllRead, title, emptyMessage, align, open, onOpenChange, className, }: NotificationsPopoverProps): react_jsx_runtime.JSX.Element;
+
+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;
+}
+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.
+ */
+declare function ActivityFeed({ items, emptyMessage, className, }: ActivityFeedProps): react_jsx_runtime.JSX.Element;
+
 declare const sizes: {
     readonly sm: {
         readonly outer: "w-44";
@@ -1556,4 +1670,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, 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 };
+export { ActivityFeed, type ActivityFeedItem, type ActivityFeedProps, 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, Carousel, type CarouselProps, ChangelogCard, type ChangelogCardProps, type ChangelogHighlight, ChangelogList, type ChangelogListProps, type ChangelogReleaseType, Chart, type ChartProps, type ChartSeries, 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, 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, type NotificationItem, NotificationToast, type NotificationToastProps, NotificationsPopover, type NotificationsPopoverProps, 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, Sortable, type SortableProps, 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 };