@blinkdotnew/mobile-ui 2.0.0-alpha.17 → 2.0.0-alpha.19
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 +62 -1
- package/dist/index.d.ts +62 -1
- package/dist/index.js +185 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +178 -0
- package/dist/index.mjs.map +1 -1
- package/package.json +3 -1
package/dist/index.d.mts
CHANGED
|
@@ -6,6 +6,7 @@ import * as _tamagui_core from '@tamagui/core';
|
|
|
6
6
|
import * as React$1 from 'react';
|
|
7
7
|
import React__default, { ReactNode } from 'react';
|
|
8
8
|
import * as react_native from 'react-native';
|
|
9
|
+
export * from '@tamagui/lucide-icons';
|
|
9
10
|
|
|
10
11
|
declare const blinkConfig: TamaguiInternalConfig;
|
|
11
12
|
type BlinkConfig = typeof blinkConfig;
|
|
@@ -14,6 +15,66 @@ declare module 'tamagui' {
|
|
|
14
15
|
}
|
|
15
16
|
}
|
|
16
17
|
|
|
18
|
+
/**
|
|
19
|
+
* Maps the 16 Blink platform design themes (from auto-engineer src/types/color-theme.ts)
|
|
20
|
+
* to Tamagui-compatible theme palettes via createThemes.
|
|
21
|
+
*
|
|
22
|
+
* Usage:
|
|
23
|
+
* import { createBlinkThemes, BLINK_DESIGN_THEMES } from '@blinkdotnew/mobile-ui'
|
|
24
|
+
* const themes = createBlinkThemes('ocean-teal')
|
|
25
|
+
* const config = createTamagui({ ...tamaguiDefaultConfig, themes })
|
|
26
|
+
*/
|
|
27
|
+
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';
|
|
28
|
+
interface BlinkColorPalette {
|
|
29
|
+
primary: string;
|
|
30
|
+
primary_foreground: string;
|
|
31
|
+
secondary: string;
|
|
32
|
+
secondary_foreground: string;
|
|
33
|
+
accent: string;
|
|
34
|
+
background: string;
|
|
35
|
+
dark_mode: string;
|
|
36
|
+
}
|
|
37
|
+
interface BlinkDesignTheme {
|
|
38
|
+
id: BlinkDesignThemeId;
|
|
39
|
+
name: string;
|
|
40
|
+
description: string;
|
|
41
|
+
palette: BlinkColorPalette;
|
|
42
|
+
}
|
|
43
|
+
declare const BLINK_DESIGN_THEMES: Record<BlinkDesignThemeId, BlinkDesignTheme>;
|
|
44
|
+
/**
|
|
45
|
+
* Generates Tamagui-compatible theme config for createThemes from a platform design theme.
|
|
46
|
+
*
|
|
47
|
+
* Usage with createThemes:
|
|
48
|
+
* ```ts
|
|
49
|
+
* import { createThemes } from '@tamagui/theme-builder'
|
|
50
|
+
* import { getBlinkThemePalettes } from '@blinkdotnew/mobile-ui'
|
|
51
|
+
*
|
|
52
|
+
* const palettes = getBlinkThemePalettes('ocean-teal')
|
|
53
|
+
* const themes = createThemes({
|
|
54
|
+
* base: { palette: palettes.base },
|
|
55
|
+
* accent: { palette: palettes.accent },
|
|
56
|
+
* })
|
|
57
|
+
* ```
|
|
58
|
+
*/
|
|
59
|
+
declare function getBlinkThemePalettes(themeId: BlinkDesignThemeId): {
|
|
60
|
+
base: {
|
|
61
|
+
light: string[];
|
|
62
|
+
dark: string[];
|
|
63
|
+
};
|
|
64
|
+
accent: {
|
|
65
|
+
light: string[];
|
|
66
|
+
dark: string[];
|
|
67
|
+
};
|
|
68
|
+
};
|
|
69
|
+
/**
|
|
70
|
+
* All available design theme IDs for enumeration.
|
|
71
|
+
*/
|
|
72
|
+
declare const BLINK_DESIGN_THEME_IDS: BlinkDesignThemeId[];
|
|
73
|
+
/**
|
|
74
|
+
* Get theme metadata (name, description) for UI pickers.
|
|
75
|
+
*/
|
|
76
|
+
declare function getBlinkDesignTheme(themeId: BlinkDesignThemeId): BlinkDesignTheme | undefined;
|
|
77
|
+
|
|
17
78
|
declare const Button: tamagui.TamaguiComponent<_tamagui_core.TamaDefer, tamagui.TamaguiElement, _tamagui_core.RNTamaguiViewNonStyleProps & tamagui.TextContextStyles & {
|
|
18
79
|
textProps?: Partial<tamagui.SizableTextProps>;
|
|
19
80
|
noTextWrap?: boolean;
|
|
@@ -1056,4 +1117,4 @@ type FinanceDashboardProps = {
|
|
|
1056
1117
|
};
|
|
1057
1118
|
declare function FinanceDashboard({ title, balanceLabel, balance, rangeLabel, metrics, quickActions, sections, chartSlot, topRight, }: FinanceDashboardProps): JSX.Element;
|
|
1058
1119
|
|
|
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 };
|
|
1120
|
+
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
|
@@ -6,6 +6,7 @@ import * as _tamagui_core from '@tamagui/core';
|
|
|
6
6
|
import * as React$1 from 'react';
|
|
7
7
|
import React__default, { ReactNode } from 'react';
|
|
8
8
|
import * as react_native from 'react-native';
|
|
9
|
+
export * from '@tamagui/lucide-icons';
|
|
9
10
|
|
|
10
11
|
declare const blinkConfig: TamaguiInternalConfig;
|
|
11
12
|
type BlinkConfig = typeof blinkConfig;
|
|
@@ -14,6 +15,66 @@ declare module 'tamagui' {
|
|
|
14
15
|
}
|
|
15
16
|
}
|
|
16
17
|
|
|
18
|
+
/**
|
|
19
|
+
* Maps the 16 Blink platform design themes (from auto-engineer src/types/color-theme.ts)
|
|
20
|
+
* to Tamagui-compatible theme palettes via createThemes.
|
|
21
|
+
*
|
|
22
|
+
* Usage:
|
|
23
|
+
* import { createBlinkThemes, BLINK_DESIGN_THEMES } from '@blinkdotnew/mobile-ui'
|
|
24
|
+
* const themes = createBlinkThemes('ocean-teal')
|
|
25
|
+
* const config = createTamagui({ ...tamaguiDefaultConfig, themes })
|
|
26
|
+
*/
|
|
27
|
+
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';
|
|
28
|
+
interface BlinkColorPalette {
|
|
29
|
+
primary: string;
|
|
30
|
+
primary_foreground: string;
|
|
31
|
+
secondary: string;
|
|
32
|
+
secondary_foreground: string;
|
|
33
|
+
accent: string;
|
|
34
|
+
background: string;
|
|
35
|
+
dark_mode: string;
|
|
36
|
+
}
|
|
37
|
+
interface BlinkDesignTheme {
|
|
38
|
+
id: BlinkDesignThemeId;
|
|
39
|
+
name: string;
|
|
40
|
+
description: string;
|
|
41
|
+
palette: BlinkColorPalette;
|
|
42
|
+
}
|
|
43
|
+
declare const BLINK_DESIGN_THEMES: Record<BlinkDesignThemeId, BlinkDesignTheme>;
|
|
44
|
+
/**
|
|
45
|
+
* Generates Tamagui-compatible theme config for createThemes from a platform design theme.
|
|
46
|
+
*
|
|
47
|
+
* Usage with createThemes:
|
|
48
|
+
* ```ts
|
|
49
|
+
* import { createThemes } from '@tamagui/theme-builder'
|
|
50
|
+
* import { getBlinkThemePalettes } from '@blinkdotnew/mobile-ui'
|
|
51
|
+
*
|
|
52
|
+
* const palettes = getBlinkThemePalettes('ocean-teal')
|
|
53
|
+
* const themes = createThemes({
|
|
54
|
+
* base: { palette: palettes.base },
|
|
55
|
+
* accent: { palette: palettes.accent },
|
|
56
|
+
* })
|
|
57
|
+
* ```
|
|
58
|
+
*/
|
|
59
|
+
declare function getBlinkThemePalettes(themeId: BlinkDesignThemeId): {
|
|
60
|
+
base: {
|
|
61
|
+
light: string[];
|
|
62
|
+
dark: string[];
|
|
63
|
+
};
|
|
64
|
+
accent: {
|
|
65
|
+
light: string[];
|
|
66
|
+
dark: string[];
|
|
67
|
+
};
|
|
68
|
+
};
|
|
69
|
+
/**
|
|
70
|
+
* All available design theme IDs for enumeration.
|
|
71
|
+
*/
|
|
72
|
+
declare const BLINK_DESIGN_THEME_IDS: BlinkDesignThemeId[];
|
|
73
|
+
/**
|
|
74
|
+
* Get theme metadata (name, description) for UI pickers.
|
|
75
|
+
*/
|
|
76
|
+
declare function getBlinkDesignTheme(themeId: BlinkDesignThemeId): BlinkDesignTheme | undefined;
|
|
77
|
+
|
|
17
78
|
declare const Button: tamagui.TamaguiComponent<_tamagui_core.TamaDefer, tamagui.TamaguiElement, _tamagui_core.RNTamaguiViewNonStyleProps & tamagui.TextContextStyles & {
|
|
18
79
|
textProps?: Partial<tamagui.SizableTextProps>;
|
|
19
80
|
noTextWrap?: boolean;
|
|
@@ -1056,4 +1117,4 @@ type FinanceDashboardProps = {
|
|
|
1056
1117
|
};
|
|
1057
1118
|
declare function FinanceDashboard({ title, balanceLabel, balance, rangeLabel, metrics, quickActions, sections, chartSlot, topRight, }: FinanceDashboardProps): JSX.Element;
|
|
1058
1119
|
|
|
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 };
|
|
1120
|
+
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
|
@@ -17,6 +17,7 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
17
|
}
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
|
+
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
|
|
20
21
|
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
22
|
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
23
|
// file that has been converted to a CommonJS file using a Babel-
|
|
@@ -42,6 +43,8 @@ __export(index_exports, {
|
|
|
42
43
|
Aside: () => import_tamagui69.Aside,
|
|
43
44
|
Avatar: () => import_tamagui69.Avatar,
|
|
44
45
|
AvatarGroup: () => AvatarGroup,
|
|
46
|
+
BLINK_DESIGN_THEMES: () => BLINK_DESIGN_THEMES,
|
|
47
|
+
BLINK_DESIGN_THEME_IDS: () => BLINK_DESIGN_THEME_IDS,
|
|
45
48
|
Badge: () => Badge,
|
|
46
49
|
BlinkAccordion: () => BlinkAccordion,
|
|
47
50
|
BlinkAvatar: () => Avatar,
|
|
@@ -189,6 +192,8 @@ __export(index_exports, {
|
|
|
189
192
|
createTokens: () => import_tamagui69.createTokens,
|
|
190
193
|
createVariable: () => import_tamagui69.createVariable,
|
|
191
194
|
dialogConfirm: () => dialogConfirm,
|
|
195
|
+
getBlinkDesignTheme: () => getBlinkDesignTheme,
|
|
196
|
+
getBlinkThemePalettes: () => getBlinkThemePalettes,
|
|
192
197
|
getConfig: () => import_tamagui69.getConfig,
|
|
193
198
|
getToken: () => import_tamagui69.getToken,
|
|
194
199
|
getTokenValue: () => import_tamagui69.getTokenValue,
|
|
@@ -229,6 +234,177 @@ var blinkConfig = (0, import_tamagui.createTamagui)({
|
|
|
229
234
|
|
|
230
235
|
// src/index.ts
|
|
231
236
|
var import_v52 = require("@tamagui/config/v5");
|
|
237
|
+
|
|
238
|
+
// src/config/design-themes.ts
|
|
239
|
+
var BLINK_DESIGN_THEMES = {
|
|
240
|
+
"mono": {
|
|
241
|
+
id: "mono",
|
|
242
|
+
name: "Mono",
|
|
243
|
+
description: "Black/white neutral",
|
|
244
|
+
palette: { primary: "#18181B", primary_foreground: "#FAFAFA", secondary: "#F4F4F5", secondary_foreground: "#27272A", accent: "#3F3F46", background: "#FFFFFF", dark_mode: "#09090B" }
|
|
245
|
+
},
|
|
246
|
+
"ocean-teal": {
|
|
247
|
+
id: "ocean-teal",
|
|
248
|
+
name: "Ocean Teal",
|
|
249
|
+
description: "SaaS, fintech, healthcare",
|
|
250
|
+
palette: { primary: "#0D9488", primary_foreground: "#FFFFFF", secondary: "#F0FDFA", secondary_foreground: "#134E4A", accent: "#2DD4BF", background: "#FFFFFF", dark_mode: "#042F2E" }
|
|
251
|
+
},
|
|
252
|
+
"warm-amber": {
|
|
253
|
+
id: "warm-amber",
|
|
254
|
+
name: "Warm Amber",
|
|
255
|
+
description: "E-commerce, food, hospitality",
|
|
256
|
+
palette: { primary: "#D97706", primary_foreground: "#FFFFFF", secondary: "#FFFBEB", secondary_foreground: "#78350F", accent: "#FBBF24", background: "#FFFEF7", dark_mode: "#451A03" }
|
|
257
|
+
},
|
|
258
|
+
"rose-coral": {
|
|
259
|
+
id: "rose-coral",
|
|
260
|
+
name: "Rose Coral",
|
|
261
|
+
description: "Lifestyle, beauty, fashion",
|
|
262
|
+
palette: { primary: "#E11D48", primary_foreground: "#FFFFFF", secondary: "#FFF1F2", secondary_foreground: "#881337", accent: "#FB7185", background: "#FFFAFA", dark_mode: "#4C0519" }
|
|
263
|
+
},
|
|
264
|
+
"lavender": {
|
|
265
|
+
id: "lavender",
|
|
266
|
+
name: "Lavender",
|
|
267
|
+
description: "Creative, wellness, meditation",
|
|
268
|
+
palette: { primary: "#7C3AED", primary_foreground: "#FFFFFF", secondary: "#F5F3FF", secondary_foreground: "#4C1D95", accent: "#A78BFA", background: "#FEFEFF", dark_mode: "#2E1065" }
|
|
269
|
+
},
|
|
270
|
+
"glacier": {
|
|
271
|
+
id: "glacier",
|
|
272
|
+
name: "Glacier",
|
|
273
|
+
description: "Professional, corporate, analytics",
|
|
274
|
+
palette: { primary: "#0EA5E9", primary_foreground: "#FFFFFF", secondary: "#F0F9FF", secondary_foreground: "#0C4A6E", accent: "#38BDF8", background: "#FFFFFF", dark_mode: "#082F49" }
|
|
275
|
+
},
|
|
276
|
+
"forest": {
|
|
277
|
+
id: "forest",
|
|
278
|
+
name: "Forest",
|
|
279
|
+
description: "Sustainability, nature, outdoor",
|
|
280
|
+
palette: { primary: "#16A34A", primary_foreground: "#FFFFFF", secondary: "#F0FDF4", secondary_foreground: "#14532D", accent: "#4ADE80", background: "#FEFFFE", dark_mode: "#052E16" }
|
|
281
|
+
},
|
|
282
|
+
"obsidian": {
|
|
283
|
+
id: "obsidian",
|
|
284
|
+
name: "Obsidian",
|
|
285
|
+
description: "Developer tools, gaming, tech",
|
|
286
|
+
palette: { primary: "#475569", primary_foreground: "#FFFFFF", secondary: "#F1F5F9", secondary_foreground: "#1E293B", accent: "#64748B", background: "#FFFFFF", dark_mode: "#0F172A" }
|
|
287
|
+
},
|
|
288
|
+
"solar": {
|
|
289
|
+
id: "solar",
|
|
290
|
+
name: "Solar",
|
|
291
|
+
description: "Energy, optimistic, kid-friendly",
|
|
292
|
+
palette: { primary: "#CA8A04", primary_foreground: "#FFFFFF", secondary: "#FEFCE8", secondary_foreground: "#713F12", accent: "#FACC15", background: "#FFFEF5", dark_mode: "#422006" }
|
|
293
|
+
},
|
|
294
|
+
"orchid": {
|
|
295
|
+
id: "orchid",
|
|
296
|
+
name: "Orchid",
|
|
297
|
+
description: "Beauty, fashion, luxury",
|
|
298
|
+
palette: { primary: "#C026D3", primary_foreground: "#FFFFFF", secondary: "#FDF4FF", secondary_foreground: "#701A75", accent: "#E879F9", background: "#FFFEFF", dark_mode: "#4A044E" }
|
|
299
|
+
},
|
|
300
|
+
"indigo": {
|
|
301
|
+
id: "indigo",
|
|
302
|
+
name: "Indigo",
|
|
303
|
+
description: "Enterprise, fintech, trust",
|
|
304
|
+
palette: { primary: "#4F46E5", primary_foreground: "#FFFFFF", secondary: "#EEF2FF", secondary_foreground: "#312E81", accent: "#818CF8", background: "#FEFEFF", dark_mode: "#1E1B4B" }
|
|
305
|
+
},
|
|
306
|
+
"cosmic-night": {
|
|
307
|
+
id: "cosmic-night",
|
|
308
|
+
name: "Cosmic Night",
|
|
309
|
+
description: "Dark mode, futuristic, gaming",
|
|
310
|
+
palette: { primary: "#6366F1", primary_foreground: "#FFFFFF", secondary: "#1E1B4B", secondary_foreground: "#E0E7FF", accent: "#A855F7", background: "#0F0D1A", dark_mode: "#030014" }
|
|
311
|
+
},
|
|
312
|
+
"soft-pop": {
|
|
313
|
+
id: "soft-pop",
|
|
314
|
+
name: "Soft Pop",
|
|
315
|
+
description: "Playful, modern, creative",
|
|
316
|
+
palette: { primary: "#14B8A6", primary_foreground: "#FFFFFF", secondary: "#FDF2F8", secondary_foreground: "#134E4A", accent: "#F472B6", background: "#FFFBFE", dark_mode: "#0D1117" }
|
|
317
|
+
},
|
|
318
|
+
"neo-brutalism": {
|
|
319
|
+
id: "neo-brutalism",
|
|
320
|
+
name: "Neo Brutalism",
|
|
321
|
+
description: "Bold, striking, artistic",
|
|
322
|
+
palette: { primary: "#FF6B35", primary_foreground: "#000000", secondary: "#FFE66D", secondary_foreground: "#1A1A1A", accent: "#FF3366", background: "#FFFEF0", dark_mode: "#1A1A1A" }
|
|
323
|
+
},
|
|
324
|
+
"vintage-paper": {
|
|
325
|
+
id: "vintage-paper",
|
|
326
|
+
name: "Vintage Paper",
|
|
327
|
+
description: "Classic, warm, nostalgic",
|
|
328
|
+
palette: { primary: "#B45309", primary_foreground: "#FFFFFF", secondary: "#FEF3C7", secondary_foreground: "#78350F", accent: "#92400E", background: "#FFFDF7", dark_mode: "#292524" }
|
|
329
|
+
},
|
|
330
|
+
"modern-minimal": {
|
|
331
|
+
id: "modern-minimal",
|
|
332
|
+
name: "Modern Minimal",
|
|
333
|
+
description: "Clean, professional, corporate",
|
|
334
|
+
palette: { primary: "#2563EB", primary_foreground: "#FFFFFF", secondary: "#F8FAFC", secondary_foreground: "#1E40AF", accent: "#3B82F6", background: "#FFFFFF", dark_mode: "#0F172A" }
|
|
335
|
+
},
|
|
336
|
+
"bubblegum": {
|
|
337
|
+
id: "bubblegum",
|
|
338
|
+
name: "Bubblegum",
|
|
339
|
+
description: "Fun, feminine, youthful",
|
|
340
|
+
palette: { primary: "#EC4899", primary_foreground: "#FFFFFF", secondary: "#FDF4FF", secondary_foreground: "#9D174D", accent: "#F472B6", background: "#FFFBFF", dark_mode: "#500724" }
|
|
341
|
+
}
|
|
342
|
+
};
|
|
343
|
+
function hexToRgb(hex) {
|
|
344
|
+
const h = hex.replace("#", "");
|
|
345
|
+
return [parseInt(h.slice(0, 2), 16), parseInt(h.slice(2, 4), 16), parseInt(h.slice(4, 6), 16)];
|
|
346
|
+
}
|
|
347
|
+
function rgbToHex(r, g, b) {
|
|
348
|
+
return "#" + [r, g, b].map((v) => Math.round(Math.max(0, Math.min(255, v))).toString(16).padStart(2, "0")).join("");
|
|
349
|
+
}
|
|
350
|
+
function mixColors(c1, c2, t) {
|
|
351
|
+
const [r1, g1, b1] = hexToRgb(c1);
|
|
352
|
+
const [r2, g2, b2] = hexToRgb(c2);
|
|
353
|
+
return rgbToHex(r1 + (r2 - r1) * t, g1 + (g2 - g1) * t, b1 + (b2 - b1) * t);
|
|
354
|
+
}
|
|
355
|
+
function generateLightPalette(p) {
|
|
356
|
+
return [
|
|
357
|
+
p.background,
|
|
358
|
+
p.secondary,
|
|
359
|
+
mixColors(p.secondary, p.accent, 0.15),
|
|
360
|
+
mixColors(p.secondary, p.accent, 0.3),
|
|
361
|
+
mixColors(p.accent, p.primary, 0.1),
|
|
362
|
+
mixColors(p.accent, p.primary, 0.3),
|
|
363
|
+
mixColors(p.accent, p.primary, 0.5),
|
|
364
|
+
mixColors(p.accent, p.primary, 0.7),
|
|
365
|
+
p.primary,
|
|
366
|
+
mixColors(p.primary, p.secondary_foreground, 0.3),
|
|
367
|
+
p.secondary_foreground,
|
|
368
|
+
p.dark_mode
|
|
369
|
+
];
|
|
370
|
+
}
|
|
371
|
+
function generateDarkPalette(p) {
|
|
372
|
+
return [
|
|
373
|
+
p.dark_mode,
|
|
374
|
+
mixColors(p.dark_mode, p.secondary_foreground, 0.15),
|
|
375
|
+
mixColors(p.dark_mode, p.secondary_foreground, 0.25),
|
|
376
|
+
mixColors(p.dark_mode, p.secondary_foreground, 0.35),
|
|
377
|
+
mixColors(p.secondary_foreground, p.accent, 0.2),
|
|
378
|
+
mixColors(p.secondary_foreground, p.accent, 0.4),
|
|
379
|
+
mixColors(p.secondary_foreground, p.accent, 0.6),
|
|
380
|
+
mixColors(p.accent, p.primary, 0.5),
|
|
381
|
+
p.primary,
|
|
382
|
+
p.accent,
|
|
383
|
+
mixColors(p.accent, p.primary_foreground, 0.5),
|
|
384
|
+
p.primary_foreground
|
|
385
|
+
];
|
|
386
|
+
}
|
|
387
|
+
function getBlinkThemePalettes(themeId) {
|
|
388
|
+
const theme = BLINK_DESIGN_THEMES[themeId];
|
|
389
|
+
if (!theme) throw new Error(`Unknown theme: ${themeId}`);
|
|
390
|
+
const p = theme.palette;
|
|
391
|
+
return {
|
|
392
|
+
base: {
|
|
393
|
+
light: generateLightPalette(p),
|
|
394
|
+
dark: generateDarkPalette(p)
|
|
395
|
+
},
|
|
396
|
+
accent: {
|
|
397
|
+
light: generateDarkPalette(p),
|
|
398
|
+
dark: generateLightPalette(p)
|
|
399
|
+
}
|
|
400
|
+
};
|
|
401
|
+
}
|
|
402
|
+
var BLINK_DESIGN_THEME_IDS = Object.keys(BLINK_DESIGN_THEMES);
|
|
403
|
+
function getBlinkDesignTheme(themeId) {
|
|
404
|
+
return BLINK_DESIGN_THEMES[themeId];
|
|
405
|
+
}
|
|
406
|
+
|
|
407
|
+
// src/index.ts
|
|
232
408
|
var import_tamagui69 = require("tamagui");
|
|
233
409
|
|
|
234
410
|
// src/primitives/Button.tsx
|
|
@@ -3605,6 +3781,9 @@ function BlinkPopover({
|
|
|
3605
3781
|
] });
|
|
3606
3782
|
}
|
|
3607
3783
|
|
|
3784
|
+
// src/index.ts
|
|
3785
|
+
__reExport(index_exports, require("@tamagui/lucide-icons"), module.exports);
|
|
3786
|
+
|
|
3608
3787
|
// src/patterns/ImmersiveMediaScreen.tsx
|
|
3609
3788
|
var import_tamagui66 = require("tamagui");
|
|
3610
3789
|
var import_jsx_runtime59 = require("react/jsx-runtime");
|
|
@@ -3766,6 +3945,8 @@ function FinanceDashboard({
|
|
|
3766
3945
|
Aside,
|
|
3767
3946
|
Avatar,
|
|
3768
3947
|
AvatarGroup,
|
|
3948
|
+
BLINK_DESIGN_THEMES,
|
|
3949
|
+
BLINK_DESIGN_THEME_IDS,
|
|
3769
3950
|
Badge,
|
|
3770
3951
|
BlinkAccordion,
|
|
3771
3952
|
BlinkAvatar,
|
|
@@ -3913,6 +4094,8 @@ function FinanceDashboard({
|
|
|
3913
4094
|
createTokens,
|
|
3914
4095
|
createVariable,
|
|
3915
4096
|
dialogConfirm,
|
|
4097
|
+
getBlinkDesignTheme,
|
|
4098
|
+
getBlinkThemePalettes,
|
|
3916
4099
|
getConfig,
|
|
3917
4100
|
getToken,
|
|
3918
4101
|
getTokenValue,
|
|
@@ -3940,6 +4123,7 @@ function FinanceDashboard({
|
|
|
3940
4123
|
useTheme,
|
|
3941
4124
|
useThemeName,
|
|
3942
4125
|
useWindowDimensions,
|
|
3943
|
-
withStaticProperties
|
|
4126
|
+
withStaticProperties,
|
|
4127
|
+
...require("@tamagui/lucide-icons")
|
|
3944
4128
|
});
|
|
3945
4129
|
//# sourceMappingURL=index.js.map
|