@olwiba/ui 0.2.6 → 0.2.7

package/dist/index.d.ts

@@ -143,13 +143,25 @@ interface AppContentProps extends React__default.HTMLAttributes<HTMLDivElement>
 }
 declare function AppContent({ spacing, maxWidth, className, children, ...props }: AppContentProps): react_jsx_runtime.JSX.Element;
 
+/**
+ * Responsive ramps per column count. Every ramp starts at a single column —
+ * a card grid that stays multi-column on a phone is unreadable — and adds
+ * columns at breakpoints wide enough to keep each card legible.
+ *
+ * Written out in full rather than composed, because Tailwind scans source for
+ * complete class strings; a template literal like `xl:grid-cols-${n}` produces
+ * nothing at build time.
+ */
 declare const columnsMap: {
     1: string;
     2: string;
     3: string;
     4: string;
+    5: string;
+    6: string;
 };
 declare const gapMap: {
+    none: string;
     sm: string;
     md: string;
     lg: string;
@@ -161,8 +173,14 @@ declare const spanMap: {
     4: string;
     full: string;
 };
+type AppGridColumns = keyof typeof columnsMap;
 interface AppGridProps extends React__default.HTMLAttributes<HTMLDivElement> {
-    columns?: keyof typeof columnsMap;
+    /**
+     * Columns at the widest breakpoint. Narrower screens step down through the
+     * ramp automatically, so this is "how dense at full width", not a fixed
+     * count. Default 3.
+     */
+    columns?: AppGridColumns;
     gap?: keyof typeof gapMap;
 }
 declare function AppGrid({ columns, gap, className, children, ...props }: AppGridProps): react_jsx_runtime.JSX.Element;
@@ -1191,6 +1209,79 @@ 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;
 
+type ViewMode = 'cards' | 'list';
+interface UseViewModeReturn {
+    view: ViewMode;
+    setView: (view: ViewMode) => void;
+    /**
+     * False until the stored preference is readable. Render a skeleton or hold
+     * the section until this is true — see the note below on why.
+     */
+    ready: boolean;
+}
+/**
+ * Remembered cards/list preference.
+ *
+ * Returns the fallback on the server and on the first client render, then
+ * settles to the stored value once mounted. Returning the stored value
+ * immediately would have the server emit card markup while the client builds
+ * a table — a hydration mismatch — and painting the fallback first flashes
+ * the wrong view at someone who chose the other one. `ready` lets callers
+ * wait for the real answer instead of doing either.
+ *
+ * The key is shared by default so the choice reads as one product-wide
+ * preference: pick list on one page and every page follows. Pass a distinct
+ * key where a page genuinely wants its own.
+ */
+declare function useViewMode(key?: string, fallback?: ViewMode): UseViewModeReturn;
+
+interface DataViewProps<TData> {
+    items: TData[];
+    /** Stable key per item. */
+    getRowId: (item: TData) => string;
+    /** Card renderer for the grid view. */
+    renderCard: (item: TData) => React.ReactNode;
+    /** Columns for the list view. */
+    columns: ColumnDef<TData>[];
+    view: ViewMode;
+    /**
+     * False while a persisted preference is still being read. The whole view is
+     * withheld until true — see the note on the component.
+     */
+    ready?: boolean;
+    /** Grid density at the widest breakpoint. Default 3. */
+    gridColumns?: AppGridColumns;
+    gap?: 'none' | 'sm' | 'md' | 'lg';
+    /** Rendered instead of either view when there is nothing to show. */
+    empty?: React.ReactNode;
+    /** Shown while `ready` is false. Defaults to nothing. */
+    placeholder?: React.ReactNode;
+    searchKey?: string;
+    searchPlaceholder?: string;
+    pageSize?: number;
+    emptyMessage?: string;
+    onRowClick?: (row: TData) => void;
+    className?: string;
+}
+/**
+ * A collection rendered either as a grid of cards or as a table, from one set
+ * of data.
+ *
+ * Knows nothing about what it is listing: callers supply a card renderer and
+ * table columns. Cards are for "what arrived recently", the table for
+ * comparing many rows at once, and switching between them should not mean two
+ * page implementations that drift apart.
+ *
+ * The `ready` gate is the subtle part, and the reason this is a component
+ * rather than a snippet to copy. A persisted preference cannot be read during
+ * SSR or the first client render, so a page that renders its default
+ * immediately will either mismatch on hydration or visibly flash the wrong
+ * view at anyone who chose the other one. Holding the section until the
+ * preference resolves avoids both, and putting that here means no consumer
+ * has to work it out again.
+ */
+declare function DataView<TData>({ items, getRowId, renderCard, columns, view, ready, gridColumns, gap, empty, placeholder, searchKey, searchPlaceholder, pageSize, emptyMessage, onRowClick, className, }: DataViewProps<TData>): react_jsx_runtime.JSX.Element;
+
 interface ChartSeries {
     /** Data key to plot. */
     key: string;
@@ -1439,6 +1530,58 @@ interface ImageCardProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 declare function ImageCard({ src, alt, overlay, aspectRatio, children, className, ...props }: ImageCardProps): react_jsx_runtime.JSX.Element;
 
+declare const bannerAspectClass: {
+    wide: string;
+    video: string;
+    square: string;
+};
+interface MediaCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Banner rendered above the content, clipped to the card's rounded corners.
+     * A ReactNode rather than a src, so a brand fallback, an inline SVG, a map,
+     * or a plain <img> all work — this is the difference from ImageCard, which
+     * takes a URL and is the right choice when you actually have one.
+     */
+    banner?: React.ReactNode;
+    /** Banner proportions. Default 'wide' (3:1), which suits a header strip. */
+    bannerAspect?: keyof typeof bannerAspectClass;
+    /**
+     * Pinned to the bottom of the card. In a grid this is what keeps the
+     * primary action on a shared baseline across a row, however unevenly the
+     * titles above it wrap.
+     */
+    footer?: React.ReactNode;
+    children?: React.ReactNode;
+}
+/**
+ * A Card with an optional banner and a bottom-pinned footer.
+ *
+ * Deliberately knows nothing about what it is showing — the domain-shaped
+ * cards (a property, a monitor, an article) compose this and supply their own
+ * content. It exists because "banner, then content, then an action pinned to
+ * the bottom, all the same height across a row" was being hand-rolled per
+ * product, and the equal-height part in particular is easy to get subtly
+ * wrong.
+ *
+ * `h-full` is on the card itself so a bare `<MediaCard>` inside a grid cell
+ * fills that cell without every caller remembering to ask.
+ */
+declare function MediaCard({ banner, bannerAspect, footer, children, className, ...props }: MediaCardProps): react_jsx_runtime.JSX.Element;
+
+interface ViewToggleProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    view: ViewMode;
+    onChange: (view: ViewMode) => void;
+    labels?: {
+        cards?: string;
+        list?: string;
+    };
+}
+/**
+ * Two-state segmented control for switching a collection between cards and a
+ * list. Controlled — pair it with useViewMode to persist the choice.
+ */
+declare function ViewToggle({ view, onChange, labels, className, ...props }: ViewToggleProps): react_jsx_runtime.JSX.Element;
+
 interface FlowConnectorProps {
     /** Line axis. Default: 'vertical'. */
     direction?: 'vertical' | 'horizontal';
@@ -1714,4 +1857,4 @@ interface UsePaginationReturn {
 }
 declare function usePagination(total: number, pageSize: number): UsePaginationReturn;
 
-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 StepGroup, 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, UpdateBanner, type UpdateBannerProps, 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 AppGridColumns, 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, DataView, type DataViewProps, 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, MediaCard, type MediaCardProps, 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 StepGroup, 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, UpdateBanner, type UpdateBannerProps, type UpgradeComparisonRow, UpgradePrompt, type UpgradePromptProps, type UseConfirmReturn, type UseControlledOpenReturn, type UsePaginationReturn, type UseViewModeReturn, VersionBanner, type ViewMode, ViewToggle, type ViewToggleProps, cn, marketingSectionSpacing, notify, useConfirm, useControlledOpen, useCopyToClipboard, useDebounce, useIntersectionObserver, useLocalStorage, useMediaQuery, useMounted, useOlwibaUI, usePagination, useScrolledPast, useUIMode, useViewMode };