@butternutbox/pawprint-native 0.24.3 → 0.25.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@butternutbox/pawprint-native",
-  "version": "0.24.3",
+  "version": "0.25.1",
   "type": "module",
   "description": "ButternutBox Pawprint Design System - React Native Components",
   "main": "./dist/index.cjs",

package/src/components/atoms/Button/Button.stories.tsx

@@ -5,20 +5,18 @@ import type { ButtonProps } from "./Button"
 import { Typography } from "../Typography"
 import { Icon } from "../Icon"
 import {
-  Check,
+  Facebook,
   IosShare,
   Whatsapp,
-  KeyboardDoubleArrowDown
+  Mail
 } from "@butternutbox/pawprint-icons/core"
 
 const iconElements: Record<string, React.ReactNode> = {
   None: undefined,
-  KeyboardDoubleArrowDown: (
-    <Icon icon={KeyboardDoubleArrowDown} colour="primary" />
-  ),
-  IosShare: <Icon icon={IosShare} colour="primary" />,
-  Whatsapp: <Icon icon={Whatsapp} colour="primary" />,
-  Check: <Icon icon={Check} colour="primary" />
+  Facebook: <Icon icon={Facebook} size="sm" colour="action-default" />,
+  IosShare: <Icon icon={IosShare} size="sm" colour="action-default" />,
+  Whatsapp: <Icon icon={Whatsapp} size="sm" colour="action-default" />,
+  Mail: <Icon icon={Mail} size="sm" colour="action-default" />
 }
 
 const iconArgType = {
@@ -155,28 +153,104 @@ export const WithStartIcon = () => (
         <View style={styles.row}>
           <Button
             size={size}
-            startIcon={<Icon icon={KeyboardDoubleArrowDown} colour="primary" />}
+            startIcon={
+              <Icon icon={Facebook} size="sm" colour="action-default" />
+            }
           >
-            Add
+            Share
           </Button>
           <Button
             size={size}
-            startIcon={<Icon icon={IosShare} colour="success" />}
+            startIcon={
+              <Icon icon={IosShare} size="sm" colour="action-default" />
+            }
           >
-            Search
+            Export
           </Button>
           <Button
             size={size}
-            startIcon={<Icon icon={Whatsapp} colour="warning" />}
+            startIcon={
+              <Icon icon={Whatsapp} size="sm" colour="action-default" />
+            }
           >
-            Settings
+            Message
           </Button>
           <Button
             size={size}
-            startIcon={<Icon icon={Check} colour="error" />}
+            startIcon={<Icon icon={Mail} size="sm" colour="action-default" />}
             colour="secondary"
           >
-            Confirm
+            Send
+          </Button>
+        </View>
+      </View>
+    ))}
+  </View>
+)
+
+export const WithEndIcon = () => (
+  <View style={styles.column}>
+    {(["sm", "md", "lg"] as const).map((size) => (
+      <View key={size} style={styles.section}>
+        <Typography size="sm" weight="semiBold" color="tertiary">
+          {size}
+        </Typography>
+        <View style={styles.row}>
+          <Button
+            size={size}
+            endIcon={<Icon icon={Facebook} size="sm" colour="action-default" />}
+          >
+            Connect
+          </Button>
+          <Button
+            size={size}
+            endIcon={<Icon icon={IosShare} size="sm" colour="action-default" />}
+          >
+            Share
+          </Button>
+          <Button
+            size={size}
+            endIcon={<Icon icon={Whatsapp} size="sm" colour="action-default" />}
+          >
+            Chat
+          </Button>
+          <Button
+            size={size}
+            endIcon={<Icon icon={Mail} size="sm" colour="action-default" />}
+            colour="secondary"
+          >
+            Email
+          </Button>
+        </View>
+      </View>
+    ))}
+  </View>
+)
+
+export const WithBothIcons = () => (
+  <View style={styles.column}>
+    {(["sm", "md", "lg"] as const).map((size) => (
+      <View key={size} style={styles.section}>
+        <Typography size="sm" weight="semiBold" color="tertiary">
+          {size}
+        </Typography>
+        <View style={styles.row}>
+          <Button
+            size={size}
+            startIcon={
+              <Icon icon={Facebook} size="sm" colour="action-default" />
+            }
+            endIcon={<Icon icon={IosShare} size="sm" colour="action-default" />}
+          >
+            Share
+          </Button>
+          <Button
+            size={size}
+            startIcon={<Icon icon={Mail} size="sm" colour="action-default" />}
+            endIcon={<Icon icon={Whatsapp} size="sm" colour="action-default" />}
+            variant="outlined"
+          >
+            Contact
           </Button>
         </View>
       </View>

package/src/components/atoms/Button/Button.tsx

@@ -193,6 +193,17 @@ const Button = React.forwardRef<View, ButtonProps>(
 
     const variantStyles = getVariantStyles(pressed)
 
+    const renderIcon = (icon: React.ReactNode): React.ReactNode => {
+      if (!React.isValidElement(icon)) return icon
+      const iconElement = icon as React.ReactElement<any>
+      if (!pressed) {
+        return icon
+      }
+      return React.cloneElement(iconElement, {
+        customColour: variantStyles.textColor
+      })
+    }
+
     return (
       <StyledButton
         ref={ref}
@@ -220,7 +231,7 @@ const Button = React.forwardRef<View, ButtonProps>(
         buttonFullWidth={fullWidth}
         {...rest}
       >
-        {startIcon && <IconWrapper>{startIcon}</IconWrapper>}
+        {startIcon && <IconWrapper>{renderIcon(startIcon)}</IconWrapper>}
         {/* `Typography` is a DIRECT child of the button row (no wrapping View)
             so its `<Text>` participates in flex shrink and wraps long /
             translated labels to multiple lines under the button's `minHeight`.
@@ -241,7 +252,7 @@ const Button = React.forwardRef<View, ButtonProps>(
         >
           {children}
         </Typography>
-        {endIcon && <IconWrapper>{endIcon}</IconWrapper>}
+        {endIcon && <IconWrapper>{renderIcon(endIcon)}</IconWrapper>}
         {loading && (
           <StyledSpinnerWrapper>
             <Spinner

package/src/components/molecules/DatePicker/DatePicker.stories.tsx

@@ -287,6 +287,45 @@ export const AllDateStates = {
   )
 }
 
+export const CustomMonthLabels = {
+  render: () => {
+    const { year, month, selectedDate, setSelectedDate, prevMonth, nextMonth } =
+      useCalendarState()
+
+    const CUSTOM_MONTH_NAMES = [
+      "January",
+      "February",
+      "March",
+      "April",
+      "May",
+      "June",
+      "July",
+      "August",
+      "September",
+      "October",
+      "November",
+      "December"
+    ]
+
+    const customMonthLabel = (y: number, m: number): string =>
+      `${CUSTOM_MONTH_NAMES[m]} ${y}`
+
+    return (
+      <View style={styles.container}>
+        <DatePicker
+          year={year}
+          month={month}
+          selectedDate={selectedDate}
+          onDateSelect={setSelectedDate}
+          onPrevMonth={prevMonth}
+          onNextMonth={nextMonth}
+          getMonthLabel={customMonthLabel}
+        />
+      </View>
+    )
+  }
+}
+
 const styles = StyleSheet.create({
   container: {
     padding: 16

package/src/components/molecules/DatePicker/DatePicker.tsx

@@ -118,6 +118,7 @@ type DatePickerOwnProps = {
   showNextControl?: boolean
   locale?: Locale
   monthLabel?: string
+  getMonthLabel?: (year: number, month: number, locale?: Locale) => string
   weekDayLabels?: [string, string, string, string, string, string, string]
   getDateState?: (date: Date) => DateItemState
   isDateDisabled?: (date: Date) => boolean
@@ -266,6 +267,7 @@ export const DatePicker = React.forwardRef<View, DatePickerProps>(
       showNextControl = true,
       locale,
       monthLabel,
+      getMonthLabel,
       weekDayLabels = DEFAULT_WEEK_LABELS,
       getDateState,
       isDateDisabled,
@@ -341,7 +343,9 @@ export const DatePicker = React.forwardRef<View, DatePickerProps>(
     )
 
     const resolvedMonthLabel =
-      monthLabel ?? getDefaultMonthLabel(year, month, locale)
+      monthLabel ??
+      getMonthLabel?.(year, month, locale) ??
+      getDefaultMonthLabel(year, month, locale)
 
     const calendarRows = useMemo(
       () => buildCalendarGrid(year, month),

package/src/components/molecules/SelectField/SelectField.tsx

@@ -453,7 +453,10 @@ const SelectFieldRoot = React.forwardRef<View, SelectFieldProps>(
                 accessibilityLabel="Search options"
               />
             ) : (
-              <SelectFieldValue placeholder={placeholder} />
+              <SelectFieldValue
+                placeholder={placeholder}
+                hasValue={Boolean(currentValue)}
+              />
             )}
           </SelectFieldTrigger>
           {description && (

package/src/components/molecules/SelectField/SelectFieldValue.tsx

@@ -6,10 +6,11 @@ import { Typography } from "../../atoms/Typography"
 
 type SelectFieldValueProps = {
   placeholder?: string
+  hasValue?: boolean
 } & Omit<ViewProps, "children">
 
 export const SelectFieldValue = React.forwardRef<View, SelectFieldValueProps>(
-  ({ placeholder, ...rest }, ref) => {
+  ({ placeholder, hasValue = true, ...rest }, ref) => {
     const theme = useTheme()
     const { colour, field } = theme.tokens.components.inputs
 
@@ -17,7 +18,9 @@ export const SelectFieldValue = React.forwardRef<View, SelectFieldValueProps>(
       <View ref={ref} style={{ flex: 1, minWidth: 0 }} {...rest}>
         <Typography
           token={field.placeholder.default}
-          color={colour.field.text.default}
+          color={
+            hasValue ? colour.field.text.default : colour.field.text.placeholder
+          }
           align="left"
         >
           <SelectPrimitive.Value placeholder={placeholder ?? ""} />