@geomak/ui 6.30.0 → 6.31.0
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 +154 -2
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +156 -1
- package/dist/index.d.ts +156 -1
- package/dist/index.js +151 -3
- package/dist/index.js.map +1 -1
- package/dist/styles.css +54 -0
- package/package.json +1 -1
package/dist/index.d.cts
CHANGED
|
@@ -5042,6 +5042,161 @@ interface JwtResult<T> {
|
|
|
5042
5042
|
*/
|
|
5043
5043
|
declare function useJwt<T = Record<string, unknown>>(token: string | null | undefined): JwtResult<T>;
|
|
5044
5044
|
|
|
5045
|
+
type JumbotronLayout = 'centered' | 'split';
|
|
5046
|
+
type JumbotronBackground = 'none' | 'surface' | 'gradient';
|
|
5047
|
+
interface JumbotronProps {
|
|
5048
|
+
/** Small label above the title (kicker / category). */
|
|
5049
|
+
eyebrow?: React__default.ReactNode;
|
|
5050
|
+
/** The hero headline. */
|
|
5051
|
+
title: React__default.ReactNode;
|
|
5052
|
+
/** Supporting paragraph under the title. */
|
|
5053
|
+
description?: React__default.ReactNode;
|
|
5054
|
+
/** Call-to-action row — typically one or two `Button`s. */
|
|
5055
|
+
actions?: React__default.ReactNode;
|
|
5056
|
+
/** Media (image / screenshot / illustration). Shown beside the copy in
|
|
5057
|
+
* `split`, below it in `centered`. */
|
|
5058
|
+
media?: React__default.ReactNode;
|
|
5059
|
+
/** `centered` (default) stacks copy centred; `split` is copy + media side-by-side. */
|
|
5060
|
+
layout?: JumbotronLayout;
|
|
5061
|
+
/** Backdrop: none, a raised surface card, or a soft accent gradient glow. */
|
|
5062
|
+
background?: JumbotronBackground;
|
|
5063
|
+
className?: string;
|
|
5064
|
+
style?: React__default.CSSProperties;
|
|
5065
|
+
}
|
|
5066
|
+
/**
|
|
5067
|
+
* A landing-page hero ("jumbotron"): an eyebrow, a large headline, a supporting
|
|
5068
|
+
* line, and call-to-action buttons — optionally paired with media. `centered`
|
|
5069
|
+
* stacks everything centred; `split` puts the copy next to the media and stacks
|
|
5070
|
+
* on small screens. Pair with FeatureGrid / PricingPlans / Testimonials to
|
|
5071
|
+
* compose a full page.
|
|
5072
|
+
*
|
|
5073
|
+
* @example
|
|
5074
|
+
* <Jumbotron
|
|
5075
|
+
* background="gradient"
|
|
5076
|
+
* eyebrow={<Badge tone="accent">New</Badge>}
|
|
5077
|
+
* title="Ship maritime ops faster"
|
|
5078
|
+
* description="One portal for compliance, performance and voyage data."
|
|
5079
|
+
* actions={<><Button content="Get started" /><Button variant="outline" content="Book a demo" /></>}
|
|
5080
|
+
* />
|
|
5081
|
+
*/
|
|
5082
|
+
declare function Jumbotron({ eyebrow, title, description, actions, media, layout, background, className, style, }: JumbotronProps): react_jsx_runtime.JSX.Element;
|
|
5083
|
+
|
|
5084
|
+
interface Feature {
|
|
5085
|
+
/** Stable key. */
|
|
5086
|
+
key?: string | number;
|
|
5087
|
+
/** Leading icon (rendered in an accent-tinted tile). */
|
|
5088
|
+
icon?: React__default.ReactNode;
|
|
5089
|
+
title: React__default.ReactNode;
|
|
5090
|
+
description?: React__default.ReactNode;
|
|
5091
|
+
}
|
|
5092
|
+
interface FeatureGridProps {
|
|
5093
|
+
/** The features to render. */
|
|
5094
|
+
features: Feature[];
|
|
5095
|
+
/** Section eyebrow / kicker. */
|
|
5096
|
+
eyebrow?: React__default.ReactNode;
|
|
5097
|
+
/** Section heading. */
|
|
5098
|
+
title?: React__default.ReactNode;
|
|
5099
|
+
/** Section sub-heading. */
|
|
5100
|
+
description?: React__default.ReactNode;
|
|
5101
|
+
/** Columns at the largest breakpoint (collapses responsively). Default `3`. */
|
|
5102
|
+
columns?: 2 | 3 | 4;
|
|
5103
|
+
/** Centre the section header. Default `true`. */
|
|
5104
|
+
centeredHeader?: boolean;
|
|
5105
|
+
className?: string;
|
|
5106
|
+
style?: React__default.CSSProperties;
|
|
5107
|
+
}
|
|
5108
|
+
/**
|
|
5109
|
+
* A responsive grid of product features — icon, title, blurb — with an optional
|
|
5110
|
+
* section header. Collapses to a single column on mobile.
|
|
5111
|
+
*
|
|
5112
|
+
* @example
|
|
5113
|
+
* <FeatureGrid
|
|
5114
|
+
* title="Everything in one portal"
|
|
5115
|
+
* columns={3}
|
|
5116
|
+
* features={[{ icon: <BoltIcon />, title: 'Realtime', description: 'Live vessel data.' }, …]}
|
|
5117
|
+
* />
|
|
5118
|
+
*/
|
|
5119
|
+
declare function FeatureGrid({ features, eyebrow, title, description, columns, centeredHeader, className, style, }: FeatureGridProps): react_jsx_runtime.JSX.Element;
|
|
5120
|
+
|
|
5121
|
+
interface PricingPlan {
|
|
5122
|
+
key?: string | number;
|
|
5123
|
+
/** Plan name, e.g. "Pro". */
|
|
5124
|
+
name: React__default.ReactNode;
|
|
5125
|
+
/** Price, e.g. "$49" or "Custom". */
|
|
5126
|
+
price: React__default.ReactNode;
|
|
5127
|
+
/** Billing period suffix, e.g. "/mo". */
|
|
5128
|
+
period?: React__default.ReactNode;
|
|
5129
|
+
/** Short positioning line. */
|
|
5130
|
+
description?: React__default.ReactNode;
|
|
5131
|
+
/** Included features (rendered with check marks). */
|
|
5132
|
+
features: React__default.ReactNode[];
|
|
5133
|
+
/** CTA button. */
|
|
5134
|
+
cta: {
|
|
5135
|
+
label: React__default.ReactNode;
|
|
5136
|
+
onClick?: () => void;
|
|
5137
|
+
};
|
|
5138
|
+
/** Emphasise this plan (accent border, lift, badge). */
|
|
5139
|
+
highlighted?: boolean;
|
|
5140
|
+
/** Small ribbon label on a highlighted plan, e.g. "Most popular". */
|
|
5141
|
+
badge?: React__default.ReactNode;
|
|
5142
|
+
}
|
|
5143
|
+
interface PricingPlansProps {
|
|
5144
|
+
plans: PricingPlan[];
|
|
5145
|
+
eyebrow?: React__default.ReactNode;
|
|
5146
|
+
title?: React__default.ReactNode;
|
|
5147
|
+
description?: React__default.ReactNode;
|
|
5148
|
+
className?: string;
|
|
5149
|
+
style?: React__default.CSSProperties;
|
|
5150
|
+
}
|
|
5151
|
+
/**
|
|
5152
|
+
* A pricing-tier section: a responsive row of plan cards, each with a price,
|
|
5153
|
+
* a feature checklist and a CTA. Mark one plan `highlighted` to lift it with an
|
|
5154
|
+
* accent border and an optional `badge`.
|
|
5155
|
+
*
|
|
5156
|
+
* @example
|
|
5157
|
+
* <PricingPlans title="Pricing" plans={[
|
|
5158
|
+
* { name: 'Starter', price: '$0', period: '/mo', features: ['1 vessel', 'Email support'], cta: { label: 'Start free' } },
|
|
5159
|
+
* { name: 'Pro', price: '$49', period: '/mo', highlighted: true, badge: 'Most popular',
|
|
5160
|
+
* features: ['Unlimited vessels', 'Priority support'], cta: { label: 'Go Pro' } },
|
|
5161
|
+
* ]} />
|
|
5162
|
+
*/
|
|
5163
|
+
declare function PricingPlans({ plans, eyebrow, title, description, className, style }: PricingPlansProps): react_jsx_runtime.JSX.Element;
|
|
5164
|
+
|
|
5165
|
+
interface Testimonial {
|
|
5166
|
+
key?: string | number;
|
|
5167
|
+
/** The quote text. */
|
|
5168
|
+
quote: React__default.ReactNode;
|
|
5169
|
+
/** Author name. */
|
|
5170
|
+
author: React__default.ReactNode;
|
|
5171
|
+
/** Author role / company. */
|
|
5172
|
+
role?: React__default.ReactNode;
|
|
5173
|
+
/** Author avatar URL (falls back to initials of `author`). */
|
|
5174
|
+
avatar?: string;
|
|
5175
|
+
/** Optional 1–5 star rating. */
|
|
5176
|
+
rating?: number;
|
|
5177
|
+
}
|
|
5178
|
+
interface TestimonialsProps {
|
|
5179
|
+
testimonials: Testimonial[];
|
|
5180
|
+
eyebrow?: React__default.ReactNode;
|
|
5181
|
+
title?: React__default.ReactNode;
|
|
5182
|
+
description?: React__default.ReactNode;
|
|
5183
|
+
/** Columns at the largest breakpoint. Default `3`. */
|
|
5184
|
+
columns?: 1 | 2 | 3;
|
|
5185
|
+
className?: string;
|
|
5186
|
+
style?: React__default.CSSProperties;
|
|
5187
|
+
}
|
|
5188
|
+
/**
|
|
5189
|
+
* A wall of customer testimonials — quote, star rating, and author with avatar.
|
|
5190
|
+
* Responsive grid (single column on mobile); use `columns={1}` for one centred
|
|
5191
|
+
* featured quote.
|
|
5192
|
+
*
|
|
5193
|
+
* @example
|
|
5194
|
+
* <Testimonials title="Loved by ops teams" testimonials={[
|
|
5195
|
+
* { quote: 'Cut our reporting time in half.', author: 'Maria F.', role: 'Fleet Manager', rating: 5 },
|
|
5196
|
+
* ]} />
|
|
5197
|
+
*/
|
|
5198
|
+
declare function Testimonials({ testimonials, eyebrow, title, description, columns, className, style }: TestimonialsProps): react_jsx_runtime.JSX.Element;
|
|
5199
|
+
|
|
5045
5200
|
/**
|
|
5046
5201
|
* Zero-dependency credit-card helpers: brand detection, Luhn checksum, and
|
|
5047
5202
|
* display formatting. Pure functions — no React, no deps — so they're unit
|
|
@@ -5084,4 +5239,4 @@ declare function expiryError(value: string, now?: Date): string | undefined;
|
|
|
5084
5239
|
/** Validate the CVV against the detected brand's expected length. */
|
|
5085
5240
|
declare function cvvError(value: string, cardNumber: string): string | undefined;
|
|
5086
5241
|
|
|
5087
|
-
export { Accordion, type AccordionItemProps, type AccordionProps, AppShell, type AppShellProps, AutoComplete, type AutoCompleteProps, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarStatus, Badge, type BadgeProps, type BadgeSize, type BadgeTone, type BadgeVariant, Box, type BoxBackground, type BoxBorder, type BoxProps, type BoxRadius, type BoxShadow, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, type Breakpoint, type BreakpointState, Button, type ButtonProps, CARD_BRANDS, Card, type CardBodyProps, type CardBrand, CardCarousel, type CardCarouselProps, type CardFooterProps, type CardHeaderProps, type CardMediaProps, type CardProps, Cart, CartButton, type CartButtonProps, type CartContextValue, type CartItemInput, type CartLineItem, type CartProps, CartProvider, type CartProviderProps, type CartSummaryRow, Catalog, CatalogCarousel, type CatalogCarouselProps, CatalogGrid, type CatalogGridProps, type CatalogProps, Chat, type ChatMessage, type ChatProps, Checkbox, type CheckboxProps, Checkout, type CheckoutProps, ColorPicker, type ColorPickerProps, ContextMenu, type ContextMenuActionItem, type ContextMenuPosition, type ContextMenuProps, CreditCardForm, type CreditCardFormProps, type CreditCardValue, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, type DateRangePreset, type DeltaDirection, Drawer, type DrawerProps, type DrawerSize, Dropdown, type DropdownItem, type DropdownProps, EmptyCart, type EmptyCartProps, type ErrorMap, type ExpandRowOptions, FAB, type FABAction, type FABPosition, type FABProps, type FABSize, type FABTone, FadingBase, type FadingBaseProps, Field, type FieldArrayItem, type FieldBindings, FieldHelpIcon, type FieldKind, FieldLabel, type FieldLabelProps, type FieldProps, type FieldRule, type FieldRules, type FieldShellOptions, type FieldSize, type FieldSnapshot, FileInput, type FileInputProps, Flex, type FlexAlign, type FlexDirection, type FlexJustify, type FlexProps, type FlexWrap, Form, FormContext, FormField, type FormFieldProps, type FormProps, FormStore, type FormStoreOptions, type FormValues, Grid, GridCard, type GridCardItem, type GridCardProps, type GridProps, Icon, IconButton, type IconButtonProps, type JwtResult, Kbd, type KbdProps, type KbdSize, List, type ListItem, type ListProps, LoadingSpinner, type LoadingSpinnerProps, LogoutTimer, type LogoutTimerProps, MegaMenu, type MegaMenuFeaturedProps, type MegaMenuItemProps, type MegaMenuLinkProps, type MegaMenuPanelProps, type MegaMenuProps, type MegaMenuSectionProps, MenuButton, type MenuButtonItem, type MenuButtonProps, Modal, type ModalProps, type ModalSize, type NotificationPayload, NotificationProvider, NumberInput, type NumberInputProps, OpaqueGridCard, type OpaqueGridCardProps, OtpInput, type OtpInputProps, type PaginationOptions, Password, type PasswordProps, PopConfirm, type PopConfirmProps, type PopConfirmTone, Portal, type PortalProps, RadioGroup, type RadioGroupProps, type RadioOption, Rating, type RatingProps, type RulesMap, ScalableContainer, type ScalableContainerProps, Scheduler, type SchedulerEvent, type SchedulerProps, type SchedulerRange, type SchedulerView, SearchInput, type SearchInputProps, SecureLayout, type SecureLayoutProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Sidebar, type SidebarItem, type SidebarProps, type SidebarSection, SkeletonBox, type SkeletonBoxProps, SkeletonCard, type SkeletonCardProps, SkeletonCircle, type SkeletonCircleProps, SkeletonText, type SkeletonTextProps, Slider, type SliderMark, type SliderProps, type SliderValue, type Spacing, Statistic, type StatisticDelta, type StatisticProps, type StatisticSize, Stepper, type StepperActiveStatus, type StepperProps, type StepperStep, Switch, type SwitchInputProps, Table, type TableColumn, type TableProps, Tabs, type TabsAddProps, type TabsListProps, type TabsOrientation, type TabsPanelProps, type TabsProps, type TabsSize, type TabsTriggerProps, type TabsVariant, TagsInput, type TagsInputProps, DatePicker as Temporal, type TemporalPickerProps, TextArea, type TextAreaProps, TextInput, type TextInputProps, type ThemeColors, type ThemeConfig, type ThemeDensity, type ThemeMotion, ThemeProvider, type ThemeProviderProps, type ThemeRadius, type ThemeShadows, ThemeSwitch, type ThemeSwitchProps, type ThemeTypography, TimePicker, type TimePickerProps, Timeline, type TimelineEvent, type TimelineProps, type TimelineStatus, Tooltip, type TooltipProps, TooltipProvider, TopBar, type TopBarProps, Tree, type TreeItemClickPayload, type TreeNode, type TreeProps, TreeSelect, type TreeSelectProps, Typography, type TypographyAlign, type TypographyColor, type TypographyProps, type TypographyVariant, type TypographyWeight, type UseFieldArrayReturn, type UseFormFieldOptions, type UseFormReturn, type ValidateTrigger, Wizard, type WizardProps, type WizardStep, cardNumberError, cvvError, detectBrand, expiryError, fieldShell, formatCardNumber, formatExpiry, isRequired, luhnValid, onlyDigits, patterns, runFieldRules, useBreakpoint, useCart, useFieldArray, useForm, useFormField, useFormStore, useJwt, useLocalStorage, useMediaQuery, useNotification };
|
|
5242
|
+
export { Accordion, type AccordionItemProps, type AccordionProps, AppShell, type AppShellProps, AutoComplete, type AutoCompleteProps, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarStatus, Badge, type BadgeProps, type BadgeSize, type BadgeTone, type BadgeVariant, Box, type BoxBackground, type BoxBorder, type BoxProps, type BoxRadius, type BoxShadow, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, type Breakpoint, type BreakpointState, Button, type ButtonProps, CARD_BRANDS, Card, type CardBodyProps, type CardBrand, CardCarousel, type CardCarouselProps, type CardFooterProps, type CardHeaderProps, type CardMediaProps, type CardProps, Cart, CartButton, type CartButtonProps, type CartContextValue, type CartItemInput, type CartLineItem, type CartProps, CartProvider, type CartProviderProps, type CartSummaryRow, Catalog, CatalogCarousel, type CatalogCarouselProps, CatalogGrid, type CatalogGridProps, type CatalogProps, Chat, type ChatMessage, type ChatProps, Checkbox, type CheckboxProps, Checkout, type CheckoutProps, ColorPicker, type ColorPickerProps, ContextMenu, type ContextMenuActionItem, type ContextMenuPosition, type ContextMenuProps, CreditCardForm, type CreditCardFormProps, type CreditCardValue, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, type DateRangePreset, type DeltaDirection, Drawer, type DrawerProps, type DrawerSize, Dropdown, type DropdownItem, type DropdownProps, EmptyCart, type EmptyCartProps, type ErrorMap, type ExpandRowOptions, FAB, type FABAction, type FABPosition, type FABProps, type FABSize, type FABTone, FadingBase, type FadingBaseProps, type Feature, FeatureGrid, type FeatureGridProps, Field, type FieldArrayItem, type FieldBindings, FieldHelpIcon, type FieldKind, FieldLabel, type FieldLabelProps, type FieldProps, type FieldRule, type FieldRules, type FieldShellOptions, type FieldSize, type FieldSnapshot, FileInput, type FileInputProps, Flex, type FlexAlign, type FlexDirection, type FlexJustify, type FlexProps, type FlexWrap, Form, FormContext, FormField, type FormFieldProps, type FormProps, FormStore, type FormStoreOptions, type FormValues, Grid, GridCard, type GridCardItem, type GridCardProps, type GridProps, Icon, IconButton, type IconButtonProps, Jumbotron, type JumbotronBackground, type JumbotronLayout, type JumbotronProps, type JwtResult, Kbd, type KbdProps, type KbdSize, List, type ListItem, type ListProps, LoadingSpinner, type LoadingSpinnerProps, LogoutTimer, type LogoutTimerProps, MegaMenu, type MegaMenuFeaturedProps, type MegaMenuItemProps, type MegaMenuLinkProps, type MegaMenuPanelProps, type MegaMenuProps, type MegaMenuSectionProps, MenuButton, type MenuButtonItem, type MenuButtonProps, Modal, type ModalProps, type ModalSize, type NotificationPayload, NotificationProvider, NumberInput, type NumberInputProps, OpaqueGridCard, type OpaqueGridCardProps, OtpInput, type OtpInputProps, type PaginationOptions, Password, type PasswordProps, PopConfirm, type PopConfirmProps, type PopConfirmTone, Portal, type PortalProps, type PricingPlan, PricingPlans, type PricingPlansProps, RadioGroup, type RadioGroupProps, type RadioOption, Rating, type RatingProps, type RulesMap, ScalableContainer, type ScalableContainerProps, Scheduler, type SchedulerEvent, type SchedulerProps, type SchedulerRange, type SchedulerView, SearchInput, type SearchInputProps, SecureLayout, type SecureLayoutProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Sidebar, type SidebarItem, type SidebarProps, type SidebarSection, SkeletonBox, type SkeletonBoxProps, SkeletonCard, type SkeletonCardProps, SkeletonCircle, type SkeletonCircleProps, SkeletonText, type SkeletonTextProps, Slider, type SliderMark, type SliderProps, type SliderValue, type Spacing, Statistic, type StatisticDelta, type StatisticProps, type StatisticSize, Stepper, type StepperActiveStatus, type StepperProps, type StepperStep, Switch, type SwitchInputProps, Table, type TableColumn, type TableProps, Tabs, type TabsAddProps, type TabsListProps, type TabsOrientation, type TabsPanelProps, type TabsProps, type TabsSize, type TabsTriggerProps, type TabsVariant, TagsInput, type TagsInputProps, DatePicker as Temporal, type TemporalPickerProps, type Testimonial, Testimonials, type TestimonialsProps, TextArea, type TextAreaProps, TextInput, type TextInputProps, type ThemeColors, type ThemeConfig, type ThemeDensity, type ThemeMotion, ThemeProvider, type ThemeProviderProps, type ThemeRadius, type ThemeShadows, ThemeSwitch, type ThemeSwitchProps, type ThemeTypography, TimePicker, type TimePickerProps, Timeline, type TimelineEvent, type TimelineProps, type TimelineStatus, Tooltip, type TooltipProps, TooltipProvider, TopBar, type TopBarProps, Tree, type TreeItemClickPayload, type TreeNode, type TreeProps, TreeSelect, type TreeSelectProps, Typography, type TypographyAlign, type TypographyColor, type TypographyProps, type TypographyVariant, type TypographyWeight, type UseFieldArrayReturn, type UseFormFieldOptions, type UseFormReturn, type ValidateTrigger, Wizard, type WizardProps, type WizardStep, cardNumberError, cvvError, detectBrand, expiryError, fieldShell, formatCardNumber, formatExpiry, isRequired, luhnValid, onlyDigits, patterns, runFieldRules, useBreakpoint, useCart, useFieldArray, useForm, useFormField, useFormStore, useJwt, useLocalStorage, useMediaQuery, useNotification };
|
package/dist/index.d.ts
CHANGED
|
@@ -5042,6 +5042,161 @@ interface JwtResult<T> {
|
|
|
5042
5042
|
*/
|
|
5043
5043
|
declare function useJwt<T = Record<string, unknown>>(token: string | null | undefined): JwtResult<T>;
|
|
5044
5044
|
|
|
5045
|
+
type JumbotronLayout = 'centered' | 'split';
|
|
5046
|
+
type JumbotronBackground = 'none' | 'surface' | 'gradient';
|
|
5047
|
+
interface JumbotronProps {
|
|
5048
|
+
/** Small label above the title (kicker / category). */
|
|
5049
|
+
eyebrow?: React__default.ReactNode;
|
|
5050
|
+
/** The hero headline. */
|
|
5051
|
+
title: React__default.ReactNode;
|
|
5052
|
+
/** Supporting paragraph under the title. */
|
|
5053
|
+
description?: React__default.ReactNode;
|
|
5054
|
+
/** Call-to-action row — typically one or two `Button`s. */
|
|
5055
|
+
actions?: React__default.ReactNode;
|
|
5056
|
+
/** Media (image / screenshot / illustration). Shown beside the copy in
|
|
5057
|
+
* `split`, below it in `centered`. */
|
|
5058
|
+
media?: React__default.ReactNode;
|
|
5059
|
+
/** `centered` (default) stacks copy centred; `split` is copy + media side-by-side. */
|
|
5060
|
+
layout?: JumbotronLayout;
|
|
5061
|
+
/** Backdrop: none, a raised surface card, or a soft accent gradient glow. */
|
|
5062
|
+
background?: JumbotronBackground;
|
|
5063
|
+
className?: string;
|
|
5064
|
+
style?: React__default.CSSProperties;
|
|
5065
|
+
}
|
|
5066
|
+
/**
|
|
5067
|
+
* A landing-page hero ("jumbotron"): an eyebrow, a large headline, a supporting
|
|
5068
|
+
* line, and call-to-action buttons — optionally paired with media. `centered`
|
|
5069
|
+
* stacks everything centred; `split` puts the copy next to the media and stacks
|
|
5070
|
+
* on small screens. Pair with FeatureGrid / PricingPlans / Testimonials to
|
|
5071
|
+
* compose a full page.
|
|
5072
|
+
*
|
|
5073
|
+
* @example
|
|
5074
|
+
* <Jumbotron
|
|
5075
|
+
* background="gradient"
|
|
5076
|
+
* eyebrow={<Badge tone="accent">New</Badge>}
|
|
5077
|
+
* title="Ship maritime ops faster"
|
|
5078
|
+
* description="One portal for compliance, performance and voyage data."
|
|
5079
|
+
* actions={<><Button content="Get started" /><Button variant="outline" content="Book a demo" /></>}
|
|
5080
|
+
* />
|
|
5081
|
+
*/
|
|
5082
|
+
declare function Jumbotron({ eyebrow, title, description, actions, media, layout, background, className, style, }: JumbotronProps): react_jsx_runtime.JSX.Element;
|
|
5083
|
+
|
|
5084
|
+
interface Feature {
|
|
5085
|
+
/** Stable key. */
|
|
5086
|
+
key?: string | number;
|
|
5087
|
+
/** Leading icon (rendered in an accent-tinted tile). */
|
|
5088
|
+
icon?: React__default.ReactNode;
|
|
5089
|
+
title: React__default.ReactNode;
|
|
5090
|
+
description?: React__default.ReactNode;
|
|
5091
|
+
}
|
|
5092
|
+
interface FeatureGridProps {
|
|
5093
|
+
/** The features to render. */
|
|
5094
|
+
features: Feature[];
|
|
5095
|
+
/** Section eyebrow / kicker. */
|
|
5096
|
+
eyebrow?: React__default.ReactNode;
|
|
5097
|
+
/** Section heading. */
|
|
5098
|
+
title?: React__default.ReactNode;
|
|
5099
|
+
/** Section sub-heading. */
|
|
5100
|
+
description?: React__default.ReactNode;
|
|
5101
|
+
/** Columns at the largest breakpoint (collapses responsively). Default `3`. */
|
|
5102
|
+
columns?: 2 | 3 | 4;
|
|
5103
|
+
/** Centre the section header. Default `true`. */
|
|
5104
|
+
centeredHeader?: boolean;
|
|
5105
|
+
className?: string;
|
|
5106
|
+
style?: React__default.CSSProperties;
|
|
5107
|
+
}
|
|
5108
|
+
/**
|
|
5109
|
+
* A responsive grid of product features — icon, title, blurb — with an optional
|
|
5110
|
+
* section header. Collapses to a single column on mobile.
|
|
5111
|
+
*
|
|
5112
|
+
* @example
|
|
5113
|
+
* <FeatureGrid
|
|
5114
|
+
* title="Everything in one portal"
|
|
5115
|
+
* columns={3}
|
|
5116
|
+
* features={[{ icon: <BoltIcon />, title: 'Realtime', description: 'Live vessel data.' }, …]}
|
|
5117
|
+
* />
|
|
5118
|
+
*/
|
|
5119
|
+
declare function FeatureGrid({ features, eyebrow, title, description, columns, centeredHeader, className, style, }: FeatureGridProps): react_jsx_runtime.JSX.Element;
|
|
5120
|
+
|
|
5121
|
+
interface PricingPlan {
|
|
5122
|
+
key?: string | number;
|
|
5123
|
+
/** Plan name, e.g. "Pro". */
|
|
5124
|
+
name: React__default.ReactNode;
|
|
5125
|
+
/** Price, e.g. "$49" or "Custom". */
|
|
5126
|
+
price: React__default.ReactNode;
|
|
5127
|
+
/** Billing period suffix, e.g. "/mo". */
|
|
5128
|
+
period?: React__default.ReactNode;
|
|
5129
|
+
/** Short positioning line. */
|
|
5130
|
+
description?: React__default.ReactNode;
|
|
5131
|
+
/** Included features (rendered with check marks). */
|
|
5132
|
+
features: React__default.ReactNode[];
|
|
5133
|
+
/** CTA button. */
|
|
5134
|
+
cta: {
|
|
5135
|
+
label: React__default.ReactNode;
|
|
5136
|
+
onClick?: () => void;
|
|
5137
|
+
};
|
|
5138
|
+
/** Emphasise this plan (accent border, lift, badge). */
|
|
5139
|
+
highlighted?: boolean;
|
|
5140
|
+
/** Small ribbon label on a highlighted plan, e.g. "Most popular". */
|
|
5141
|
+
badge?: React__default.ReactNode;
|
|
5142
|
+
}
|
|
5143
|
+
interface PricingPlansProps {
|
|
5144
|
+
plans: PricingPlan[];
|
|
5145
|
+
eyebrow?: React__default.ReactNode;
|
|
5146
|
+
title?: React__default.ReactNode;
|
|
5147
|
+
description?: React__default.ReactNode;
|
|
5148
|
+
className?: string;
|
|
5149
|
+
style?: React__default.CSSProperties;
|
|
5150
|
+
}
|
|
5151
|
+
/**
|
|
5152
|
+
* A pricing-tier section: a responsive row of plan cards, each with a price,
|
|
5153
|
+
* a feature checklist and a CTA. Mark one plan `highlighted` to lift it with an
|
|
5154
|
+
* accent border and an optional `badge`.
|
|
5155
|
+
*
|
|
5156
|
+
* @example
|
|
5157
|
+
* <PricingPlans title="Pricing" plans={[
|
|
5158
|
+
* { name: 'Starter', price: '$0', period: '/mo', features: ['1 vessel', 'Email support'], cta: { label: 'Start free' } },
|
|
5159
|
+
* { name: 'Pro', price: '$49', period: '/mo', highlighted: true, badge: 'Most popular',
|
|
5160
|
+
* features: ['Unlimited vessels', 'Priority support'], cta: { label: 'Go Pro' } },
|
|
5161
|
+
* ]} />
|
|
5162
|
+
*/
|
|
5163
|
+
declare function PricingPlans({ plans, eyebrow, title, description, className, style }: PricingPlansProps): react_jsx_runtime.JSX.Element;
|
|
5164
|
+
|
|
5165
|
+
interface Testimonial {
|
|
5166
|
+
key?: string | number;
|
|
5167
|
+
/** The quote text. */
|
|
5168
|
+
quote: React__default.ReactNode;
|
|
5169
|
+
/** Author name. */
|
|
5170
|
+
author: React__default.ReactNode;
|
|
5171
|
+
/** Author role / company. */
|
|
5172
|
+
role?: React__default.ReactNode;
|
|
5173
|
+
/** Author avatar URL (falls back to initials of `author`). */
|
|
5174
|
+
avatar?: string;
|
|
5175
|
+
/** Optional 1–5 star rating. */
|
|
5176
|
+
rating?: number;
|
|
5177
|
+
}
|
|
5178
|
+
interface TestimonialsProps {
|
|
5179
|
+
testimonials: Testimonial[];
|
|
5180
|
+
eyebrow?: React__default.ReactNode;
|
|
5181
|
+
title?: React__default.ReactNode;
|
|
5182
|
+
description?: React__default.ReactNode;
|
|
5183
|
+
/** Columns at the largest breakpoint. Default `3`. */
|
|
5184
|
+
columns?: 1 | 2 | 3;
|
|
5185
|
+
className?: string;
|
|
5186
|
+
style?: React__default.CSSProperties;
|
|
5187
|
+
}
|
|
5188
|
+
/**
|
|
5189
|
+
* A wall of customer testimonials — quote, star rating, and author with avatar.
|
|
5190
|
+
* Responsive grid (single column on mobile); use `columns={1}` for one centred
|
|
5191
|
+
* featured quote.
|
|
5192
|
+
*
|
|
5193
|
+
* @example
|
|
5194
|
+
* <Testimonials title="Loved by ops teams" testimonials={[
|
|
5195
|
+
* { quote: 'Cut our reporting time in half.', author: 'Maria F.', role: 'Fleet Manager', rating: 5 },
|
|
5196
|
+
* ]} />
|
|
5197
|
+
*/
|
|
5198
|
+
declare function Testimonials({ testimonials, eyebrow, title, description, columns, className, style }: TestimonialsProps): react_jsx_runtime.JSX.Element;
|
|
5199
|
+
|
|
5045
5200
|
/**
|
|
5046
5201
|
* Zero-dependency credit-card helpers: brand detection, Luhn checksum, and
|
|
5047
5202
|
* display formatting. Pure functions — no React, no deps — so they're unit
|
|
@@ -5084,4 +5239,4 @@ declare function expiryError(value: string, now?: Date): string | undefined;
|
|
|
5084
5239
|
/** Validate the CVV against the detected brand's expected length. */
|
|
5085
5240
|
declare function cvvError(value: string, cardNumber: string): string | undefined;
|
|
5086
5241
|
|
|
5087
|
-
export { Accordion, type AccordionItemProps, type AccordionProps, AppShell, type AppShellProps, AutoComplete, type AutoCompleteProps, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarStatus, Badge, type BadgeProps, type BadgeSize, type BadgeTone, type BadgeVariant, Box, type BoxBackground, type BoxBorder, type BoxProps, type BoxRadius, type BoxShadow, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, type Breakpoint, type BreakpointState, Button, type ButtonProps, CARD_BRANDS, Card, type CardBodyProps, type CardBrand, CardCarousel, type CardCarouselProps, type CardFooterProps, type CardHeaderProps, type CardMediaProps, type CardProps, Cart, CartButton, type CartButtonProps, type CartContextValue, type CartItemInput, type CartLineItem, type CartProps, CartProvider, type CartProviderProps, type CartSummaryRow, Catalog, CatalogCarousel, type CatalogCarouselProps, CatalogGrid, type CatalogGridProps, type CatalogProps, Chat, type ChatMessage, type ChatProps, Checkbox, type CheckboxProps, Checkout, type CheckoutProps, ColorPicker, type ColorPickerProps, ContextMenu, type ContextMenuActionItem, type ContextMenuPosition, type ContextMenuProps, CreditCardForm, type CreditCardFormProps, type CreditCardValue, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, type DateRangePreset, type DeltaDirection, Drawer, type DrawerProps, type DrawerSize, Dropdown, type DropdownItem, type DropdownProps, EmptyCart, type EmptyCartProps, type ErrorMap, type ExpandRowOptions, FAB, type FABAction, type FABPosition, type FABProps, type FABSize, type FABTone, FadingBase, type FadingBaseProps, Field, type FieldArrayItem, type FieldBindings, FieldHelpIcon, type FieldKind, FieldLabel, type FieldLabelProps, type FieldProps, type FieldRule, type FieldRules, type FieldShellOptions, type FieldSize, type FieldSnapshot, FileInput, type FileInputProps, Flex, type FlexAlign, type FlexDirection, type FlexJustify, type FlexProps, type FlexWrap, Form, FormContext, FormField, type FormFieldProps, type FormProps, FormStore, type FormStoreOptions, type FormValues, Grid, GridCard, type GridCardItem, type GridCardProps, type GridProps, Icon, IconButton, type IconButtonProps, type JwtResult, Kbd, type KbdProps, type KbdSize, List, type ListItem, type ListProps, LoadingSpinner, type LoadingSpinnerProps, LogoutTimer, type LogoutTimerProps, MegaMenu, type MegaMenuFeaturedProps, type MegaMenuItemProps, type MegaMenuLinkProps, type MegaMenuPanelProps, type MegaMenuProps, type MegaMenuSectionProps, MenuButton, type MenuButtonItem, type MenuButtonProps, Modal, type ModalProps, type ModalSize, type NotificationPayload, NotificationProvider, NumberInput, type NumberInputProps, OpaqueGridCard, type OpaqueGridCardProps, OtpInput, type OtpInputProps, type PaginationOptions, Password, type PasswordProps, PopConfirm, type PopConfirmProps, type PopConfirmTone, Portal, type PortalProps, RadioGroup, type RadioGroupProps, type RadioOption, Rating, type RatingProps, type RulesMap, ScalableContainer, type ScalableContainerProps, Scheduler, type SchedulerEvent, type SchedulerProps, type SchedulerRange, type SchedulerView, SearchInput, type SearchInputProps, SecureLayout, type SecureLayoutProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Sidebar, type SidebarItem, type SidebarProps, type SidebarSection, SkeletonBox, type SkeletonBoxProps, SkeletonCard, type SkeletonCardProps, SkeletonCircle, type SkeletonCircleProps, SkeletonText, type SkeletonTextProps, Slider, type SliderMark, type SliderProps, type SliderValue, type Spacing, Statistic, type StatisticDelta, type StatisticProps, type StatisticSize, Stepper, type StepperActiveStatus, type StepperProps, type StepperStep, Switch, type SwitchInputProps, Table, type TableColumn, type TableProps, Tabs, type TabsAddProps, type TabsListProps, type TabsOrientation, type TabsPanelProps, type TabsProps, type TabsSize, type TabsTriggerProps, type TabsVariant, TagsInput, type TagsInputProps, DatePicker as Temporal, type TemporalPickerProps, TextArea, type TextAreaProps, TextInput, type TextInputProps, type ThemeColors, type ThemeConfig, type ThemeDensity, type ThemeMotion, ThemeProvider, type ThemeProviderProps, type ThemeRadius, type ThemeShadows, ThemeSwitch, type ThemeSwitchProps, type ThemeTypography, TimePicker, type TimePickerProps, Timeline, type TimelineEvent, type TimelineProps, type TimelineStatus, Tooltip, type TooltipProps, TooltipProvider, TopBar, type TopBarProps, Tree, type TreeItemClickPayload, type TreeNode, type TreeProps, TreeSelect, type TreeSelectProps, Typography, type TypographyAlign, type TypographyColor, type TypographyProps, type TypographyVariant, type TypographyWeight, type UseFieldArrayReturn, type UseFormFieldOptions, type UseFormReturn, type ValidateTrigger, Wizard, type WizardProps, type WizardStep, cardNumberError, cvvError, detectBrand, expiryError, fieldShell, formatCardNumber, formatExpiry, isRequired, luhnValid, onlyDigits, patterns, runFieldRules, useBreakpoint, useCart, useFieldArray, useForm, useFormField, useFormStore, useJwt, useLocalStorage, useMediaQuery, useNotification };
|
|
5242
|
+
export { Accordion, type AccordionItemProps, type AccordionProps, AppShell, type AppShellProps, AutoComplete, type AutoCompleteProps, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarStatus, Badge, type BadgeProps, type BadgeSize, type BadgeTone, type BadgeVariant, Box, type BoxBackground, type BoxBorder, type BoxProps, type BoxRadius, type BoxShadow, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, type Breakpoint, type BreakpointState, Button, type ButtonProps, CARD_BRANDS, Card, type CardBodyProps, type CardBrand, CardCarousel, type CardCarouselProps, type CardFooterProps, type CardHeaderProps, type CardMediaProps, type CardProps, Cart, CartButton, type CartButtonProps, type CartContextValue, type CartItemInput, type CartLineItem, type CartProps, CartProvider, type CartProviderProps, type CartSummaryRow, Catalog, CatalogCarousel, type CatalogCarouselProps, CatalogGrid, type CatalogGridProps, type CatalogProps, Chat, type ChatMessage, type ChatProps, Checkbox, type CheckboxProps, Checkout, type CheckoutProps, ColorPicker, type ColorPickerProps, ContextMenu, type ContextMenuActionItem, type ContextMenuPosition, type ContextMenuProps, CreditCardForm, type CreditCardFormProps, type CreditCardValue, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, type DateRangePreset, type DeltaDirection, Drawer, type DrawerProps, type DrawerSize, Dropdown, type DropdownItem, type DropdownProps, EmptyCart, type EmptyCartProps, type ErrorMap, type ExpandRowOptions, FAB, type FABAction, type FABPosition, type FABProps, type FABSize, type FABTone, FadingBase, type FadingBaseProps, type Feature, FeatureGrid, type FeatureGridProps, Field, type FieldArrayItem, type FieldBindings, FieldHelpIcon, type FieldKind, FieldLabel, type FieldLabelProps, type FieldProps, type FieldRule, type FieldRules, type FieldShellOptions, type FieldSize, type FieldSnapshot, FileInput, type FileInputProps, Flex, type FlexAlign, type FlexDirection, type FlexJustify, type FlexProps, type FlexWrap, Form, FormContext, FormField, type FormFieldProps, type FormProps, FormStore, type FormStoreOptions, type FormValues, Grid, GridCard, type GridCardItem, type GridCardProps, type GridProps, Icon, IconButton, type IconButtonProps, Jumbotron, type JumbotronBackground, type JumbotronLayout, type JumbotronProps, type JwtResult, Kbd, type KbdProps, type KbdSize, List, type ListItem, type ListProps, LoadingSpinner, type LoadingSpinnerProps, LogoutTimer, type LogoutTimerProps, MegaMenu, type MegaMenuFeaturedProps, type MegaMenuItemProps, type MegaMenuLinkProps, type MegaMenuPanelProps, type MegaMenuProps, type MegaMenuSectionProps, MenuButton, type MenuButtonItem, type MenuButtonProps, Modal, type ModalProps, type ModalSize, type NotificationPayload, NotificationProvider, NumberInput, type NumberInputProps, OpaqueGridCard, type OpaqueGridCardProps, OtpInput, type OtpInputProps, type PaginationOptions, Password, type PasswordProps, PopConfirm, type PopConfirmProps, type PopConfirmTone, Portal, type PortalProps, type PricingPlan, PricingPlans, type PricingPlansProps, RadioGroup, type RadioGroupProps, type RadioOption, Rating, type RatingProps, type RulesMap, ScalableContainer, type ScalableContainerProps, Scheduler, type SchedulerEvent, type SchedulerProps, type SchedulerRange, type SchedulerView, SearchInput, type SearchInputProps, SecureLayout, type SecureLayoutProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Sidebar, type SidebarItem, type SidebarProps, type SidebarSection, SkeletonBox, type SkeletonBoxProps, SkeletonCard, type SkeletonCardProps, SkeletonCircle, type SkeletonCircleProps, SkeletonText, type SkeletonTextProps, Slider, type SliderMark, type SliderProps, type SliderValue, type Spacing, Statistic, type StatisticDelta, type StatisticProps, type StatisticSize, Stepper, type StepperActiveStatus, type StepperProps, type StepperStep, Switch, type SwitchInputProps, Table, type TableColumn, type TableProps, Tabs, type TabsAddProps, type TabsListProps, type TabsOrientation, type TabsPanelProps, type TabsProps, type TabsSize, type TabsTriggerProps, type TabsVariant, TagsInput, type TagsInputProps, DatePicker as Temporal, type TemporalPickerProps, type Testimonial, Testimonials, type TestimonialsProps, TextArea, type TextAreaProps, TextInput, type TextInputProps, type ThemeColors, type ThemeConfig, type ThemeDensity, type ThemeMotion, ThemeProvider, type ThemeProviderProps, type ThemeRadius, type ThemeShadows, ThemeSwitch, type ThemeSwitchProps, type ThemeTypography, TimePicker, type TimePickerProps, Timeline, type TimelineEvent, type TimelineProps, type TimelineStatus, Tooltip, type TooltipProps, TooltipProvider, TopBar, type TopBarProps, Tree, type TreeItemClickPayload, type TreeNode, type TreeProps, TreeSelect, type TreeSelectProps, Typography, type TypographyAlign, type TypographyColor, type TypographyProps, type TypographyVariant, type TypographyWeight, type UseFieldArrayReturn, type UseFormFieldOptions, type UseFormReturn, type ValidateTrigger, Wizard, type WizardProps, type WizardStep, cardNumberError, cvvError, detectBrand, expiryError, fieldShell, formatCardNumber, formatExpiry, isRequired, luhnValid, onlyDigits, patterns, runFieldRules, useBreakpoint, useCart, useFieldArray, useForm, useFormField, useFormStore, useJwt, useLocalStorage, useMediaQuery, useNotification };
|
package/dist/index.js
CHANGED
|
@@ -470,8 +470,8 @@ function Avatar({
|
|
|
470
470
|
if (fallback) return fallback;
|
|
471
471
|
if (alt) {
|
|
472
472
|
const parts = alt.trim().split(/\s+/).slice(0, 2);
|
|
473
|
-
const
|
|
474
|
-
if (
|
|
473
|
+
const initials3 = parts.map((p) => p[0]?.toUpperCase() ?? "").join("");
|
|
474
|
+
if (initials3) return initials3;
|
|
475
475
|
}
|
|
476
476
|
return /* @__PURE__ */ jsx(PersonSilhouette, {});
|
|
477
477
|
})();
|
|
@@ -9289,7 +9289,155 @@ function useJwt(token) {
|
|
|
9289
9289
|
const isValid = decoded.payload != null && !isExpired;
|
|
9290
9290
|
return { payload: decoded.payload, header: decoded.header, expiresAt, isExpired, isValid, raw: token ?? null };
|
|
9291
9291
|
}
|
|
9292
|
+
var GRADIENT = "radial-gradient(ellipse 80% 60% at 50% 0%, color-mix(in oklab, var(--color-accent) 12%, transparent), transparent 70%)";
|
|
9293
|
+
function Jumbotron({
|
|
9294
|
+
eyebrow,
|
|
9295
|
+
title,
|
|
9296
|
+
description,
|
|
9297
|
+
actions,
|
|
9298
|
+
media,
|
|
9299
|
+
layout = "centered",
|
|
9300
|
+
background = "none",
|
|
9301
|
+
className = "",
|
|
9302
|
+
style
|
|
9303
|
+
}) {
|
|
9304
|
+
const split = layout === "split" && media != null;
|
|
9305
|
+
const bgClass = background === "surface" ? "bg-surface" : "";
|
|
9306
|
+
const copy = /* @__PURE__ */ jsxs("div", { className: ["flex flex-col gap-5", split ? "items-start text-left" : "items-center text-center"].join(" "), children: [
|
|
9307
|
+
eyebrow != null && /* @__PURE__ */ jsx("div", { children: eyebrow }),
|
|
9308
|
+
/* @__PURE__ */ jsx("h1", { className: ["text-4xl font-bold leading-tight tracking-tight text-foreground sm:text-5xl", split ? "" : "max-w-3xl"].join(" "), children: title }),
|
|
9309
|
+
description != null && /* @__PURE__ */ jsx("p", { className: ["text-lg leading-relaxed text-foreground-secondary", split ? "max-w-xl" : "max-w-2xl"].join(" "), children: description }),
|
|
9310
|
+
actions != null && /* @__PURE__ */ jsx("div", { className: ["mt-2 flex flex-wrap gap-3", split ? "justify-start" : "justify-center"].join(" "), children: actions })
|
|
9311
|
+
] });
|
|
9312
|
+
return /* @__PURE__ */ jsx(
|
|
9313
|
+
"section",
|
|
9314
|
+
{
|
|
9315
|
+
className: ["relative overflow-hidden rounded-2xl px-6 py-16 sm:px-10 sm:py-24", bgClass, className].filter(Boolean).join(" "),
|
|
9316
|
+
style: { ...background === "gradient" ? { backgroundImage: GRADIENT } : null, ...style },
|
|
9317
|
+
children: split ? /* @__PURE__ */ jsxs("div", { className: "mx-auto grid max-w-6xl items-center gap-10 lg:grid-cols-2", children: [
|
|
9318
|
+
copy,
|
|
9319
|
+
/* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-xl", children: media })
|
|
9320
|
+
] }) : /* @__PURE__ */ jsxs("div", { className: "mx-auto flex max-w-4xl flex-col items-center", children: [
|
|
9321
|
+
copy,
|
|
9322
|
+
media != null && /* @__PURE__ */ jsx("div", { className: "mt-12 w-full overflow-hidden rounded-xl", children: media })
|
|
9323
|
+
] })
|
|
9324
|
+
}
|
|
9325
|
+
);
|
|
9326
|
+
}
|
|
9327
|
+
var COLS = {
|
|
9328
|
+
2: "sm:grid-cols-2",
|
|
9329
|
+
3: "sm:grid-cols-2 lg:grid-cols-3",
|
|
9330
|
+
4: "sm:grid-cols-2 lg:grid-cols-4"
|
|
9331
|
+
};
|
|
9332
|
+
function FeatureGrid({
|
|
9333
|
+
features,
|
|
9334
|
+
eyebrow,
|
|
9335
|
+
title,
|
|
9336
|
+
description,
|
|
9337
|
+
columns = 3,
|
|
9338
|
+
centeredHeader = true,
|
|
9339
|
+
className = "",
|
|
9340
|
+
style
|
|
9341
|
+
}) {
|
|
9342
|
+
const hasHeader = eyebrow != null || title != null || description != null;
|
|
9343
|
+
return /* @__PURE__ */ jsxs("section", { className: ["px-2", className].filter(Boolean).join(" "), style, children: [
|
|
9344
|
+
hasHeader && /* @__PURE__ */ jsxs("header", { className: ["mb-10 flex flex-col gap-3", centeredHeader ? "items-center text-center" : "items-start text-left"].join(" "), children: [
|
|
9345
|
+
eyebrow != null && /* @__PURE__ */ jsx("div", { className: "text-xs font-semibold uppercase tracking-wide text-accent", children: eyebrow }),
|
|
9346
|
+
title != null && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight text-foreground", children: title }),
|
|
9347
|
+
description != null && /* @__PURE__ */ jsx("p", { className: "max-w-2xl text-base leading-relaxed text-foreground-secondary", children: description })
|
|
9348
|
+
] }),
|
|
9349
|
+
/* @__PURE__ */ jsx("div", { className: ["grid grid-cols-1 gap-6", COLS[columns]].join(" "), children: features.map((f, i) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 rounded-xl border border-border bg-surface p-5", children: [
|
|
9350
|
+
f.icon != null && /* @__PURE__ */ jsx(
|
|
9351
|
+
"span",
|
|
9352
|
+
{
|
|
9353
|
+
className: "flex h-10 w-10 items-center justify-center rounded-lg text-accent",
|
|
9354
|
+
style: { backgroundColor: "color-mix(in oklab, var(--color-accent) 12%, var(--color-surface))" },
|
|
9355
|
+
children: f.icon
|
|
9356
|
+
}
|
|
9357
|
+
),
|
|
9358
|
+
/* @__PURE__ */ jsx("h3", { className: "text-base font-semibold text-foreground", children: f.title }),
|
|
9359
|
+
f.description != null && /* @__PURE__ */ jsx("p", { className: "text-sm leading-relaxed text-foreground-secondary", children: f.description })
|
|
9360
|
+
] }, f.key ?? i)) })
|
|
9361
|
+
] });
|
|
9362
|
+
}
|
|
9363
|
+
var Check3 = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, "aria-hidden": "true", className: "mt-0.5 h-4 w-4 flex-shrink-0 text-accent", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M20 6 9 17l-5-5" }) });
|
|
9364
|
+
function PricingPlans({ plans, eyebrow, title, description, className = "", style }) {
|
|
9365
|
+
const hasHeader = eyebrow != null || title != null || description != null;
|
|
9366
|
+
return /* @__PURE__ */ jsxs("section", { className: ["px-2", className].filter(Boolean).join(" "), style, children: [
|
|
9367
|
+
hasHeader && /* @__PURE__ */ jsxs("header", { className: "mb-10 flex flex-col items-center gap-3 text-center", children: [
|
|
9368
|
+
eyebrow != null && /* @__PURE__ */ jsx("div", { className: "text-xs font-semibold uppercase tracking-wide text-accent", children: eyebrow }),
|
|
9369
|
+
title != null && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight text-foreground", children: title }),
|
|
9370
|
+
description != null && /* @__PURE__ */ jsx("p", { className: "max-w-2xl text-base leading-relaxed text-foreground-secondary", children: description })
|
|
9371
|
+
] }),
|
|
9372
|
+
/* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 items-stretch gap-6 md:grid-cols-2 lg:grid-cols-3", children: plans.map((p, i) => /* @__PURE__ */ jsxs(
|
|
9373
|
+
"div",
|
|
9374
|
+
{
|
|
9375
|
+
className: [
|
|
9376
|
+
"relative flex flex-col rounded-2xl border bg-surface p-6",
|
|
9377
|
+
p.highlighted ? "border-accent shadow-lg lg:-my-2 lg:py-8" : "border-border"
|
|
9378
|
+
].join(" "),
|
|
9379
|
+
children: [
|
|
9380
|
+
p.highlighted && p.badge != null && /* @__PURE__ */ jsx("span", { className: "absolute -top-3 left-1/2 -translate-x-1/2 rounded-full bg-accent px-3 py-0.5 text-xs font-semibold text-accent-fg shadow-sm", children: p.badge }),
|
|
9381
|
+
/* @__PURE__ */ jsx("div", { className: "text-sm font-semibold uppercase tracking-wide text-foreground-muted", children: p.name }),
|
|
9382
|
+
/* @__PURE__ */ jsxs("div", { className: "mt-3 flex items-baseline gap-1", children: [
|
|
9383
|
+
/* @__PURE__ */ jsx("span", { className: "text-4xl font-bold tracking-tight text-foreground", children: p.price }),
|
|
9384
|
+
p.period != null && /* @__PURE__ */ jsx("span", { className: "text-sm text-foreground-muted", children: p.period })
|
|
9385
|
+
] }),
|
|
9386
|
+
p.description != null && /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm leading-relaxed text-foreground-secondary", children: p.description }),
|
|
9387
|
+
/* @__PURE__ */ jsx("ul", { className: "mt-6 flex flex-1 flex-col gap-2.5", children: p.features.map((f, fi) => /* @__PURE__ */ jsxs("li", { className: "flex gap-2 text-sm text-foreground-secondary", children: [
|
|
9388
|
+
/* @__PURE__ */ jsx(Check3, {}),
|
|
9389
|
+
/* @__PURE__ */ jsx("span", { children: f })
|
|
9390
|
+
] }, fi)) }),
|
|
9391
|
+
/* @__PURE__ */ jsx("div", { className: "mt-6", children: /* @__PURE__ */ jsx(
|
|
9392
|
+
Button_default,
|
|
9393
|
+
{
|
|
9394
|
+
content: p.cta.label,
|
|
9395
|
+
variant: p.highlighted ? "primary" : "outline",
|
|
9396
|
+
onClick: p.cta.onClick,
|
|
9397
|
+
style: { width: "100%" }
|
|
9398
|
+
}
|
|
9399
|
+
) })
|
|
9400
|
+
]
|
|
9401
|
+
},
|
|
9402
|
+
p.key ?? i
|
|
9403
|
+
)) })
|
|
9404
|
+
] });
|
|
9405
|
+
}
|
|
9406
|
+
var COLS2 = {
|
|
9407
|
+
1: "mx-auto max-w-2xl",
|
|
9408
|
+
2: "sm:grid-cols-2",
|
|
9409
|
+
3: "sm:grid-cols-2 lg:grid-cols-3"
|
|
9410
|
+
};
|
|
9411
|
+
var initials2 = (name) => typeof name === "string" ? name.trim().split(/\s+/).slice(0, 2).map((w) => w[0]?.toUpperCase() ?? "").join("") || void 0 : void 0;
|
|
9412
|
+
function Stars({ value }) {
|
|
9413
|
+
return /* @__PURE__ */ jsx("div", { className: "flex gap-0.5", "aria-label": `${value} out of 5`, children: Array.from({ length: 5 }, (_, i) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", className: `h-4 w-4 ${i < value ? "text-status-warning" : "text-border-strong"}`, fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M12 2l2.9 6.3 6.9.7-5.1 4.6 1.4 6.8L12 17.8 5.9 20.4l1.4-6.8L2.2 9l6.9-.7L12 2z" }) }, i)) });
|
|
9414
|
+
}
|
|
9415
|
+
function Testimonials({ testimonials, eyebrow, title, description, columns = 3, className = "", style }) {
|
|
9416
|
+
const hasHeader = eyebrow != null || title != null || description != null;
|
|
9417
|
+
return /* @__PURE__ */ jsxs("section", { className: ["px-2", className].filter(Boolean).join(" "), style, children: [
|
|
9418
|
+
hasHeader && /* @__PURE__ */ jsxs("header", { className: "mb-10 flex flex-col items-center gap-3 text-center", children: [
|
|
9419
|
+
eyebrow != null && /* @__PURE__ */ jsx("div", { className: "text-xs font-semibold uppercase tracking-wide text-accent", children: eyebrow }),
|
|
9420
|
+
title != null && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight text-foreground", children: title }),
|
|
9421
|
+
description != null && /* @__PURE__ */ jsx("p", { className: "max-w-2xl text-base leading-relaxed text-foreground-secondary", children: description })
|
|
9422
|
+
] }),
|
|
9423
|
+
/* @__PURE__ */ jsx("div", { className: ["grid grid-cols-1 gap-6", COLS2[columns]].join(" "), children: testimonials.map((tm, i) => /* @__PURE__ */ jsxs("figure", { className: "flex flex-col gap-4 rounded-xl border border-border bg-surface p-6", children: [
|
|
9424
|
+
tm.rating != null && /* @__PURE__ */ jsx(Stars, { value: tm.rating }),
|
|
9425
|
+
/* @__PURE__ */ jsxs("blockquote", { className: "flex-1 text-sm leading-relaxed text-foreground", children: [
|
|
9426
|
+
"\u201C",
|
|
9427
|
+
tm.quote,
|
|
9428
|
+
"\u201D"
|
|
9429
|
+
] }),
|
|
9430
|
+
/* @__PURE__ */ jsxs("figcaption", { className: "flex items-center gap-3", children: [
|
|
9431
|
+
/* @__PURE__ */ jsx(Avatar, { src: tm.avatar, alt: typeof tm.author === "string" ? tm.author : "Reviewer", fallback: initials2(tm.author), size: "sm" }),
|
|
9432
|
+
/* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
|
|
9433
|
+
/* @__PURE__ */ jsx("div", { className: "truncate text-sm font-semibold text-foreground", children: tm.author }),
|
|
9434
|
+
tm.role != null && /* @__PURE__ */ jsx("div", { className: "truncate text-xs text-foreground-muted", children: tm.role })
|
|
9435
|
+
] })
|
|
9436
|
+
] })
|
|
9437
|
+
] }, tm.key ?? i)) })
|
|
9438
|
+
] });
|
|
9439
|
+
}
|
|
9292
9440
|
|
|
9293
|
-
export { Accordion_default as Accordion, AppShell, AutoComplete, Avatar, Badge, Box, Breadcrumbs, Button_default as Button, CARD_BRANDS, Card_default as Card, CardCarousel, Cart, CartButton, CartProvider, Catalog, CatalogCarousel, CatalogGrid, Chat, Checkbox, Checkout, ColorPicker, ContextMenu, CreditCardForm, DateRangePicker, Drawer, Dropdown, EmptyCart, FAB, FadingBase, Field, FieldHelpIcon, FieldLabel, FileInput, Flex, Form, FormContext, FormField, FormStore, Grid2 as Grid, GridCard, icons_default as Icon, IconButton, Kbd, List2 as List, LoadingSpinner, LogoutTimer, MegaMenu_default as MegaMenu, MenuButton, Modal, NotificationProvider, NumberInput, OpaqueGridCard, OtpInput, Password, PopConfirm, Portal, RadioGroup, Rating, ScalableContainer, Scheduler, SearchInput_default as SearchInput, SecureLayout, SegmentedControl, Sidebar, SkeletonBox, SkeletonCard, SkeletonCircle, SkeletonText, Slider, Statistic, Stepper, Switch, Table, Tabs_default as Tabs, TagsInput, DatePicker as Temporal, TextArea, TextInput, ThemeProvider, ThemeSwitch, TimePicker, Timeline, Tooltip, TooltipProvider, TopBar, Tree, TreeSelect, Typography, Wizard, cardNumberError, cvvError, detectBrand, expiryError, fieldShell, formatCardNumber, formatExpiry, isRequired, luhnValid, onlyDigits, patterns, runFieldRules, useBreakpoint, useCart, useFieldArray, useForm, useFormField, useFormStore, useJwt, useLocalStorage, useMediaQuery, useNotification };
|
|
9441
|
+
export { Accordion_default as Accordion, AppShell, AutoComplete, Avatar, Badge, Box, Breadcrumbs, Button_default as Button, CARD_BRANDS, Card_default as Card, CardCarousel, Cart, CartButton, CartProvider, Catalog, CatalogCarousel, CatalogGrid, Chat, Checkbox, Checkout, ColorPicker, ContextMenu, CreditCardForm, DateRangePicker, Drawer, Dropdown, EmptyCart, FAB, FadingBase, FeatureGrid, Field, FieldHelpIcon, FieldLabel, FileInput, Flex, Form, FormContext, FormField, FormStore, Grid2 as Grid, GridCard, icons_default as Icon, IconButton, Jumbotron, Kbd, List2 as List, LoadingSpinner, LogoutTimer, MegaMenu_default as MegaMenu, MenuButton, Modal, NotificationProvider, NumberInput, OpaqueGridCard, OtpInput, Password, PopConfirm, Portal, PricingPlans, RadioGroup, Rating, ScalableContainer, Scheduler, SearchInput_default as SearchInput, SecureLayout, SegmentedControl, Sidebar, SkeletonBox, SkeletonCard, SkeletonCircle, SkeletonText, Slider, Statistic, Stepper, Switch, Table, Tabs_default as Tabs, TagsInput, DatePicker as Temporal, Testimonials, TextArea, TextInput, ThemeProvider, ThemeSwitch, TimePicker, Timeline, Tooltip, TooltipProvider, TopBar, Tree, TreeSelect, Typography, Wizard, cardNumberError, cvvError, detectBrand, expiryError, fieldShell, formatCardNumber, formatExpiry, isRequired, luhnValid, onlyDigits, patterns, runFieldRules, useBreakpoint, useCart, useFieldArray, useForm, useFormField, useFormStore, useJwt, useLocalStorage, useMediaQuery, useNotification };
|
|
9294
9442
|
//# sourceMappingURL=index.js.map
|
|
9295
9443
|
//# sourceMappingURL=index.js.map
|