@dmitriikapustin/ui 0.2.1 → 0.2.7

package/dist/index.d.cts

@@ -1,8 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React$1, { ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, ImgHTMLAttributes, TextareaHTMLAttributes, SelectHTMLAttributes, AnchorHTMLAttributes } from 'react';
 
-type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost';
-type ButtonSize = 'sm' | 'md';
+type ButtonVariant = 'primary' | 'ghost' | 'secondary' | 'outline';
+type ButtonSize = 'sm' | 'md' | 'hero';
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: ButtonVariant;
     size?: ButtonSize;
@@ -175,56 +175,83 @@ interface TicketButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 declare function TicketButton({ children, icon, variant, className, ...props }: TicketButtonProps): react_jsx_runtime.JSX.Element;
 
 /**
- * Iconly Pro Icons
+ * Iconly Pro Icons (Light style)
  * Source: https://iconly.collaboo.co/
- * Copy SVG code directly from the icon page into JSX.
  *
- * All icons below are placeholders using IconlyActivity.
- * Replace each with the correct Iconly Pro icon SVG.
+ * All icons share the same API: { size?, color?, className? }.
+ * Style conventions: viewBox="0 0 24 24", stroke=currentColor,
+ * strokeWidth=1.5, round line caps and joins.
  */
 interface IconProps {
     size?: number;
     color?: string;
+    className?: string;
+}
+declare const IconlyActivity: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconlyCheck: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconlyStar: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconlyLock: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconlyHeart: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconlyClock: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconlySend: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconlySearch: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconlyMail: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconlyChevronDown: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconlyChevronRight: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconlyChevronLeft: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconlyEye: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconlyEyeOff: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconlyClose: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconlyMenu: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconlyShield: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconlySmile: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconlyAttach: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconlyInfo: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconlySun: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconlyMoon: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconlyRoadmap: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconlyBook: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconlySandbox: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconlyQuote: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconlyInfoCircle: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconlySuccess: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconlyWarning: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconlyError: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconlyLink: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
+
+type CardActionVariant = 'primary' | 'ghost' | 'secondary' | 'outline';
+interface CardAction {
+    label: string;
+    onClick?: () => void;
+    href?: string;
+    variant?: CardActionVariant;
 }
