@butternutbox/pawprint-native 0.23.3 → 0.24.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.turbo/turbo-build.log +9 -9
- package/CHANGELOG.md +18 -0
- package/dist/index.cjs +69 -16
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +16 -1
- package/dist/index.d.ts +16 -1
- package/dist/index.js +70 -18
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/molecules/ProductDisplayCard/ProductDisplayCard.tsx +9 -2
- package/src/components/molecules/Progress/Progress.stories.tsx +37 -0
- package/src/components/molecules/Progress/Progress.tsx +37 -2
- package/src/components/molecules/Progress/index.ts +1 -1
- package/src/components/molecules/StackedNotifications/StackedNotifications.test.tsx +58 -1
- package/src/components/molecules/StackedNotifications/StackedNotifications.tsx +83 -17
package/dist/index.d.cts
CHANGED
|
@@ -1413,8 +1413,18 @@ type ProgressOwnProps = {
|
|
|
1413
1413
|
label?: React.ReactNode;
|
|
1414
1414
|
description?: React.ReactNode;
|
|
1415
1415
|
getValueLabel?: (value: number, max: number) => string;
|
|
1416
|
+
animate?: boolean;
|
|
1416
1417
|
};
|
|
1417
1418
|
type ProgressProps = ProgressOwnProps & Omit<ViewProps, keyof ProgressOwnProps>;
|
|
1419
|
+
/**
|
|
1420
|
+
* Timing the indicator eases with. Exported so a consumer overlaying something
|
|
1421
|
+
* on the track (a marker, a mascot) can run its own animation off the same
|
|
1422
|
+
* config and stay pinned to the leading edge of the fill.
|
|
1423
|
+
*/
|
|
1424
|
+
declare const PROGRESS_ANIMATION: {
|
|
1425
|
+
readonly duration: 450;
|
|
1426
|
+
readonly easing: react_native_reanimated.EasingFunction;
|
|
1427
|
+
};
|
|
1418
1428
|
/**
|
|
1419
1429
|
* A horizontal progress bar that visualises the completion of a determinate
|
|
1420
1430
|
* task. Supports an optional label (top-left) and description (top-right),
|
|
@@ -1429,6 +1439,8 @@ type ProgressProps = ProgressOwnProps & Omit<ViewProps, keyof ProgressOwnProps>;
|
|
|
1429
1439
|
* @param {React.ReactNode} [label] - Label rendered in the top-left above the track.
|
|
1430
1440
|
* @param {React.ReactNode} [description] - Helper text rendered in the top-right above the track.
|
|
1431
1441
|
* @param {(value: number, max: number) => string} [getValueLabel] - Accessible value label.
|
|
1442
|
+
* @param {boolean} [animate=true] - Ease the indicator to its new width instead of
|
|
1443
|
+
* snapping. Ignored when the OS has reduced motion enabled.
|
|
1432
1444
|
*
|
|
1433
1445
|
* @example
|
|
1434
1446
|
* ```tsx
|
|
@@ -2349,6 +2361,7 @@ type ProductDisplayCardProps = ViewProps & {
|
|
|
2349
2361
|
incrementDisabled?: boolean;
|
|
2350
2362
|
decrementDisabled?: boolean;
|
|
2351
2363
|
minQuantity?: number;
|
|
2364
|
+
quantityStep?: number;
|
|
2352
2365
|
image?: string | React.ReactNode;
|
|
2353
2366
|
imageBackgroundColor?: string;
|
|
2354
2367
|
thumbnailWidth?: number;
|
|
@@ -2382,6 +2395,7 @@ type ProductDisplayCardProps = ViewProps & {
|
|
|
2382
2395
|
* @param quantityBadge - *(optional)* Show a quantity badge over the image instead
|
|
2383
2396
|
* of the picker (renders the current `quantity`). Mutually exclusive with the
|
|
2384
2397
|
* quantity picker; defaults to `false`. Used on OOB recipe and Extras cards.
|
|
2398
|
+
* @param quantityStep - *(optional)* Increment/decrement amount (default: 1)
|
|
2385
2399
|
* @param image - *(optional)* Image URL string or React element
|
|
2386
2400
|
* @param banner - *(optional)* Banner content string or React element to show below card
|
|
2387
2401
|
* @param showBanner - *(optional)* Show/hide banner
|
|
@@ -2407,6 +2421,7 @@ declare const ProductDisplayCard: React.ForwardRefExoticComponent<ViewProps & {
|
|
|
2407
2421
|
incrementDisabled?: boolean;
|
|
2408
2422
|
decrementDisabled?: boolean;
|
|
2409
2423
|
minQuantity?: number;
|
|
2424
|
+
quantityStep?: number;
|
|
2410
2425
|
image?: string | React.ReactNode;
|
|
2411
2426
|
imageBackgroundColor?: string;
|
|
2412
2427
|
thumbnailWidth?: number;
|
|
@@ -2494,4 +2509,4 @@ declare const useDrawerKeyboardAvoidance: (minPadding?: number) => {
|
|
|
2494
2509
|
contentContainerStyle: StyleProp<ViewStyle>;
|
|
2495
2510
|
};
|
|
2496
2511
|
|
|
2497
|
-
export { Accordion, type AccordionItemProps, type AccordionProps, type AccordionSize, Animated, type AnimatedProps, type AnimatedVariant, Avatar, type AvatarFallbackType, type AvatarProps, type AvatarSize, BRAND_FONTS, Badge$1 as Badge, type BadgeProps, Button, type ButtonColour, ButtonDock, type ButtonDockProps, type ButtonDockVariant, ButtonGroup, type ButtonGroupLayout, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonVariant, CarouselControls, type CarouselControlsProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, type CheckboxVariant, CopyField, CopyFieldInput, type CopyFieldProps, Countdown, type CountdownLabels, type CountdownProps, type CountdownUnitLabel, type DateItemState, DatePicker, type DatePickerProps, Divider, type DividerColour, type DividerProps, type DividerSize, Drawer, type DrawerBodyProps, type DrawerCloseProps, type DrawerContentProps, type DrawerDescriptionProps, type DrawerFooterProps, type DrawerGrabberProps, type DrawerHeaderProps, type DrawerHeaderVariant, type DrawerOverlayProps, type DrawerOverlayProviderProps, type DrawerPortalProps, type DrawerProps, type DrawerTitleProps, type DrawerTriggerProps, FilterTab, type FilterTabItemProps, type FilterTabProps, Hint, type HintProps, Icon, IconButton, type IconButtonColour, type IconButtonProps, type IconButtonSize, type IconButtonVariant, type IconCategory, type IconColour, type IconProps, type IconSize, Illustration, type IllustrationProps, type IllustrationSize, Input, InputDescription, type InputDescriptionProps, InputError, type InputErrorProps, InputField, type InputFieldProps, InputLabel, type InputLabelProps, type InputProps, InputText, Link, type LinkProps, type LinkSize, type LinkWeight, Logo, type LogoBrand, type LogoProps, type LogoSvgComponent, type LogoVariant, Menu, type MenuAlign, MenuItem, type MenuItemProps, type MenuItemVariant, type MenuProps, MessageCard, MessageCardBanner, type MessageCardBannerMedia, type MessageCardBannerProps, MessageCardInsight, type MessageCardInsightProps, NativeSelectPicker, type NativeSelectPickerItem, type NativeSelectPickerProps, Notification, type NotificationProps, NumberField, type NumberFieldProps, NumberInput, NumberInputField, type NumberInputFieldProps, type NumberInputProps, PasswordField, PasswordFieldInput, type PasswordFieldProps, PasswordFieldRequirements, type PasswordFieldRequirementsProps, type PasswordRequirement, type PasswordValidationRule, type PawprintIcon, type PawprintIllustration$2 as PawprintIllustration, PawprintProvider, type PawprintProviderProps, PictureSelector, type PictureSelectorItem, type PictureSelectorProps, ProductDisplayCard, type ProductDisplayCardProps, ProductListingCardWithBadgeAndGrid as ProductListingCard, type ProductListingCardProps, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioOwnProps, type RadioProps, RadioTile, SearchField, SearchFieldInput, type SearchFieldProps, SegmentedControl, type SegmentedControlItemProps, type SegmentedControlProps, SelectField, SelectFieldContent, SelectFieldItem, type SelectFieldItemProps, type SelectFieldProps, type SelectFieldSearchResult, SelectFieldTrigger, type SelectFieldTriggerProps, SelectFieldValue, type SelectValidationRule, Slider, type SliderProps, Spinner, type SpinnerProps, type SpinnerSize, type SpinnerVariant, type StackedNotificationItem, type StackedNotificationType, StackedNotifications, type StackedNotificationsProps, Switch, type SwitchProps, TabNavigation, type TabNavigationListProps, type TabNavigationPanelProps, type TabNavigationProps, type TabNavigationTabProps, Tag, type TagProps, TextArea, TextAreaField, type TextAreaFieldProps, TextAreaLabel, type TextAreaLabelProps, type TextAreaProps, ThemeProvider, Tooltip, type TooltipProps, Typography, type TypographyProps, createPawprintTheme, fadeAnimation, fadeDownAnimation, fadeUpAnimation, registerLogo, resolveFont, resolveLogo, scaleAnimation, slideInAnimation, slideOutAnimation, theme, useCopyField, useDrawerKeyboardAvoidance, usePasswordField, usePawprint, useSearchField, useSelectField };
|
|
2512
|
+
export { Accordion, type AccordionItemProps, type AccordionProps, type AccordionSize, Animated, type AnimatedProps, type AnimatedVariant, Avatar, type AvatarFallbackType, type AvatarProps, type AvatarSize, BRAND_FONTS, Badge$1 as Badge, type BadgeProps, Button, type ButtonColour, ButtonDock, type ButtonDockProps, type ButtonDockVariant, ButtonGroup, type ButtonGroupLayout, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonVariant, CarouselControls, type CarouselControlsProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, type CheckboxVariant, CopyField, CopyFieldInput, type CopyFieldProps, Countdown, type CountdownLabels, type CountdownProps, type CountdownUnitLabel, type DateItemState, DatePicker, type DatePickerProps, Divider, type DividerColour, type DividerProps, type DividerSize, Drawer, type DrawerBodyProps, type DrawerCloseProps, type DrawerContentProps, type DrawerDescriptionProps, type DrawerFooterProps, type DrawerGrabberProps, type DrawerHeaderProps, type DrawerHeaderVariant, type DrawerOverlayProps, type DrawerOverlayProviderProps, type DrawerPortalProps, type DrawerProps, type DrawerTitleProps, type DrawerTriggerProps, FilterTab, type FilterTabItemProps, type FilterTabProps, Hint, type HintProps, Icon, IconButton, type IconButtonColour, type IconButtonProps, type IconButtonSize, type IconButtonVariant, type IconCategory, type IconColour, type IconProps, type IconSize, Illustration, type IllustrationProps, type IllustrationSize, Input, InputDescription, type InputDescriptionProps, InputError, type InputErrorProps, InputField, type InputFieldProps, InputLabel, type InputLabelProps, type InputProps, InputText, Link, type LinkProps, type LinkSize, type LinkWeight, Logo, type LogoBrand, type LogoProps, type LogoSvgComponent, type LogoVariant, Menu, type MenuAlign, MenuItem, type MenuItemProps, type MenuItemVariant, type MenuProps, MessageCard, MessageCardBanner, type MessageCardBannerMedia, type MessageCardBannerProps, MessageCardInsight, type MessageCardInsightProps, NativeSelectPicker, type NativeSelectPickerItem, type NativeSelectPickerProps, Notification, type NotificationProps, NumberField, type NumberFieldProps, NumberInput, NumberInputField, type NumberInputFieldProps, type NumberInputProps, PROGRESS_ANIMATION, PasswordField, PasswordFieldInput, type PasswordFieldProps, PasswordFieldRequirements, type PasswordFieldRequirementsProps, type PasswordRequirement, type PasswordValidationRule, type PawprintIcon, type PawprintIllustration$2 as PawprintIllustration, PawprintProvider, type PawprintProviderProps, PictureSelector, type PictureSelectorItem, type PictureSelectorProps, ProductDisplayCard, type ProductDisplayCardProps, ProductListingCardWithBadgeAndGrid as ProductListingCard, type ProductListingCardProps, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioOwnProps, type RadioProps, RadioTile, SearchField, SearchFieldInput, type SearchFieldProps, SegmentedControl, type SegmentedControlItemProps, type SegmentedControlProps, SelectField, SelectFieldContent, SelectFieldItem, type SelectFieldItemProps, type SelectFieldProps, type SelectFieldSearchResult, SelectFieldTrigger, type SelectFieldTriggerProps, SelectFieldValue, type SelectValidationRule, Slider, type SliderProps, Spinner, type SpinnerProps, type SpinnerSize, type SpinnerVariant, type StackedNotificationItem, type StackedNotificationType, StackedNotifications, type StackedNotificationsProps, Switch, type SwitchProps, TabNavigation, type TabNavigationListProps, type TabNavigationPanelProps, type TabNavigationProps, type TabNavigationTabProps, Tag, type TagProps, TextArea, TextAreaField, type TextAreaFieldProps, TextAreaLabel, type TextAreaLabelProps, type TextAreaProps, ThemeProvider, Tooltip, type TooltipProps, Typography, type TypographyProps, createPawprintTheme, fadeAnimation, fadeDownAnimation, fadeUpAnimation, registerLogo, resolveFont, resolveLogo, scaleAnimation, slideInAnimation, slideOutAnimation, theme, useCopyField, useDrawerKeyboardAvoidance, usePasswordField, usePawprint, useSearchField, useSelectField };
|
package/dist/index.d.ts
CHANGED
|
@@ -1413,8 +1413,18 @@ type ProgressOwnProps = {
|
|
|
1413
1413
|
label?: React.ReactNode;
|
|
1414
1414
|
description?: React.ReactNode;
|
|
1415
1415
|
getValueLabel?: (value: number, max: number) => string;
|
|
1416
|
+
animate?: boolean;
|
|
1416
1417
|
};
|
|
1417
1418
|
type ProgressProps = ProgressOwnProps & Omit<ViewProps, keyof ProgressOwnProps>;
|
|
1419
|
+
/**
|
|
1420
|
+
* Timing the indicator eases with. Exported so a consumer overlaying something
|
|
1421
|
+
* on the track (a marker, a mascot) can run its own animation off the same
|
|
1422
|
+
* config and stay pinned to the leading edge of the fill.
|
|
1423
|
+
*/
|
|
1424
|
+
declare const PROGRESS_ANIMATION: {
|
|
1425
|
+
readonly duration: 450;
|
|
1426
|
+
readonly easing: react_native_reanimated.EasingFunction;
|
|
1427
|
+
};
|
|
1418
1428
|
/**
|
|
1419
1429
|
* A horizontal progress bar that visualises the completion of a determinate
|
|
1420
1430
|
* task. Supports an optional label (top-left) and description (top-right),
|
|
@@ -1429,6 +1439,8 @@ type ProgressProps = ProgressOwnProps & Omit<ViewProps, keyof ProgressOwnProps>;
|
|
|
1429
1439
|
* @param {React.ReactNode} [label] - Label rendered in the top-left above the track.
|
|
1430
1440
|
* @param {React.ReactNode} [description] - Helper text rendered in the top-right above the track.
|
|
1431
1441
|
* @param {(value: number, max: number) => string} [getValueLabel] - Accessible value label.
|
|
1442
|
+
* @param {boolean} [animate=true] - Ease the indicator to its new width instead of
|
|
1443
|
+
* snapping. Ignored when the OS has reduced motion enabled.
|
|
1432
1444
|
*
|
|
1433
1445
|
* @example
|
|
1434
1446
|
* ```tsx
|
|
@@ -2349,6 +2361,7 @@ type ProductDisplayCardProps = ViewProps & {
|
|
|
2349
2361
|
incrementDisabled?: boolean;
|
|
2350
2362
|
decrementDisabled?: boolean;
|
|
2351
2363
|
minQuantity?: number;
|
|
2364
|
+
quantityStep?: number;
|
|
2352
2365
|
image?: string | React.ReactNode;
|
|
2353
2366
|
imageBackgroundColor?: string;
|
|
2354
2367
|
thumbnailWidth?: number;
|
|
@@ -2382,6 +2395,7 @@ type ProductDisplayCardProps = ViewProps & {
|
|
|
2382
2395
|
* @param quantityBadge - *(optional)* Show a quantity badge over the image instead
|
|
2383
2396
|
* of the picker (renders the current `quantity`). Mutually exclusive with the
|
|
2384
2397
|
* quantity picker; defaults to `false`. Used on OOB recipe and Extras cards.
|
|
2398
|
+
* @param quantityStep - *(optional)* Increment/decrement amount (default: 1)
|
|
2385
2399
|
* @param image - *(optional)* Image URL string or React element
|
|
2386
2400
|
* @param banner - *(optional)* Banner content string or React element to show below card
|
|
2387
2401
|
* @param showBanner - *(optional)* Show/hide banner
|
|
@@ -2407,6 +2421,7 @@ declare const ProductDisplayCard: React.ForwardRefExoticComponent<ViewProps & {
|
|
|
2407
2421
|
incrementDisabled?: boolean;
|
|
2408
2422
|
decrementDisabled?: boolean;
|
|
2409
2423
|
minQuantity?: number;
|
|
2424
|
+
quantityStep?: number;
|
|
2410
2425
|
image?: string | React.ReactNode;
|
|
2411
2426
|
imageBackgroundColor?: string;
|
|
2412
2427
|
thumbnailWidth?: number;
|
|
@@ -2494,4 +2509,4 @@ declare const useDrawerKeyboardAvoidance: (minPadding?: number) => {
|
|
|
2494
2509
|
contentContainerStyle: StyleProp<ViewStyle>;
|
|
2495
2510
|
};
|
|
2496
2511
|
|
|
2497
|
-
export { Accordion, type AccordionItemProps, type AccordionProps, type AccordionSize, Animated, type AnimatedProps, type AnimatedVariant, Avatar, type AvatarFallbackType, type AvatarProps, type AvatarSize, BRAND_FONTS, Badge$1 as Badge, type BadgeProps, Button, type ButtonColour, ButtonDock, type ButtonDockProps, type ButtonDockVariant, ButtonGroup, type ButtonGroupLayout, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonVariant, CarouselControls, type CarouselControlsProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, type CheckboxVariant, CopyField, CopyFieldInput, type CopyFieldProps, Countdown, type CountdownLabels, type CountdownProps, type CountdownUnitLabel, type DateItemState, DatePicker, type DatePickerProps, Divider, type DividerColour, type DividerProps, type DividerSize, Drawer, type DrawerBodyProps, type DrawerCloseProps, type DrawerContentProps, type DrawerDescriptionProps, type DrawerFooterProps, type DrawerGrabberProps, type DrawerHeaderProps, type DrawerHeaderVariant, type DrawerOverlayProps, type DrawerOverlayProviderProps, type DrawerPortalProps, type DrawerProps, type DrawerTitleProps, type DrawerTriggerProps, FilterTab, type FilterTabItemProps, type FilterTabProps, Hint, type HintProps, Icon, IconButton, type IconButtonColour, type IconButtonProps, type IconButtonSize, type IconButtonVariant, type IconCategory, type IconColour, type IconProps, type IconSize, Illustration, type IllustrationProps, type IllustrationSize, Input, InputDescription, type InputDescriptionProps, InputError, type InputErrorProps, InputField, type InputFieldProps, InputLabel, type InputLabelProps, type InputProps, InputText, Link, type LinkProps, type LinkSize, type LinkWeight, Logo, type LogoBrand, type LogoProps, type LogoSvgComponent, type LogoVariant, Menu, type MenuAlign, MenuItem, type MenuItemProps, type MenuItemVariant, type MenuProps, MessageCard, MessageCardBanner, type MessageCardBannerMedia, type MessageCardBannerProps, MessageCardInsight, type MessageCardInsightProps, NativeSelectPicker, type NativeSelectPickerItem, type NativeSelectPickerProps, Notification, type NotificationProps, NumberField, type NumberFieldProps, NumberInput, NumberInputField, type NumberInputFieldProps, type NumberInputProps, PasswordField, PasswordFieldInput, type PasswordFieldProps, PasswordFieldRequirements, type PasswordFieldRequirementsProps, type PasswordRequirement, type PasswordValidationRule, type PawprintIcon, type PawprintIllustration$2 as PawprintIllustration, PawprintProvider, type PawprintProviderProps, PictureSelector, type PictureSelectorItem, type PictureSelectorProps, ProductDisplayCard, type ProductDisplayCardProps, ProductListingCardWithBadgeAndGrid as ProductListingCard, type ProductListingCardProps, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioOwnProps, type RadioProps, RadioTile, SearchField, SearchFieldInput, type SearchFieldProps, SegmentedControl, type SegmentedControlItemProps, type SegmentedControlProps, SelectField, SelectFieldContent, SelectFieldItem, type SelectFieldItemProps, type SelectFieldProps, type SelectFieldSearchResult, SelectFieldTrigger, type SelectFieldTriggerProps, SelectFieldValue, type SelectValidationRule, Slider, type SliderProps, Spinner, type SpinnerProps, type SpinnerSize, type SpinnerVariant, type StackedNotificationItem, type StackedNotificationType, StackedNotifications, type StackedNotificationsProps, Switch, type SwitchProps, TabNavigation, type TabNavigationListProps, type TabNavigationPanelProps, type TabNavigationProps, type TabNavigationTabProps, Tag, type TagProps, TextArea, TextAreaField, type TextAreaFieldProps, TextAreaLabel, type TextAreaLabelProps, type TextAreaProps, ThemeProvider, Tooltip, type TooltipProps, Typography, type TypographyProps, createPawprintTheme, fadeAnimation, fadeDownAnimation, fadeUpAnimation, registerLogo, resolveFont, resolveLogo, scaleAnimation, slideInAnimation, slideOutAnimation, theme, useCopyField, useDrawerKeyboardAvoidance, usePasswordField, usePawprint, useSearchField, useSelectField };
|
|
2512
|
+
export { Accordion, type AccordionItemProps, type AccordionProps, type AccordionSize, Animated, type AnimatedProps, type AnimatedVariant, Avatar, type AvatarFallbackType, type AvatarProps, type AvatarSize, BRAND_FONTS, Badge$1 as Badge, type BadgeProps, Button, type ButtonColour, ButtonDock, type ButtonDockProps, type ButtonDockVariant, ButtonGroup, type ButtonGroupLayout, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonVariant, CarouselControls, type CarouselControlsProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, type CheckboxVariant, CopyField, CopyFieldInput, type CopyFieldProps, Countdown, type CountdownLabels, type CountdownProps, type CountdownUnitLabel, type DateItemState, DatePicker, type DatePickerProps, Divider, type DividerColour, type DividerProps, type DividerSize, Drawer, type DrawerBodyProps, type DrawerCloseProps, type DrawerContentProps, type DrawerDescriptionProps, type DrawerFooterProps, type DrawerGrabberProps, type DrawerHeaderProps, type DrawerHeaderVariant, type DrawerOverlayProps, type DrawerOverlayProviderProps, type DrawerPortalProps, type DrawerProps, type DrawerTitleProps, type DrawerTriggerProps, FilterTab, type FilterTabItemProps, type FilterTabProps, Hint, type HintProps, Icon, IconButton, type IconButtonColour, type IconButtonProps, type IconButtonSize, type IconButtonVariant, type IconCategory, type IconColour, type IconProps, type IconSize, Illustration, type IllustrationProps, type IllustrationSize, Input, InputDescription, type InputDescriptionProps, InputError, type InputErrorProps, InputField, type InputFieldProps, InputLabel, type InputLabelProps, type InputProps, InputText, Link, type LinkProps, type LinkSize, type LinkWeight, Logo, type LogoBrand, type LogoProps, type LogoSvgComponent, type LogoVariant, Menu, type MenuAlign, MenuItem, type MenuItemProps, type MenuItemVariant, type MenuProps, MessageCard, MessageCardBanner, type MessageCardBannerMedia, type MessageCardBannerProps, MessageCardInsight, type MessageCardInsightProps, NativeSelectPicker, type NativeSelectPickerItem, type NativeSelectPickerProps, Notification, type NotificationProps, NumberField, type NumberFieldProps, NumberInput, NumberInputField, type NumberInputFieldProps, type NumberInputProps, PROGRESS_ANIMATION, PasswordField, PasswordFieldInput, type PasswordFieldProps, PasswordFieldRequirements, type PasswordFieldRequirementsProps, type PasswordRequirement, type PasswordValidationRule, type PawprintIcon, type PawprintIllustration$2 as PawprintIllustration, PawprintProvider, type PawprintProviderProps, PictureSelector, type PictureSelectorItem, type PictureSelectorProps, ProductDisplayCard, type ProductDisplayCardProps, ProductListingCardWithBadgeAndGrid as ProductListingCard, type ProductListingCardProps, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioOwnProps, type RadioProps, RadioTile, SearchField, SearchFieldInput, type SearchFieldProps, SegmentedControl, type SegmentedControlItemProps, type SegmentedControlProps, SelectField, SelectFieldContent, SelectFieldItem, type SelectFieldItemProps, type SelectFieldProps, type SelectFieldSearchResult, SelectFieldTrigger, type SelectFieldTriggerProps, SelectFieldValue, type SelectValidationRule, Slider, type SliderProps, Spinner, type SpinnerProps, type SpinnerSize, type SpinnerVariant, type StackedNotificationItem, type StackedNotificationType, StackedNotifications, type StackedNotificationsProps, Switch, type SwitchProps, TabNavigation, type TabNavigationListProps, type TabNavigationPanelProps, type TabNavigationProps, type TabNavigationTabProps, Tag, type TagProps, TextArea, TextAreaField, type TextAreaFieldProps, TextAreaLabel, type TextAreaLabelProps, type TextAreaProps, ThemeProvider, Tooltip, type TooltipProps, Typography, type TypographyProps, createPawprintTheme, fadeAnimation, fadeDownAnimation, fadeUpAnimation, registerLogo, resolveFont, resolveLogo, scaleAnimation, slideInAnimation, slideOutAnimation, theme, useCopyField, useDrawerKeyboardAvoidance, usePasswordField, usePawprint, useSearchField, useSelectField };
|
package/dist/index.js
CHANGED
|
@@ -15,7 +15,7 @@ import * as AvatarPrimitive from '@rn-primitives/avatar';
|
|
|
15
15
|
import { Text, View, Animated, Pressable, TextInput, Easing, StyleSheet, useWindowDimensions, PanResponder, Image, ScrollView, Keyboard, ActionSheetIOS, TouchableOpacity, Platform, Modal, TouchableWithoutFeedback, FlatList, Linking, Clipboard, Alert } from 'react-native';
|
|
16
16
|
import Svg, { Path, Defs, LinearGradient, Stop, Rect, G, ClipPath } from 'react-native-svg';
|
|
17
17
|
import * as SwitchPrimitive from '@rn-primitives/switch';
|
|
18
|
-
import Animated10, { Keyframe, Easing as Easing$1, FadeInLeft, FadeInRight, FadeInUp, FadeInDown, FadeIn, FadeOutLeft, FadeOutRight, FadeOutUp, FadeOutDown, FadeOut, useSharedValue, useAnimatedStyle, ComplexAnimationBuilder, withSpring } from 'react-native-reanimated';
|
|
18
|
+
import Animated10, { Keyframe, Easing as Easing$1, FadeInLeft, FadeInRight, FadeInUp, FadeInDown, FadeIn, FadeOutLeft, FadeOutRight, FadeOutUp, FadeOutDown, FadeOut, useReducedMotion, useSharedValue, withTiming, useAnimatedStyle, ComplexAnimationBuilder, withSpring } from 'react-native-reanimated';
|
|
19
19
|
import { Slot } from '@rn-primitives/slot';
|
|
20
20
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
|
21
21
|
import * as ProgressPrimitive from '@rn-primitives/progress';
|
|
@@ -7863,6 +7863,10 @@ function usePasswordField({
|
|
|
7863
7863
|
showRequirements
|
|
7864
7864
|
});
|
|
7865
7865
|
}
|
|
7866
|
+
var PROGRESS_ANIMATION = {
|
|
7867
|
+
duration: 450,
|
|
7868
|
+
easing: Easing$1.inOut(Easing$1.cubic)
|
|
7869
|
+
};
|
|
7866
7870
|
var parseTokenValue40 = (value) => parseFloat(value);
|
|
7867
7871
|
var StyledRoot12 = styled51(View)(({ rootGap }) => ({
|
|
7868
7872
|
flexDirection: "column",
|
|
@@ -7885,7 +7889,7 @@ var StyledTrack = styled51(View)(({ trackHeight, trackMinWidth, trackBorderRadiu
|
|
|
7885
7889
|
backgroundColor: trackBgColor,
|
|
7886
7890
|
overflow: "hidden"
|
|
7887
7891
|
}));
|
|
7888
|
-
var StyledIndicator = styled51(View)(({ indicatorBorderRadius, indicatorBgColor }) => ({
|
|
7892
|
+
var StyledIndicator = styled51(Animated10.View)(({ indicatorBorderRadius, indicatorBgColor }) => ({
|
|
7889
7893
|
height: "100%",
|
|
7890
7894
|
borderRadius: indicatorBorderRadius,
|
|
7891
7895
|
backgroundColor: indicatorBgColor
|
|
@@ -7900,7 +7904,8 @@ var Progress = React66.forwardRef(
|
|
|
7900
7904
|
colour = "primary",
|
|
7901
7905
|
label,
|
|
7902
7906
|
description,
|
|
7903
|
-
getValueLabel
|
|
7907
|
+
getValueLabel,
|
|
7908
|
+
animate = true
|
|
7904
7909
|
} = _b, rest = __objRest(_b, [
|
|
7905
7910
|
"value",
|
|
7906
7911
|
"max",
|
|
@@ -7908,7 +7913,8 @@ var Progress = React66.forwardRef(
|
|
|
7908
7913
|
"colour",
|
|
7909
7914
|
"label",
|
|
7910
7915
|
"description",
|
|
7911
|
-
"getValueLabel"
|
|
7916
|
+
"getValueLabel",
|
|
7917
|
+
"animate"
|
|
7912
7918
|
]);
|
|
7913
7919
|
const theme2 = useTheme();
|
|
7914
7920
|
const {
|
|
@@ -7924,6 +7930,15 @@ var Progress = React66.forwardRef(
|
|
|
7924
7930
|
const percent = clampedValue / safeMax * 100;
|
|
7925
7931
|
const showHeader = Boolean(label) || Boolean(description);
|
|
7926
7932
|
const typographyForSize = size === "lg" ? typography.large : typography.small;
|
|
7933
|
+
const reducedMotion = useReducedMotion();
|
|
7934
|
+
const shouldAnimate = animate && !reducedMotion;
|
|
7935
|
+
const fill = useSharedValue(percent);
|
|
7936
|
+
React66.useEffect(() => {
|
|
7937
|
+
fill.value = shouldAnimate ? withTiming(percent, PROGRESS_ANIMATION) : percent;
|
|
7938
|
+
}, [fill, percent, shouldAnimate]);
|
|
7939
|
+
const indicatorStyle = useAnimatedStyle(() => ({
|
|
7940
|
+
width: `${fill.value}%`
|
|
7941
|
+
}));
|
|
7927
7942
|
const trackSize = { lg: track.size.large, sm: track.size.small }[size];
|
|
7928
7943
|
const trackHeight = parseTokenValue40(trackSize.height);
|
|
7929
7944
|
const trackMinWidth = parseTokenValue40(trackSize.mindWidth);
|
|
@@ -7970,7 +7985,7 @@ var Progress = React66.forwardRef(
|
|
|
7970
7985
|
{
|
|
7971
7986
|
indicatorBorderRadius,
|
|
7972
7987
|
indicatorBgColor,
|
|
7973
|
-
style:
|
|
7988
|
+
style: indicatorStyle
|
|
7974
7989
|
}
|
|
7975
7990
|
) })
|
|
7976
7991
|
}
|
|
@@ -10233,8 +10248,11 @@ var CARD_BASE_STYLE = {
|
|
|
10233
10248
|
position: "absolute",
|
|
10234
10249
|
bottom: 0,
|
|
10235
10250
|
left: 0,
|
|
10236
|
-
right: 0
|
|
10237
|
-
|
|
10251
|
+
right: 0
|
|
10252
|
+
};
|
|
10253
|
+
var DEPTH_LAYER_STYLE = {
|
|
10254
|
+
transformOrigin: "50% 100%",
|
|
10255
|
+
width: "100%"
|
|
10238
10256
|
};
|
|
10239
10257
|
var StyledRoot15 = styled51(View)(({ rootBottom, rootPaddingH }) => ({
|
|
10240
10258
|
position: "absolute",
|
|
@@ -10248,17 +10266,34 @@ var StyledStack = styled51(View)({
|
|
|
10248
10266
|
position: "relative",
|
|
10249
10267
|
width: "100%"
|
|
10250
10268
|
});
|
|
10269
|
+
var computeBackfillIds = (layers, prevActiveIds, prevLayerIds) => {
|
|
10270
|
+
const ids = /* @__PURE__ */ new Set();
|
|
10271
|
+
layers.forEach((item) => {
|
|
10272
|
+
if (prevActiveIds.has(item.id) && !prevLayerIds.has(item.id)) {
|
|
10273
|
+
ids.add(item.id);
|
|
10274
|
+
}
|
|
10275
|
+
});
|
|
10276
|
+
return ids;
|
|
10277
|
+
};
|
|
10251
10278
|
var StackedCard = ({
|
|
10252
10279
|
item,
|
|
10253
10280
|
depth,
|
|
10254
10281
|
revealStep,
|
|
10255
|
-
onDismiss
|
|
10282
|
+
onDismiss,
|
|
10283
|
+
isBackfill
|
|
10256
10284
|
}) => {
|
|
10257
|
-
const
|
|
10285
|
+
const isBackfillRef = React66.useRef(isBackfill);
|
|
10286
|
+
const wasBackfill = isBackfillRef.current;
|
|
10287
|
+
const depthSV = useSharedValue(wasBackfill ? depth + 1 : depth);
|
|
10288
|
+
const opacitySV = useSharedValue(wasBackfill ? 0 : 1);
|
|
10258
10289
|
React66.useEffect(() => {
|
|
10259
10290
|
depthSV.value = withSpring(depth, SPRING_CONFIG);
|
|
10260
10291
|
}, [depth, depthSV]);
|
|
10261
|
-
|
|
10292
|
+
React66.useEffect(() => {
|
|
10293
|
+
if (wasBackfill) opacitySV.value = withSpring(1, SPRING_CONFIG);
|
|
10294
|
+
}, []);
|
|
10295
|
+
const depthStyle = useAnimatedStyle(() => ({
|
|
10296
|
+
opacity: opacitySV.value,
|
|
10262
10297
|
transform: [
|
|
10263
10298
|
{ translateY: depthSV.value * revealStep },
|
|
10264
10299
|
{ scale: 1 - depthSV.value * SCALE_STEP }
|
|
@@ -10268,13 +10303,13 @@ var StackedCard = ({
|
|
|
10268
10303
|
return /* @__PURE__ */ jsx(
|
|
10269
10304
|
Animated10.View,
|
|
10270
10305
|
{
|
|
10271
|
-
entering: CARD_ENTERING,
|
|
10306
|
+
entering: wasBackfill ? void 0 : CARD_ENTERING,
|
|
10272
10307
|
exiting: CARD_EXITING,
|
|
10273
10308
|
pointerEvents: isFront ? "auto" : "none",
|
|
10274
10309
|
accessibilityElementsHidden: !isFront,
|
|
10275
10310
|
importantForAccessibility: isFront ? "auto" : "no-hide-descendants",
|
|
10276
|
-
style: [CARD_BASE_STYLE, { zIndex: -depth }
|
|
10277
|
-
children: /* @__PURE__ */ jsx(
|
|
10311
|
+
style: [CARD_BASE_STYLE, { zIndex: -depth }],
|
|
10312
|
+
children: /* @__PURE__ */ jsx(Animated10.View, { style: [DEPTH_LAYER_STYLE, depthStyle], children: /* @__PURE__ */ jsx(
|
|
10278
10313
|
Notification,
|
|
10279
10314
|
{
|
|
10280
10315
|
variant: "toast",
|
|
@@ -10282,7 +10317,7 @@ var StackedCard = ({
|
|
|
10282
10317
|
onClose: isFront ? () => onDismiss == null ? void 0 : onDismiss(item.id) : void 0,
|
|
10283
10318
|
children: item.message
|
|
10284
10319
|
}
|
|
10285
|
-
)
|
|
10320
|
+
) })
|
|
10286
10321
|
}
|
|
10287
10322
|
);
|
|
10288
10323
|
};
|
|
@@ -10313,6 +10348,20 @@ var StackedNotifications = React66.forwardRef((_a, ref) => {
|
|
|
10313
10348
|
() => activeItems.slice(-3).reverse(),
|
|
10314
10349
|
[activeItems]
|
|
10315
10350
|
);
|
|
10351
|
+
const prevActiveIdsRef = React66.useRef(/* @__PURE__ */ new Set());
|
|
10352
|
+
const prevLayerIdsRef = React66.useRef(/* @__PURE__ */ new Set());
|
|
10353
|
+
const backfillIds = React66.useMemo(
|
|
10354
|
+
() => computeBackfillIds(
|
|
10355
|
+
layers,
|
|
10356
|
+
prevActiveIdsRef.current,
|
|
10357
|
+
prevLayerIdsRef.current
|
|
10358
|
+
),
|
|
10359
|
+
[layers]
|
|
10360
|
+
);
|
|
10361
|
+
React66.useEffect(() => {
|
|
10362
|
+
prevActiveIdsRef.current = new Set(activeItems.map((item) => item.id));
|
|
10363
|
+
prevLayerIdsRef.current = new Set(layers.map((item) => item.id));
|
|
10364
|
+
}, [activeItems, layers]);
|
|
10316
10365
|
const handleDismiss = (id) => {
|
|
10317
10366
|
setDismissed((prev) => {
|
|
10318
10367
|
const next = new Set(prev);
|
|
@@ -10337,7 +10386,8 @@ var StackedNotifications = React66.forwardRef((_a, ref) => {
|
|
|
10337
10386
|
item,
|
|
10338
10387
|
depth,
|
|
10339
10388
|
revealStep: peekStep,
|
|
10340
|
-
onDismiss: handleDismiss
|
|
10389
|
+
onDismiss: handleDismiss,
|
|
10390
|
+
isBackfill: backfillIds.has(item.id)
|
|
10341
10391
|
},
|
|
10342
10392
|
item.id
|
|
10343
10393
|
)) })
|
|
@@ -12198,6 +12248,7 @@ var ProductDisplayCard = React66.forwardRef(
|
|
|
12198
12248
|
incrementDisabled = false,
|
|
12199
12249
|
decrementDisabled = false,
|
|
12200
12250
|
minQuantity = 1,
|
|
12251
|
+
quantityStep = 1,
|
|
12201
12252
|
image,
|
|
12202
12253
|
imageBackgroundColor,
|
|
12203
12254
|
thumbnailWidth,
|
|
@@ -12219,6 +12270,7 @@ var ProductDisplayCard = React66.forwardRef(
|
|
|
12219
12270
|
"incrementDisabled",
|
|
12220
12271
|
"decrementDisabled",
|
|
12221
12272
|
"minQuantity",
|
|
12273
|
+
"quantityStep",
|
|
12222
12274
|
"image",
|
|
12223
12275
|
"imageBackgroundColor",
|
|
12224
12276
|
"thumbnailWidth",
|
|
@@ -12274,8 +12326,8 @@ var ProductDisplayCard = React66.forwardRef(
|
|
|
12274
12326
|
handleQuantityChange(value);
|
|
12275
12327
|
}
|
|
12276
12328
|
},
|
|
12277
|
-
onIncrement: () => handleQuantityChange(quantity +
|
|
12278
|
-
onDecrement: () => handleQuantityChange(quantity -
|
|
12329
|
+
onIncrement: () => handleQuantityChange(quantity + quantityStep),
|
|
12330
|
+
onDecrement: () => handleQuantityChange(quantity - quantityStep),
|
|
12279
12331
|
min: minQuantity,
|
|
12280
12332
|
accessible: true,
|
|
12281
12333
|
accessibilityLabel: `Quantity: ${quantity}`,
|
|
@@ -12486,6 +12538,6 @@ var TabNavigation = Object.assign(TabNavigationRoot, {
|
|
|
12486
12538
|
Panel: TabNavigationPanel
|
|
12487
12539
|
});
|
|
12488
12540
|
|
|
12489
|
-
export { Accordion, Animated5 as Animated, Avatar, BRAND_FONTS, Badge, Button, ButtonDock, ButtonGroup, CarouselControls, Checkbox, CheckboxGroup, CopyField, CopyFieldInput, Countdown, DatePicker, Divider, Drawer, FilterTab, Hint, Icon, IconButton, Illustration, Input, InputDescription, InputError, InputField, InputLabel, InputText, Link, Logo, Menu2 as Menu, MenuItem, MessageCard, MessageCardBanner, MessageCardInsight, NativeSelectPicker, Notification, NumberField, NumberInput, NumberInputField, PasswordField, PasswordFieldInput, PasswordFieldRequirements, PawprintProvider, PictureSelector, ProductDisplayCard, ProductListingCardWithBadgeAndGrid as ProductListingCard, Progress, Radio, RadioGroup, RadioTile, SearchField, SearchFieldInput, SegmentedControl, SelectField, SelectFieldContent, SelectFieldItem, SelectFieldTrigger, SelectFieldValue, Slider, Spinner, StackedNotifications, Switch, TabNavigation, Tag, TextArea, TextAreaField, TextAreaLabel, ThemeProvider, Tooltip, Typography, createPawprintTheme, fadeAnimation, fadeDownAnimation, fadeUpAnimation, registerLogo, resolveFont, resolveLogo, scaleAnimation, slideInAnimation, slideOutAnimation, theme, useCopyField, useDrawerKeyboardAvoidance, usePasswordField, usePawprint, useSearchField, useSelectField };
|
|
12541
|
+
export { Accordion, Animated5 as Animated, Avatar, BRAND_FONTS, Badge, Button, ButtonDock, ButtonGroup, CarouselControls, Checkbox, CheckboxGroup, CopyField, CopyFieldInput, Countdown, DatePicker, Divider, Drawer, FilterTab, Hint, Icon, IconButton, Illustration, Input, InputDescription, InputError, InputField, InputLabel, InputText, Link, Logo, Menu2 as Menu, MenuItem, MessageCard, MessageCardBanner, MessageCardInsight, NativeSelectPicker, Notification, NumberField, NumberInput, NumberInputField, PROGRESS_ANIMATION, PasswordField, PasswordFieldInput, PasswordFieldRequirements, PawprintProvider, PictureSelector, ProductDisplayCard, ProductListingCardWithBadgeAndGrid as ProductListingCard, Progress, Radio, RadioGroup, RadioTile, SearchField, SearchFieldInput, SegmentedControl, SelectField, SelectFieldContent, SelectFieldItem, SelectFieldTrigger, SelectFieldValue, Slider, Spinner, StackedNotifications, Switch, TabNavigation, Tag, TextArea, TextAreaField, TextAreaLabel, ThemeProvider, Tooltip, Typography, createPawprintTheme, fadeAnimation, fadeDownAnimation, fadeUpAnimation, registerLogo, resolveFont, resolveLogo, scaleAnimation, slideInAnimation, slideOutAnimation, theme, useCopyField, useDrawerKeyboardAvoidance, usePasswordField, usePawprint, useSearchField, useSelectField };
|
|
12490
12542
|
//# sourceMappingURL=index.js.map
|
|
12491
12543
|
//# sourceMappingURL=index.js.map
|