@blinkdotnew/mobile-ui 2.0.0-alpha.17 → 2.0.0-alpha.18
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.d.mts +61 -1
- package/dist/index.d.ts +61 -1
- package/dist/index.js +179 -0
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +175 -0
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -14,6 +14,66 @@ declare module 'tamagui' {
|
|
|
14
14
|
}
|
|
15
15
|
}
|
|
16
16
|
|
|
17
|
+
/**
|
|
18
|
+
* Maps the 16 Blink platform design themes (from auto-engineer src/types/color-theme.ts)
|
|
19
|
+
* to Tamagui-compatible theme palettes via createThemes.
|
|
20
|
+
*
|
|
21
|
+
* Usage:
|
|
22
|
+
* import { createBlinkThemes, BLINK_DESIGN_THEMES } from '@blinkdotnew/mobile-ui'
|
|
23
|
+
* const themes = createBlinkThemes('ocean-teal')
|
|
24
|
+
* const config = createTamagui({ ...tamaguiDefaultConfig, themes })
|
|
25
|
+
*/
|
|
26
|
+
type BlinkDesignThemeId = 'mono' | 'ocean-teal' | 'warm-amber' | 'rose-coral' | 'lavender' | 'glacier' | 'forest' | 'obsidian' | 'solar' | 'orchid' | 'indigo' | 'cosmic-night' | 'soft-pop' | 'neo-brutalism' | 'vintage-paper' | 'modern-minimal' | 'bubblegum';
|
|
27
|
+
interface BlinkColorPalette {
|
|
28
|
+
primary: string;
|
|
29
|
+
primary_foreground: string;
|
|
30
|
+
secondary: string;
|
|
31
|
+
secondary_foreground: string;
|
|
32
|
+
accent: string;
|
|
33
|
+
background: string;
|
|
34
|
+
dark_mode: string;
|
|
35
|
+
}
|
|
36
|
+
interface BlinkDesignTheme {
|
|
37
|
+
id: BlinkDesignThemeId;
|
|
38
|
+
name: string;
|
|
39
|
+
description: string;
|
|
40
|
+
palette: BlinkColorPalette;
|
|
41
|
+
}
|
|
42
|
+
declare const BLINK_DESIGN_THEMES: Record<BlinkDesignThemeId, BlinkDesignTheme>;
|
|
43
|
+
/**
|
|
44
|
+
* Generates Tamagui-compatible theme config for createThemes from a platform design theme.
|
|
45
|
+
*
|
|
46
|
+
* Usage with createThemes:
|
|
47
|
+
* ```ts
|
|
48
|
+
* import { createThemes } from '@tamagui/theme-builder'
|
|
49
|
+
* import { getBlinkThemePalettes } from '@blinkdotnew/mobile-ui'
|
|
50
|
+
*
|
|
51
|
+
* const palettes = getBlinkThemePalettes('ocean-teal')
|
|
52
|
+
* const themes = createThemes({
|
|
53
|
+
* base: { palette: palettes.base },
|
|
54
|
+
* accent: { palette: palettes.accent },
|
|
55
|
+
* })
|
|
56
|
+
* ```
|
|
57
|
+
*/
|
|
58
|
+
declare function getBlinkThemePalettes(themeId: BlinkDesignThemeId): {
|
|
59
|
+
base: {
|
|
60
|
+
light: string[];
|
|
61
|
+
dark: string[];
|
|
62
|
+
};
|
|
63
|
+
accent: {
|
|
64
|
+
light: string[];
|
|
65
|
+
dark: string[];
|
|
66
|
+
};
|
|
67
|
+
};
|
|
68
|
+
/**
|
|
69
|
+
* All available design theme IDs for enumeration.
|
|
70
|
+
*/
|
|
71
|
+
declare const BLINK_DESIGN_THEME_IDS: BlinkDesignThemeId[];
|
|
72
|
+
/**
|
|
73
|
+
* Get theme metadata (name, description) for UI pickers.
|
|
74
|
+
*/
|
|
75
|
+
declare function getBlinkDesignTheme(themeId: BlinkDesignThemeId): BlinkDesignTheme | undefined;
|
|
76
|
+
|
|
17
77
|
declare const Button: tamagui.TamaguiComponent<_tamagui_core.TamaDefer, tamagui.TamaguiElement, _tamagui_core.RNTamaguiViewNonStyleProps & tamagui.TextContextStyles & {
|
|
18
78
|
textProps?: Partial<tamagui.SizableTextProps>;
|
|
19
79
|
noTextWrap?: boolean;
|
|
@@ -1056,4 +1116,4 @@ type FinanceDashboardProps = {
|
|
|
1056
1116
|
};
|
|
1057
1117
|
declare function FinanceDashboard({ title, balanceLabel, balance, rangeLabel, metrics, quickActions, sections, chartSlot, topRight, }: FinanceDashboardProps): JSX.Element;
|
|
1058
1118
|
|
|
1059
|
-
export { ActionSheet, type ActionSheetItem, type ActionSheetProps, AppHeader, type AppHeaderProps, type AppHeaderVariant, AppleLogo, type AuthProvider, type AuthProviderBrand, AvatarGroup, type AvatarGroupProps, Badge, type BadgeProps, BlinkAccordion, type BlinkAccordionItem, type BlinkAccordionProps, Avatar as BlinkAvatar, type AvatarProps as BlinkAvatarProps, Button as BlinkButton, type ButtonProps as BlinkButtonProps, Card as BlinkCard, type CardProps as BlinkCardProps, type BlinkConfig, BlinkDialog, type BlinkDialogProps, Input as BlinkInput, type InputProps as BlinkInputProps, BlinkPopover, type BlinkPopoverProps, BlinkSelect, type BlinkSelectItem, type BlinkSelectProps, type BlinkTabItem, BlinkTabs, type BlinkTabsProps, BlinkText, type BlinkTextProps, type BlinkToastContextType, type BlinkToastData, type BlinkToastOptions, BlinkToastProvider, type BlinkToastVariant, BlinkToggleGroup, type BlinkToggleGroupProps, type BlinkToggleOption, BlinkTooltip, BottomSheet, type BottomSheetProps, Carousel, type CarouselProps, ChatBubble, type ChatBubbleProps, type ChatMessage, Chip, ChipGroup, type ChipGroupProps, type ChipProps, ConfirmDialog, type ConfirmDialogProps, Container, type ContainerProps, CountdownBanner, type CountdownBannerProps, DataTable, type DataTableColumn, type DataTableProps, DatePicker, type DatePickerProps, DialogProvider, Divider, type DividerProps, EmptyState, type EmptyStateProps, EventCard, type EventCardProps, type FABProps, FinanceDashboard, type FinanceDashboardProps, type FinanceDashboardSection, type FinanceMetric, type FinanceQuickAction, FloatingActionButton, FormField, type FormFieldProps, GitHubLogo, GlassCard, type GlassCardProps, GoogleLogo, Grid, type GridProps, ICONS, Icon, type IconName, type IconProps, Image, type ImmersiveMediaAction, ImmersiveMediaScreen, type ImmersiveMediaScreenProps, KeyboardStickyFooter, type KeyboardStickyFooterProps, ListItem, type ListItemProps, LoginScreen, type LoginScreenProps, type LoginScreenVariant, MediaCard, type MediaCardProps, MicrosoftLogo, NotificationBanner, type NotificationBannerProps, OTPInput, type OTPInputProps, OnboardingCarousel, type OnboardingCarouselProps, type OnboardingStep, type OnboardingVariant, PageContainer, PageMainContainer, PasswordInput, type PasswordInputProps, type PaywallComparisonRow, type PaywallCreator, type PaywallFeature, PaywallScreen, type PaywallScreenProps, type PaywallTestimonial, type PaywallVariant, type PlanOption, type PreferenceItem, type PreferenceSection, Pressable, type PricingPlan, PricingTable, type PricingTableProps, ProductCard, type ProductCardProps, ProfileHeader, type ProfileHeaderProps, ProgressSteps, type ProgressStepsProps, PullToRefresh, type PullToRefreshProps, SafeArea, type SafeAreaProps, ScreenLayout, SearchBar, type SearchBarProps, Section, type SectionProps, SepHeading, type SettingsItem, SettingsScreen, type SettingsScreenProps, type SettingsSection, Skeleton, type SkeletonProps, StatusBadge, StepPageLayout, type StepPageProps, SubHeading, type SwipeAction, type SwipeCardItem, SwipeCards, type SwipeCardsProps, SwipeableRow, type SwipeableRowProps, TabBar, type TabBarItem, type TabBarProps, TestimonialCard, type TestimonialCardProps, type TooltipProps, UserPreferences, type UserPreferencesProps, blinkConfig, dialogConfirm, showError, toast, useBlinkToast };
|
|
1119
|
+
export { ActionSheet, type ActionSheetItem, type ActionSheetProps, AppHeader, type AppHeaderProps, type AppHeaderVariant, AppleLogo, type AuthProvider, type AuthProviderBrand, AvatarGroup, type AvatarGroupProps, BLINK_DESIGN_THEMES, BLINK_DESIGN_THEME_IDS, Badge, type BadgeProps, BlinkAccordion, type BlinkAccordionItem, type BlinkAccordionProps, Avatar as BlinkAvatar, type AvatarProps as BlinkAvatarProps, Button as BlinkButton, type ButtonProps as BlinkButtonProps, Card as BlinkCard, type CardProps as BlinkCardProps, type BlinkColorPalette, type BlinkConfig, type BlinkDesignTheme, type BlinkDesignThemeId, BlinkDialog, type BlinkDialogProps, Input as BlinkInput, type InputProps as BlinkInputProps, BlinkPopover, type BlinkPopoverProps, BlinkSelect, type BlinkSelectItem, type BlinkSelectProps, type BlinkTabItem, BlinkTabs, type BlinkTabsProps, BlinkText, type BlinkTextProps, type BlinkToastContextType, type BlinkToastData, type BlinkToastOptions, BlinkToastProvider, type BlinkToastVariant, BlinkToggleGroup, type BlinkToggleGroupProps, type BlinkToggleOption, BlinkTooltip, BottomSheet, type BottomSheetProps, Carousel, type CarouselProps, ChatBubble, type ChatBubbleProps, type ChatMessage, Chip, ChipGroup, type ChipGroupProps, type ChipProps, ConfirmDialog, type ConfirmDialogProps, Container, type ContainerProps, CountdownBanner, type CountdownBannerProps, DataTable, type DataTableColumn, type DataTableProps, DatePicker, type DatePickerProps, DialogProvider, Divider, type DividerProps, EmptyState, type EmptyStateProps, EventCard, type EventCardProps, type FABProps, FinanceDashboard, type FinanceDashboardProps, type FinanceDashboardSection, type FinanceMetric, type FinanceQuickAction, FloatingActionButton, FormField, type FormFieldProps, GitHubLogo, GlassCard, type GlassCardProps, GoogleLogo, Grid, type GridProps, ICONS, Icon, type IconName, type IconProps, Image, type ImmersiveMediaAction, ImmersiveMediaScreen, type ImmersiveMediaScreenProps, KeyboardStickyFooter, type KeyboardStickyFooterProps, ListItem, type ListItemProps, LoginScreen, type LoginScreenProps, type LoginScreenVariant, MediaCard, type MediaCardProps, MicrosoftLogo, NotificationBanner, type NotificationBannerProps, OTPInput, type OTPInputProps, OnboardingCarousel, type OnboardingCarouselProps, type OnboardingStep, type OnboardingVariant, PageContainer, PageMainContainer, PasswordInput, type PasswordInputProps, type PaywallComparisonRow, type PaywallCreator, type PaywallFeature, PaywallScreen, type PaywallScreenProps, type PaywallTestimonial, type PaywallVariant, type PlanOption, type PreferenceItem, type PreferenceSection, Pressable, type PricingPlan, PricingTable, type PricingTableProps, ProductCard, type ProductCardProps, ProfileHeader, type ProfileHeaderProps, ProgressSteps, type ProgressStepsProps, PullToRefresh, type PullToRefreshProps, SafeArea, type SafeAreaProps, ScreenLayout, SearchBar, type SearchBarProps, Section, type SectionProps, SepHeading, type SettingsItem, SettingsScreen, type SettingsScreenProps, type SettingsSection, Skeleton, type SkeletonProps, StatusBadge, StepPageLayout, type StepPageProps, SubHeading, type SwipeAction, type SwipeCardItem, SwipeCards, type SwipeCardsProps, SwipeableRow, type SwipeableRowProps, TabBar, type TabBarItem, type TabBarProps, TestimonialCard, type TestimonialCardProps, type TooltipProps, UserPreferences, type UserPreferencesProps, blinkConfig, dialogConfirm, getBlinkDesignTheme, getBlinkThemePalettes, showError, toast, useBlinkToast };
|
package/dist/index.d.ts
CHANGED
|
@@ -14,6 +14,66 @@ declare module 'tamagui' {
|
|
|
14
14
|
}
|
|
15
15
|
}
|
|
16
16
|
|
|
17
|
+
/**
|
|
18
|
+
* Maps the 16 Blink platform design themes (from auto-engineer src/types/color-theme.ts)
|
|
19
|
+
* to Tamagui-compatible theme palettes via createThemes.
|
|
20
|
+
*
|
|
21
|
+
* Usage:
|
|
22
|
+
* import { createBlinkThemes, BLINK_DESIGN_THEMES } from '@blinkdotnew/mobile-ui'
|
|
23
|
+
* const themes = createBlinkThemes('ocean-teal')
|
|
24
|
+
* const config = createTamagui({ ...tamaguiDefaultConfig, themes })
|
|
25
|
+
*/
|
|
26
|
+
type BlinkDesignThemeId = 'mono' | 'ocean-teal' | 'warm-amber' | 'rose-coral' | 'lavender' | 'glacier' | 'forest' | 'obsidian' | 'solar' | 'orchid' | 'indigo' | 'cosmic-night' | 'soft-pop' | 'neo-brutalism' | 'vintage-paper' | 'modern-minimal' | 'bubblegum';
|
|
27
|
+
interface BlinkColorPalette {
|
|
28
|
+
primary: string;
|
|
29
|
+
primary_foreground: string;
|
|
30
|
+
secondary: string;
|
|
31
|
+
secondary_foreground: string;
|
|
32
|
+
accent: string;
|
|
33
|
+
background: string;
|
|
34
|
+
dark_mode: string;
|
|
35
|
+
}
|
|
36
|
+
interface BlinkDesignTheme {
|
|
37
|
+
id: BlinkDesignThemeId;
|
|
38
|
+
name: string;
|
|
39
|
+
description: string;
|
|
40
|
+
palette: BlinkColorPalette;
|
|
41
|
+
}
|
|
42
|
+
declare const BLINK_DESIGN_THEMES: Record<BlinkDesignThemeId, BlinkDesignTheme>;
|
|
43
|
+
/**
|
|
44
|
+
* Generates Tamagui-compatible theme config for createThemes from a platform design theme.
|
|
45
|
+
*
|
|
46
|
+
* Usage with createThemes:
|
|
47
|
+
* ```ts
|
|
48
|
+
* import { createThemes } from '@tamagui/theme-builder'
|
|
49
|
+
* import { getBlinkThemePalettes } from '@blinkdotnew/mobile-ui'
|
|
50
|
+
*
|
|
51
|
+
* const palettes = getBlinkThemePalettes('ocean-teal')
|
|
52
|
+
* const themes = createThemes({
|
|
53
|
+
* base: { palette: palettes.base },
|
|
54
|
+
* accent: { palette: palettes.accent },
|
|
55
|
+
* })
|
|
56
|
+
* ```
|
|
57
|
+
*/
|
|
58
|
+
declare function getBlinkThemePalettes(themeId: BlinkDesignThemeId): {
|
|
59
|
+
base: {
|
|
60
|
+
light: string[];
|
|
61
|
+
dark: string[];
|
|
62
|
+
};
|
|
63
|
+
accent: {
|
|
64
|
+
light: string[];
|
|
65
|
+
dark: string[];
|
|
66
|
+
};
|
|
67
|
+
};
|
|
68
|
+
/**
|
|
69
|
+
* All available design theme IDs for enumeration.
|
|
70
|
+
*/
|
|
71
|
+
declare const BLINK_DESIGN_THEME_IDS: BlinkDesignThemeId[];
|
|
72
|
+
/**
|
|
73
|
+
* Get theme metadata (name, description) for UI pickers.
|
|
74
|
+
*/
|
|
75
|
+
declare function getBlinkDesignTheme(themeId: BlinkDesignThemeId): BlinkDesignTheme | undefined;
|
|
76
|
+
|
|
17
77
|
declare const Button: tamagui.TamaguiComponent<_tamagui_core.TamaDefer, tamagui.TamaguiElement, _tamagui_core.RNTamaguiViewNonStyleProps & tamagui.TextContextStyles & {
|
|
18
78
|
textProps?: Partial<tamagui.SizableTextProps>;
|
|
19
79
|
noTextWrap?: boolean;
|
|
@@ -1056,4 +1116,4 @@ type FinanceDashboardProps = {
|
|
|
1056
1116
|
};
|
|
1057
1117
|
declare function FinanceDashboard({ title, balanceLabel, balance, rangeLabel, metrics, quickActions, sections, chartSlot, topRight, }: FinanceDashboardProps): JSX.Element;
|
|
1058
1118
|
|
|
1059
|
-
export { ActionSheet, type ActionSheetItem, type ActionSheetProps, AppHeader, type AppHeaderProps, type AppHeaderVariant, AppleLogo, type AuthProvider, type AuthProviderBrand, AvatarGroup, type AvatarGroupProps, Badge, type BadgeProps, BlinkAccordion, type BlinkAccordionItem, type BlinkAccordionProps, Avatar as BlinkAvatar, type AvatarProps as BlinkAvatarProps, Button as BlinkButton, type ButtonProps as BlinkButtonProps, Card as BlinkCard, type CardProps as BlinkCardProps, type BlinkConfig, BlinkDialog, type BlinkDialogProps, Input as BlinkInput, type InputProps as BlinkInputProps, BlinkPopover, type BlinkPopoverProps, BlinkSelect, type BlinkSelectItem, type BlinkSelectProps, type BlinkTabItem, BlinkTabs, type BlinkTabsProps, BlinkText, type BlinkTextProps, type BlinkToastContextType, type BlinkToastData, type BlinkToastOptions, BlinkToastProvider, type BlinkToastVariant, BlinkToggleGroup, type BlinkToggleGroupProps, type BlinkToggleOption, BlinkTooltip, BottomSheet, type BottomSheetProps, Carousel, type CarouselProps, ChatBubble, type ChatBubbleProps, type ChatMessage, Chip, ChipGroup, type ChipGroupProps, type ChipProps, ConfirmDialog, type ConfirmDialogProps, Container, type ContainerProps, CountdownBanner, type CountdownBannerProps, DataTable, type DataTableColumn, type DataTableProps, DatePicker, type DatePickerProps, DialogProvider, Divider, type DividerProps, EmptyState, type EmptyStateProps, EventCard, type EventCardProps, type FABProps, FinanceDashboard, type FinanceDashboardProps, type FinanceDashboardSection, type FinanceMetric, type FinanceQuickAction, FloatingActionButton, FormField, type FormFieldProps, GitHubLogo, GlassCard, type GlassCardProps, GoogleLogo, Grid, type GridProps, ICONS, Icon, type IconName, type IconProps, Image, type ImmersiveMediaAction, ImmersiveMediaScreen, type ImmersiveMediaScreenProps, KeyboardStickyFooter, type KeyboardStickyFooterProps, ListItem, type ListItemProps, LoginScreen, type LoginScreenProps, type LoginScreenVariant, MediaCard, type MediaCardProps, MicrosoftLogo, NotificationBanner, type NotificationBannerProps, OTPInput, type OTPInputProps, OnboardingCarousel, type OnboardingCarouselProps, type OnboardingStep, type OnboardingVariant, PageContainer, PageMainContainer, PasswordInput, type PasswordInputProps, type PaywallComparisonRow, type PaywallCreator, type PaywallFeature, PaywallScreen, type PaywallScreenProps, type PaywallTestimonial, type PaywallVariant, type PlanOption, type PreferenceItem, type PreferenceSection, Pressable, type PricingPlan, PricingTable, type PricingTableProps, ProductCard, type ProductCardProps, ProfileHeader, type ProfileHeaderProps, ProgressSteps, type ProgressStepsProps, PullToRefresh, type PullToRefreshProps, SafeArea, type SafeAreaProps, ScreenLayout, SearchBar, type SearchBarProps, Section, type SectionProps, SepHeading, type SettingsItem, SettingsScreen, type SettingsScreenProps, type SettingsSection, Skeleton, type SkeletonProps, StatusBadge, StepPageLayout, type StepPageProps, SubHeading, type SwipeAction, type SwipeCardItem, SwipeCards, type SwipeCardsProps, SwipeableRow, type SwipeableRowProps, TabBar, type TabBarItem, type TabBarProps, TestimonialCard, type TestimonialCardProps, type TooltipProps, UserPreferences, type UserPreferencesProps, blinkConfig, dialogConfirm, showError, toast, useBlinkToast };
|
|
1119
|
+
export { ActionSheet, type ActionSheetItem, type ActionSheetProps, AppHeader, type AppHeaderProps, type AppHeaderVariant, AppleLogo, type AuthProvider, type AuthProviderBrand, AvatarGroup, type AvatarGroupProps, BLINK_DESIGN_THEMES, BLINK_DESIGN_THEME_IDS, Badge, type BadgeProps, BlinkAccordion, type BlinkAccordionItem, type BlinkAccordionProps, Avatar as BlinkAvatar, type AvatarProps as BlinkAvatarProps, Button as BlinkButton, type ButtonProps as BlinkButtonProps, Card as BlinkCard, type CardProps as BlinkCardProps, type BlinkColorPalette, type BlinkConfig, type BlinkDesignTheme, type BlinkDesignThemeId, BlinkDialog, type BlinkDialogProps, Input as BlinkInput, type InputProps as BlinkInputProps, BlinkPopover, type BlinkPopoverProps, BlinkSelect, type BlinkSelectItem, type BlinkSelectProps, type BlinkTabItem, BlinkTabs, type BlinkTabsProps, BlinkText, type BlinkTextProps, type BlinkToastContextType, type BlinkToastData, type BlinkToastOptions, BlinkToastProvider, type BlinkToastVariant, BlinkToggleGroup, type BlinkToggleGroupProps, type BlinkToggleOption, BlinkTooltip, BottomSheet, type BottomSheetProps, Carousel, type CarouselProps, ChatBubble, type ChatBubbleProps, type ChatMessage, Chip, ChipGroup, type ChipGroupProps, type ChipProps, ConfirmDialog, type ConfirmDialogProps, Container, type ContainerProps, CountdownBanner, type CountdownBannerProps, DataTable, type DataTableColumn, type DataTableProps, DatePicker, type DatePickerProps, DialogProvider, Divider, type DividerProps, EmptyState, type EmptyStateProps, EventCard, type EventCardProps, type FABProps, FinanceDashboard, type FinanceDashboardProps, type FinanceDashboardSection, type FinanceMetric, type FinanceQuickAction, FloatingActionButton, FormField, type FormFieldProps, GitHubLogo, GlassCard, type GlassCardProps, GoogleLogo, Grid, type GridProps, ICONS, Icon, type IconName, type IconProps, Image, type ImmersiveMediaAction, ImmersiveMediaScreen, type ImmersiveMediaScreenProps, KeyboardStickyFooter, type KeyboardStickyFooterProps, ListItem, type ListItemProps, LoginScreen, type LoginScreenProps, type LoginScreenVariant, MediaCard, type MediaCardProps, MicrosoftLogo, NotificationBanner, type NotificationBannerProps, OTPInput, type OTPInputProps, OnboardingCarousel, type OnboardingCarouselProps, type OnboardingStep, type OnboardingVariant, PageContainer, PageMainContainer, PasswordInput, type PasswordInputProps, type PaywallComparisonRow, type PaywallCreator, type PaywallFeature, PaywallScreen, type PaywallScreenProps, type PaywallTestimonial, type PaywallVariant, type PlanOption, type PreferenceItem, type PreferenceSection, Pressable, type PricingPlan, PricingTable, type PricingTableProps, ProductCard, type ProductCardProps, ProfileHeader, type ProfileHeaderProps, ProgressSteps, type ProgressStepsProps, PullToRefresh, type PullToRefreshProps, SafeArea, type SafeAreaProps, ScreenLayout, SearchBar, type SearchBarProps, Section, type SectionProps, SepHeading, type SettingsItem, SettingsScreen, type SettingsScreenProps, type SettingsSection, Skeleton, type SkeletonProps, StatusBadge, StepPageLayout, type StepPageProps, SubHeading, type SwipeAction, type SwipeCardItem, SwipeCards, type SwipeCardsProps, SwipeableRow, type SwipeableRowProps, TabBar, type TabBarItem, type TabBarProps, TestimonialCard, type TestimonialCardProps, type TooltipProps, UserPreferences, type UserPreferencesProps, blinkConfig, dialogConfirm, getBlinkDesignTheme, getBlinkThemePalettes, showError, toast, useBlinkToast };
|
package/dist/index.js
CHANGED
|
@@ -42,6 +42,8 @@ __export(index_exports, {
|
|
|
42
42
|
Aside: () => import_tamagui69.Aside,
|
|
43
43
|
Avatar: () => import_tamagui69.Avatar,
|
|
44
44
|
AvatarGroup: () => AvatarGroup,
|
|
45
|
+
BLINK_DESIGN_THEMES: () => BLINK_DESIGN_THEMES,
|
|
46
|
+
BLINK_DESIGN_THEME_IDS: () => BLINK_DESIGN_THEME_IDS,
|
|
45
47
|
Badge: () => Badge,
|
|
46
48
|
BlinkAccordion: () => BlinkAccordion,
|
|
47
49
|
BlinkAvatar: () => Avatar,
|
|
@@ -189,6 +191,8 @@ __export(index_exports, {
|
|
|
189
191
|
createTokens: () => import_tamagui69.createTokens,
|
|
190
192
|
createVariable: () => import_tamagui69.createVariable,
|
|
191
193
|
dialogConfirm: () => dialogConfirm,
|
|
194
|
+
getBlinkDesignTheme: () => getBlinkDesignTheme,
|
|
195
|
+
getBlinkThemePalettes: () => getBlinkThemePalettes,
|
|
192
196
|
getConfig: () => import_tamagui69.getConfig,
|
|
193
197
|
getToken: () => import_tamagui69.getToken,
|
|
194
198
|
getTokenValue: () => import_tamagui69.getTokenValue,
|
|
@@ -229,6 +233,177 @@ var blinkConfig = (0, import_tamagui.createTamagui)({
|
|
|
229
233
|
|
|
230
234
|
// src/index.ts
|
|
231
235
|
var import_v52 = require("@tamagui/config/v5");
|
|
236
|
+
|
|
237
|
+
// src/config/design-themes.ts
|
|
238
|
+
var BLINK_DESIGN_THEMES = {
|
|
239
|
+
"mono": {
|
|
240
|
+
id: "mono",
|
|
241
|
+
name: "Mono",
|
|
242
|
+
description: "Black/white neutral",
|
|
243
|
+
palette: { primary: "#18181B", primary_foreground: "#FAFAFA", secondary: "#F4F4F5", secondary_foreground: "#27272A", accent: "#3F3F46", background: "#FFFFFF", dark_mode: "#09090B" }
|
|
244
|
+
},
|
|
245
|
+
"ocean-teal": {
|
|
246
|
+
id: "ocean-teal",
|
|
247
|
+
name: "Ocean Teal",
|
|
248
|
+
description: "SaaS, fintech, healthcare",
|
|
249
|
+
palette: { primary: "#0D9488", primary_foreground: "#FFFFFF", secondary: "#F0FDFA", secondary_foreground: "#134E4A", accent: "#2DD4BF", background: "#FFFFFF", dark_mode: "#042F2E" }
|
|
250
|
+
},
|
|
251
|
+
"warm-amber": {
|
|
252
|
+
id: "warm-amber",
|
|
253
|
+
name: "Warm Amber",
|
|
254
|
+
description: "E-commerce, food, hospitality",
|
|
255
|
+
palette: { primary: "#D97706", primary_foreground: "#FFFFFF", secondary: "#FFFBEB", secondary_foreground: "#78350F", accent: "#FBBF24", background: "#FFFEF7", dark_mode: "#451A03" }
|
|
256
|
+
},
|
|
257
|
+
"rose-coral": {
|
|
258
|
+
id: "rose-coral",
|
|
259
|
+
name: "Rose Coral",
|
|
260
|
+
description: "Lifestyle, beauty, fashion",
|
|
261
|
+
palette: { primary: "#E11D48", primary_foreground: "#FFFFFF", secondary: "#FFF1F2", secondary_foreground: "#881337", accent: "#FB7185", background: "#FFFAFA", dark_mode: "#4C0519" }
|
|
262
|
+
},
|
|
263
|
+
"lavender": {
|
|
264
|
+
id: "lavender",
|
|
265
|
+
name: "Lavender",
|
|
266
|
+
description: "Creative, wellness, meditation",
|
|
267
|
+
palette: { primary: "#7C3AED", primary_foreground: "#FFFFFF", secondary: "#F5F3FF", secondary_foreground: "#4C1D95", accent: "#A78BFA", background: "#FEFEFF", dark_mode: "#2E1065" }
|
|
268
|
+
},
|
|
269
|
+
"glacier": {
|
|
270
|
+
id: "glacier",
|
|
271
|
+
name: "Glacier",
|
|
272
|
+
description: "Professional, corporate, analytics",
|
|
273
|
+
palette: { primary: "#0EA5E9", primary_foreground: "#FFFFFF", secondary: "#F0F9FF", secondary_foreground: "#0C4A6E", accent: "#38BDF8", background: "#FFFFFF", dark_mode: "#082F49" }
|
|
274
|
+
},
|
|
275
|
+
"forest": {
|
|
276
|
+
id: "forest",
|
|
277
|
+
name: "Forest",
|
|
278
|
+
description: "Sustainability, nature, outdoor",
|
|
279
|
+
palette: { primary: "#16A34A", primary_foreground: "#FFFFFF", secondary: "#F0FDF4", secondary_foreground: "#14532D", accent: "#4ADE80", background: "#FEFFFE", dark_mode: "#052E16" }
|
|
280
|
+
},
|
|
281
|
+
"obsidian": {
|
|
282
|
+
id: "obsidian",
|
|
283
|
+
name: "Obsidian",
|
|
284
|
+
description: "Developer tools, gaming, tech",
|
|
285
|
+
palette: { primary: "#475569", primary_foreground: "#FFFFFF", secondary: "#F1F5F9", secondary_foreground: "#1E293B", accent: "#64748B", background: "#FFFFFF", dark_mode: "#0F172A" }
|
|
286
|
+
},
|
|
287
|
+
"solar": {
|
|
288
|
+
id: "solar",
|
|
289
|
+
name: "Solar",
|
|
290
|
+
description: "Energy, optimistic, kid-friendly",
|
|
291
|
+
palette: { primary: "#CA8A04", primary_foreground: "#FFFFFF", secondary: "#FEFCE8", secondary_foreground: "#713F12", accent: "#FACC15", background: "#FFFEF5", dark_mode: "#422006" }
|
|
292
|
+
},
|
|
293
|
+
"orchid": {
|
|
294
|
+
id: "orchid",
|
|
295
|
+
name: "Orchid",
|
|
296
|
+
description: "Beauty, fashion, luxury",
|
|
297
|
+
palette: { primary: "#C026D3", primary_foreground: "#FFFFFF", secondary: "#FDF4FF", secondary_foreground: "#701A75", accent: "#E879F9", background: "#FFFEFF", dark_mode: "#4A044E" }
|
|
298
|
+
},
|
|
299
|
+
"indigo": {
|
|
300
|
+
id: "indigo",
|
|
301
|
+
name: "Indigo",
|
|
302
|
+
description: "Enterprise, fintech, trust",
|
|
303
|
+
palette: { primary: "#4F46E5", primary_foreground: "#FFFFFF", secondary: "#EEF2FF", secondary_foreground: "#312E81", accent: "#818CF8", background: "#FEFEFF", dark_mode: "#1E1B4B" }
|
|
304
|
+
},
|
|
305
|
+
"cosmic-night": {
|
|
306
|
+
id: "cosmic-night",
|
|
307
|
+
name: "Cosmic Night",
|
|
308
|
+
description: "Dark mode, futuristic, gaming",
|
|
309
|
+
palette: { primary: "#6366F1", primary_foreground: "#FFFFFF", secondary: "#1E1B4B", secondary_foreground: "#E0E7FF", accent: "#A855F7", background: "#0F0D1A", dark_mode: "#030014" }
|
|
310
|
+
},
|
|
311
|
+
"soft-pop": {
|
|
312
|
+
id: "soft-pop",
|
|
313
|
+
name: "Soft Pop",
|
|
314
|
+
description: "Playful, modern, creative",
|
|
315
|
+
palette: { primary: "#14B8A6", primary_foreground: "#FFFFFF", secondary: "#FDF2F8", secondary_foreground: "#134E4A", accent: "#F472B6", background: "#FFFBFE", dark_mode: "#0D1117" }
|
|
316
|
+
},
|
|
317
|
+
"neo-brutalism": {
|
|
318
|
+
id: "neo-brutalism",
|
|
319
|
+
name: "Neo Brutalism",
|
|
320
|
+
description: "Bold, striking, artistic",
|
|
321
|
+
palette: { primary: "#FF6B35", primary_foreground: "#000000", secondary: "#FFE66D", secondary_foreground: "#1A1A1A", accent: "#FF3366", background: "#FFFEF0", dark_mode: "#1A1A1A" }
|
|
322
|
+
},
|
|
323
|
+
"vintage-paper": {
|
|
324
|
+
id: "vintage-paper",
|
|
325
|
+
name: "Vintage Paper",
|
|
326
|
+
description: "Classic, warm, nostalgic",
|
|
327
|
+
palette: { primary: "#B45309", primary_foreground: "#FFFFFF", secondary: "#FEF3C7", secondary_foreground: "#78350F", accent: "#92400E", background: "#FFFDF7", dark_mode: "#292524" }
|
|
328
|
+
},
|
|
329
|
+
"modern-minimal": {
|
|
330
|
+
id: "modern-minimal",
|
|
331
|
+
name: "Modern Minimal",
|
|
332
|
+
description: "Clean, professional, corporate",
|
|
333
|
+
palette: { primary: "#2563EB", primary_foreground: "#FFFFFF", secondary: "#F8FAFC", secondary_foreground: "#1E40AF", accent: "#3B82F6", background: "#FFFFFF", dark_mode: "#0F172A" }
|
|
334
|
+
},
|
|
335
|
+
"bubblegum": {
|
|
336
|
+
id: "bubblegum",
|
|
337
|
+
name: "Bubblegum",
|
|
338
|
+
description: "Fun, feminine, youthful",
|
|
339
|
+
palette: { primary: "#EC4899", primary_foreground: "#FFFFFF", secondary: "#FDF4FF", secondary_foreground: "#9D174D", accent: "#F472B6", background: "#FFFBFF", dark_mode: "#500724" }
|
|
340
|
+
}
|
|
341
|
+
};
|
|
342
|
+
function hexToRgb(hex) {
|
|
343
|
+
const h = hex.replace("#", "");
|
|
344
|
+
return [parseInt(h.slice(0, 2), 16), parseInt(h.slice(2, 4), 16), parseInt(h.slice(4, 6), 16)];
|
|
345
|
+
}
|
|
346
|
+
function rgbToHex(r, g, b) {
|
|
347
|
+
return "#" + [r, g, b].map((v) => Math.round(Math.max(0, Math.min(255, v))).toString(16).padStart(2, "0")).join("");
|
|
348
|
+
}
|
|
349
|
+
function mixColors(c1, c2, t) {
|
|
350
|
+
const [r1, g1, b1] = hexToRgb(c1);
|
|
351
|
+
const [r2, g2, b2] = hexToRgb(c2);
|
|
352
|
+
return rgbToHex(r1 + (r2 - r1) * t, g1 + (g2 - g1) * t, b1 + (b2 - b1) * t);
|
|
353
|
+
}
|
|
354
|
+
function generateLightPalette(p) {
|
|
355
|
+
return [
|
|
356
|
+
p.background,
|
|
357
|
+
p.secondary,
|
|
358
|
+
mixColors(p.secondary, p.accent, 0.15),
|
|
359
|
+
mixColors(p.secondary, p.accent, 0.3),
|
|
360
|
+
mixColors(p.accent, p.primary, 0.1),
|
|
361
|
+
mixColors(p.accent, p.primary, 0.3),
|
|
362
|
+
mixColors(p.accent, p.primary, 0.5),
|
|
363
|
+
mixColors(p.accent, p.primary, 0.7),
|
|
364
|
+
p.primary,
|
|
365
|
+
mixColors(p.primary, p.secondary_foreground, 0.3),
|
|
366
|
+
p.secondary_foreground,
|
|
367
|
+
p.dark_mode
|
|
368
|
+
];
|
|
369
|
+
}
|
|
370
|
+
function generateDarkPalette(p) {
|
|
371
|
+
return [
|
|
372
|
+
p.dark_mode,
|
|
373
|
+
mixColors(p.dark_mode, p.secondary_foreground, 0.15),
|
|
374
|
+
mixColors(p.dark_mode, p.secondary_foreground, 0.25),
|
|
375
|
+
mixColors(p.dark_mode, p.secondary_foreground, 0.35),
|
|
376
|
+
mixColors(p.secondary_foreground, p.accent, 0.2),
|
|
377
|
+
mixColors(p.secondary_foreground, p.accent, 0.4),
|
|
378
|
+
mixColors(p.secondary_foreground, p.accent, 0.6),
|
|
379
|
+
mixColors(p.accent, p.primary, 0.5),
|
|
380
|
+
p.primary,
|
|
381
|
+
p.accent,
|
|
382
|
+
mixColors(p.accent, p.primary_foreground, 0.5),
|
|
383
|
+
p.primary_foreground
|
|
384
|
+
];
|
|
385
|
+
}
|
|
386
|
+
function getBlinkThemePalettes(themeId) {
|
|
387
|
+
const theme = BLINK_DESIGN_THEMES[themeId];
|
|
388
|
+
if (!theme) throw new Error(`Unknown theme: ${themeId}`);
|
|
389
|
+
const p = theme.palette;
|
|
390
|
+
return {
|
|
391
|
+
base: {
|
|
392
|
+
light: generateLightPalette(p),
|
|
393
|
+
dark: generateDarkPalette(p)
|
|
394
|
+
},
|
|
395
|
+
accent: {
|
|
396
|
+
light: generateDarkPalette(p),
|
|
397
|
+
dark: generateLightPalette(p)
|
|
398
|
+
}
|
|
399
|
+
};
|
|
400
|
+
}
|
|
401
|
+
var BLINK_DESIGN_THEME_IDS = Object.keys(BLINK_DESIGN_THEMES);
|
|
402
|
+
function getBlinkDesignTheme(themeId) {
|
|
403
|
+
return BLINK_DESIGN_THEMES[themeId];
|
|
404
|
+
}
|
|
405
|
+
|
|
406
|
+
// src/index.ts
|
|
232
407
|
var import_tamagui69 = require("tamagui");
|
|
233
408
|
|
|
234
409
|
// src/primitives/Button.tsx
|
|
@@ -3766,6 +3941,8 @@ function FinanceDashboard({
|
|
|
3766
3941
|
Aside,
|
|
3767
3942
|
Avatar,
|
|
3768
3943
|
AvatarGroup,
|
|
3944
|
+
BLINK_DESIGN_THEMES,
|
|
3945
|
+
BLINK_DESIGN_THEME_IDS,
|
|
3769
3946
|
Badge,
|
|
3770
3947
|
BlinkAccordion,
|
|
3771
3948
|
BlinkAvatar,
|
|
@@ -3913,6 +4090,8 @@ function FinanceDashboard({
|
|
|
3913
4090
|
createTokens,
|
|
3914
4091
|
createVariable,
|
|
3915
4092
|
dialogConfirm,
|
|
4093
|
+
getBlinkDesignTheme,
|
|
4094
|
+
getBlinkThemePalettes,
|
|
3916
4095
|
getConfig,
|
|
3917
4096
|
getToken,
|
|
3918
4097
|
getTokenValue,
|