-declare const IconlyActivity: ({ size, color }: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconlySmile: ({ size, color }: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconlyAttach: ({ size, color }: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconlyInfo: ({ size, color }: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconlySend: ({ size, color }: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconlySearch: ({ size, color }: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconlyMail: ({ size, color }: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconlyLock: ({ size, color }: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconlyStar: ({ size, color }: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconlySun: ({ size, color }: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconlyMoon: ({ size, color }: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconlyRoadmap: ({ size, color }: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconlyBook: ({ size, color }: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconlySandbox: ({ size, color }: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconlyHeart: ({ size, color }: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconlyClose: ({ size, color }: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconlyMenu: ({ size, color }: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconlyCheck: ({ size, color }: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconlyQuote: ({ size, color }: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconlyInfoCircle: ({ size, color }: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconlySuccess: ({ size, color }: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconlyWarning: ({ size, color }: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconlyError: ({ size, color }: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconlyChevronDown: ({ size, color }: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconlyLink: ({ size, color }: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconlyEye: ({ size, color }: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconlyEyeOff: ({ size, color }: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconlyChevronRight: ({ size, color }: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconlyChevronLeft: ({ size, color }: IconProps) => react_jsx_runtime.JSX.Element;
-
 interface CardProps {
-    image?: string;
+    image?: string | ReactNode;
     title?: string;
     description?: string;
+    badges?: ReactNode[];
+    action?: CardAction;
     footer?: ReactNode;
     children?: ReactNode;
     className?: string;
 }
-declare function Card({ image, title, description, footer, children, className }: CardProps): react_jsx_runtime.JSX.Element;
+declare function Card({ image, title, description, badges, action, footer, children, className, }: CardProps): react_jsx_runtime.JSX.Element;
+
+interface IconBadgeProps {
+    icon: ReactNode;
+    className?: string;
+}
+declare function IconBadge({ icon, className }: IconBadgeProps): react_jsx_runtime.JSX.Element;
+
+type GalleryVariant = 'grid' | 'masonry';
+interface GalleryProps {
+    variant?: GalleryVariant;
+    images: string[];
+    title?: string;
+    className?: string;
+}
+declare function Gallery({ variant, images, title, className, }: GalleryProps): react_jsx_runtime.JSX.Element | null;
 
 interface FormFieldProps extends InputHTMLAttributes<HTMLInputElement> {
     label: string;
@@ -491,8 +518,12 @@ interface SidebarProps {
      * - `string` → shows the provided text
      */
     legalText?: string | null;
+    /** When true, the sidebar is hidden (collapsed off-screen). On mobile (<768px) this is the default state. */
+    collapsed?: boolean;
+    /** Called when the user requests toggling the sidebar (e.g. clicking the overlay backdrop). */
+    onToggle?: () => void;
 }
-declare function Sidebar({ type, menuItems, footer, className, activeId, onItemClick, logo, legalText, }: SidebarProps): react_jsx_runtime.JSX.Element;
+declare function Sidebar({ type, menuItems, footer, className, activeId, onItemClick, logo, legalText, collapsed, onToggle, }: SidebarProps): react_jsx_runtime.JSX.Element;
 
 type AppCardVariant = 'default' | 'stamp' | 'stamp-padded';
 interface AppCardProps {
@@ -722,6 +753,24 @@ interface PromoHeroProps {
 }
 declare function PromoHero({ title, subtitle, cta, secondaryCta, media, variant, className, }: PromoHeroProps): react_jsx_runtime.JSX.Element;
 
+type PromoHeroFormVariant = 'light' | 'dark';
+type PromoHeroFormInputType = 'url' | 'text' | 'email';
+interface PromoHeroFormProps {
+    title: string | ReactNode;
+    subtitle?: string;
+    inputPlaceholder?: string;
+    inputType?: PromoHeroFormInputType;
+    inputAriaLabel?: string;
+    buttonLabel: string;
+    onSubmit?: (value: string) => void | Promise<void>;
+    loading?: boolean;
+    error?: string;
+    hint?: string;
+    variant?: PromoHeroFormVariant;
+    className?: string;
+}
+declare function PromoHeroForm({ title, subtitle, inputPlaceholder, inputType, inputAriaLabel, buttonLabel, onSubmit, loading, error, hint, variant: _variant, className, }: PromoHeroFormProps): react_jsx_runtime.JSX.Element;
+
 interface PromoPricingTier {
     name: string;
     price: string;
@@ -960,4 +1009,4 @@ interface LandingLayoutProps {
 }
 declare function LandingLayout({ mode, nav, children, className, }: LandingLayoutProps): react_jsx_runtime.JSX.Element;
 
-export { Alert, AppCard, AppTopLine, ArticleBarChart, type ArticleBarChartProps, ArticleBody, type ArticleBodyProps, ArticleChatBlock, type ArticleChatBlockProps, ArticleFigure, type ArticleFigureProps, ArticleFooter, type ArticleFooterProps, ArticleHeading, type ArticleHeadingProps, ArticleHero, type ArticleHeroProps, ArticleLayout, type ArticleLayoutProps, ArticleLineChart, type ArticleLineChartProps, ArticleLinkButton, type ArticleLinkButtonProps, ArticleList, type ArticleListProps, ArticleNarrow, ArticleNote, type ArticleNoteProps, ArticleScatterChart, type ArticleScatterChartProps, ArticleTable, type ArticleTableColumn, type ArticleTableProps, type ArticleTableRow, ArticleWide, Avatar, Badge, BentoGrid, Breadcrumbs, Button, CTASection, Card, type ChartSeries, ChatInput, ChatMessage, Checkbox, CodeInput, ComparisonTable, Divider, DropdownMenu, EmptyState, FAQSection, FeatureGrid, Footer, FormField, Header, HeroSection, IconButton, IconWithText, IconlyActivity, IconlyAttach, IconlyBook, IconlyCheck, IconlyChevronDown, IconlyChevronLeft, IconlyChevronRight, IconlyClose, IconlyError, IconlyEye, IconlyEyeOff, IconlyHeart, IconlyInfo, IconlyInfoCircle, IconlyLink, IconlyLock, IconlyMail, IconlyMenu, IconlyMoon, IconlyQuote, IconlyRoadmap, IconlySandbox, IconlySearch, IconlySend, IconlySmile, IconlyStar, IconlySuccess, IconlySun, IconlyWarning, Input, LandingLayout, Logo, LogoCloud, MenuItem, Modal, Pagination, PasswordInput, PricingCard, ProfileNav, PromoActionCards, PromoBento, PromoDevicesCTA, PromoHero, PromoPricing, PromoShowcase, PromoSplit, PromoTestimonials, PromoTrustGrid, Radio, type ScatterPoint, SearchBar, Select, Sidebar, type SidebarItem, Skeleton, Spinner, StampCard, Stat, StatBadge, StatsBar, Link as StyledLink, Tabs, Tag, TestimonialCard, Textarea, TicketButton, Toast, Toggle, Tooltip, TopPromo };
+export { Alert, AppCard, AppTopLine, ArticleBarChart, type ArticleBarChartProps, ArticleBody, type ArticleBodyProps, ArticleChatBlock, type ArticleChatBlockProps, ArticleFigure, type ArticleFigureProps, ArticleFooter, type ArticleFooterProps, ArticleHeading, type ArticleHeadingProps, ArticleHero, type ArticleHeroProps, ArticleLayout, type ArticleLayoutProps, ArticleLineChart, type ArticleLineChartProps, ArticleLinkButton, type ArticleLinkButtonProps, ArticleList, type ArticleListProps, ArticleNarrow, ArticleNote, type ArticleNoteProps, ArticleScatterChart, type ArticleScatterChartProps, ArticleTable, type ArticleTableColumn, type ArticleTableProps, type ArticleTableRow, ArticleWide, Avatar, Badge, BentoGrid, Breadcrumbs, Button, CTASection, Card, type ChartSeries, ChatInput, ChatMessage, Checkbox, CodeInput, ComparisonTable, Divider, DropdownMenu, EmptyState, FAQSection, FeatureGrid, Footer, FormField, Gallery, Header, HeroSection, IconBadge, IconButton, IconWithText, IconlyActivity, IconlyAttach, IconlyBook, IconlyCheck, IconlyChevronDown, IconlyChevronLeft, IconlyChevronRight, IconlyClock, IconlyClose, IconlyError, IconlyEye, IconlyEyeOff, IconlyHeart, IconlyInfo, IconlyInfoCircle, IconlyLink, IconlyLock, IconlyMail, IconlyMenu, IconlyMoon, IconlyQuote, IconlyRoadmap, IconlySandbox, IconlySearch, IconlySend, IconlyShield, IconlySmile, IconlyStar, IconlySuccess, IconlySun, IconlyWarning, Input, LandingLayout, Logo, LogoCloud, MenuItem, Modal, Pagination, PasswordInput, PricingCard, ProfileNav, PromoActionCards, PromoBento, PromoDevicesCTA, PromoHero, PromoHeroForm, PromoPricing, PromoShowcase, PromoSplit, PromoTestimonials, PromoTrustGrid, Radio, type ScatterPoint, SearchBar, Select, Sidebar, type SidebarItem, Skeleton, Spinner, StampCard, Stat, StatBadge, StatsBar, Link as StyledLink, Tabs, Tag, TestimonialCard, Textarea, TicketButton, Toast, Toggle, Tooltip, TopPromo };

package/dist/index.d.ts

@@ -1,8 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React$1, { ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, ImgHTMLAttributes, TextareaHTMLAttributes, SelectHTMLAttributes, AnchorHTMLAttributes } from 'react';
 
-type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost';
-type ButtonSize = 'sm' | 'md';
+type ButtonVariant = 'primary' | 'ghost' | 'secondary' | 'outline';
+type ButtonSize = 'sm' | 'md' | 'hero';
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: ButtonVariant;
     size?: ButtonSize;
@@ -175,56 +175,83 @@ interface TicketButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 declare function TicketButton({ children, icon, variant, className, ...props }: TicketButtonProps): react_jsx_runtime.JSX.Element;
 
 /**
- * Iconly Pro Icons
+ * Iconly Pro Icons (Light style)
  * Source: https://iconly.collaboo.co/
- * Copy SVG code directly from the icon page into JSX.
  *
- * All icons below are placeholders using IconlyActivity.
- * Replace each with the correct Iconly Pro icon SVG.
+ * All icons share the same API: { size?, color?, className? }.
+ * Style conventions: viewBox="0 0 24 24", stroke=currentColor,
+ * strokeWidth=1.5, round line caps and joins.
  */
 interface IconProps {
     size?: number;
     color?: string;
+    className?: string;
+}
+declare const IconlyActivity: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconlyCheck: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconlyStar: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconlyLock: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconlyHeart: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconlyClock: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconlySend: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconlySearch: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconlyMail: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconlyChevronDown: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconlyChevronRight: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconlyChevronLeft: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconlyEye: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconlyEyeOff: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconlyClose: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconlyMenu: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconlyShield: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconlySmile: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconlyAttach: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconlyInfo: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconlySun: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconlyMoon: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconlyRoadmap: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconlyBook: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconlySandbox: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconlyQuote: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconlyInfoCircle: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconlySuccess: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconlyWarning: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconlyError: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
+declare const IconlyLink: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
+
+type CardActionVariant = 'primary' | 'ghost' | 'secondary' | 'outline';
+interface CardAction {
+    label: string;
+    onClick?: () => void;
+    href?: string;
+    variant?: CardActionVariant;
 }
-declare const IconlyActivity: ({ size, color }: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconlySmile: ({ size, color }: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconlyAttach: ({ size, color }: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconlyInfo: ({ size, color }: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconlySend: ({ size, color }: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconlySearch: ({ size, color }: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconlyMail: ({ size, color }: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconlyLock: ({ size, color }: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconlyStar: ({ size, color }: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconlySun: ({ size, color }: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconlyMoon: ({ size, color }: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconlyRoadmap: ({ size, color }: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconlyBook: ({ size, color }: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconlySandbox: ({ size, color }: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconlyHeart: ({ size, color }: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconlyClose: ({ size, color }: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconlyMenu: ({ size, color }: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconlyCheck: ({ size, color }: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconlyQuote: ({ size, color }: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconlyInfoCircle: ({ size, color }: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconlySuccess: ({ size, color }: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconlyWarning: ({ size, color }: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconlyError: ({ size, color }: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconlyChevronDown: ({ size, color }: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconlyLink: ({ size, color }: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconlyEye: ({ size, color }: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconlyEyeOff: ({ size, color }: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconlyChevronRight: ({ size, color }: IconProps) => react_jsx_runtime.JSX.Element;
-declare const IconlyChevronLeft: ({ size, color }: IconProps) => react_jsx_runtime.JSX.Element;
-
 interface CardProps {
-    image?: string;
+    image?: string | ReactNode;
     title?: string;
     description?: string;
+    badges?: ReactNode[];
+    action?: CardAction;
     footer?: ReactNode;
     children?: ReactNode;
     className?: string;
 }
-declare function Card({ image, title, description, footer, children, className }: CardProps): react_jsx_runtime.JSX.Element;
+declare function Card({ image, title, description, badges, action, footer, children, className, }: CardProps): react_jsx_runtime.JSX.Element;
+
+interface IconBadgeProps {
+    icon: ReactNode;
+    className?: string;
+}
+declare function IconBadge({ icon, className }: IconBadgeProps): react_jsx_runtime.JSX.Element;
+
+type GalleryVariant = 'grid' | 'masonry';
+interface GalleryProps {
+    variant?: GalleryVariant;
+    images: string[];
+    title?: string;
+    className?: string;
+}
+declare function Gallery({ variant, images, title, className, }: GalleryProps): react_jsx_runtime.JSX.Element | null;
 
 interface FormFieldProps extends InputHTMLAttributes<HTMLInputElement> {
     label: string;
@@ -491,8 +518,12 @@ interface SidebarProps {
      * - `string` → shows the provided text
      */
     legalText?: string | null;
+    /** When true, the sidebar is hidden (collapsed off-screen). On mobile (<768px) this is the default state. */
+    collapsed?: boolean;
+    /** Called when the user requests toggling the sidebar (e.g. clicking the overlay backdrop). */
+    onToggle?: () => void;
 }
-declare function Sidebar({ type, menuItems, footer, className, activeId, onItemClick, logo, legalText, }: SidebarProps): react_jsx_runtime.JSX.Element;
+declare function Sidebar({ type, menuItems, footer, className, activeId, onItemClick, logo, legalText, collapsed, onToggle, }: SidebarProps): react_jsx_runtime.JSX.Element;
 
 type AppCardVariant = 'default' | 'stamp' | 'stamp-padded';
 interface AppCardProps {
@@ -722,6 +753,24 @@ interface PromoHeroProps {
 }
 declare function PromoHero({ title, subtitle, cta, secondaryCta, media, variant, className, }: PromoHeroProps): react_jsx_runtime.JSX.Element;
 
+type PromoHeroFormVariant = 'light' | 'dark';
+type PromoHeroFormInputType = 'url' | 'text' | 'email';
+interface PromoHeroFormProps {
+    title: string | ReactNode;
+    subtitle?: string;
+    inputPlaceholder?: string;
+    inputType?: PromoHeroFormInputType;
+    inputAriaLabel?: string;
+    buttonLabel: string;
+    onSubmit?: (value: string) => void | Promise<void>;
+    loading?: boolean;
+    error?: string;
+    hint?: string;
+    variant?: PromoHeroFormVariant;
+    className?: string;
+}
+declare function PromoHeroForm({ title, subtitle, inputPlaceholder, inputType, inputAriaLabel, buttonLabel, onSubmit, loading, error, hint, variant: _variant, className, }: PromoHeroFormProps): react_jsx_runtime.JSX.Element;
+
 interface PromoPricingTier {
     name: string;
     price: string;
@@ -960,4 +1009,4 @@ interface LandingLayoutProps {
 }
 declare function LandingLayout({ mode, nav, children, className, }: LandingLayoutProps): react_jsx_runtime.JSX.Element;
 
-export { Alert, AppCard, AppTopLine, ArticleBarChart, type ArticleBarChartProps, ArticleBody, type ArticleBodyProps, ArticleChatBlock, type ArticleChatBlockProps, ArticleFigure, type ArticleFigureProps, ArticleFooter, type ArticleFooterProps, ArticleHeading, type ArticleHeadingProps, ArticleHero, type ArticleHeroProps, ArticleLayout, type ArticleLayoutProps, ArticleLineChart, type ArticleLineChartProps, ArticleLinkButton, type ArticleLinkButtonProps, ArticleList, type ArticleListProps, ArticleNarrow, ArticleNote, type ArticleNoteProps, ArticleScatterChart, type ArticleScatterChartProps, ArticleTable, type ArticleTableColumn, type ArticleTableProps, type ArticleTableRow, ArticleWide, Avatar, Badge, BentoGrid, Breadcrumbs, Button, CTASection, Card, type ChartSeries, ChatInput, ChatMessage, Checkbox, CodeInput, ComparisonTable, Divider, DropdownMenu, EmptyState, FAQSection, FeatureGrid, Footer, FormField, Header, HeroSection, IconButton, IconWithText, IconlyActivity, IconlyAttach, IconlyBook, IconlyCheck, IconlyChevronDown, IconlyChevronLeft, IconlyChevronRight, IconlyClose, IconlyError, IconlyEye, IconlyEyeOff, IconlyHeart, IconlyInfo, IconlyInfoCircle, IconlyLink, IconlyLock, IconlyMail, IconlyMenu, IconlyMoon, IconlyQuote, IconlyRoadmap, IconlySandbox, IconlySearch, IconlySend, IconlySmile, IconlyStar, IconlySuccess, IconlySun, IconlyWarning, Input, LandingLayout, Logo, LogoCloud, MenuItem, Modal, Pagination, PasswordInput, PricingCard, ProfileNav, PromoActionCards, PromoBento, PromoDevicesCTA, PromoHero, PromoPricing, PromoShowcase, PromoSplit, PromoTestimonials, PromoTrustGrid, Radio, type ScatterPoint, SearchBar, Select, Sidebar, type SidebarItem, Skeleton, Spinner, StampCard, Stat, StatBadge, StatsBar, Link as StyledLink, Tabs, Tag, TestimonialCard, Textarea, TicketButton, Toast, Toggle, Tooltip, TopPromo };
+export { Alert, AppCard, AppTopLine, ArticleBarChart, type ArticleBarChartProps, ArticleBody, type ArticleBodyProps, ArticleChatBlock, type ArticleChatBlockProps, ArticleFigure, type ArticleFigureProps, ArticleFooter, type ArticleFooterProps, ArticleHeading, type ArticleHeadingProps, ArticleHero, type ArticleHeroProps, ArticleLayout, type ArticleLayoutProps, ArticleLineChart, type ArticleLineChartProps, ArticleLinkButton, type ArticleLinkButtonProps, ArticleList, type ArticleListProps, ArticleNarrow, ArticleNote, type ArticleNoteProps, ArticleScatterChart, type ArticleScatterChartProps, ArticleTable, type ArticleTableColumn, type ArticleTableProps, type ArticleTableRow, ArticleWide, Avatar, Badge, BentoGrid, Breadcrumbs, Button, CTASection, Card, type ChartSeries, ChatInput, ChatMessage, Checkbox, CodeInput, ComparisonTable, Divider, DropdownMenu, EmptyState, FAQSection, FeatureGrid, Footer, FormField, Gallery, Header, HeroSection, IconBadge, IconButton, IconWithText, IconlyActivity, IconlyAttach, IconlyBook, IconlyCheck, IconlyChevronDown, IconlyChevronLeft, IconlyChevronRight, IconlyClock, IconlyClose, IconlyError, IconlyEye, IconlyEyeOff, IconlyHeart, IconlyInfo, IconlyInfoCircle, IconlyLink, IconlyLock, IconlyMail, IconlyMenu, IconlyMoon, IconlyQuote, IconlyRoadmap, IconlySandbox, IconlySearch, IconlySend, IconlyShield, IconlySmile, IconlyStar, IconlySuccess, IconlySun, IconlyWarning, Input, LandingLayout, Logo, LogoCloud, MenuItem, Modal, Pagination, PasswordInput, PricingCard, ProfileNav, PromoActionCards, PromoBento, PromoDevicesCTA, PromoHero, PromoHeroForm, PromoPricing, PromoShowcase, PromoSplit, PromoTestimonials, PromoTrustGrid, Radio, type ScatterPoint, SearchBar, Select, Sidebar, type SidebarItem, Skeleton, Spinner, StampCard, Stat, StatBadge, StatsBar, Link as StyledLink, Tabs, Tag, TestimonialCard, Textarea, TicketButton, Toast, Toggle, Tooltip, TopPromo };