@butternutbox/pawprint-native 0.6.0 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.cts CHANGED
@@ -1566,6 +1566,52 @@ type SelectReturn<T = string | Option> = {
1566
1566
  */
1567
1567
  declare function useSelectField<T = string | Option>(options?: SelectOptions<T>): SelectReturn<T>;
1568
1568
 
1569
+ type NativeSelectPickerItem = {
1570
+ label: string;
1571
+ value: string | number;
1572
+ key?: string | number;
1573
+ };
1574
+ type NativeSelectPickerProps = ViewProps & {
1575
+ items: NativeSelectPickerItem[];
1576
+ value?: string | number | null;
1577
+ placeholder?: {
1578
+ label?: string;
1579
+ value?: string | number;
1580
+ };
1581
+ onValueChange: (value: string | number) => void;
1582
+ disabled?: boolean;
1583
+ hideIcon?: boolean;
1584
+ };
1585
+ /**
1586
+ * NativeSelectPicker is a native UI dropdown component that uses:
1587
+ * - ActionSheetIOS on iOS (native system picker)
1588
+ * - Modal with FlatList on Android
1589
+ *
1590
+ * @example
1591
+ * ```tsx
1592
+ * <NativeSelectPicker
1593
+ * items={[
1594
+ * { label: "Option 1", value: "opt1" },
1595
+ * { label: "Option 2", value: "opt2" }
1596
+ * ]}
1597
+ * placeholder={{ label: "Select an option" }}
1598
+ * value={selectedValue}
1599
+ * onValueChange={setSelectedValue}
1600
+ * />
1601
+ * ```
1602
+ */
1603
+ declare const NativeSelectPicker: React.ForwardRefExoticComponent<ViewProps & {
1604
+ items: NativeSelectPickerItem[];
1605
+ value?: string | number | null;
1606
+ placeholder?: {
1607
+ label?: string;
1608
+ value?: string | number;
1609
+ };
1610
+ onValueChange: (value: string | number) => void;
1611
+ disabled?: boolean;
1612
+ hideIcon?: boolean;
1613
+ } & React.RefAttributes<View>>;
1614
+
1569
1615
  type SliderOwnProps = {
1570
1616
  value?: number;
1571
1617
  defaultValue?: number;
@@ -2108,6 +2154,8 @@ type TabNavigationListProps = TabNavigationListOwnProps & Omit<ViewProps, keyof
2108
2154
  type TabNavigationTabOwnProps = {
2109
2155
  value: string;
2110
2156
  disabled?: boolean;
2157
+ icon?: PawprintIcon;
2158
+ avatar?: AvatarProps;
2111
2159
  children: React.ReactNode;
2112
2160
  };
2113
2161
  type TabNavigationTabProps = TabNavigationTabOwnProps & Omit<ViewProps, keyof TabNavigationTabOwnProps>;
@@ -2133,8 +2181,14 @@ declare const TabNavigationList: React.ForwardRefExoticComponent<TabNavigationLi
2133
2181
  * disabled state). Unlike the web version there are no hover or focus-visible
2134
2182
  * states (not applicable on mobile).
2135
2183
  *
2184
+ * Optionally renders a leading `Avatar` and/or `Icon` before the label, matching
2185
+ * the Figma design. The icon colour tracks the tab's label colour (brand when
2186
+ * active/idle, muted when disabled); the avatar is rendered as-is from its props.
2187
+ *
2136
2188
  * @param {string} value - Unique identifier; matches the `value` of a `TabNavigation.Panel`.
2137
2189
  * @param {boolean} [disabled=false] - Whether this tab is disabled.
2190
+ * @param {PawprintIcon} [icon] - Optional leading icon from `@butternutbox/pawprint-icons`.
2191
+ * @param {AvatarProps} [avatar] - Optional leading `Avatar`; props are forwarded to the `Avatar` atom.
2138
2192
  * @param {React.ReactNode} children - Tab label (and optional leading content).
2139
2193
  */
2140
2194
  declare const TabNavigationTab: React.ForwardRefExoticComponent<TabNavigationTabOwnProps & Omit<ViewProps, keyof TabNavigationTabOwnProps> & React.RefAttributes<View>>;
@@ -2156,4 +2210,4 @@ type TabNavigationComponent = React.ForwardRefExoticComponent<TabNavigationProps
2156
2210
  };
2157
2211
  declare const TabNavigation: TabNavigationComponent;
