@olwiba/ui 0.1.5 → 0.1.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.ts CHANGED
@@ -278,6 +278,10 @@ interface AuthFormProps {
278
278
  renderLink?: AppShellRenderLink;
279
279
  /** Optional content rendered below the form — use for social auth buttons or other additions */
280
280
  footer?: React.ReactNode;
281
+ /** Pre-fill the email field (e.g. from demo credential links). Triggers a brief border highlight animation. */
282
+ defaultEmail?: string;
283
+ /** Pre-fill the password field (e.g. from demo credential links). Triggers a brief border highlight animation. */
284
+ defaultPassword?: string;
281
285
  }
282
286
  interface AuthSectionProps extends AuthFormProps {
283
287
  /** Visual layout of the auth screen. @default 'centered' */
@@ -396,6 +400,50 @@ interface FeaturesSectionProps {
396
400
  }
397
401
  declare function FeaturesSection({ title, description, badge, features, }: FeaturesSectionProps): react_jsx_runtime.JSX.Element;
398
402
 
403
+ interface GroupedFeatureGroup {
404
+ label: string;
405
+ features: Array<{
406
+ icon: LucideIcon;
407
+ title: string;
408
+ description: string;
409
+ href?: string;
410
+ }>;
411
+ }
412
+ interface GroupedFeaturesSectionProps {
413
+ badge?: string;
414
+ title?: string;
415
+ description?: string;
416
+ groups: GroupedFeatureGroup[];
417
+ }
418
+ declare function GroupedFeaturesSection({ badge, title, description, groups, }: GroupedFeaturesSectionProps): react_jsx_runtime.JSX.Element;
419
+
420
+ interface StepItem {
421
+ emoji?: string;
422
+ title: string;
423
+ description: string;
424
+ }
425
+ interface StepsSectionProps {
426
+ badge?: string;
427
+ title?: string;
428
+ description?: string;
429
+ steps: StepItem[];
430
+ }
431
+ declare function StepsSection({ badge, title, description, steps, }: StepsSectionProps): react_jsx_runtime.JSX.Element;
432
+
433
+ interface TechStackItem {
434
+ icon: LucideIcon;
435
+ name: string;
436
+ description: string;
437
+ href?: string;
438
+ }
439
+ interface TechStackSectionProps {
440
+ badge?: string;
441
+ title?: string;
442
+ description?: string;
443
+ items: TechStackItem[];
444
+ }
445
+ declare function TechStackSection({ badge, title, description, items, }: TechStackSectionProps): react_jsx_runtime.JSX.Element;
446
+
399
447
  interface CarouselSectionProps {
400
448
  title?: string;
401
449
  description?: string;
@@ -413,6 +461,24 @@ interface CarouselSectionProps {
413
461
  */
414
462
  declare function CarouselSection({ title, description, badge, features, }: CarouselSectionProps): react_jsx_runtime.JSX.Element;
415
463
 
464
+ interface FeatureMarqueeItem {
465
+ icon: LucideIcon;
466
+ title: string;
467
+ }
468
+ interface FeatureMarqueeRow {
469
+ items: FeatureMarqueeItem[];
470
+ direction?: 'left' | 'right';
471
+ }
472
+ interface FeatureMarqueeSectionProps {
473
+ badge?: string;
474
+ title?: string;
475
+ description?: string;
476
+ rows: FeatureMarqueeRow[];
477
+ speed?: 'slow' | 'normal' | 'fast';
478
+ pauseOnHover?: boolean;
479
+ }
480
+ declare function FeatureMarqueeSection({ badge, title, description, rows, speed, pauseOnHover, }: FeatureMarqueeSectionProps): react_jsx_runtime.JSX.Element;
481
+
416
482
  interface CtaSectionProps {
417
483
  heading: string;
418
484
  description: string;
@@ -429,6 +495,19 @@ interface CtaSectionProps {
429
495
  }
430
496
  declare function CtaSection({ heading, description, primaryCta, secondaryCta, footnote, renderLink, }: CtaSectionProps): react_jsx_runtime.JSX.Element;
431
497
 
498
+ interface CtaCardSectionProps {
499
+ heading: string;
500
+ description?: string;
501
+ primaryCta: {
502
+ label: string;
503
+ href: string;
504
+ };
505
+ footnote?: string;
506
+ icon?: React.ReactNode;
507
+ renderLink?: AppShellRenderLink;
508
+ }
509
+ declare function CtaCardSection({ heading, description, primaryCta, footnote, icon, renderLink, }: CtaCardSectionProps): react_jsx_runtime.JSX.Element;
510
+
432
511
  interface PricingFeature {
433
512
  label: string;
434
513
  included: boolean;
@@ -441,10 +520,11 @@ interface PricingCardProps extends React.HTMLAttributes<HTMLDivElement> {
441
520
  features: PricingFeature[];
442
521
  cta: string;
443
522
  highlighted?: boolean;
444
- badge?: string;
523
+ disabled?: boolean;
524
+ badge?: React.ReactNode;
445
525
  onSelect?: () => void;
446
526
  }
447
- declare function PricingCard({ name, price, period, description, features, cta, highlighted, badge, onSelect, className, ...props }: PricingCardProps): react_jsx_runtime.JSX.Element;
527
+ declare function PricingCard({ name, price, period, description, features, cta, highlighted, disabled, badge, onSelect, className, ...props }: PricingCardProps): react_jsx_runtime.JSX.Element;
448
528
 
449
529
  interface PricingPlan {
450
530
  name: string;
@@ -453,19 +533,26 @@ interface PricingPlan {
453
533
  description: string;
454
534
  cta: string;
455
535
  highlighted?: boolean;
536
+ disabled?: boolean;
456
537
  features: PricingFeature[];
538
+ /** Overrides computed price display (e.g. "$?" for community/reach-out tiers). */
539
+ priceDisplay?: string;
540
+ /** Overrides computed period display. */
541
+ periodDisplay?: string;
457
542
  }
458
543
  interface PricingSectionProps {
459
544
  title?: string;
460
545
  description?: string;
461
- badge?: string;
546
+ badge?: React.ReactNode;
462
547
  plans: PricingPlan[];
463
548
  saveBadge?: string;
464
549
  isAuthenticated?: boolean;
465
550
  renderLink?: AppShellRenderLink;
466
551
  footnote?: string;
552
+ mode?: 'subscription' | 'one-time';
553
+ foundingDeadline?: string;
467
554
  }
468
- declare function PricingSection({ title, description, badge, plans, saveBadge, isAuthenticated, renderLink, footnote, }: PricingSectionProps): react_jsx_runtime.JSX.Element;
555
+ declare function PricingSection({ title, description, badge, plans, saveBadge, isAuthenticated, renderLink, footnote, mode, foundingDeadline, }: PricingSectionProps): react_jsx_runtime.JSX.Element;
469
556
 
470
557
  interface TestimonialsSectionProps {
471
558
  title?: string;
@@ -483,7 +570,25 @@ interface TestimonialsSectionProps {
483
570
  }
484
571
  declare function TestimonialsSection({ title, description, badge, testimonials, }: TestimonialsSectionProps): react_jsx_runtime.JSX.Element;
485
572
 
486
- declare function TeamSection(): react_jsx_runtime.JSX.Element;
573
+ interface TeamMember {
574
+ name: string;
575
+ role: string;
576
+ bio: string;
577
+ avatar?: string;
578
+ initials: string;
579
+ social?: {
580
+ twitter?: string | null;
581
+ github?: string | null;
582
+ linkedin?: string | null;
583
+ };
584
+ }
585
+ interface TeamSectionProps {
586
+ members?: TeamMember[];
587
+ badge?: string;
588
+ title?: string;
589
+ description?: string;
590
+ }
591
+ declare function TeamSection({ members, badge, title, description, }: TeamSectionProps): react_jsx_runtime.JSX.Element;
487
592
 
488
593
  interface FaqSectionProps {
489
594
  title?: string;
@@ -532,12 +637,41 @@ interface ContactSectionProps {
532
637
  title?: string;
533
638
  description?: string;
534
639
  contactInfo?: ContactInfoItem[];
640
+ privacyHref?: string;
535
641
  successTitle?: string;
536
642
  successDescription?: string;
537
643
  sendAnotherLabel?: string;
538
644
  onSubmit?: (event: React.FormEvent<HTMLFormElement>) => void | Promise<void>;
539
645
  }
540
- declare function ContactSection({ badge, title, description, contactInfo, successTitle, successDescription, sendAnotherLabel, onSubmit, }?: ContactSectionProps): react_jsx_runtime.JSX.Element;
646
+ declare function ContactSection({ badge, title, description, contactInfo, privacyHref, successTitle, successDescription, sendAnotherLabel, onSubmit, }?: ContactSectionProps): react_jsx_runtime.JSX.Element;
647
+
648
+ interface ComparisonColumn {
649
+ label: string;
650
+ cost: string;
651
+ costDetail?: string;
652
+ items: string[];
653
+ highlighted?: boolean;
654
+ }
655
+ interface ComparisonSectionProps {
656
+ badge?: string;
657
+ title?: string;
658
+ description?: string;
659
+ columns: ComparisonColumn[];
660
+ }
661
+ declare function ComparisonSection({ badge, title, description, columns, }: ComparisonSectionProps): react_jsx_runtime.JSX.Element;
662
+
663
+ interface QualificationColumn {
664
+ heading: string;
665
+ variant: 'positive' | 'negative';
666
+ items: string[];
667
+ }
668
+ interface QualificationSectionProps {
669
+ badge?: string;
670
+ title?: string;
671
+ description?: string;
672
+ columns: [QualificationColumn, QualificationColumn];
673
+ }
674
+ declare function QualificationSection({ badge, title, description, columns, }: QualificationSectionProps): react_jsx_runtime.JSX.Element;
541
675
 
542
676
  interface NavbarProps {
543
677
  brand: {
@@ -673,6 +807,22 @@ interface CountUpProps extends React.HTMLAttributes<HTMLSpanElement> {
673
807
  }
674
808
  declare function CountUp({ from, to, duration, decimals, prefix, suffix, once, className, ...props }: CountUpProps): react_jsx_runtime.JSX.Element;
675
809
 
810
+ interface CountdownTimerProps {
811
+ deadline: string;
812
+ label?: string;
813
+ className?: string;
814
+ /** Compact inline mode — renders as "29d · 11h · 22m", no seconds, no label. For use inside badges. */
815
+ compact?: boolean;
816
+ }
817
+ declare function CountdownTimer({ deadline, label, className, compact, }: CountdownTimerProps): react_jsx_runtime.JSX.Element | null;
818
+
819
+ interface AnimatedPillProps {
820
+ labels: string[];
821
+ interval?: number;
822
+ className?: string;
823
+ }
824
+ declare function AnimatedPill({ labels, interval, className }: AnimatedPillProps): react_jsx_runtime.JSX.Element | null;
825
+
676
826
  interface PageTransitionProps extends React.HTMLAttributes<HTMLDivElement> {
677
827
  variant?: 'fade' | 'slide-up' | 'slide-down';
678
828
  duration?: number;
@@ -870,6 +1020,85 @@ interface ImageCardProps extends React.HTMLAttributes<HTMLDivElement> {
870
1020
  }
871
1021
  declare function ImageCard({ src, alt, overlay, aspectRatio, children, className, ...props }: ImageCardProps): react_jsx_runtime.JSX.Element;
872
1022
 
1023
+ interface FlowConnectorProps {
1024
+ /** Line axis. Default: 'vertical'. */
1025
+ direction?: 'vertical' | 'horizontal';
1026
+ /**
1027
+ * CSS color string for the line and arrowhead.
1028
+ * Falls back to currentColor at reduced opacity when omitted.
1029
+ */
1030
+ color?: string;
1031
+ /** Show an open-chevron arrowhead at the destination end. Default: false. */
1032
+ arrow?: boolean;
1033
+ /** Show a traveling dot animation along the connector. Default: false. */
1034
+ animate?: boolean;
1035
+ /** Duration of the traveling dot animation. Default: '1.4s'. */
1036
+ animateDur?: string;
1037
+ /** CSS delay before the traveling dot animation starts. Default: '0s'. */
1038
+ animateDelay?: string;
1039
+ className?: string;
1040
+ style?: React.CSSProperties;
1041
+ }
1042
+ /**
1043
+ * Dashed connecting line between diagram nodes.
1044
+ * Control size via className (e.g. `h-10` for vertical, `w-16` for horizontal).
1045
+ * Pass `style` for fade/entrance animations — the wrapper inherits it.
1046
+ */
1047
+ declare function FlowConnector({ direction, color, arrow, animate, animateDur, animateDelay, className, style, }: FlowConnectorProps): react_jsx_runtime.JSX.Element;
1048
+
1049
+ interface FlowBracketProps {
1050
+ /**
1051
+ * Vertical anchor for the top connection as a percentage of the wrapper height (0–100).
1052
+ * Defaults to 8 (near the top of the first child).
1053
+ */
1054
+ anchorTop?: number;
1055
+ /**
1056
+ * Vertical anchor for the bottom connection as a percentage of the wrapper height (0–100).
1057
+ * Defaults to 92 (near the bottom of the last child).
1058
+ */
1059
+ anchorBottom?: number;
1060
+ /**
1061
+ * How far outside the wrapper the bracket extends, in SVG units (viewBox width = 1000).
1062
+ * Defaults to 22.
1063
+ */
1064
+ extent?: number;
1065
+ /** Show open-chevron arrowhead at the top (destination) end. Default: true. */
1066
+ arrow?: boolean;
1067
+ /** CSS color for both bracket lines and animated dots. Defaults to muted slate. */
1068
+ color?: string;
1069
+ /** Override color for the left bracket only. */
1070
+ colorLeft?: string;
1071
+ /** Override color for the right bracket only. */
1072
+ colorRight?: string;
1073
+ /** Show left bracket. Default: true. */
1074
+ left?: boolean;
1075
+ /** Show right bracket. Default: true. */
1076
+ right?: boolean;
1077
+ /**
1078
+ * Animate a dot traveling the L-path from the bottom anchor up to the top anchor
1079
+ * (sync → genesis/docs direction).
1080
+ * Dots are placed after {children} in DOM so positive-z-index card stacking contexts
1081
+ * naturally render above them.
1082
+ */
1083
+ animate?: boolean;
1084
+ /** Duration of one full dot journey. Default: '4s'. */
1085
+ animateDur?: string;
1086
+ /** Reverse the right bracket path direction so its arrowhead points DOWN (into sync). Default: false. */
1087
+ reverseRight?: boolean;
1088
+ style?: React.CSSProperties;
1089
+ className?: string;
1090
+ children: React.ReactNode;
1091
+ }
1092
+ /**
1093
+ * Wraps children in a relative container and draws square bracket lines on the
1094
+ * left and/or right outside edges — connecting the top of the first child down
1095
+ * to the bottom of the last child (e.g. docs → SYNC direction).
1096
+ *
1097
+ * Bracket lines use `overflow: visible` on the SVG to draw into the parent's padding.
1098
+ * Ensure the parent section/container has enough horizontal padding for `extent`.
1099
+ */
1100
+ declare function FlowBracket({ anchorTop, anchorBottom, extent, arrow, color, colorLeft, colorRight, left, right, animate, animateDur, reverseRight, style, className, children, }: FlowBracketProps): react_jsx_runtime.JSX.Element;
1101
+
873
1102
  interface FullPageSpinnerProps {
874
1103
  message?: string;
875
1104
  }
@@ -905,6 +1134,8 @@ declare function ThemeSwitchMinimal(): react_jsx_runtime.JSX.Element;
905
1134
 
906
1135
  declare function ModeSwitchMinimal(): react_jsx_runtime.JSX.Element;
907
1136
 
1137
+ declare function BrandColorSwitchMinimal(): react_jsx_runtime.JSX.Element;
1138
+
908
1139
  interface ThemeColorUpdaterProps {
909
1140
  colorTheme?: string;
910
1141
  }
@@ -966,16 +1197,23 @@ interface PostListProps {
966
1197
  }
967
1198
  declare function PostList({ posts, renderLink, emptyMessage }: PostListProps): react_jsx_runtime.JSX.Element;
968
1199
 
1200
+ type ChangelogReleaseType = 'release' | 'fix' | 'enhancement';
1201
+ interface ChangelogHighlight {
1202
+ title: string;
1203
+ description: string;
1204
+ }
969
1205
  interface ChangelogCardProps {
970
1206
  title: string;
971
1207
  summary: string;
972
1208
  date: string;
973
1209
  slug: string;
974
1210
  version?: string;
1211
+ releaseType?: ChangelogReleaseType;
1212
+ highlights?: ChangelogHighlight[];
975
1213
  hrefPrefix?: string;
976
1214
  renderLink?: AppShellRenderLink;
977
1215
  }
978
- declare function ChangelogCard({ title, summary, date, slug, version, hrefPrefix, renderLink, }: ChangelogCardProps): react_jsx_runtime.JSX.Element;
1216
+ declare function ChangelogCard({ title, summary, date, slug, version, releaseType, highlights, hrefPrefix, renderLink, }: ChangelogCardProps): react_jsx_runtime.JSX.Element;
979
1217
 
980
1218
  interface ChangelogListProps {
981
1219
  entries: ChangelogCardProps[];
@@ -1041,4 +1279,4 @@ interface UsePaginationReturn {
1041
1279
  }
1042
1280
  declare function usePagination(total: number, pageSize: number): UsePaginationReturn;
1043
1281
 
1044
- export { 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, Button, type ButtonProps, Card, type CardProps, CarouselSection, type CarouselSectionProps, ChangelogCard, type ChangelogCardProps, ChangelogList, type ChangelogListProps, Checkbox, type CheckboxProps, ConfirmDialog, type ConfirmDialogProps, type ConfirmOptions, type ContactInfoItem, ContactSection, type ContactSectionProps, ContextMenu, type ContextMenuDef, type ContextMenuProps, CountUp, type CountUpProps, 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, FeaturesSection, type FeaturesSectionProps, Footer, type FooterProps, FullPageSpinner, GlassCard, type GlassCardProps, Grid, GridItem, type GridItemProps, type GridProps, HeroSection, type HeroSectionProps, type Hotkey, ImageCard, type ImageCardProps, Input, type InputProps, LogoStrip, type LogoStripProps, 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, PostCard, type PostCardProps, PostList, type PostListProps, PricingCard, type PricingCardProps, type PricingFeature, type PricingPlan, PricingSection, type PricingSectionProps, PublicPageFrame, type PublicPageFrameProps, 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, Suspensed, Switch, type SwitchProps, TeamSection, 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, useConfirm, useControlledOpen, useCopyToClipboard, useDebounce, useIntersectionObserver, useLocalStorage, useMediaQuery, useMounted, useOlwibaUI, usePagination, useScrolledPast, useUIMode };
1282
+ 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, 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, 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, useConfirm, useControlledOpen, useCopyToClipboard, useDebounce, useIntersectionObserver, useLocalStorage, useMediaQuery, useMounted, useOlwibaUI, usePagination, useScrolledPast, useUIMode };