@butternutbox/pawprint-native 0.3.2 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@butternutbox/pawprint-native",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "type": "module",
   "description": "ButternutBox Pawprint Design System - React Native Components",
   "main": "./dist/index.cjs",
@@ -33,6 +33,7 @@
     "@rn-primitives/slider": "^1.4.0",
     "@rn-primitives/slot": "^1.0.5",
     "@rn-primitives/switch": "^1.4.0",
+    "@rn-primitives/tabs": "^1.4.0",
     "@rn-primitives/tooltip": "^1.4.0",
     "date-fns": "^4.1.0",
     "expo": "^55.0.9"

package/src/components/atoms/Hint/Hint.tsx

@@ -1,6 +1,7 @@
 import React from "react"
 import { View, ViewProps } from "react-native"
 import styled from "@emotion/native"
+import { parseTokenValue } from "../../../utils"
 
 type HintVariant = "default" | "success" | "warning" | "error"
 
@@ -10,8 +11,6 @@ type HintOwnProps = {
 
 export type HintProps = HintOwnProps & Omit<ViewProps, keyof HintOwnProps>
 
-const parseTokenValue = (value: string): number => parseFloat(value)
-
 const StyledHint = styled(View)<{ hintVariant: HintVariant }>(({
   theme,
   hintVariant

package/src/components/atoms/Input/InputField.tsx

@@ -60,13 +60,19 @@ const StyledInputWrapper = styled(Animated.View)<{
 })
 
 const StyledInput = styled(TextInput)(({ theme }) => {
-  const { colour } = theme.tokens.components.inputs
+  const { colour, field } = theme.tokens.components.inputs
+  const placeholderTypography = field.placeholder.default
   return {
     flex: 1,
     minWidth: 0,
     minHeight: 0,
     padding: 0,
     color: colour.field.text.default,
+    fontSize: parseTokenValue(placeholderTypography.fontSize),
+    fontFamily: placeholderTypography.fontFamily,
+    fontWeight: placeholderTypography.fontWeight,
+    lineHeight: parseTokenValue(placeholderTypography.lineHeight),
+    letterSpacing: parseTokenValue(placeholderTypography.letterSpacing),
     // Suppress the browser default focus outline on React Native Web —
     // the focus indicator is rendered on the wrapper instead.
     ...({

package/src/components/molecules/Animated/Animated.tsx

@@ -224,6 +224,13 @@ export type AnimatedProps = {
    * ```
    */
   delay?: number
+  /**
+   * Whether to play the exit animation when the component unmounts. Defaults
+   * to `true`. Set to `false` for an enter-only animation — useful when a
+   * parent unmounts the element directly (e.g. tab panels). Mirrors the web
+   * `Animated`, whose exit only runs inside `AnimatePresence`.
+   */
+  exit?: boolean
 } & ViewProps
 
 // ─── Component ────────────────────────────────────────────────────────────────
@@ -232,7 +239,9 @@ export type AnimatedProps = {
  * Reanimated wrapper that applies a named animation preset to its children.
  *
  * Exit animations run automatically when the component unmounts — no wrapper
- * component needed (unlike `AnimatePresence` on web).
+ * component needed (unlike `AnimatePresence` on web). Pass `exit={false}` for
+ * an enter-only animation (matching the web default, where exit requires
+ * `AnimatePresence`).
  *
  * Respects the OS reduce-motion setting automatically — Reanimated builders
  * default to `ReduceMotion.System` so no extra hook is needed.
@@ -260,7 +269,7 @@ export type AnimatedProps = {
  * ```
  */
 export const Animated = React.forwardRef<View, AnimatedProps>(
-  ({ variant = "fade", delay, children, ...props }, ref) => {
+  ({ variant = "fade", delay, exit = true, children, ...props }, ref) => {
     const delayMs =
       delay !== undefined && delay > 0 ? Math.round(delay * 1000) : 0
 
@@ -271,7 +280,7 @@ export const Animated = React.forwardRef<View, AnimatedProps>(
       <Reanimated.View
         ref={ref}
         entering={entering}
-        exiting={EXITING[variant]}
+        exiting={exit ? EXITING[variant] : undefined}
         {...props}
       >
         {children}

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

@@ -0,0 +1,218 @@
+import React from "react"
+import { View, StyleSheet } from "react-native"
+import { Countdown } from "./Countdown"
+import type { CountdownProps } from "./Countdown"
+import { Typography } from "../../atoms/Typography"
+
+export default {
+  title: "Molecules/Countdown",
+  component: Countdown,
+  argTypes: {
+    layout: {
+      control: { type: "select" },
+      options: ["stacked", "inline"],
+      description: "Visual layout"
+    },
+    days: {
+      control: { type: "number", min: 0 },
+      description: "Days remaining"
+    },
+    hours: {
+      control: { type: "number", min: 0 },
+      description: "Hours remaining"
+    },
+    minutes: {
+      control: { type: "number", min: 0 },
+      description: "Minutes remaining"
+    },
+    seconds: {
+      control: { type: "number", min: 0 },
+      description: "Seconds remaining"
+    },
+    showDays: {
+      control: { type: "boolean" },
+      description: "Render the days unit and its separator"
+    },
+    showSeconds: {
+      control: { type: "boolean" },
+      description: "Render the seconds unit and its separator"
+    },
+    label: {
+      control: { type: "text" },
+      description: "Customizable prefix label (inline layout only)"
+    }
+  }
+}
+
+export const Playground = {
+  args: {
+    layout: "stacked",
+    days: 0,
+    hours: 0,
+    minutes: 0,
+    seconds: 0,
+    showDays: true,
+    showSeconds: true,
+    label: "Label:"
+  },
+  render: (args: CountdownProps) => (
+    <View style={styles.container}>
+      <Countdown {...args} />
+    </View>
+  )
+}
+
+export const Stacked = {
+  name: "Stacked",
+  render: () => (
+    <View style={styles.container}>
+      <Countdown
+        layout="stacked"
+        days={2}
+        hours={9}
+        minutes={48}
+        seconds={38}
+      />
+    </View>
+  )
+}
+
+export const Inline = {
+  name: "Inline",
+  render: () => (
+    <View style={styles.container}>
+      <Countdown
+        layout="inline"
+        label="Label:"
+        days={0}
+        hours={0}
+        minutes={0}
+        seconds={0}
+      />
+    </View>
+  )
+}
+
+export const WithoutDays = {
+  name: "Without Days (under 24h)",
+  render: () => (
+    <View style={styles.column}>
+      <Countdown
+        layout="stacked"
+        showDays={false}
+        hours={3}
+        minutes={49}
+        seconds={38}
+      />
+      <Countdown
+        layout="inline"
+        label="Delivery ends in:"
+        showDays={false}
+        hours={3}
+        minutes={49}
+        seconds={38}
+      />
+    </View>
+  )
+}
+
+export const WithoutSeconds = {
+  name: "Without Seconds",
+  render: () => (
+    <View style={styles.column}>
+      <Countdown
+        layout="stacked"
+        showSeconds={false}
+        days={1}
+        hours={6}
+        minutes={20}
+      />
+      <Countdown
+        layout="inline"
+        label="Sale ends:"
+        showSeconds={false}
+        days={1}
+        hours={6}
+        minutes={20}
+      />
+    </View>
+  )
+}
+
+export const AllVariants = {
+  name: "All Variants",
+  render: () => (
+    <View style={styles.column}>
+      <View style={styles.section}>
+        <Typography size="sm" weight="semiBold" color="tertiary">
+          Stacked
+        </Typography>
+        <Countdown
+          layout="stacked"
+          days={2}
+          hours={9}
+          minutes={48}
+          seconds={38}
+        />
+        <Countdown
+          layout="stacked"
+          showDays={false}
+          hours={9}
+          minutes={48}
+          seconds={38}
+        />
+        <Countdown
+          layout="stacked"
+          showSeconds={false}
+          days={2}
+          hours={9}
+          minutes={48}
+        />
+      </View>
+      <View style={styles.section}>
+        <Typography size="sm" weight="semiBold" color="tertiary">
+          Inline
+        </Typography>
+        <Countdown
+          layout="inline"
+          label="Label:"
+          days={2}
+          hours={9}
+          minutes={48}
+          seconds={38}
+        />
+        <Countdown
+          layout="inline"
+          label="Label:"
+          showDays={false}
+          hours={9}
+          minutes={48}
+          seconds={38}
+        />
+        <Countdown
+          layout="inline"
+          label="Label:"
+          showSeconds={false}
+          days={2}
+          hours={9}
+          minutes={48}
+        />
+      </View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 16
+  },
+  column: {
+    padding: 16,
+    flexDirection: "column",
+    gap: 16
+  },
+  section: {
+    flexDirection: "column",
+    gap: 8
+  }
+})

package/src/components/molecules/Countdown/Countdown.tsx

@@ -0,0 +1,315 @@
+import React from "react"
+import { View, ViewProps } from "react-native"
+import styled from "@emotion/native"
+import { useTheme } from "@emotion/react"
+import { Typography } from "../../atoms/Typography"
+
+type CountdownLayout = "stacked" | "inline"
+
+type CountdownUnit = {
+  key: "days" | "hours" | "minutes" | "seconds"
+  value: number
+  label: string
+}
+
+type CountdownOwnProps = {
+  layout?: CountdownLayout
+  days?: number
+  hours?: number
+  minutes?: number
+  seconds?: number
+  showDays?: boolean
+  showSeconds?: boolean
+  label?: React.ReactNode
+}
+
+export type CountdownProps = CountdownOwnProps &
+  Omit<ViewProps, keyof CountdownOwnProps>
+
+const UNIT_LABELS = {
+  days: "days",
+  hours: "hrs",
+  minutes: "min",
+  seconds: "secs"
+} as const
+
+const parseTokenValue = (value: string): number => parseFloat(value)
+
+const pad = (value: number): string =>
+  String(Math.max(0, Math.floor(value))).padStart(2, "0")
+
+const StackedRoot = styled(View)<{ rootGap: number }>(({ rootGap }) => ({
+  flexDirection: "row",
+  alignItems: "center",
+  alignSelf: "flex-start",
+  gap: rootGap
+}))
+
+const StackedItem = styled(View)<{
+  itemGap: number
+  itemVerticalPadding: number
+  itemHorizontalPadding: number
+  itemBgColor: string
+  itemBorderRadius: number
+}>(
+  ({
+    itemGap,
+    itemVerticalPadding,
+    itemHorizontalPadding,
+    itemBgColor,
+    itemBorderRadius
+  }) => ({
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: itemGap,
+    paddingVertical: itemVerticalPadding,
+    paddingHorizontal: itemHorizontalPadding,
+    backgroundColor: itemBgColor,
+    borderRadius: itemBorderRadius
+  })
+)
+
+const StackedCountBox = styled(View)<{
+  countPaddingTop: number
+  countBgColor: string
+  countBorderRadius: number
+}>(({ countPaddingTop, countBgColor, countBorderRadius }) => ({
+  alignItems: "center",
+  justifyContent: "center",
+  // TODO: Add token — fixed count box dimensions are not yet tokenised.
+  width: 48,
+  height: 36,
+  paddingTop: countPaddingTop,
+  backgroundColor: countBgColor,
+  borderRadius: countBorderRadius
+}))
+
+const InlineRoot = styled(View)<{
+  rootGap: number
+  rootVerticalPadding: number
+  rootHorizontalPadding: number
+  rootBgColor: string
+  rootBorderRadius: number
+}>(
+  ({
+    rootGap,
+    rootVerticalPadding,
+    rootHorizontalPadding,
+    rootBgColor,
+    rootBorderRadius
+  }) => ({
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: rootGap,
+    width: "100%",
+    paddingVertical: rootVerticalPadding,
+    paddingHorizontal: rootHorizontalPadding,
+    backgroundColor: rootBgColor,
+    borderRadius: rootBorderRadius,
+    overflow: "hidden"
+  })
+)
+
+const InlineGroup = styled(View)<{ groupGap: number }>(({ groupGap }) => ({
+  flexDirection: "row",
+  alignItems: "center",
+  justifyContent: "flex-end",
+  gap: groupGap
+}))
+
+const InlineCount = styled(View)<{ countGap: number }>(({ countGap }) => ({
+  flexDirection: "row",
+  alignItems: "center",
+  gap: countGap
+}))
+
+/**
+ * Displays the remaining time until an event, deadline, or expiry. Purely
+ * presentational — the consuming app computes the remaining time and passes
+ * the discrete `days`/`hours`/`minutes`/`seconds` values.
+ *
+ * Two layouts:
+ * - `stacked` — each unit sits in its own styled container (brand fill) with
+ *   the value above the label, separated by colons. Best for heroes, checkout
+ *   screens, and promotional cards.
+ * - `inline` — a single condensed banner with a customizable prefix `label`
+ *   followed by the time string on one line. Best for notification banners,
+ *   sticky footers, and dense UI.
+ *
+ * Units can be toggled to scale across timeframes: hide `days` when under
+ * 24 hours remain (`showDays={false}`) and hide `seconds` to reduce visual
+ * noise (`showSeconds={false}`). Toggling a unit also removes its separator.
+ * Hours and minutes are always shown.
+ *
+ * Note: API parity with the web `Countdown`. Unlike the web version, the
+ * native root is a `View` and px token strings are parsed to numbers.
+ *
+ * @param {"stacked" | "inline"} [layout="stacked"] - Visual layout.
+ * @param {number} [days=0] - Days remaining (zero-padded to 2 digits).
+ * @param {number} [hours=0] - Hours remaining (zero-padded to 2 digits).
+ * @param {number} [minutes=0] - Minutes remaining (zero-padded to 2 digits).
+ * @param {number} [seconds=0] - Seconds remaining (zero-padded to 2 digits).
+ * @param {boolean} [showDays=true] - Whether to render the days unit and its separator.
+ * @param {boolean} [showSeconds=true] - Whether to render the seconds unit and its separator.
+ * @param {React.ReactNode} [label] - Customizable prefix label, rendered in the `inline` layout only.
+ *
+ * @example
+ * ```tsx
+ * import { Countdown } from "@butternutbox/pawprint-native"
+ *
+ * <Countdown layout="stacked" days={2} hours={9} minutes={48} seconds={38} />
+ * <Countdown layout="inline" label="Sale ends:" showDays={false} hours={3} minutes={49} seconds={38} />
+ * ```
+ */
+export const Countdown = React.forwardRef<View, CountdownProps>(
+  (
+    {
+      layout = "stacked",
+      days = 0,
+      hours = 0,
+      minutes = 0,
+      seconds = 0,
+      showDays = true,
+      showSeconds = true,
+      label,
+      ...rest
+    },
+    ref
+  ) => {
+    const theme = useTheme()
+    const { countdown } = theme.tokens.components
+    const { countdownItem } = countdown
+
+    const units: CountdownUnit[] = [
+      showDays && {
+        key: "days" as const,
+        value: days,
+        label: UNIT_LABELS.days
+      },
+      { key: "hours" as const, value: hours, label: UNIT_LABELS.hours },
+      { key: "minutes" as const, value: minutes, label: UNIT_LABELS.minutes },
+      showSeconds && {
+        key: "seconds" as const,
+        value: seconds,
+        label: UNIT_LABELS.seconds
+      }
+    ].filter(Boolean) as CountdownUnit[]
+
+    const colon = (key: string) => (
+      <Typography
+        key={key}
+        token={countdown.typography.colon}
+        color={countdown.colour.text.colon}
+      >
+        :
+      </Typography>
+    )
+
+    if (layout === "inline") {
+      return (
+        <InlineRoot
+          ref={ref}
+          rootGap={parseTokenValue(countdown.spacing.gap)}
+          rootVerticalPadding={parseTokenValue(
+            countdown.spacing.verticalPadding
+          )}
+          rootHorizontalPadding={parseTokenValue(
+            countdown.spacing.horizontalPadding
+          )}
+          rootBgColor={countdown.colour.background.default}
+          rootBorderRadius={parseTokenValue(countdown.borderRadius.default)}
+          {...rest}
+        >
+          {label != null && (
+            <Typography variant="body" weight="bold" size="md" color="primary">
+              {label}
+            </Typography>
+          )}
+          <InlineGroup
+            groupGap={parseTokenValue(countdown.countdownGroup.spacing.gap)}
+          >
+            {units.map((unit, index) => (
+              <React.Fragment key={unit.key}>
+                {index > 0 && colon(`colon-${unit.key}`)}
+                <InlineCount
+                  countGap={parseTokenValue(countdown.count.spacing.gap)}
+                >
+                  <Typography
+                    variant="body"
+                    weight="bold"
+                    size="md"
+                    color="primary"
+                  >
+                    {pad(unit.value)}
+                  </Typography>
+                  <Typography
+                    variant="body"
+                    weight="medium"
+                    size="xs"
+                    color="secondary"
+                  >
+                    {unit.label}
+                  </Typography>
+                </InlineCount>
+              </React.Fragment>
+            ))}
+          </InlineGroup>
+        </InlineRoot>
+      )
+    }
+
+    return (
+      <StackedRoot
+        ref={ref}
+        rootGap={parseTokenValue(countdown.spacing.gap)}
+        {...rest}
+      >
+        {units.map((unit, index) => (
+          <React.Fragment key={unit.key}>
+            {index > 0 && colon(`colon-${unit.key}`)}
+            <StackedItem
+              itemGap={parseTokenValue(countdownItem.spacing.gap)}
+              itemVerticalPadding={parseTokenValue(
+                countdownItem.spacing.verticalPadding
+              )}
+              itemHorizontalPadding={parseTokenValue(
+                countdownItem.spacing.horizontalPadding
+              )}
+              itemBgColor={countdownItem.colour.background.default}
+              itemBorderRadius={parseTokenValue(
+                countdownItem.borderRadius.default
+              )}
+            >
+              <StackedCountBox
+                countPaddingTop={parseTokenValue(
+                  countdownItem.count.spacing.paddingTop
+                )}
+                countBgColor={countdownItem.count.colour.background.default}
+                countBorderRadius={parseTokenValue(
+                  countdownItem.count.borderRadius.default
+                )}
+              >
+                <Typography
+                  token={countdownItem.typography.count}
+                  color={countdownItem.count.colour.text.count}
+                >
+                  {pad(unit.value)}
+                </Typography>
+              </StackedCountBox>
+              <Typography
+                token={countdownItem.typography.label}
+                color={countdownItem.colour.text.label}
+              >
+                {unit.label}
+              </Typography>
+            </StackedItem>
+          </React.Fragment>
+        ))}
+      </StackedRoot>
+    )
+  }
+)
+
+Countdown.displayName = "Countdown"

package/src/components/molecules/Countdown/index.ts

@@ -0,0 +1,2 @@
+export { Countdown } from "./Countdown"
+export type { CountdownProps } from "./Countdown"