2158
2212
 
2159
- 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, Drawer, type DrawerBodyProps, type DrawerCloseProps, type DrawerContentProps, type DrawerDescriptionProps, type DrawerFooterProps, type DrawerGrabberProps, type DrawerHeaderProps, type DrawerHeaderVariant, type DrawerOverlayProps, 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, Link, type LinkProps, type LinkSize, type LinkWeight, Logo, type LogoBrand, type LogoProps, type LogoSvgComponent, type LogoVariant, MessageCard, MessageCardBanner, type MessageCardBannerMedia, type MessageCardBannerProps, MessageCardInsight, type MessageCardInsightProps, 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, SearchField, SearchFieldInput, type SearchFieldProps, SegmentedControl, type SegmentedControlItemProps, type SegmentedControlProps, SelectField, SelectFieldContent, SelectFieldItem, type SelectFieldItemProps, type SelectFieldProps, SelectFieldTrigger, type SelectFieldTriggerProps, SelectFieldValue, type SelectValidationRule, Slider, type SliderProps, Spinner, type SpinnerProps, type SpinnerSize, type SpinnerVariant, 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, usePasswordField, usePawprint, useSearchField, useSelectField };
2213
+ 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, Drawer, type DrawerBodyProps, type DrawerCloseProps, type DrawerContentProps, type DrawerDescriptionProps, type DrawerFooterProps, type DrawerGrabberProps, type DrawerHeaderProps, type DrawerHeaderVariant, type DrawerOverlayProps, 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, Link, type LinkProps, type LinkSize, type LinkWeight, Logo, type LogoBrand, type LogoProps, type LogoSvgComponent, type LogoVariant, 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, SearchField, SearchFieldInput, type SearchFieldProps, SegmentedControl, type SegmentedControlItemProps, type SegmentedControlProps, SelectField, SelectFieldContent, SelectFieldItem, type SelectFieldItemProps, type SelectFieldProps, SelectFieldTrigger, type SelectFieldTriggerProps, SelectFieldValue, type SelectValidationRule, Slider, type SliderProps, Spinner, type SpinnerProps, type SpinnerSize, type SpinnerVariant, 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, usePasswordField, usePawprint, useSearchField, useSelectField };
package/dist/index.d.ts CHANGED
@@ -1566,6 +1566,52 @@ type SelectReturn<T = string | Option> = {
1566
1566
  */
1567
1567
  declare function useSelectField<T = string | Option>(options?: SelectOptions<T>): SelectReturn<T>;
1568
1568
 
1569
+ type NativeSelectPickerItem = {
1570
+ label: string;
1571
+ value: string | number;
1572
+ key?: string | number;
1573
+ };
1574
+ type NativeSelectPickerProps = ViewProps & {
1575
+ items: NativeSelectPickerItem[];
1576
+ value?: string | number | null;
1577
+ placeholder?: {
1578
+ label?: string;
1579
+ value?: string | number;
1580
+ };
1581
+ onValueChange: (value: string | number) => void;
1582
+ disabled?: boolean;
1583
+ hideIcon?: boolean;
1584
+ };
1585
+ /**
1586
+ * NativeSelectPicker is a native UI dropdown component that uses:
1587
+ * - ActionSheetIOS on iOS (native system picker)
1588
+ * - Modal with FlatList on Android
1589
+ *
1590
+ * @example
1591
+ * ```tsx
1592
+ * <NativeSelectPicker
1593
+ * items={[
1594
+ * { label: "Option 1", value: "opt1" },
1595
+ * { label: "Option 2", value: "opt2" }
1596
+ * ]}
1597
+ * placeholder={{ label: "Select an option" }}
1598
+ * value={selectedValue}
1599
+ * onValueChange={setSelectedValue}
1600
+ * />
1601
+ * ```
1602
+ */
1603
+ declare const NativeSelectPicker: React.ForwardRefExoticComponent<ViewProps & {
1604
+ items: NativeSelectPickerItem[];
1605
+ value?: string | number | null;
1606
+ placeholder?: {
1607
+ label?: string;
1608
+ value?: string | number;
1609
+ };
1610
+ onValueChange: (value: string | number) => void;
1611
+ disabled?: boolean;
1612
+ hideIcon?: boolean;
1613
+ } & React.RefAttributes<View>>;
1614
+
1569
1615
  type SliderOwnProps = {
1570
1616
  value?: number;
1571
1617
  defaultValue?: number;
@@ -2108,6 +2154,8 @@ type TabNavigationListProps = TabNavigationListOwnProps & Omit<ViewProps, keyof
2108
2154
  type TabNavigationTabOwnProps = {
2109
2155
  value: string;
2110
2156
  disabled?: boolean;
2157
+ icon?: PawprintIcon;
2158
+ avatar?: AvatarProps;
2111
2159
  children: React.ReactNode;
2112
2160
  };
2113
2161
  type TabNavigationTabProps = TabNavigationTabOwnProps & Omit<ViewProps, keyof TabNavigationTabOwnProps>;
@@ -2133,8 +2181,14 @@ declare const TabNavigationList: React.ForwardRefExoticComponent<TabNavigationLi
2133
2181
  * disabled state). Unlike the web version there are no hover or focus-visible
2134
2182
  * states (not applicable on mobile).
2135
2183
  *
2184
+ * Optionally renders a leading `Avatar` and/or `Icon` before the label, matching
2185
+ * the Figma design. The icon colour tracks the tab's label colour (brand when
2186
+ * active/idle, muted when disabled); the avatar is rendered as-is from its props.
2187
+ *
2136
2188
  * @param {string} value - Unique identifier; matches the `value` of a `TabNavigation.Panel`.
