@dmitriikapustin/ui 0.4.1 → 0.4.3

package/dist/index.d.cts

@@ -201,6 +201,43 @@ interface SkeletonProps {
 }
 declare function Skeleton({ variant, width, height, className }: SkeletonProps): react_jsx_runtime.JSX.Element;
 
+type HeadingTag = 'h1' | 'h2' | 'h3';
+type HeadingAlign = 'left' | 'center';
+type HeadingSize = 'sm' | 'md' | 'lg';
+interface SectionHeadingProps {
+    children: ReactNode;
+    /**
+     * Размер заголовка (responsive clamp).
+     * - `'sm'` — `clamp(1.125rem, 2.5vw, 1.375rem)` ≈ 18-22px. Sub-block heading, card group titles.
+     * - `'md'` (default) — `clamp(1.5rem, 3vw, 2rem)` ≈ 24-32px. Typical section h2 (industry-standard).
+     * - `'lg'` — `clamp(1.75rem, 4vw, 2.75rem)` ≈ 28-44px. Landing promo section (= PromoSplit/PromoTestimonials).
+     */
+    size?: HeadingSize;
+    /** HTML-тег. Default `'h2'`. Не привязан к size — используй для семантики. */
+    as?: HeadingTag;
+    /** Выравнивание. Default `'left'`. */
+    align?: HeadingAlign;
+    /** Опциональный subtitle ниже заголовка. */
+    subtitle?: ReactNode;
+    className?: string;
+}
+/**
+ * Единый source типографики для section-headings во всём пакете и потребителях.
+ * Три размера:
+ * - `sm` (18-22px) — подсекции, group titles.
+ * - `md` (24-32px, default) — typical section h2 (industry-standard: shadcn / Tailwind UI / Linear).
+ * - `lg` (28-44px) — landing promo headings (идентично PromoSplit/PromoTestimonials).
+ *
+ * Прop `as` (h1/h2/h3) независим от `size` — используй для семантики:
+ *
+ * ```tsx
+ * <SectionHeading>Section h2 — default md size</SectionHeading>
+ * <SectionHeading size="lg" as="h1">Landing hero h1 — large</SectionHeading>
+ * <SectionHeading size="sm" as="h3">Subsection</SectionHeading>
+ * ```
+ */
+declare function SectionHeading({ children, size, as, align, subtitle, className, }: SectionHeadingProps): react_jsx_runtime.JSX.Element;
+
 interface TicketButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     children: ReactNode;
     icon?: ReactNode;
@@ -692,9 +729,17 @@ interface HeroSectionProps {
      * На mobile (≤ 768px) всегда стекируется снизу.
      */
     mediaPosition?: 'left' | 'right';
+    /**
+     * Управление вертикальным padding'ом `.inner` обёртки.
+     * - `'default'` (default, BC) — `5rem` mobile / `8rem` md.
+     * - `'none'` — `padding-block: 0`. Использовать когда родитель (consumer)
+     *   контролирует vertical rhythm через свой wrapper и текущий пакетный
+     *   padding создаёт двойной gap.
+     */
+    verticalPadding?: 'default' | 'none';
     className?: string;
 }
