@dmitriikapustin/ui 0.4.0 → 0.4.2
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.cjs +779 -525
- package/dist/index.d.cts +106 -7
- package/dist/index.d.ts +106 -7
- package/dist/index.js +776 -527
- package/package.json +1 -1
package/dist/index.d.cts
CHANGED
|
@@ -201,6 +201,34 @@ interface SkeletonProps {
|
|
|
201
201
|
}
|
|
202
202
|
declare function Skeleton({ variant, width, height, className }: SkeletonProps): react_jsx_runtime.JSX.Element;
|
|
203
203
|
|
|
204
|
+
type HeadingTag = 'h1' | 'h2' | 'h3';
|
|
205
|
+
type HeadingAlign = 'left' | 'center';
|
|
206
|
+
interface SectionHeadingProps {
|
|
207
|
+
children: ReactNode;
|
|
208
|
+
/** HTML-тег. Default `'h2'` (стандартный section heading). */
|
|
209
|
+
as?: HeadingTag;
|
|
210
|
+
/** Выравнивание. Default `'left'`. */
|
|
211
|
+
align?: HeadingAlign;
|
|
212
|
+
/** Опциональный subtitle ниже заголовка. */
|
|
213
|
+
subtitle?: ReactNode;
|
|
214
|
+
className?: string;
|
|
215
|
+
}
|
|
216
|
+
/**
|
|
217
|
+
* Единый source для section-h2 типографики во всём пакете и потребителях.
|
|
218
|
+
* Берёт ту же типографику что у `PromoSplit.heading` / `PromoTestimonials.heading`:
|
|
219
|
+
* `font-size: clamp(1.75rem, 4vw, 2.75rem); line-height: 1.1; letter-spacing: -0.03em`.
|
|
220
|
+
*
|
|
221
|
+
* Закрывает кейс когда потребитель кладёт `FeatureGrid` / `BentoGrid` / `Gallery`
|
|
222
|
+
* без встроенного title и вынужден захардкоживать ту же типографику в своём `.heading`
|
|
223
|
+
* — теперь импортирует `<SectionHeading>` и получает единый стиль автоматически.
|
|
224
|
+
*
|
|
225
|
+
* ```tsx
|
|
226
|
+
* <SectionHeading>Почему гости выбирают этот отель</SectionHeading>
|
|
227
|
+
* <FeatureGrid features={...} verticalPadding="none" />
|
|
228
|
+
* ```
|
|
229
|
+
*/
|
|
230
|
+
declare function SectionHeading({ children, as, align, subtitle, className, }: SectionHeadingProps): react_jsx_runtime.JSX.Element;
|
|
231
|
+
|
|
204
232
|
interface TicketButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
205
233
|
children: ReactNode;
|
|
206
234
|
icon?: ReactNode;
|
|
@@ -239,6 +267,10 @@ declare const IconlyEyeOff: ({ size, color, className }: IconProps) => react_jsx
|
|
|
239
267
|
declare const IconlyClose: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
|
|
240
268
|
declare const IconlyMenu: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
|
|
241
269
|
declare const IconlyShield: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
|
|
270
|
+
declare const IconlyCategory: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
|
|
271
|
+
declare const IconlySetting: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
|
|
272
|
+
declare const IconlyFolder: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
|
|
273
|
+
declare const IconlyLink: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
|
|
242
274
|
declare const IconlySmile: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
|
|
243
275
|
declare const IconlyAttach: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
|
|
244
276
|
declare const IconlyInfo: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
|
|
@@ -252,7 +284,6 @@ declare const IconlyInfoCircle: ({ size, color, className }: IconProps) => react
|
|
|
252
284
|
declare const IconlySuccess: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
|
|
253
285
|
declare const IconlyWarning: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
|
|
254
286
|
declare const IconlyError: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
|
|
255
|
-
declare const IconlyLink: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
|
|
256
287
|
|
|
257
288
|
type CardActionVariant = 'primary' | 'ghost' | 'secondary' | 'outline';
|
|
258
289
|
interface CardAction {
|
|
@@ -474,6 +505,40 @@ interface DropdownMenuProps {
|
|
|
474
505
|
}
|
|
475
506
|
declare function DropdownMenu({ trigger, items, align, className, }: DropdownMenuProps): react_jsx_runtime.JSX.Element;
|
|
476
507
|
|
|
508
|
+
interface SegmentedControlOption<T extends string> {
|
|
509
|
+
value: T;
|
|
510
|
+
label: ReactNode;
|
|
511
|
+
/** Опциональное disabled-состояние для отдельной опции. */
|
|
512
|
+
disabled?: boolean;
|
|
513
|
+
}
|
|
514
|
+
interface SegmentedControlProps<T extends string> {
|
|
515
|
+
/** Список опций. Минимум 2. */
|
|
516
|
+
options: ReadonlyArray<SegmentedControlOption<T>>;
|
|
517
|
+
/** Текущее активное значение. */
|
|
518
|
+
value: T;
|
|
519
|
+
/** Callback при смене значения. */
|
|
520
|
+
onChange: (next: T) => void;
|
|
521
|
+
/** Размер контрола. `md` (default) — 32px высота, `sm` — 28px (для inline в Header). */
|
|
522
|
+
size?: 'sm' | 'md';
|
|
523
|
+
/** aria-label для role=group container. Например `"Language"`, `"Theme"`. */
|
|
524
|
+
ariaLabel: string;
|
|
525
|
+
className?: string;
|
|
526
|
+
}
|
|
527
|
+
/**
|
|
528
|
+
* Generic segmented toggle — pill-контейнер с N сегментами, активный с фоном.
|
|
529
|
+
* Useс-кейсы: language picker, theme picker, view-mode toggle, period selector.
|
|
530
|
+
*
|
|
531
|
+
* ```tsx
|
|
532
|
+
* <SegmentedControl
|
|
533
|
+
* options={[{ value: 'ru', label: 'RU' }, { value: 'en', label: 'EN' }]}
|
|
534
|
+
* value={locale}
|
|
535
|
+
* onChange={setLocale}
|
|
536
|
+
* ariaLabel="Language"
|
|
537
|
+
* />
|
|
538
|
+
* ```
|
|
539
|
+
*/
|
|
540
|
+
declare function SegmentedControl<T extends string>({ options, value, onChange, size, ariaLabel, className, }: SegmentedControlProps<T>): react_jsx_runtime.JSX.Element;
|
|
541
|
+
|
|
477
542
|
interface NavItem {
|
|
478
543
|
label: string;
|
|
479
544
|
href: string;
|
|
@@ -655,9 +720,17 @@ interface HeroSectionProps {
|
|
|
655
720
|
* На mobile (≤ 768px) всегда стекируется снизу.
|
|
656
721
|
*/
|
|
657
722
|
mediaPosition?: 'left' | 'right';
|
|
723
|
+
/**
|
|
724
|
+
* Управление вертикальным padding'ом `.inner` обёртки.
|
|
725
|
+
* - `'default'` (default, BC) — `5rem` mobile / `8rem` md.
|
|
726
|
+
* - `'none'` — `padding-block: 0`. Использовать когда родитель (consumer)
|
|
727
|
+
* контролирует vertical rhythm через свой wrapper и текущий пакетный
|
|
728
|
+
* padding создаёт двойной gap.
|
|
729
|
+
*/
|
|
730
|
+
verticalPadding?: 'default' | 'none';
|
|
658
731
|
className?: string;
|
|
659
732
|
}
|
|
660
|
-
declare function HeroSection({ eyebrow, title, subtitle, actions, media, align, size, mediaPosition, className, }: HeroSectionProps): react_jsx_runtime.JSX.Element;
|
|
733
|
+
declare function HeroSection({ eyebrow, title, subtitle, actions, media, align, size, mediaPosition, verticalPadding, className, }: HeroSectionProps): react_jsx_runtime.JSX.Element;
|
|
661
734
|
|
|
662
735
|
interface LogoCloudProps {
|
|
663
736
|
label?: string;
|
|
@@ -687,9 +760,16 @@ interface CTASectionProps {
|
|
|
687
760
|
description?: string;
|
|
688
761
|
actions?: ReactNode;
|
|
689
762
|
variant?: 'default' | 'filled' | 'bordered';
|
|
763
|
+
/**
|
|
764
|
+
* Управление вертикальным padding'ом для variant=`'default'` (без bg).
|
|
765
|
+
* - `'default'` (default, BC) — `4rem` mobile / `6rem` md.
|
|
766
|
+
* - `'none'` — `padding-block: 0`.
|
|
767
|
+
* **Игнорируется** для `filled` / `bordered` variants — там padding внутренний (отступ от bg-границы до текста).
|
|
768
|
+
*/
|
|
769
|
+
verticalPadding?: 'default' | 'none';
|
|
690
770
|
className?: string;
|
|
691
771
|
}
|
|
692
|
-
declare function CTASection({ title, description, actions, variant, className, }: CTASectionProps): react_jsx_runtime.JSX.Element;
|
|
772
|
+
declare function CTASection({ title, description, actions, variant, verticalPadding, className, }: CTASectionProps): react_jsx_runtime.JSX.Element;
|
|
693
773
|
|
|
694
774
|
interface BentoItem {
|
|
695
775
|
title: string;
|
|
@@ -702,9 +782,15 @@ interface BentoItem {
|
|
|
702
782
|
}
|
|
703
783
|
interface BentoGridProps {
|
|
704
784
|
items: BentoItem[];
|
|
785
|
+
/**
|
|
786
|
+
* Управление вертикальным padding'ом `.root`.
|
|
787
|
+
* - `'default'` (default, BC) — `2.5rem` mobile / `3.5rem` md.
|
|
788
|
+
* - `'none'` — `padding-block: 0` (родитель контролирует rhythm).
|
|
789
|
+
*/
|
|
790
|
+
verticalPadding?: 'default' | 'none';
|
|
705
791
|
className?: string;
|
|
706
792
|
}
|
|
707
|
-
declare function BentoGrid({ items, className }: BentoGridProps): react_jsx_runtime.JSX.Element;
|
|
793
|
+
declare function BentoGrid({ items, verticalPadding, className }: BentoGridProps): react_jsx_runtime.JSX.Element;
|
|
708
794
|
|
|
709
795
|
interface FAQItem {
|
|
710
796
|
question: string;
|
|
@@ -806,9 +892,16 @@ interface PromoSplitProps {
|
|
|
806
892
|
}[];
|
|
807
893
|
media?: ReactNode;
|
|
808
894
|
mediaPosition?: 'left' | 'right';
|
|
895
|
+
/**
|
|
896
|
+
* Управление вертикальным padding'ом `.root`.
|
|
897
|
+
* - `'default'` (default, BC) — `4rem` mobile / `6rem` md.
|
|
898
|
+
* - `'none'` — `padding-block: 0`. Использовать когда родитель
|
|
899
|
+
* контролирует vertical rhythm.
|
|
900
|
+
*/
|
|
901
|
+
verticalPadding?: 'default' | 'none';
|
|
809
902
|
className?: string;
|
|
810
903
|
}
|
|
811
|
-
declare function PromoSplit({ heading, description, features, media, mediaPosition, className, }: PromoSplitProps): react_jsx_runtime.JSX.Element;
|
|
904
|
+
declare function PromoSplit({ heading, description, features, media, mediaPosition, verticalPadding, className, }: PromoSplitProps): react_jsx_runtime.JSX.Element;
|
|
812
905
|
|
|
813
906
|
interface TrustFeature {
|
|
814
907
|
icon?: ReactNode;
|
|
@@ -846,9 +939,15 @@ interface PromoTestimonialsProps {
|
|
|
846
939
|
subtitle?: string;
|
|
847
940
|
testimonials: Testimonial[];
|
|
848
941
|
media?: ReactNode;
|
|
942
|
+
/**
|
|
943
|
+
* Управление вертикальным padding'ом `.root`.
|
|
944
|
+
* - `'default'` (default, BC) — `4rem` mobile / `6rem` md.
|
|
945
|
+
* - `'none'` — `padding-block: 0`.
|
|
946
|
+
*/
|
|
947
|
+
verticalPadding?: 'default' | 'none';
|
|
849
948
|
className?: string;
|
|
850
949
|
}
|
|
851
|
-
declare function PromoTestimonials({ heading, subtitle, testimonials, media, className, }: PromoTestimonialsProps): react_jsx_runtime.JSX.Element;
|
|
950
|
+
declare function PromoTestimonials({ heading, subtitle, testimonials, media, verticalPadding, className, }: PromoTestimonialsProps): react_jsx_runtime.JSX.Element;
|
|
852
951
|
|
|
853
952
|
interface PromoHeroProps {
|
|
854
953
|
title: ReactNode;
|
|
@@ -1127,4 +1226,4 @@ interface LandingLayoutProps {
|
|
|
1127
1226
|
}
|
|
1128
1227
|
declare function LandingLayout({ mode, nav, footer, children, className, }: LandingLayoutProps): react_jsx_runtime.JSX.Element;
|
|
1129
1228
|
|
|
1130
|
-
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, 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, type PricingFeature, 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 };
|
|
1229
|
+
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
CHANGED
|
@@ -201,6 +201,34 @@ interface SkeletonProps {
|
|
|
201
201
|
}
|
|
202
202
|
declare function Skeleton({ variant, width, height, className }: SkeletonProps): react_jsx_runtime.JSX.Element;
|
|
203
203
|
|
|
204
|
+
type HeadingTag = 'h1' | 'h2' | 'h3';
|
|
205
|
+
type HeadingAlign = 'left' | 'center';
|
|
206
|
+
interface SectionHeadingProps {
|
|
207
|
+
children: ReactNode;
|
|
208
|
+
/** HTML-тег. Default `'h2'` (стандартный section heading). */
|
|
209
|
+
as?: HeadingTag;
|
|
210
|
+
/** Выравнивание. Default `'left'`. */
|
|
211
|
+
align?: HeadingAlign;
|
|
212
|
+
/** Опциональный subtitle ниже заголовка. */
|
|
213
|
+
subtitle?: ReactNode;
|
|
214
|
+
className?: string;
|
|
215
|
+
}
|
|
216
|
+
/**
|
|
217
|
+
* Единый source для section-h2 типографики во всём пакете и потребителях.
|
|
218
|
+
* Берёт ту же типографику что у `PromoSplit.heading` / `PromoTestimonials.heading`:
|
|
219
|
+
* `font-size: clamp(1.75rem, 4vw, 2.75rem); line-height: 1.1; letter-spacing: -0.03em`.
|
|
220
|
+
*
|
|
221
|
+
* Закрывает кейс когда потребитель кладёт `FeatureGrid` / `BentoGrid` / `Gallery`
|
|
222
|
+
* без встроенного title и вынужден захардкоживать ту же типографику в своём `.heading`
|
|
223
|
+
* — теперь импортирует `<SectionHeading>` и получает единый стиль автоматически.
|
|
224
|
+
*
|
|
225
|
+
* ```tsx
|
|
226
|
+
* <SectionHeading>Почему гости выбирают этот отель</SectionHeading>
|
|
227
|
+
* <FeatureGrid features={...} verticalPadding="none" />
|
|
228
|
+
* ```
|
|
229
|
+
*/
|
|
230
|
+
declare function SectionHeading({ children, as, align, subtitle, className, }: SectionHeadingProps): react_jsx_runtime.JSX.Element;
|
|
231
|
+
|
|
204
232
|
interface TicketButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
205
233
|
children: ReactNode;
|
|
206
234
|
icon?: ReactNode;
|
|
@@ -239,6 +267,10 @@ declare const IconlyEyeOff: ({ size, color, className }: IconProps) => react_jsx
|
|
|
239
267
|
declare const IconlyClose: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
|
|
240
268
|
declare const IconlyMenu: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
|
|
241
269
|
declare const IconlyShield: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
|
|
270
|
+
declare const IconlyCategory: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
|
|
271
|
+
declare const IconlySetting: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
|
|
272
|
+
declare const IconlyFolder: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
|
|
273
|
+
declare const IconlyLink: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
|
|
242
274
|
declare const IconlySmile: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
|
|
243
275
|
declare const IconlyAttach: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
|
|
244
276
|
declare const IconlyInfo: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
|
|
@@ -252,7 +284,6 @@ declare const IconlyInfoCircle: ({ size, color, className }: IconProps) => react
|
|
|
252
284
|
declare const IconlySuccess: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
|
|
253
285
|
declare const IconlyWarning: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
|
|
254
286
|
declare const IconlyError: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
|
|
255
|
-
declare const IconlyLink: ({ size, color, className }: IconProps) => react_jsx_runtime.JSX.Element;
|
|
256
287
|
|
|
257
288
|
type CardActionVariant = 'primary' | 'ghost' | 'secondary' | 'outline';
|
|
258
289
|
interface CardAction {
|
|
@@ -474,6 +505,40 @@ interface DropdownMenuProps {
|
|
|
474
505
|
}
|
|
475
506
|
declare function DropdownMenu({ trigger, items, align, className, }: DropdownMenuProps): react_jsx_runtime.JSX.Element;
|
|
476
507
|
|
|
508
|
+
interface SegmentedControlOption<T extends string> {
|
|
509
|
+
value: T;
|
|
510
|
+
label: ReactNode;
|
|
511
|
+
/** Опциональное disabled-состояние для отдельной опции. */
|
|
512
|
+
disabled?: boolean;
|
|
513
|
+
}
|
|
514
|
+
interface SegmentedControlProps<T extends string> {
|
|
515
|
+
/** Список опций. Минимум 2. */
|
|
516
|
+
options: ReadonlyArray<SegmentedControlOption<T>>;
|
|
517
|
+
/** Текущее активное значение. */
|
|
518
|
+
value: T;
|
|
519
|
+
/** Callback при смене значения. */
|
|
520
|
+
onChange: (next: T) => void;
|
|
521
|
+
/** Размер контрола. `md` (default) — 32px высота, `sm` — 28px (для inline в Header). */
|
|
522
|
+
size?: 'sm' | 'md';
|
|
523
|
+
/** aria-label для role=group container. Например `"Language"`, `"Theme"`. */
|
|
524
|
+
ariaLabel: string;
|
|
525
|
+
className?: string;
|
|
526
|
+
}
|
|
527
|
+
/**
|
|
528
|
+
* Generic segmented toggle — pill-контейнер с N сегментами, активный с фоном.
|
|
529
|
+
* Useс-кейсы: language picker, theme picker, view-mode toggle, period selector.
|
|
530
|
+
*
|
|
531
|
+
* ```tsx
|
|
532
|
+
* <SegmentedControl
|
|
533
|
+
* options={[{ value: 'ru', label: 'RU' }, { value: 'en', label: 'EN' }]}
|
|
534
|
+
* value={locale}
|
|
535
|
+
* onChange={setLocale}
|
|
536
|
+
* ariaLabel="Language"
|
|
537
|
+
* />
|
|
538
|
+
* ```
|
|
539
|
+
*/
|
|
540
|
+
declare function SegmentedControl<T extends string>({ options, value, onChange, size, ariaLabel, className, }: SegmentedControlProps<T>): react_jsx_runtime.JSX.Element;
|
|
541
|
+
|
|
477
542
|
interface NavItem {
|
|
478
543
|
label: string;
|
|
479
544
|
href: string;
|
|
@@ -655,9 +720,17 @@ interface HeroSectionProps {
|
|
|
655
720
|
* На mobile (≤ 768px) всегда стекируется снизу.
|
|
656
721
|
*/
|
|
657
722
|
mediaPosition?: 'left' | 'right';
|
|
723
|
+
/**
|
|
724
|
+
* Управление вертикальным padding'ом `.inner` обёртки.
|
|
725
|
+
* - `'default'` (default, BC) — `5rem` mobile / `8rem` md.
|
|
726
|
+
* - `'none'` — `padding-block: 0`. Использовать когда родитель (consumer)
|
|
727
|
+
* контролирует vertical rhythm через свой wrapper и текущий пакетный
|
|
728
|
+
* padding создаёт двойной gap.
|
|
729
|
+
*/
|
|
730
|
+
verticalPadding?: 'default' | 'none';
|
|
658
731
|
className?: string;
|
|
659
732
|
}
|
|
660
|
-
declare function HeroSection({ eyebrow, title, subtitle, actions, media, align, size, mediaPosition, className, }: HeroSectionProps): react_jsx_runtime.JSX.Element;
|
|
733
|
+
declare function HeroSection({ eyebrow, title, subtitle, actions, media, align, size, mediaPosition, verticalPadding, className, }: HeroSectionProps): react_jsx_runtime.JSX.Element;
|
|
661
734
|
|
|
662
735
|
interface LogoCloudProps {
|
|
663
736
|
label?: string;
|
|
@@ -687,9 +760,16 @@ interface CTASectionProps {
|
|
|
687
760
|
description?: string;
|
|
688
761
|
actions?: ReactNode;
|
|
689
762
|
variant?: 'default' | 'filled' | 'bordered';
|
|
763
|
+
/**
|
|
764
|
+
* Управление вертикальным padding'ом для variant=`'default'` (без bg).
|
|
765
|
+
* - `'default'` (default, BC) — `4rem` mobile / `6rem` md.
|
|
766
|
+
* - `'none'` — `padding-block: 0`.
|
|
767
|
+
* **Игнорируется** для `filled` / `bordered` variants — там padding внутренний (отступ от bg-границы до текста).
|
|
768
|
+
*/
|
|
769
|
+
verticalPadding?: 'default' | 'none';
|
|
690
770
|
className?: string;
|
|
691
771
|
}
|
|
692
|
-
declare function CTASection({ title, description, actions, variant, className, }: CTASectionProps): react_jsx_runtime.JSX.Element;
|
|
772
|
+
declare function CTASection({ title, description, actions, variant, verticalPadding, className, }: CTASectionProps): react_jsx_runtime.JSX.Element;
|
|
693
773
|
|
|
694
774
|
interface BentoItem {
|
|
695
775
|
title: string;
|
|
@@ -702,9 +782,15 @@ interface BentoItem {
|
|
|
702
782
|
}
|
|
703
783
|
interface BentoGridProps {
|
|
704
784
|
items: BentoItem[];
|
|
785
|
+
/**
|
|
786
|
+
* Управление вертикальным padding'ом `.root`.
|
|
787
|
+
* - `'default'` (default, BC) — `2.5rem` mobile / `3.5rem` md.
|
|
788
|
+
* - `'none'` — `padding-block: 0` (родитель контролирует rhythm).
|
|
789
|
+
*/
|
|
790
|
+
verticalPadding?: 'default' | 'none';
|
|
705
791
|
className?: string;
|
|
706
792
|
}
|
|
707
|
-
declare function BentoGrid({ items, className }: BentoGridProps): react_jsx_runtime.JSX.Element;
|
|
793
|
+
declare function BentoGrid({ items, verticalPadding, className }: BentoGridProps): react_jsx_runtime.JSX.Element;
|
|
708
794
|
|
|
709
795
|
interface FAQItem {
|
|
710
796
|
question: string;
|
|
@@ -806,9 +892,16 @@ interface PromoSplitProps {
|
|
|
806
892
|
}[];
|
|
807
893
|
media?: ReactNode;
|
|
808
894
|
mediaPosition?: 'left' | 'right';
|
|
895
|
+
/**
|
|
896
|
+
* Управление вертикальным padding'ом `.root`.
|
|
897
|
+
* - `'default'` (default, BC) — `4rem` mobile / `6rem` md.
|
|
898
|
+
* - `'none'` — `padding-block: 0`. Использовать когда родитель
|
|
899
|
+
* контролирует vertical rhythm.
|
|
900
|
+
*/
|
|
901
|
+
verticalPadding?: 'default' | 'none';
|
|
809
902
|
className?: string;
|
|
810
903
|
}
|
|
811
|
-
declare function PromoSplit({ heading, description, features, media, mediaPosition, className, }: PromoSplitProps): react_jsx_runtime.JSX.Element;
|
|
904
|
+
declare function PromoSplit({ heading, description, features, media, mediaPosition, verticalPadding, className, }: PromoSplitProps): react_jsx_runtime.JSX.Element;
|
|
812
905
|
|
|
813
906
|
interface TrustFeature {
|
|
814
907
|
icon?: ReactNode;
|
|
@@ -846,9 +939,15 @@ interface PromoTestimonialsProps {
|
|
|
846
939
|
subtitle?: string;
|
|
847
940
|
testimonials: Testimonial[];
|
|
848
941
|
media?: ReactNode;
|
|
942
|
+
/**
|
|
943
|
+
* Управление вертикальным padding'ом `.root`.
|
|
944
|
+
* - `'default'` (default, BC) — `4rem` mobile / `6rem` md.
|
|
945
|
+
* - `'none'` — `padding-block: 0`.
|
|
946
|
+
*/
|
|
947
|
+
verticalPadding?: 'default' | 'none';
|
|
849
948
|
className?: string;
|
|
850
949
|
}
|
|
851
|
-
declare function PromoTestimonials({ heading, subtitle, testimonials, media, className, }: PromoTestimonialsProps): react_jsx_runtime.JSX.Element;
|
|
950
|
+
declare function PromoTestimonials({ heading, subtitle, testimonials, media, verticalPadding, className, }: PromoTestimonialsProps): react_jsx_runtime.JSX.Element;
|
|
852
951
|
|
|
853
952
|
interface PromoHeroProps {
|
|
854
953
|
title: ReactNode;
|
|
@@ -1127,4 +1226,4 @@ interface LandingLayoutProps {
|
|
|
1127
1226
|
}
|
|
1128
1227
|
declare function LandingLayout({ mode, nav, footer, children, className, }: LandingLayoutProps): react_jsx_runtime.JSX.Element;
|
|
1129
1228
|
|
|
1130
|
-
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, 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, type PricingFeature, 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 };
|
|
1229
|
+
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 };
|