2137
2189
  * @param {boolean} [disabled=false] - Whether this tab is disabled.
2190
+ * @param {PawprintIcon} [icon] - Optional leading icon from `@butternutbox/pawprint-icons`.
2191
+ * @param {AvatarProps} [avatar] - Optional leading `Avatar`; props are forwarded to the `Avatar` atom.
2138
2192
  * @param {React.ReactNode} children - Tab label (and optional leading content).
2139
2193
  */
2140
2194
  declare const TabNavigationTab: React.ForwardRefExoticComponent<TabNavigationTabOwnProps & Omit<ViewProps, keyof TabNavigationTabOwnProps> & React.RefAttributes<View>>;
@@ -2156,4 +2210,4 @@ type TabNavigationComponent = React.ForwardRefExoticComponent<TabNavigationProps
2156
2210
  };
2157
2211
  declare const TabNavigation: TabNavigationComponent;
2158
2212
 
2159
- 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, Drawer, type DrawerBodyProps, type DrawerCloseProps, type DrawerContentProps, type DrawerDescriptionProps, type DrawerFooterProps, type DrawerGrabberProps, type DrawerHeaderProps, type DrawerHeaderVariant, type DrawerOverlayProps, 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, Link, type LinkProps, type LinkSize, type LinkWeight, Logo, type LogoBrand, type LogoProps, type LogoSvgComponent, type LogoVariant, MessageCard, MessageCardBanner, type MessageCardBannerMedia, type MessageCardBannerProps, MessageCardInsight, type MessageCardInsightProps, 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, SearchField, SearchFieldInput, type SearchFieldProps, SegmentedControl, type SegmentedControlItemProps, type SegmentedControlProps, SelectField, SelectFieldContent, SelectFieldItem, type SelectFieldItemProps, type SelectFieldProps, SelectFieldTrigger, type SelectFieldTriggerProps, SelectFieldValue, type SelectValidationRule, Slider, type SliderProps, Spinner, type SpinnerProps, type SpinnerSize, type SpinnerVariant, 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, usePasswordField, usePawprint, useSearchField, useSelectField };
2213
+ 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, Drawer, type DrawerBodyProps, type DrawerCloseProps, type DrawerContentProps, type DrawerDescriptionProps, type DrawerFooterProps, type DrawerGrabberProps, type DrawerHeaderProps, type DrawerHeaderVariant, type DrawerOverlayProps, 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, Link, type LinkProps, type LinkSize, type LinkWeight, Logo, type LogoBrand, type LogoProps, type LogoSvgComponent, type LogoVariant, 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, SearchField, SearchFieldInput, type SearchFieldProps, SegmentedControl, type SegmentedControlItemProps, type SegmentedControlProps, SelectField, SelectFieldContent, SelectFieldItem, type SelectFieldItemProps, type SelectFieldProps, SelectFieldTrigger, type SelectFieldTriggerProps, SelectFieldValue, type SelectValidationRule, Slider, type SliderProps, Spinner, type SpinnerProps, type SpinnerSize, type SpinnerVariant, 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, usePasswordField, usePawprint, useSearchField, useSelectField };