-declare function HeroSection({ eyebrow, title, subtitle, actions, media, align, size, mediaPosition, className, }: HeroSectionProps): react_jsx_runtime.JSX.Element;
+declare function HeroSection({ eyebrow, title, subtitle, actions, media, align, size, mediaPosition, verticalPadding, className, }: HeroSectionProps): react_jsx_runtime.JSX.Element;
 
 interface LogoCloudProps {
     label?: string;
@@ -724,9 +769,16 @@ interface CTASectionProps {
     description?: string;
     actions?: ReactNode;
     variant?: 'default' | 'filled' | 'bordered';
+    /**
+     * Управление вертикальным padding'ом для variant=`'default'` (без bg).
+     * - `'default'` (default, BC) — `4rem` mobile / `6rem` md.
+     * - `'none'` — `padding-block: 0`.
+     * **Игнорируется** для `filled` / `bordered` variants — там padding внутренний (отступ от bg-границы до текста).
+     */
+    verticalPadding?: 'default' | 'none';
     className?: string;
 }
-declare function CTASection({ title, description, actions, variant, className, }: CTASectionProps): react_jsx_runtime.JSX.Element;
+declare function CTASection({ title, description, actions, variant, verticalPadding, className, }: CTASectionProps): react_jsx_runtime.JSX.Element;
 
 interface BentoItem {
     title: string;
@@ -739,9 +791,15 @@ interface BentoItem {
 }
 interface BentoGridProps {
     items: BentoItem[];
+    /**
+     * Управление вертикальным padding'ом `.root`.
+     * - `'default'` (default, BC) — `2.5rem` mobile / `3.5rem` md.
+     * - `'none'` — `padding-block: 0` (родитель контролирует rhythm).
+     */
+    verticalPadding?: 'default' | 'none';
     className?: string;
 }
-declare function BentoGrid({ items, className }: BentoGridProps): react_jsx_runtime.JSX.Element;
+declare function BentoGrid({ items, verticalPadding, className }: BentoGridProps): react_jsx_runtime.JSX.Element;
 
 interface FAQItem {
     question: string;
@@ -843,9 +901,16 @@ interface PromoSplitProps {
     }[];
     media?: ReactNode;
     mediaPosition?: 'left' | 'right';
+    /**
+     * Управление вертикальным padding'ом `.root`.
+     * - `'default'` (default, BC) — `4rem` mobile / `6rem` md.
+     * - `'none'` — `padding-block: 0`. Использовать когда родитель
+     *   контролирует vertical rhythm.
+     */
+    verticalPadding?: 'default' | 'none';
     className?: string;
 }
-declare function PromoSplit({ heading, description, features, media, mediaPosition, className, }: PromoSplitProps): react_jsx_runtime.JSX.Element;
+declare function PromoSplit({ heading, description, features, media, mediaPosition, verticalPadding, className, }: PromoSplitProps): react_jsx_runtime.JSX.Element;
 
 interface TrustFeature {
     icon?: ReactNode;
@@ -883,9 +948,15 @@ interface PromoTestimonialsProps {
     subtitle?: string;
     testimonials: Testimonial[];
     media?: ReactNode;
+    /**
+     * Управление вертикальным padding'ом `.root`.
+     * - `'default'` (default, BC) — `4rem` mobile / `6rem` md.
+     * - `'none'` — `padding-block: 0`.
+     */
+    verticalPadding?: 'default' | 'none';
     className?: string;
 }
-declare function PromoTestimonials({ heading, subtitle, testimonials, media, className, }: PromoTestimonialsProps): react_jsx_runtime.JSX.Element;
+declare function PromoTestimonials({ heading, subtitle, testimonials, media, verticalPadding, className, }: PromoTestimonialsProps): react_jsx_runtime.JSX.Element;
 
 interface PromoHeroProps {
     title: ReactNode;
@@ -1164,4 +1235,4 @@ interface LandingLayoutProps {
 }
 declare function LandingLayout({ mode, nav, footer, 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, BottomSheet, 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, IconlyCategory, IconlyCheck, IconlyChevronDown, IconlyChevronLeft, IconlyChevronRight, IconlyClock, IconlyClose, IconlyError, IconlyEye, IconlyEyeOff, IconlyFolder, IconlyHeart, IconlyInfo, IconlyInfoCircle, IconlyLink, IconlyLock, IconlyMail, IconlyMenu, IconlyMoon, IconlyQuote, IconlyRoadmap, IconlySandbox, IconlySearch, IconlySend, IconlySetting, IconlyShield, IconlySmile, IconlyStar, IconlySuccess, IconlySun, IconlyWarning, Input, LandingLayout, Logo, LogoCloud, MenuItem, Modal, Pagination, PasswordInput, PricingCard, type PricingFeature, ProfileNav, PromoActionCards, PromoBento, PromoDevicesCTA, PromoHero, PromoHeroForm, PromoPricing, PromoShowcase, PromoSplit, PromoTestimonials, PromoTrustGrid, Radio, type ScatterPoint, SearchBar, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, 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, BottomSheet, 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, IconlyCategory, IconlyCheck, IconlyChevronDown, IconlyChevronLeft, IconlyChevronRight, IconlyClock, IconlyClose, IconlyError, IconlyEye, IconlyEyeOff, IconlyFolder, IconlyHeart, IconlyInfo, IconlyInfoCircle, IconlyLink, IconlyLock, IconlyMail, IconlyMenu, IconlyMoon, IconlyQuote, IconlyRoadmap, IconlySandbox, IconlySearch, IconlySend, IconlySetting, IconlyShield, IconlySmile, IconlyStar, IconlySuccess, IconlySun, IconlyWarning, Input, LandingLayout, Logo, LogoCloud, MenuItem, Modal, Pagination, PasswordInput, PricingCard, type PricingFeature, ProfileNav, PromoActionCards, PromoBento, PromoDevicesCTA, PromoHero, PromoHeroForm, PromoPricing, PromoShowcase, PromoSplit, PromoTestimonials, PromoTrustGrid, Radio, type ScatterPoint, SearchBar, SectionHeading, type SectionHeadingProps, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, 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

@@ -201,6 +201,43 @@ interface SkeletonProps {
 }
 declare function Skeleton({ variant, width, height, className }: SkeletonProps): react_jsx_runtime.JSX.Element;
 
+type HeadingTag = 'h1' | 'h2' | 'h3';
+type HeadingAlign = 'left' | 'center';
+type HeadingSize = 'sm' | 'md' | 'lg';
+interface SectionHeadingProps {
+    children: ReactNode;
+    /**
+     * Размер заголовка (responsive clamp).
+     * - `'sm'` — `clamp(1.125rem, 2.5vw, 1.375rem)` ≈ 18-22px. Sub-block heading, card group titles.
+     * - `'md'` (default) — `clamp(1.5rem, 3vw, 2rem)` ≈ 24-32px. Typical section h2 (industry-standard).
+     * - `'lg'` — `clamp(1.75rem, 4vw, 2.75rem)` ≈ 28-44px. Landing promo section (= PromoSplit/PromoTestimonials).
+     */
+    size?: HeadingSize;
+    /** HTML-тег. Default `'h2'`. Не привязан к size — используй для семантики. */
+    as?: HeadingTag;
+    /** Выравнивание. Default `'left'`. */
+    align?: HeadingAlign;
+    /** Опциональный subtitle ниже заголовка. */
+    subtitle?: ReactNode;
+    className?: string;
+}
+/**
+ * Единый source типографики для section-headings во всём пакете и потребителях.
+ * Три размера:
+ * - `sm` (18-22px) — подсекции, group titles.
+ * - `md` (24-32px, default) — typical section h2 (industry-standard: shadcn / Tailwind UI / Linear).
+ * - `lg` (28-44px) — landing promo headings (идентично PromoSplit/PromoTestimonials).
+ *
+ * Прop `as` (h1/h2/h3) независим от `size` — используй для семантики:
+ *
+ * ```tsx
+ * <SectionHeading>Section h2 — default md size</SectionHeading>
+ * <SectionHeading size="lg" as="h1">Landing hero h1 — large</SectionHeading>
+ * <SectionHeading size="sm" as="h3">Subsection</SectionHeading>
+ * ```
+ */
+declare function SectionHeading({ children, size, as, align, subtitle, className, }: SectionHeadingProps): react_jsx_runtime.JSX.Element;
+
 interface TicketButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     children: ReactNode;
     icon?: ReactNode;
@@ -692,9 +729,17 @@ interface HeroSectionProps {
      * На mobile (≤ 768px) всегда стекируется снизу.
      */
     mediaPosition?: 'left' | 'right';
+    /**
+     * Управление вертикальным padding'ом `.inner` обёртки.
+     * - `'default'` (default, BC) — `5rem` mobile / `8rem` md.
+     * - `'none'` — `padding-block: 0`. Использовать когда родитель (consumer)
+     *   контролирует vertical rhythm через свой wrapper и текущий пакетный
+     *   padding создаёт двойной gap.
+     */
+    verticalPadding?: 'default' | 'none';
     className?: string;
 }
-declare function HeroSection({ eyebrow, title, subtitle, actions, media, align, size, mediaPosition, className, }: HeroSectionProps): react_jsx_runtime.JSX.Element;
+declare function HeroSection({ eyebrow, title, subtitle, actions, media, align, size, mediaPosition, verticalPadding, className, }: HeroSectionProps): react_jsx_runtime.JSX.Element;
 
 interface LogoCloudProps {
     label?: string;
@@ -724,9 +769,16 @@ interface CTASectionProps {
     description?: string;
     actions?: ReactNode;
     variant?: 'default' | 'filled' | 'bordered';
+    /**
+     * Управление вертикальным padding'ом для variant=`'default'` (без bg).
+     * - `'default'` (default, BC) — `4rem` mobile / `6rem` md.
+     * - `'none'` — `padding-block: 0`.
+     * **Игнорируется** для `filled` / `bordered` variants — там padding внутренний (отступ от bg-границы до текста).
+     */
+    verticalPadding?: 'default' | 'none';
     className?: string;
 }
-declare function CTASection({ title, description, actions, variant, className, }: CTASectionProps): react_jsx_runtime.JSX.Element;
+declare function CTASection({ title, description, actions, variant, verticalPadding, className, }: CTASectionProps): react_jsx_runtime.JSX.Element;
 
 interface BentoItem {
     title: string;
@@ -739,9 +791,15 @@ interface BentoItem {
 }
 interface BentoGridProps {
     items: BentoItem[];
+    /**
+     * Управление вертикальным padding'ом `.root`.
+     * - `'default'` (default, BC) — `2.5rem` mobile / `3.5rem` md.
+     * - `'none'` — `padding-block: 0` (родитель контролирует rhythm).
+     */
+    verticalPadding?: 'default' | 'none';
     className?: string;
 }
-declare function BentoGrid({ items, className }: BentoGridProps): react_jsx_runtime.JSX.Element;
+declare function BentoGrid({ items, verticalPadding, className }: BentoGridProps): react_jsx_runtime.JSX.Element;
 
 interface FAQItem {
     question: string;
@@ -843,9 +901,16 @@ interface PromoSplitProps {
     }[];
     media?: ReactNode;
     mediaPosition?: 'left' | 'right';
+    /**
+     * Управление вертикальным padding'ом `.root`.
+     * - `'default'` (default, BC) — `4rem` mobile / `6rem` md.
+     * - `'none'` — `padding-block: 0`. Использовать когда родитель
+     *   контролирует vertical rhythm.
+     */
+    verticalPadding?: 'default' | 'none';
     className?: string;
 }
-declare function PromoSplit({ heading, description, features, media, mediaPosition, className, }: PromoSplitProps): react_jsx_runtime.JSX.Element;
+declare function PromoSplit({ heading, description, features, media, mediaPosition, verticalPadding, className, }: PromoSplitProps): react_jsx_runtime.JSX.Element;
 
 interface TrustFeature {
     icon?: ReactNode;
@@ -883,9 +948,15 @@ interface PromoTestimonialsProps {
     subtitle?: string;
     testimonials: Testimonial[];
     media?: ReactNode;
+    /**
+     * Управление вертикальным padding'ом `.root`.
+     * - `'default'` (default, BC) — `4rem` mobile / `6rem` md.
+     * - `'none'` — `padding-block: 0`.
+     */
+    verticalPadding?: 'default' | 'none';
     className?: string;
 }
-declare function PromoTestimonials({ heading, subtitle, testimonials, media, className, }: PromoTestimonialsProps): react_jsx_runtime.JSX.Element;
+declare function PromoTestimonials({ heading, subtitle, testimonials, media, verticalPadding, className, }: PromoTestimonialsProps): react_jsx_runtime.JSX.Element;
 
 interface PromoHeroProps {
     title: ReactNode;
@@ -1164,4 +1235,4 @@ interface LandingLayoutProps {
 }
 declare function LandingLayout({ mode, nav, footer, 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, BottomSheet, 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, IconlyCategory, IconlyCheck, IconlyChevronDown, IconlyChevronLeft, IconlyChevronRight, IconlyClock, IconlyClose, IconlyError, IconlyEye, IconlyEyeOff, IconlyFolder, IconlyHeart, IconlyInfo, IconlyInfoCircle, IconlyLink, IconlyLock, IconlyMail, IconlyMenu, IconlyMoon, IconlyQuote, IconlyRoadmap, IconlySandbox, IconlySearch, IconlySend, IconlySetting, IconlyShield, IconlySmile, IconlyStar, IconlySuccess, IconlySun, IconlyWarning, Input, LandingLayout, Logo, LogoCloud, MenuItem, Modal, Pagination, PasswordInput, PricingCard, type PricingFeature, ProfileNav, PromoActionCards, PromoBento, PromoDevicesCTA, PromoHero, PromoHeroForm, PromoPricing, PromoShowcase, PromoSplit, PromoTestimonials, PromoTrustGrid, Radio, type ScatterPoint, SearchBar, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, 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, BottomSheet, 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, IconlyCategory, IconlyCheck, IconlyChevronDown, IconlyChevronLeft, IconlyChevronRight, IconlyClock, IconlyClose, IconlyError, IconlyEye, IconlyEyeOff, IconlyFolder, IconlyHeart, IconlyInfo, IconlyInfoCircle, IconlyLink, IconlyLock, IconlyMail, IconlyMenu, IconlyMoon, IconlyQuote, IconlyRoadmap, IconlySandbox, IconlySearch, IconlySend, IconlySetting, IconlyShield, IconlySmile, IconlyStar, IconlySuccess, IconlySun, IconlyWarning, Input, LandingLayout, Logo, LogoCloud, MenuItem, Modal, Pagination, PasswordInput, PricingCard, type PricingFeature, ProfileNav, PromoActionCards, PromoBento, PromoDevicesCTA, PromoHero, PromoHeroForm, PromoPricing, PromoShowcase, PromoSplit, PromoTestimonials, PromoTrustGrid, Radio, type ScatterPoint, SearchBar, SectionHeading, type SectionHeadingProps, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, Select, Sidebar, type SidebarItem, Skeleton, Spinner, StampCard, Stat, StatBadge, StatsBar, Link as StyledLink, Tabs, Tag, TestimonialCard, Textarea, TicketButton, Toast, Toggle, Tooltip, TopPromo };